3 files changed, 141 insertions, 0 deletions
diff --git a/toolkit/content/widgets/moz-button-group/moz-button-group.css b/toolkit/content/widgets/moz-button-group/moz-button-group.css
new file mode 100644
index 0000000000..f0cc0e5480
--- /dev/null
+++ b/toolkit/content/widgets/moz-button-group/moz-button-group.css
@@ -0,0 +1,13 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+:host {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+::slotted(button) {
+  margin: 0 !important;
+}
diff --git a/toolkit/content/widgets/moz-button-group/moz-button-group.mjs b/toolkit/content/widgets/moz-button-group/moz-button-group.mjs
new file mode 100644
index 0000000000..1fc27624f4
--- /dev/null
+++ b/toolkit/content/widgets/moz-button-group/moz-button-group.mjs
@@ -0,0 +1,80 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { html } from "../vendor/lit.all.mjs";
+import { MozLitElement } from "../lit-utils.mjs";
+
+export const PLATFORM_LINUX = "linux";
+export const PLATFORM_MACOS = "macosx";
+export const PLATFORM_WINDOWS = "win";
+
+export default class MozButtonGroup extends MozLitElement {
+  static queries = {
+    defaultSlotEl: "slot:not([name])",
+    primarySlotEl: "slot[name=primary]",
+  };
+
+  static properties = {
+    platform: { state: true },
+  };
+
+  // Use a relative URL in storybook to get faster reloads on style changes.
+  static stylesheetUrl = window.IS_STORYBOOK
+    ? "./moz-button-group/moz-button-group.css"
+    : "chrome://global/content/elements/moz-button-group.css";
+
+  constructor() {
+    super();
+    this.#detectPlatform();
+  }
+
+  #detectPlatform() {
+    if (typeof AppConstants !== "undefined") {
+      this.platform = AppConstants.platform;
+    } else if (navigator.platform.includes("Linux")) {
+      this.platform = PLATFORM_LINUX;
+    } else if (navigator.platform.includes("Mac")) {
+      this.platform = PLATFORM_MACOS;
+    } else {
+      this.platform = PLATFORM_WINDOWS;
+    }
+  }
+
+  onSlotchange(e) {
+    for (let child of this.defaultSlotEl.assignedNodes()) {
+      if (!(child instanceof Element)) {
+        // Text nodes won't support classList or getAttribute.
+        continue;
+      }
+      // Bug 1791816: These should check moz-button instead of button.
+      if (
+        child.localName == "button" &&
+        (child.classList.contains("primary") ||
+          child.getAttribute("type") == "submit" ||
+          child.hasAttribute("autofocus"))
+      ) {
+        child.slot = "primary";
+      }
+    }
+  }
+
+  render() {
+    let slots = [
+      html`
+        <slot @slotchange=${this.onSlotchange}></slot>
+      `,
+      html`
+        <slot name="primary"></slot>
+      `,
+    ];
+    if (this.platform == PLATFORM_WINDOWS) {
+      slots = [slots[1], slots[0]];
+    }
+    return html`
+      <link rel="stylesheet" href=${this.constructor.stylesheetUrl} />
+      ${slots}
+    `;
+  }
+}
+customElements.define("moz-button-group", MozButtonGroup);
diff --git a/toolkit/content/widgets/moz-button-group/moz-button-group.stories.mjs b/toolkit/content/widgets/moz-button-group/moz-button-group.stories.mjs
new file mode 100644
index 0000000000..9fb6ec31b5
--- /dev/null
+++ b/toolkit/content/widgets/moz-button-group/moz-button-group.stories.mjs
@@ -0,0 +1,48 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { html } from "../vendor/lit.all.mjs";
+import {
+  PLATFORM_LINUX,
+  PLATFORM_MACOS,
+  PLATFORM_WINDOWS,
+} from "./moz-button-group.mjs";
+
+export default {
+  title: "Design System/Experiments/MozButtonGroup",
+  argTypes: {
+    platform: {
+      options: [PLATFORM_LINUX, PLATFORM_MACOS, PLATFORM_WINDOWS],
+      control: { type: "select" },
+    },
+  },
+};
+
+const Template = ({ platform }) => html`
+  <div class="card card-no-hover" style="max-width: 400px">
+    <p>The button group is below. Card for emphasis.</p>
+    <moz-button-group .platform=${platform}>
+      <button class="primary">OK</button>
+      <button>Cancel</button>
+    </moz-button-group>
+  </div>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  // Platform will auto-detected.
+};
+
+export const Windows = Template.bind({});
+Windows.args = {
+  platform: PLATFORM_WINDOWS,
+};
+export const Mac = Template.bind({});
+Mac.args = {
+  platform: PLATFORM_MACOS,
+};
+export const Linux = Template.bind({});
+Linux.args = {
+  platform: PLATFORM_LINUX,
+};