Merge branch '2025-10-rc' into 2025-10-rc-switch-to-currentTarget

Author: jas7457

packages/ui-extensions/docs/surfaces/checkout/staticPages/examples/variant-tone-and-color.jsx

@@ -4,4 +4,3 @@
 <s-badge tone="success" color="strong">
   Success Strong Badge
 </s-badge>
-

packages/ui-extensions/docs/surfaces/point-of-sale/screenshots/cart-lineitem-action.png

@@ -0,0 +1,52 @@
+<s-box>
+  {/* Modal that will be controlled by the buttons */}
+  <s-modal id="example-modal" heading="Product Details">
+    <s-text>
+      This modal is controlled using the commands API. No JavaScript event
+      handlers are needed—the browser handles all interactions automatically.
+    </s-text>
+
+    <s-stack slot="primaryAction">
+      {/* Button inside modal that can hide it */}
+      <s-button commandFor="example-modal" command="--hide">
+        Close
+      </s-button>
+    </s-stack>
+  </s-modal>
+
+  {/* Button controls using different command actions */}
+  <s-stack gap="small">
+    <s-heading>Modal Controls</s-heading>
+
+    {/* Toggle button - most common use case */}
+    <s-button
+      commandFor="example-modal"
+      command="--toggle"
+      variant="primary">
+      Toggle Modal
+    </s-button>
+
+    {/* Explicit show button */}
+    <s-button
+      commandFor="example-modal"
+      command="--show"
+      tone="success">
+      Show Modal
+    </s-button>
+
+    {/* Explicit hide button */}
+    <s-button
+      commandFor="example-modal"
+      command="--hide"
+      tone="critical">
+      Hide Modal
+    </s-button>
+
+    {/* Auto command (default) - performs the most appropriate action */}
+    <s-button
+      commandFor="example-modal"
+      command="--auto">
+      Auto Command (Toggle)
+    </s-button>
+  </s-stack>
+</s-box>

packages/ui-extensions/docs/surfaces/point-of-sale/screenshots/posreceipt-footer.png

@@ -0,0 +1,19 @@
+export default function HandlingEvents() {
+  const handleClick = () => {
+    console.log('s-button clicked');
+  };
+
+  return <s-button onClick={handleClick}>Click me</s-button>;
+}
+
+// or
+
+export default function HandlingEvents() {
+  const handleClick = () => {
+    console.log('s-button clicked');
+  };
+
+  const button = document.createElement('s-button');
+  button.addEventListener('click', handleClick);
+  document.body.appendChild(button);
+}

packages/ui-extensions/docs/surfaces/point-of-sale/screenshots/posreceipt-header.png

@@ -0,0 +1,5 @@
+{/* This works as expected - the "gap" property accepts string values */}
+<s-stack gap="base">...</s-stack>;
+
+{/* This also works - the "checked" property accepts boolean values */}
+<s-checkbox checked={true}>...</s-checkbox>;

packages/ui-extensions/docs/surfaces/point-of-sale/screenshots/post-exchange-action.png

@@ -0,0 +1,7 @@
+if (propName in element) {
+  // Set as a property
+  element[propName] = propValue;
+} else {
+  // Set as an attribute
+  element.setAttribute(propName, propValue);
+}