@shopify/ui-extensions 2025.10.1 → 2025.10.3

package/src/surfaces/admin/components/Chip/examples/color-variants.jsx

@@ -0,0 +1,12 @@
+<s-stack direction="inline" gap="base">
+  <s-chip color="subdued" accessibilityLabel="Secondary information">
+    Draft
+  </s-chip>
+  <s-chip color="base" accessibilityLabel="Standard information">
+    Published
+  </s-chip>
+  <s-chip color="strong" accessibilityLabel="Important status">
+    <s-icon slot="graphic" type="check" size="small" />
+    Verified
+  </s-chip>
+</s-stack>

package/src/surfaces/admin/components/Chip/examples/default.jsx

@@ -0,0 +1 @@
+<s-chip>Chip</s-chip>

package/src/surfaces/admin/components/Chip/examples/product-status.html

@@ -0,0 +1,8 @@
+<s-stack direction="inline" gap="base">
+  <s-chip color="base" accessibilityLabel="Product status">Active</s-chip>
+  <s-chip color="subdued" accessibilityLabel="Product status">Draft</s-chip>
+  <s-chip color="strong" accessibilityLabel="Product status">
+    <s-icon slot="graphic" type="check" size="small"></s-icon>
+    Published
+  </s-chip>
+</s-stack>

package/src/surfaces/admin/components/Chip/examples/product-status.jsx

@@ -0,0 +1,12 @@
+<s-stack direction="inline" gap="base">
+  <s-chip color="base" accessibilityLabel="Product status">
+    Active
+  </s-chip>
+  <s-chip color="subdued" accessibilityLabel="Product status">
+    Draft
+  </s-chip>
+  <s-chip color="strong" accessibilityLabel="Product status">
+    <s-icon slot="graphic" type="check" size="small" />
+    Published
+  </s-chip>
+</s-stack>

package/src/surfaces/admin/components/Chip/examples/text-truncation.html

@@ -0,0 +1,12 @@
+<s-box maxInlineSize="200px">
+  <s-stack gap="base">
+    <s-chip color="base" accessibilityLabel="Long product name">
+      This is a very long product name that will be truncated with ellipsis when
+      it exceeds the container width
+    </s-chip>
+    <s-chip color="strong" accessibilityLabel="Long category name">
+      <s-icon slot="graphic" type="catalog-product" size="small"></s-icon>
+      Electronics and computer accessories category with extended description
+    </s-chip>
+  </s-stack>
+</s-box>

package/src/surfaces/admin/components/Chip/examples/text-truncation.jsx

@@ -0,0 +1,12 @@
+<s-box maxInlineSize="200px">
+  <s-stack gap="base">
+    <s-chip color="base" accessibilityLabel="Long product name">
+      This is a very long product name that will be truncated with ellipsis when
+      it exceeds the container width
+    </s-chip>
+    <s-chip color="strong" accessibilityLabel="Long category name">
+      <s-icon slot="graphic" type="catalog-product" size="small" />
+      Electronics and computer accessories category with extended description
+    </s-chip>
+  </s-stack>
+</s-box>

package/src/surfaces/admin/components/Chip/examples/with-icon-graphic.html

@@ -0,0 +1,4 @@
+<s-chip color="strong" accessibilityLabel="Product category">
+  <s-icon slot="graphic" type="catalog-product" size="small"></s-icon>
+  Electronics
+</s-chip>

package/src/surfaces/admin/components/Chip/examples/with-icon-graphic.jsx

@@ -0,0 +1,4 @@
+<s-chip color="strong" accessibilityLabel="Product category">
+  <s-icon slot="graphic" type="catalog-product" size="small" />
+  Electronics
+</s-chip>

package/src/surfaces/admin/components/Chip.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.20.0 **/
+/** VERSION: 1.22.1 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */

package/src/surfaces/admin/components/Choice.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.20.0 **/
+/** VERSION: 1.22.1 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -125,7 +125,17 @@ declare module 'preact' {
 declare const tagName = 's-choice';
 export interface ChoiceJSXProps
   extends Partial<ChoiceProps>,
-    Pick<ChoiceProps$1, 'id' | 'details'> {}
+    Pick<ChoiceProps$1, 'id' | 'details'> {
+  /**
+   * Additional text to provide context or guidance for the input.
+   *
+   * This text is displayed along with the input and its label
+   * to offer more information or instructions to the user.
+   *
+   * @implementation this content should be linked to the input with an `aria-describedby` attribute.
+   */
+  details?: ComponentChildren;
+}
 
 export {Choice};
 export type {ChoiceJSXProps};

package/src/surfaces/admin/components/ChoiceList/examples/basic-usage.html

@@ -0,0 +1,5 @@
+<s-choice-list label="Product visibility" name="visibility">
+  <s-choice value="hidden">Hidden</s-choice>
+  <s-choice value="optional">Optional</s-choice>
+  <s-choice value="required" selected>Required</s-choice>
+</s-choice-list>

package/src/surfaces/admin/components/ChoiceList/examples/basic-usage.jsx

@@ -0,0 +1,7 @@
+<s-choice-list label="Product visibility" name="visibility">
+  <s-choice value="hidden">Hidden</s-choice>
+  <s-choice value="optional">Optional</s-choice>
+  <s-choice value="required" selected>
+    Required
+  </s-choice>
+</s-choice-list>

package/src/surfaces/admin/components/ChoiceList/examples/default.html

@@ -1,7 +1,12 @@
+<script>
+  const handleChange = (event) =>
+    console.log('Values: ', event.currentTarget.values);
+</script>
 <s-choice-list
   label="Company name"
   name="Company name"
   details="The company name will be displayed on the checkout page."
+  onChange="handleChange(event)"
 >
   <s-choice value="hidden">Hidden</s-choice>
   <s-choice value="optional">Optional</s-choice>

package/src/surfaces/admin/components/ChoiceList/examples/default.jsx

@@ -0,0 +1,16 @@
+const handleChange = (event) => {
+  console.log('Values: ', event.currentTarget.values)
+}
+
+return (
+  <s-choice-list
+    label="Company name"
+    name="Company name"
+    details="The company name will be displayed on the checkout page."
+    onChange={handleChange}
+  >
+    <s-choice value="hidden">Hidden</s-choice>
+    <s-choice value="optional">Optional</s-choice>
+    <s-choice value="required">Required</s-choice>
+  </s-choice-list>
+)

package/src/surfaces/admin/components/ChoiceList/examples/multiple-choices-with-details.html

@@ -0,0 +1,18 @@
+<s-choice-list
+  label="Available shipping methods"
+  name="shipping-methods"
+  multiple
+>
+  <s-choice value="standard" selected>
+    Standard shipping
+    <s-text slot="details">5-7 business days delivery</s-text>
+  </s-choice>
+  <s-choice value="express" selected>
+    Express shipping
+    <s-text slot="details">2-3 business days delivery</s-text>
+  </s-choice>
+  <s-choice value="overnight">
+    Overnight shipping
+    <s-text slot="details">Next business day delivery</s-text>
+  </s-choice>
+</s-choice-list>

package/src/surfaces/admin/components/ChoiceList/examples/multiple-choices-with-details.jsx

@@ -0,0 +1,18 @@
+<s-choice-list
+  label="Available shipping methods"
+  name="shipping-methods"
+  multiple
+>
+  <s-choice value="standard" selected>
+    Standard shipping
+    <s-text slot="details">5-7 business days delivery</s-text>
+  </s-choice>
+  <s-choice value="express" selected>
+    Express shipping
+    <s-text slot="details">2-3 business days delivery</s-text>
+  </s-choice>
+  <s-choice value="overnight">
+    Overnight shipping
+    <s-text slot="details">Next business day delivery</s-text>
+  </s-choice>
+</s-choice-list>

package/src/surfaces/admin/components/ChoiceList/examples/multiple-selections.html

@@ -0,0 +1,15 @@
+<s-choice-list label="Checkout options" name="checkout" multiple>
+  <s-choice value="shipping" selected>
+    Use the shipping address as the billing address by default
+    <s-text slot="details">
+      Reduces the number of fields required to check out. The billing address
+      can still be edited.
+    </s-text>
+  </s-choice>
+  <s-choice value="confirmation">
+    Require a confirmation step
+    <s-text slot="details">
+      Customers must review their order details before purchasing.
+    </s-text>
+  </s-choice>
+</s-choice-list>

package/src/surfaces/admin/components/ChoiceList/examples/multiple-selections.jsx

@@ -0,0 +1,15 @@
+<s-choice-list label="Checkout options" name="checkout" multiple>
+  <s-choice value="shipping" selected>
+    Use the shipping address as the billing address by default
+    <s-text slot="details">
+      Reduces the number of fields required to check out. The billing address
+      can still be edited.
+    </s-text>
+  </s-choice>
+  <s-choice value="confirmation">
+    Require a confirmation step
+    <s-text slot="details">
+      Customers must review their order details before purchasing.
+    </s-text>
+  </s-choice>
+</s-choice-list>

package/src/surfaces/admin/components/ChoiceList/examples/validation-example.jsx

@@ -0,0 +1,20 @@
+const [error, setError] = useState('Please select at least one option');
+
+return (
+  <s-section>
+    <s-stack gap="base" inlineAlign="start">
+      <s-choice-list
+        label="Product visibility"
+        name="visibility"
+        error={error}
+        onChange={(e) => {
+          setError(e.currentTarget.values.length > 0 ? '' : 'Please select at least one option');
+        }}
+      >
+        <s-choice value="hidden">Hidden</s-choice>
+        <s-choice value="optional">Optional</s-choice>
+        <s-choice value="required">Required</s-choice>
+      </s-choice-list>
+    </s-stack>
+  </s-section>
+)

package/src/surfaces/admin/components/ChoiceList/examples/with-error-state.html

@@ -0,0 +1,9 @@
+<s-choice-list
+  label="Product visibility"
+  name="visibility"
+  error="Product visibility cannot be hidden at this time"
+>
+  <s-choice value="hidden">Hidden</s-choice>
+  <s-choice value="optional">Optional</s-choice>
+  <s-choice value="required" selected>Required</s-choice>
+</s-choice-list>

package/src/surfaces/admin/components/ChoiceList/examples/with-error-state.jsx

@@ -0,0 +1,8 @@
+<s-choice-list
+  label="Product visibility"
+  error="Please select an option"
+>
+  <s-choice value="hidden">Hidden</s-choice>
+  <s-choice value="optional">Optional</s-choice>
+  <s-choice value="required">Required</s-choice>
+</s-choice-list>

package/src/surfaces/admin/components/ChoiceList.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.20.0 **/
+/** VERSION: 1.22.1 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */

package/src/surfaces/admin/components/Clickable/examples/accessibility-with-aria-attributes.html

@@ -0,0 +1,8 @@
+<s-clickable
+  accessibilityLabel="Delete product winter collection jacket"
+  background="base"
+  padding="base"
+  borderRadius="small"
+>
+  <s-text>Delete</s-text>
+</s-clickable>

package/src/surfaces/admin/components/Clickable/examples/accessibility-with-aria-attributes.jsx

@@ -0,0 +1,8 @@
+<s-clickable
+  accessibilityLabel="Delete product winter collection jacket"
+  background="base"
+  padding="base"
+  borderRadius="small"
+>
+  <s-text>Delete</s-text>
+</s-clickable>

package/src/surfaces/admin/components/Clickable/examples/basic-button-usage.html

@@ -0,0 +1 @@
+<s-clickable border="base" padding="base">Click me</s-clickable>

package/src/surfaces/admin/components/Clickable/examples/basic-button-usage.jsx

@@ -0,0 +1,3 @@
+<s-clickable border="base" padding="base">
+  Click me
+</s-clickable>

package/src/surfaces/admin/components/Clickable/examples/default.jsx

@@ -0,0 +1,12 @@
+<>
+  <s-clickable padding="base">Create Store</s-clickable>
+
+  <s-clickable
+    border="base"
+    padding="base"
+    background="subdued"
+    borderRadius="base"
+  >
+    View Shipping Settings
+  </s-clickable>
+</>

package/src/surfaces/admin/components/Clickable/examples/disabled-link-with-aria.html

@@ -0,0 +1,7 @@
+<s-clickable
+  href="javascript:void(0)"
+  disabled
+  accessibilityLabel="This link is currently unavailable"
+>
+  <s-text>Unavailable feature</s-text>
+</s-clickable>

package/src/surfaces/admin/components/Clickable/examples/disabled-link-with-aria.jsx

@@ -0,0 +1,7 @@
+<s-clickable
+  href="javascript:void(0)"
+  disabled
+  accessibilityLabel="This link is currently unavailable"
+>
+  <s-text>Unavailable feature</s-text>
+</s-clickable>

package/src/surfaces/admin/components/Clickable/examples/form-submit-button.html

@@ -0,0 +1,3 @@
+<s-clickable type="submit" disabled border="base" padding="base">
+  Save changes
+</s-clickable>

package/src/surfaces/admin/components/Clickable/examples/form-submit-button.jsx

@@ -0,0 +1,3 @@
+<s-clickable type="submit" disabled border="base" padding="base">
+  Save changes
+</s-clickable>

package/src/surfaces/admin/components/Clickable/examples/link-mode.html

@@ -0,0 +1,3 @@
+<s-clickable href="javascript:void(0)" target="_blank">
+  Visit Shopify
+</s-clickable>

package/src/surfaces/admin/components/Clickable/examples/link-mode.jsx

@@ -0,0 +1,3 @@
+<s-clickable href="javascript:void(0)" target="_blank">
+  Visit Shopify
+</s-clickable>

package/src/surfaces/admin/components/Clickable/examples/section-with-clickable-action.html

@@ -0,0 +1,9 @@
+<s-box padding="large-400" background="base" borderRadius="small-200">
+  <s-stack gap="large-300">
+    <s-heading>Product settings</s-heading>
+    <s-text>Configure your product inventory and pricing settings.</s-text>
+    <s-clickable background="base" padding="base" borderRadius="small">
+      <s-text type="strong">Configure settings</s-text>
+    </s-clickable>
+  </s-stack>
+</s-box>

package/src/surfaces/admin/components/Clickable/examples/section-with-clickable-action.jsx

@@ -0,0 +1,9 @@
+<s-box padding="large-400" background="base" borderRadius="small-200">
+  <s-stack gap="large-300">
+    <s-heading>Product settings</s-heading>
+    <s-text>Configure your product inventory and pricing settings.</s-text>
+    <s-clickable background="base" padding="base" borderRadius="small">
+      <s-text type="strong">Configure settings</s-text>
+    </s-clickable>
+  </s-stack>
+</s-box>

package/src/surfaces/admin/components/Clickable.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.20.0 **/
+/** VERSION: 1.22.1 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */

package/src/surfaces/admin/components/ClickableChip/examples/as-a-link.html

@@ -0,0 +1,8 @@
+<s-clickable-chip
+  color="subdued"
+  href="javascript:void(0)"
+  accessibilityLabel="View T-shirt product"
+>
+  <s-icon slot="graphic" type="product"></s-icon>
+  T-shirt
+</s-clickable-chip>

package/src/surfaces/admin/components/ClickableChip/examples/as-a-link.jsx

@@ -0,0 +1,8 @@
+<s-clickable-chip
+  color="subdued"
+  href="javascript:void(0)"
+  accessibilityLabel="View T-shirt product"
+>
+  <s-icon slot="graphic" type="product" />
+  T-shirt
+</s-clickable-chip>

package/src/surfaces/admin/components/ClickableChip/examples/basic-usage.html

@@ -0,0 +1,17 @@
+<s-stack direction="inline" gap="base">
+  <s-clickable-chip color="base" accessibilityLabel="Filter by active products">
+    Active
+  </s-clickable-chip>
+  <s-clickable-chip
+    color="subdued"
+    accessibilityLabel="Filter by draft products"
+  >
+    Draft
+  </s-clickable-chip>
+  <s-clickable-chip
+    color="strong"
+    accessibilityLabel="Filter by archived products"
+  >
+    Archived
+  </s-clickable-chip>
+</s-stack>

package/src/surfaces/admin/components/ClickableChip/examples/basic-usage.jsx

@@ -0,0 +1,17 @@
+<s-stack direction="inline" gap="base">
+  <s-clickable-chip color="base" accessibilityLabel="Filter by active products">
+    Active
+  </s-clickable-chip>
+  <s-clickable-chip
+    color="subdued"
+    accessibilityLabel="Filter by draft products"
+  >
+    Draft
+  </s-clickable-chip>
+  <s-clickable-chip
+    color="strong"
+    accessibilityLabel="Filter by archived products"
+  >
+    Archived
+  </s-clickable-chip>
+</s-stack>

package/src/surfaces/admin/components/ClickableChip/examples/default.jsx

@@ -0,0 +1 @@
+<s-clickable-chip>Clickable chip</s-clickable-chip>

package/src/surfaces/admin/components/ClickableChip/examples/disabled-state.html

@@ -0,0 +1,7 @@
+<s-clickable-chip
+  color="base"
+  disabled
+  accessibilityLabel="Status filter (disabled)"
+>
+  Inactive
+</s-clickable-chip>

package/src/surfaces/admin/components/ClickableChip/examples/disabled-state.jsx

@@ -0,0 +1,7 @@
+<s-clickable-chip
+  color="base"
+  disabled
+  accessibilityLabel="Status filter (disabled)"
+>
+  Inactive
+</s-clickable-chip>

package/src/surfaces/admin/components/ClickableChip/examples/multiple-chips-with-proper-spacing.html

@@ -0,0 +1,17 @@
+<s-stack direction="inline" gap="base">
+  <s-clickable-chip accessibilityLabel="Filter by status">
+    Active
+  </s-clickable-chip>
+  <s-clickable-chip
+    color="strong"
+    accessibilityLabel="Remove status filter"
+    removable
+  >
+    <s-icon slot="graphic" type="check-circle"></s-icon>
+    In progress
+  </s-clickable-chip>
+  <s-clickable-chip color="subdued" accessibilityLabel="Filter by category">
+    <s-icon slot="graphic" type="filter"></s-icon>
+    Category
+  </s-clickable-chip>
+</s-stack>

package/src/surfaces/admin/components/ClickableChip/examples/multiple-chips-with-proper-spacing.jsx

@@ -0,0 +1,17 @@
+<s-stack direction="inline" gap="base">
+  <s-clickable-chip accessibilityLabel="Filter by status">
+    Active
+  </s-clickable-chip>
+  <s-clickable-chip
+    color="strong"
+    accessibilityLabel="Remove status filter"
+    removable
+  >
+    <s-icon slot="graphic" type="check-circle" />
+    In progress
+  </s-clickable-chip>
+  <s-clickable-chip color="subdued" accessibilityLabel="Filter by category">
+    <s-icon slot="graphic" type="filter" />
+    Category
+  </s-clickable-chip>
+</s-stack>

package/src/surfaces/admin/components/ClickableChip/examples/with-icon-and-remove-button.html

@@ -0,0 +1,8 @@
+<s-clickable-chip
+  color="strong"
+  accessibilityLabel="Remove status filter"
+  removable
+>
+  <s-icon slot="graphic" type="check-circle"></s-icon>
+  In progress
+</s-clickable-chip>

package/src/surfaces/admin/components/ClickableChip/examples/with-icon-and-remove-button.jsx

@@ -0,0 +1,8 @@
+<s-clickable-chip
+  color="strong"
+  accessibilityLabel="Remove status filter"
+  removable
+>
+  <s-icon slot="graphic" type="check-circle" />
+  In progress
+</s-clickable-chip>

package/src/surfaces/admin/components/ClickableChip.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.20.0 **/
+/** VERSION: 1.22.1 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */

package/src/surfaces/admin/components/ColorField/examples/basic-usage-required.html

@@ -0,0 +1,3 @@
+<s-stack gap="base">
+  <s-color-field label="Brand color" value="#FF0000" required></s-color-field>
+</s-stack>

package/src/surfaces/admin/components/ColorField/examples/basic-usage-required.jsx

@@ -0,0 +1,3 @@
+<s-stack gap="base">
+  <s-color-field label="Brand color" value="#FF0000" required />
+</s-stack>

package/src/surfaces/admin/components/ColorField/examples/basic-usage-web-component.html

@@ -0,0 +1,3 @@
+<s-stack gap="base">
+  <s-color-field label="Brand color" name="color" value="#FF0000"></s-color-field>
+</s-stack>

package/src/surfaces/admin/components/ColorField/examples/basic-usage-web-component.jsx

@@ -0,0 +1,3 @@
+<s-stack gap="base">
+  <s-color-field label="Brand color" name="brandColor" value="#FF0000" />
+</s-stack>

package/src/surfaces/admin/components/ColorField/examples/default.html

@@ -1,4 +1 @@
-<s-color-field 
-  placeholder="Select a color" 
-  value="#FF0000"
-></s-color-field>
+<s-color-field placeholder="Select a color" value="#FF0000"></s-color-field>

package/src/surfaces/admin/components/ColorField/examples/default.jsx

@@ -0,0 +1 @@
+<s-color-field placeholder="Select a color" value="#FF0000" />

package/src/surfaces/admin/components/ColorField/examples/form-integration.html

@@ -0,0 +1,28 @@
+<s-stack gap="base">
+  <s-section>
+    <s-heading>Theme settings</s-heading>
+    <s-stack gap="base">
+      <s-color-field
+        label="Primary brand color"
+        name="primaryColor"
+        value="#1a73e8"
+        defaultValue="#1a73e8"
+        details="This color will be used for buttons, links, and brand elements"
+        required
+      ></s-color-field>
+      <s-color-field
+        label="Secondary color"
+        name="secondaryColor"
+        value="#34a853"
+        details="Used for secondary actions and accents"
+      ></s-color-field>
+      <s-color-field
+        label="Background overlay"
+        name="overlayColor"
+        value="rgba(0, 0, 0, 0.5)"
+        alpha
+        details="Background color for modal overlays and dropdowns"
+      ></s-color-field>
+    </s-stack>
+  </s-section>
+</s-stack>

package/src/surfaces/admin/components/ColorField/examples/form-integration.jsx

@@ -0,0 +1,28 @@
+<s-stack gap="base">
+  <s-section>
+    <s-heading>Theme settings</s-heading>
+    <s-stack gap="base">
+      <s-color-field
+        label="Primary brand color"
+        name="primaryColor"
+        value="#1a73e8"
+        defaultValue="#1a73e8"
+        details="This color will be used for buttons, links, and brand elements"
+        required
+       />
+      <s-color-field
+        label="Secondary color"
+        name="secondaryColor"
+        value="#34a853"
+        details="Used for secondary actions and accents"
+       />
+      <s-color-field
+        label="Background overlay"
+        name="overlayColor"
+        value="rgba(0, 0, 0, 0.5)"
+        alpha
+        details="Background color for modal overlays and dropdowns"
+       />
+    </s-stack>
+  </s-section>
+</s-stack>

package/src/surfaces/admin/components/ColorField/examples/read-only-state.html

@@ -0,0 +1,3 @@
+<s-stack gap="base">
+  <s-color-field label="System color" name="color" value="#1a73e8" readOnly></s-color-field>
+</s-stack>