@mason-ds/vue 0.2.1 → 0.2.2

package/dist/index.cjs

@@ -21,11 +21,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   Badge: () => Badge,
+  Box: () => Box,
   Button: () => Button,
   Callout: () => Callout,
   Card: () => Card,
   Checkbox: () => Checkbox,
+  Container: () => Container,
   Divider: () => Divider,
+  Grid: () => Grid,
   Link: () => Link,
   MasonProvider: () => MasonProvider,
   Radio: () => Radio,
@@ -33,7 +36,8 @@ __export(index_exports, {
   Spinner: () => Spinner,
   Stack: () => Stack,
   Text: () => Text,
-  TextField: () => TextField
+  TextField: () => TextField,
+  Toggle: () => Toggle
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -59,7 +63,7 @@ var MasonProvider = (0, import_vue.defineComponent)({
   }
 });
 
-// src/Text.ts
+// src/primitives/Text.ts
 var import_vue2 = require("vue");
 
 // src/styles.ts
@@ -70,6 +74,9 @@ function cssVar(path) {
 function spacingVar(axis, level) {
   return cssVar(`spacing.${axis}.${level}`);
 }
+function containerMaxWidthVar(level) {
+  return cssVar(`spacing.layout.container.${level}`);
+}
 function radiusVar(level) {
   return cssVar(`radius.${level}`);
 }
@@ -93,7 +100,7 @@ function mergeClassName(...parts) {
   return merged.length > 0 ? merged : void 0;
 }
 
-// src/textStyles.ts
+// src/primitives/textStyles.ts
 function textStyle({
   variant = "body.md",
   tone = "primary",
@@ -109,7 +116,7 @@ function textStyle({
   };
 }
 
-// src/Text.ts
+// src/primitives/Text.ts
 var Text = (0, import_vue2.defineComponent)({
   name: "MasonText",
   inheritAttrs: false,
@@ -161,10 +168,10 @@ var Text = (0, import_vue2.defineComponent)({
   }
 });
 
-// src/Stack.ts
+// src/primitives/Stack.ts
 var import_vue3 = require("vue");
 
-// src/stackStyles.ts
+// src/primitives/stackStyles.ts
 var FLEX_ALIGN = {
   start: "flex-start",
   center: "center",
@@ -197,7 +204,7 @@ function stackStyle({
   };
 }
 
-// src/Stack.ts
+// src/primitives/Stack.ts
 var Stack = (0, import_vue3.defineComponent)({
   name: "MasonStack",
   inheritAttrs: false,
@@ -255,11 +262,237 @@ var Stack = (0, import_vue3.defineComponent)({
   }
 });
 
-// src/Card.ts
+// src/primitives/Box.ts
 var import_vue4 = require("vue");
 
-// src/cardStyles.ts
+// src/primitives/boxStyles.ts
 var TONE_BG = {
+  canvas: "color.bg.canvas",
+  surface: "color.bg.surface",
+  elevated: "color.bg.elevated"
+};
+function boxStyle({
+  padding,
+  tone = "transparent",
+  radius,
+  bordered = false
+}) {
+  return {
+    display: "block",
+    boxSizing: "border-box",
+    minWidth: 0,
+    ...padding ? { padding: spacingVar("inset", padding) } : null,
+    ...tone !== "transparent" ? { backgroundColor: cssVar(TONE_BG[tone]) } : null,
+    ...radius ? { borderRadius: radiusVar(radius) } : null,
+    ...bordered ? { border: `1px solid ${cssVar("color.border.subtle")}` } : null
+  };
+}
+
+// src/primitives/Box.ts
+var Box = (0, import_vue4.defineComponent)({
+  name: "MasonBox",
+  inheritAttrs: false,
+  props: {
+    as: {
+      type: String,
+      default: "div"
+    },
+    padding: {
+      type: String,
+      default: void 0
+    },
+    tone: {
+      type: String,
+      default: "transparent"
+    },
+    radius: {
+      type: String,
+      default: void 0
+    },
+    bordered: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props, { slots, attrs }) {
+    return () => {
+      const { class: attrClass, style: attrStyle, ...rest } = attrs;
+      return (0, import_vue4.h)(
+        props.as,
+        {
+          ...rest,
+          "data-mason-component": "box",
+          "data-tone": props.tone,
+          class: mergeClassName(attrClass),
+          style: [
+            boxStyle({
+              padding: props.padding,
+              tone: props.tone,
+              radius: props.radius,
+              bordered: props.bordered
+            }),
+            attrStyle
+          ]
+        },
+        slots.default?.()
+      );
+    };
+  }
+});
+
+// src/primitives/Grid.ts
+var import_vue5 = require("vue");
+
+// src/primitives/gridStyles.ts
+var GRID_ALIGN = {
+  start: "start",
+  center: "center",
+  end: "end",
+  stretch: "stretch",
+  baseline: "baseline"
+};
+var GRID_JUSTIFY = {
+  start: "start",
+  center: "center",
+  end: "end",
+  between: "space-between"
+};
+function gridStyle({
+  columns = 2,
+  gap = "md",
+  align,
+  justify
+}) {
+  return {
+    display: "grid",
+    gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+    gap: spacingVar("stack", gap),
+    minWidth: 0,
+    ...align ? { alignItems: GRID_ALIGN[align] } : null,
+    ...justify ? { justifyContent: GRID_JUSTIFY[justify] } : null
+  };
+}
+
+// src/primitives/Grid.ts
+var Grid = (0, import_vue5.defineComponent)({
+  name: "MasonGrid",
+  inheritAttrs: false,
+  props: {
+    columns: {
+      type: Number,
+      default: 2
+    },
+    gap: {
+      type: String,
+      default: "md"
+    },
+    align: {
+      type: String,
+      default: void 0
+    },
+    justify: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(props, { slots, attrs }) {
+    return () => {
+      const { class: attrClass, style: attrStyle, ...rest } = attrs;
+      return (0, import_vue5.h)(
+        "div",
+        {
+          ...rest,
+          "data-mason-component": "grid",
+          "data-columns": props.columns,
+          class: mergeClassName(attrClass),
+          style: [
+            gridStyle({
+              columns: props.columns,
+              gap: props.gap,
+              align: props.align,
+              justify: props.justify
+            }),
+            attrStyle
+          ]
+        },
+        slots.default?.()
+      );
+    };
+  }
+});
+
+// src/primitives/Container.ts
+var import_vue6 = require("vue");
+
+// src/primitives/containerStyles.ts
+function containerStyle({
+  maxWidth = "lg",
+  padding,
+  center = true
+}) {
+  return {
+    display: "block",
+    boxSizing: "border-box",
+    width: "100%",
+    minWidth: 0,
+    maxWidth: containerMaxWidthVar(maxWidth),
+    ...center ? { marginInline: "auto" } : null,
+    ...padding ? { paddingInline: spacingVar("inline", padding) } : null
+  };
+}
+
+// src/primitives/Container.ts
+var Container = (0, import_vue6.defineComponent)({
+  name: "MasonContainer",
+  inheritAttrs: false,
+  props: {
+    as: {
+      type: String,
+      default: "div"
+    },
+    maxWidth: {
+      type: String,
+      default: "lg"
+    },
+    padding: {
+      type: String,
+      default: void 0
+    },
+    center: {
+      type: Boolean,
+      default: true
+    }
+  },
+  setup(props, { slots, attrs }) {
+    return () => {
+      const { class: attrClass, style: attrStyle, ...rest } = attrs;
+      return (0, import_vue6.h)(
+        props.as,
+        {
+          ...rest,
+          "data-mason-component": "container",
+          "data-max-width": props.maxWidth,
+          class: mergeClassName(attrClass),
+          style: [
+            containerStyle({
+              maxWidth: props.maxWidth,
+              padding: props.padding,
+              center: props.center
+            }),
+            attrStyle
+          ]
+        },
+        slots.default?.()
+      );
+    };
+  }
+});
+
+// src/primitives/Card.ts
+var import_vue7 = require("vue");
+
+// src/primitives/cardStyles.ts
+var TONE_BG2 = {
   surface: "color.bg.surface",
   canvas: "color.bg.canvas",
   elevated: "color.bg.elevated"
@@ -274,7 +507,7 @@ function cardStyle({
   return {
     display: "block",
     padding: spacingVar("inset", padding),
-    backgroundColor: cssVar(TONE_BG[tone]),
+    backgroundColor: cssVar(TONE_BG2[tone]),
     color: cssVar("color.text.primary"),
     border: bordered ? `1px solid ${cssVar("color.border.subtle")}` : "none",
     borderRadius: radiusVar(radius),
@@ -284,8 +517,8 @@ function cardStyle({
   };
 }
 
-// src/Card.ts
-var Card = (0, import_vue4.defineComponent)({
+// src/primitives/Card.ts
+var Card = (0, import_vue7.defineComponent)({
   name: "MasonCard",
   inheritAttrs: false,
   props: {
@@ -313,7 +546,7 @@ var Card = (0, import_vue4.defineComponent)({
   setup(props, { slots, attrs }) {
     return () => {
       const { class: attrClass, style: attrStyle, ...rest } = attrs;
-      return (0, import_vue4.h)(
+      return (0, import_vue7.h)(
         "div",
         {
           ...rest,
@@ -337,10 +570,10 @@ var Card = (0, import_vue4.defineComponent)({
   }
 });
 
-// src/Divider.ts
-var import_vue5 = require("vue");
+// src/primitives/Divider.ts
+var import_vue8 = require("vue");
 
-// src/dividerStyles.ts
+// src/primitives/dividerStyles.ts
 function dividerStyle(orientation = "horizontal") {
   const line = `1px solid ${cssVar("color.border.subtle")}`;
   if (orientation === "vertical") {
@@ -362,8 +595,8 @@ function dividerStyle(orientation = "horizontal") {
   };
 }
 
-// src/Divider.ts
-var Divider = (0, import_vue5.defineComponent)({
+// src/primitives/Divider.ts
+var Divider = (0, import_vue8.defineComponent)({
   name: "MasonDivider",
   inheritAttrs: false,
   props: {
@@ -375,7 +608,7 @@ var Divider = (0, import_vue5.defineComponent)({
   setup(props, { attrs }) {
     return () => {
       const { class: attrClass, style: attrStyle, ...rest } = attrs;
-      return (0, import_vue5.h)("hr", {
+      return (0, import_vue8.h)("hr", {
         ...rest,
         "data-mason-component": "divider",
         "data-orientation": props.orientation,
@@ -387,10 +620,10 @@ var Divider = (0, import_vue5.defineComponent)({
   }
 });
 
-// src/Link.ts
-var import_vue6 = require("vue");
+// src/primitives/Link.ts
+var import_vue9 = require("vue");
 
-// src/linkStyles.ts
+// src/primitives/linkStyles.ts
 function linkStyle({
   tone = "link",
   underline = "hover"
@@ -404,8 +637,8 @@ function linkStyle({
   };
 }
 
-// src/Link.ts
-var Link = (0, import_vue6.defineComponent)({
+// src/primitives/Link.ts
+var Link = (0, import_vue9.defineComponent)({
   name: "MasonLink",
   inheritAttrs: false,
   props: {
@@ -427,7 +660,7 @@ var Link = (0, import_vue6.defineComponent)({
     return () => {
       const { class: attrClass, style: attrStyle, ...rest } = attrs;
       const externalAttrs = props.external ? { target: "_blank", rel: "noreferrer noopener" } : null;
-      return (0, import_vue6.h)(
+      return (0, import_vue9.h)(
         "a",
         {
           "data-mason-component": "link",
@@ -447,13 +680,13 @@ var Link = (0, import_vue6.defineComponent)({
   }
 });
 
-// src/Button.ts
-var import_vue8 = require("vue");
+// src/primitives/Button.ts
+var import_vue11 = require("vue");
 
-// src/Spinner.ts
-var import_vue7 = require("vue");
+// src/primitives/Spinner.ts
+var import_vue10 = require("vue");
 
-// src/spinnerStyles.ts
+// src/primitives/spinnerStyles.ts
 var SIZE_DIMENSION = {
   sm: cssVar("font.body.sm.size"),
   md: cssVar("font.body.md.size"),
@@ -473,8 +706,8 @@ function spinnerStyle(size = "md") {
   };
 }
 
-// src/Spinner.ts
-var Spinner = (0, import_vue7.defineComponent)({
+// src/primitives/Spinner.ts
+var Spinner = (0, import_vue10.defineComponent)({
   name: "MasonSpinner",
   inheritAttrs: false,
   props: {
@@ -491,7 +724,7 @@ var Spinner = (0, import_vue7.defineComponent)({
   setup(props, { attrs }) {
     return () => {
       const { class: attrClass, style: attrStyle, ...rest } = attrs;
-      return (0, import_vue7.h)("span", {
+      return (0, import_vue10.h)("span", {
         ...rest,
         "data-mason-component": "spinner",
         "data-size": props.size,
@@ -505,14 +738,7 @@ var Spinner = (0, import_vue7.defineComponent)({
   }
 });
 
-// src/buttonStyles.ts
-function actionColors(variant) {
-  return {
-    bg: `color.action.${variant}.bg`,
-    text: `color.action.${variant}.text`,
-    border: `color.action.${variant}.border`
-  };
-}
+// src/primitives/buttonStyles.ts
 var sizeStyles = {
   sm: {
     paddingBlock: cssVar("spacing.inset.sm"),
@@ -536,14 +762,7 @@ var sizeStyles = {
     font: "label.lg"
   }
 };
-function buttonStyle({
-  variant = "primary",
-  size = "md",
-  disabled = false,
-  loading = false
-}) {
-  const inactive = disabled || loading;
-  const colors = actionColors(inactive ? "disabled" : variant);
+function buttonStyle({ size = "md" }) {
   const sizing = sizeStyles[size];
   return {
     display: "inline-flex",
@@ -553,9 +772,6 @@ function buttonStyle({
     paddingBlock: sizing.paddingBlock,
     paddingInline: sizing.paddingInline,
     margin: "0",
-    backgroundColor: cssVar(colors.bg),
-    color: cssVar(colors.text),
-    border: `1px solid ${cssVar(colors.border)}`,
     borderRadius: sizing.radius,
     boxSizing: "border-box",
     ...typographyStyle(sizing.font),
@@ -564,8 +780,8 @@ function buttonStyle({
   };
 }
 
-// src/Button.ts
-var Button = (0, import_vue8.defineComponent)({
+// src/primitives/Button.ts
+var Button = (0, import_vue11.defineComponent)({
   name: "MasonButton",
   inheritAttrs: false,
   props: {
@@ -591,23 +807,23 @@ var Button = (0, import_vue8.defineComponent)({
     }
   },
   setup(props, { slots, attrs }) {
-    const isDisabled = (0, import_vue8.computed)(() => props.disabled || props.loading);
+    const isDisabled = (0, import_vue11.computed)(() => props.disabled || props.loading);
     return () => {
       const children = [];
       if (props.loading) {
-        children.push((0, import_vue8.h)(Spinner, { size: "inherit", "data-mason-slot": "spinner" }));
+        children.push((0, import_vue11.h)(Spinner, { size: "inherit", "data-mason-slot": "spinner" }));
       } else if (slots.leading) {
-        children.push((0, import_vue8.h)("span", { "data-mason-slot": "leading" }, slots.leading()));
+        children.push((0, import_vue11.h)("span", { "data-mason-slot": "leading" }, slots.leading()));
       }
       if (slots.default) {
-        children.push((0, import_vue8.h)("span", { "data-mason-slot": "label" }, slots.default()));
+        children.push((0, import_vue11.h)("span", { "data-mason-slot": "label" }, slots.default()));
       }
       if (slots.trailing && !props.loading) {
-        children.push((0, import_vue8.h)("span", { "data-mason-slot": "trailing" }, slots.trailing()));
+        children.push((0, import_vue11.h)("span", { "data-mason-slot": "trailing" }, slots.trailing()));
       }
       const attrClass = attrs.class;
       const attrStyle = attrs.style;
-      return (0, import_vue8.h)(
+      return (0, import_vue11.h)(
         "button",
         {
           ...attrs,
@@ -618,15 +834,7 @@ var Button = (0, import_vue8.defineComponent)({
           disabled: isDisabled.value,
           "aria-busy": props.loading || void 0,
           class: mergeClassName(attrClass),
-          style: [
-            buttonStyle({
-              variant: props.variant,
-              size: props.size,
-              disabled: props.disabled,
-              loading: props.loading
-            }),
-            attrStyle
-          ]
+          style: [buttonStyle({ size: props.size }), attrStyle]
         },
         children
       );
@@ -634,10 +842,10 @@ var Button = (0, import_vue8.defineComponent)({
   }
 });
 
-// src/Badge.ts
-var import_vue9 = require("vue");
+// src/primitives/Badge.ts
+var import_vue12 = require("vue");
 
-// src/badgeStyles.ts
+// src/primitives/badgeStyles.ts
 function badgeStyle({
   tone = "neutral",
   size = "sm"
@@ -666,8 +874,8 @@ function badgeStyle({
   };
 }
 
-// src/Badge.ts
-var Badge = (0, import_vue9.defineComponent)({
+// src/primitives/Badge.ts
+var Badge = (0, import_vue12.defineComponent)({
   name: "MasonBadge",
   inheritAttrs: false,
   props: {
@@ -683,7 +891,7 @@ var Badge = (0, import_vue9.defineComponent)({
   setup(props, { slots, attrs }) {
     return () => {
       const { class: attrClass, style: attrStyle, ...rest } = attrs;
-      return (0, import_vue9.h)(
+      return (0, import_vue12.h)(
         "span",
         {
           ...rest,
@@ -702,10 +910,10 @@ var Badge = (0, import_vue9.defineComponent)({
   }
 });
 
-// src/Callout.ts
-var import_vue10 = require("vue");
+// src/primitives/Callout.ts
+var import_vue13 = require("vue");
 
-// src/calloutStyles.ts
+// src/primitives/calloutStyles.ts
 function calloutStyle(tone = "info") {
   return {
     display: "flex",
@@ -734,8 +942,8 @@ function calloutBodyStyle() {
   return { margin: "0", ...typographyStyle("body.sm") };
 }
 
-// src/Callout.ts
-var Callout = (0, import_vue10.defineComponent)({
+// src/primitives/Callout.ts
+var Callout = (0, import_vue13.defineComponent)({
   name: "MasonCallout",
   inheritAttrs: false,
   props: {
@@ -757,18 +965,18 @@ var Callout = (0, import_vue10.defineComponent)({
       const content = [];
       if (title) {
         content.push(
-          (0, import_vue10.h)("p", { "data-mason-slot": "title", style: calloutTitleStyle() }, title)
+          (0, import_vue13.h)("p", { "data-mason-slot": "title", style: calloutTitleStyle() }, title)
         );
       }
       if (body) {
         content.push(
-          (0, import_vue10.h)("div", { "data-mason-slot": "body", style: calloutBodyStyle() }, body)
+          (0, import_vue13.h)("div", { "data-mason-slot": "body", style: calloutBodyStyle() }, body)
         );
       }
       const children = [];
       if (slots.icon) {
         children.push(
-          (0, import_vue10.h)(
+          (0, import_vue13.h)(
             "span",
             { "data-mason-slot": "icon", "aria-hidden": "true" },
             slots.icon()
@@ -776,13 +984,13 @@ var Callout = (0, import_vue10.defineComponent)({
         );
       }
       children.push(
-        (0, import_vue10.h)(
+        (0, import_vue13.h)(
           "div",
           { "data-mason-slot": "content", style: calloutContentStyle() },
           content
         )
       );
-      return (0, import_vue10.h)(
+      return (0, import_vue13.h)(
         "div",
         {
           ...rest,
@@ -797,13 +1005,13 @@ var Callout = (0, import_vue10.defineComponent)({
   }
 });
 
-// src/TextField.ts
-var import_vue12 = require("vue");
+// src/compounds/TextField.ts
+var import_vue15 = require("vue");
 
-// src/field.ts
-var import_vue11 = require("vue");
+// src/compounds/field.ts
+var import_vue14 = require("vue");
 
-// src/fieldStyles.ts
+// src/compounds/fieldStyles.ts
 var CONTROL_FONT = {
   sm: "body.sm",
   md: "body.md",
@@ -867,10 +1075,12 @@ function fieldErrorStyle() {
 function visuallyHiddenControlStyle() {
   return {
     position: "absolute",
+    left: "0",
+    top: "0",
     width: "1px",
     height: "1px",
     padding: "0",
-    margin: "-1px",
+    margin: "0",
     overflow: "hidden",
     clip: "rect(0, 0, 0, 0)",
     whiteSpace: "nowrap",
@@ -880,7 +1090,7 @@ function visuallyHiddenControlStyle() {
   };
 }
 
-// src/field.ts
+// src/compounds/field.ts
 var fieldSeq = 0;
 function nextFieldId() {
   fieldSeq += 1;
@@ -912,7 +1122,7 @@ function renderFieldFrame({
   const children = [];
   if (label) {
     children.push(
-      (0, import_vue11.h)(
+      (0, import_vue14.h)(
         "label",
         {
           "data-mason-slot": "label",
@@ -926,7 +1136,7 @@ function renderFieldFrame({
   children.push(control);
   if (description) {
     children.push(
-      (0, import_vue11.h)(
+      (0, import_vue14.h)(
         "p",
         {
           "data-mason-slot": "description",
@@ -939,7 +1149,7 @@ function renderFieldFrame({
   }
   if (error) {
     children.push(
-      (0, import_vue11.h)(
+      (0, import_vue14.h)(
         "p",
         {
           "data-mason-slot": "error",
@@ -951,7 +1161,7 @@ function renderFieldFrame({
       )
     );
   }
-  return (0, import_vue11.h)(
+  return (0, import_vue14.h)(
     "div",
     {
       "data-mason-component": component,
@@ -965,8 +1175,8 @@ function renderFieldFrame({
   );
 }
 
-// src/TextField.ts
-var TextField = (0, import_vue12.defineComponent)({
+// src/compounds/TextField.ts
+var TextField = (0, import_vue15.defineComponent)({
   name: "MasonTextField",
   inheritAttrs: false,
   props: {
@@ -1023,7 +1233,7 @@ var TextField = (0, import_vue12.defineComponent)({
         emit("update:modelValue", event.target.value);
       };
       const forwarded = attrInput;
-      const control = (0, import_vue12.h)("input", {
+      const control = (0, import_vue15.h)("input", {
         ...controlAttrs,
         id: ids.controlId,
         "data-mason-slot": "control",
@@ -1055,9 +1265,9 @@ var TextField = (0, import_vue12.defineComponent)({
   }
 });
 
-// src/Select.ts
-var import_vue13 = require("vue");
-var Select = (0, import_vue13.defineComponent)({
+// src/compounds/Select.ts
+var import_vue16 = require("vue");
+var Select = (0, import_vue16.defineComponent)({
   name: "MasonSelect",
   inheritAttrs: false,
   props: {
@@ -1120,13 +1330,13 @@ var Select = (0, import_vue13.defineComponent)({
       const forwarded = attrChange;
       const options = [];
       if (props.placeholder) {
-        options.push((0, import_vue13.h)("option", { value: "" }, props.placeholder));
+        options.push((0, import_vue16.h)("option", { value: "" }, props.placeholder));
       }
       const provided = slots.default?.();
       if (provided) {
         options.push(provided);
       }
-      const control = (0, import_vue13.h)(
+      const control = (0, import_vue16.h)(
         "select",
         {
           ...controlAttrs,
@@ -1162,13 +1372,14 @@ var Select = (0, import_vue13.defineComponent)({
   }
 });
 
-// src/Checkbox.ts
-var import_vue14 = require("vue");
+// src/compounds/Checkbox.ts
+var import_vue17 = require("vue");
 
-// src/checkboxStyles.ts
+// src/compounds/checkboxStyles.ts
 var CONTROL_SIZE = "1.125rem";
 function checkboxRootStyle() {
   return {
+    position: "relative",
     display: "flex",
     flexDirection: "column",
     gap: spacingVar("stack", "sm"),
@@ -1201,8 +1412,8 @@ function checkboxIndicatorStyle() {
   };
 }
 
-// src/Checkbox.ts
-var Checkbox = (0, import_vue14.defineComponent)({
+// src/compounds/Checkbox.ts
+var Checkbox = (0, import_vue17.defineComponent)({
   name: "MasonCheckbox",
   inheritAttrs: false,
   props: {
@@ -1255,7 +1466,7 @@ var Checkbox = (0, import_vue14.defineComponent)({
       };
       const forwarded = attrChange;
       const children = [
-        (0, import_vue14.h)(
+        (0, import_vue17.h)(
           "label",
           {
             "data-mason-slot": "label",
@@ -1263,7 +1474,7 @@ var Checkbox = (0, import_vue14.defineComponent)({
             style: checkboxLabelStyle(props.disabled)
           },
           [
-            (0, import_vue14.h)("input", {
+            (0, import_vue17.h)("input", {
               ...controlAttrs,
               type: "checkbox",
               id: ids.controlId,
@@ -1275,18 +1486,18 @@ var Checkbox = (0, import_vue14.defineComponent)({
               onChange: forwarded ? [emitChange, forwarded] : emitChange,
               style: visuallyHiddenControlStyle()
             }),
-            (0, import_vue14.h)("span", {
+            (0, import_vue17.h)("span", {
               "data-mason-slot": "indicator",
               "aria-hidden": "true",
               style: checkboxIndicatorStyle()
             }),
-            label ? (0, import_vue14.h)("span", { "data-mason-slot": "label-text" }, label) : null
+            label ? (0, import_vue17.h)("span", { "data-mason-slot": "label-text" }, label) : null
           ]
         )
       ];
       if (description) {
         children.push(
-          (0, import_vue14.h)(
+          (0, import_vue17.h)(
             "p",
             {
               "data-mason-slot": "description",
@@ -1299,7 +1510,7 @@ var Checkbox = (0, import_vue14.defineComponent)({
       }
       if (error) {
         children.push(
-          (0, import_vue14.h)(
+          (0, import_vue17.h)(
             "p",
             {
               "data-mason-slot": "error",
@@ -1311,7 +1522,7 @@ var Checkbox = (0, import_vue14.defineComponent)({
           )
         );
       }
-      return (0, import_vue14.h)(
+      return (0, import_vue17.h)(
         "div",
         {
           "data-mason-component": "checkbox",
@@ -1326,13 +1537,14 @@ var Checkbox = (0, import_vue14.defineComponent)({
   }
 });
 
-// src/Radio.ts
-var import_vue15 = require("vue");
+// src/compounds/Radio.ts
+var import_vue18 = require("vue");
 
-// src/radioStyles.ts
+// src/compounds/radioStyles.ts
 var CONTROL_SIZE2 = "1.125rem";
 function radioRootStyle() {
   return {
+    position: "relative",
     display: "flex",
     flexDirection: "column",
     gap: spacingVar("stack", "sm"),
@@ -1365,8 +1577,8 @@ function radioIndicatorStyle() {
   };
 }
 
-// src/Radio.ts
-var Radio = (0, import_vue15.defineComponent)({
+// src/compounds/Radio.ts
+var Radio = (0, import_vue18.defineComponent)({
   name: "MasonRadio",
   inheritAttrs: false,
   props: {
@@ -1425,7 +1637,7 @@ var Radio = (0, import_vue15.defineComponent)({
       const forwarded = attrChange;
       const checked = props.modelValue === void 0 || props.value === void 0 ? void 0 : props.modelValue === props.value;
       const children = [
-        (0, import_vue15.h)(
+        (0, import_vue18.h)(
           "label",
           {
             "data-mason-slot": "label",
@@ -1433,7 +1645,7 @@ var Radio = (0, import_vue15.defineComponent)({
             style: radioLabelStyle(props.disabled)
           },
           [
-            (0, import_vue15.h)("input", {
+            (0, import_vue18.h)("input", {
               ...controlAttrs,
               type: "radio",
               id: ids.controlId,
@@ -1446,18 +1658,18 @@ var Radio = (0, import_vue15.defineComponent)({
               onChange: forwarded ? [emitChange, forwarded] : emitChange,
               style: visuallyHiddenControlStyle()
             }),
-            (0, import_vue15.h)("span", {
+            (0, import_vue18.h)("span", {
               "data-mason-slot": "indicator",
               "aria-hidden": "true",
               style: radioIndicatorStyle()
             }),
-            label ? (0, import_vue15.h)("span", { "data-mason-slot": "label-text" }, label) : null
+            label ? (0, import_vue18.h)("span", { "data-mason-slot": "label-text" }, label) : null
           ]
         )
       ];
       if (description) {
         children.push(
-          (0, import_vue15.h)(
+          (0, import_vue18.h)(
             "p",
             {
               "data-mason-slot": "description",
@@ -1470,7 +1682,7 @@ var Radio = (0, import_vue15.defineComponent)({
       }
       if (error) {
         children.push(
-          (0, import_vue15.h)(
+          (0, import_vue18.h)(
             "p",
             {
               "data-mason-slot": "error",
@@ -1482,7 +1694,7 @@ var Radio = (0, import_vue15.defineComponent)({
           )
         );
       }
-      return (0, import_vue15.h)(
+      return (0, import_vue18.h)(
         "div",
         {
           "data-mason-component": "radio",
@@ -1496,14 +1708,212 @@ var Radio = (0, import_vue15.defineComponent)({
     };
   }
 });
+
+// src/compounds/Toggle.ts
+var import_vue19 = require("vue");
+
+// src/compounds/toggleStyles.ts
+var TRACK = {
+  sm: { width: "1.75rem", height: "1rem" },
+  md: { width: "2.25rem", height: "1.25rem" },
+  lg: { width: "2.75rem", height: "1.5rem" }
+};
+var THUMB = {
+  sm: "0.75rem",
+  md: "1rem",
+  lg: "1.25rem"
+};
+function toggleRootStyle() {
+  return {
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    gap: spacingVar("stack", "sm"),
+    minWidth: "0"
+  };
+}
+function toggleLabelStyle(disabled = false) {
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: spacingVar("inline", "sm"),
+    cursor: disabled ? "not-allowed" : "pointer",
+    color: disabled ? cssVar("color.text.disabled") : cssVar("color.text.primary"),
+    ...typographyStyle("label.md")
+  };
+}
+function toggleIndicatorStyle(size = "md") {
+  return {
+    position: "relative",
+    display: "inline-flex",
+    alignItems: "center",
+    width: TRACK[size].width,
+    height: TRACK[size].height,
+    padding: "0.125rem",
+    flexShrink: "0",
+    boxSizing: "border-box",
+    borderRadius: radiusVar("full")
+  };
+}
+function toggleThumbStyle(size = "md") {
+  return {
+    width: THUMB[size],
+    height: THUMB[size],
+    borderRadius: radiusVar("full"),
+    flexShrink: "0"
+  };
+}
+
+// src/compounds/Toggle.ts
+var Toggle = (0, import_vue19.defineComponent)({
+  name: "MasonToggle",
+  inheritAttrs: false,
+  props: {
+    label: {
+      type: String,
+      default: void 0
+    },
+    description: {
+      type: String,
+      default: void 0
+    },
+    error: {
+      type: String,
+      default: void 0
+    },
+    invalid: {
+      type: Boolean,
+      default: void 0
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    id: {
+      type: String,
+      default: void 0
+    },
+    modelValue: {
+      type: Boolean,
+      default: void 0
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { slots, attrs, emit }) {
+    const autoId = nextFieldId();
+    return () => {
+      const {
+        class: attrClass,
+        style: attrStyle,
+        onChange: attrChange,
+        ...controlAttrs
+      } = attrs;
+      const label = slots.label?.() ?? props.label;
+      const description = slots.description?.() ?? props.description;
+      const error = slots.error?.() ?? props.error;
+      const invalid = props.invalid ?? Boolean(error);
+      const ids = fieldIds(props.id ?? autoId, Boolean(description), Boolean(error));
+      const emitChange = (event) => {
+        emit("update:modelValue", event.target.checked);
+      };
+      const forwarded = attrChange;
+      const children = [
+        (0, import_vue19.h)(
+          "label",
+          {
+            "data-mason-slot": "label",
+            for: ids.controlId,
+            style: toggleLabelStyle(props.disabled)
+          },
+          [
+            label ? (0, import_vue19.h)("span", { "data-mason-slot": "label-text" }, label) : null,
+            (0, import_vue19.h)("input", {
+              ...controlAttrs,
+              type: "checkbox",
+              role: "switch",
+              id: ids.controlId,
+              "data-mason-slot": "control",
+              disabled: props.disabled,
+              "aria-invalid": invalid || void 0,
+              "aria-describedby": ids.describedBy,
+              ...props.modelValue === void 0 ? null : { checked: props.modelValue },
+              onChange: forwarded ? [emitChange, forwarded] : emitChange,
+              style: visuallyHiddenControlStyle()
+            }),
+            (0, import_vue19.h)(
+              "span",
+              {
+                "data-mason-slot": "indicator",
+                "aria-hidden": "true",
+                style: toggleIndicatorStyle(props.size)
+              },
+              [
+                (0, import_vue19.h)("span", {
+                  "data-mason-slot": "thumb",
+                  style: toggleThumbStyle(props.size)
+                })
+              ]
+            )
+          ]
+        )
+      ];
+      if (description) {
+        children.push(
+          (0, import_vue19.h)(
+            "p",
+            {
+              "data-mason-slot": "description",
+              id: ids.descriptionId,
+              style: fieldDescriptionStyle()
+            },
+            description
+          )
+        );
+      }
+      if (error) {
+        children.push(
+          (0, import_vue19.h)(
+            "p",
+            {
+              "data-mason-slot": "error",
+              id: ids.errorId,
+              role: "alert",
+              style: fieldErrorStyle()
+            },
+            error
+          )
+        );
+      }
+      return (0, import_vue19.h)(
+        "div",
+        {
+          "data-mason-component": "toggle",
+          "data-size": props.size,
+          "data-invalid": invalid || void 0,
+          "data-disabled": props.disabled || void 0,
+          class: mergeClassName(attrClass),
+          style: [toggleRootStyle(), attrStyle]
+        },
+        children
+      );
+    };
+  }
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Badge,
+  Box,
   Button,
   Callout,
   Card,
   Checkbox,
+  Container,
   Divider,
+  Grid,
   Link,
   MasonProvider,
   Radio,
@@ -1511,6 +1921,7 @@ var Radio = (0, import_vue15.defineComponent)({
   Spinner,
   Stack,
   Text,
-  TextField
+  TextField,
+  Toggle
 });
 //# sourceMappingURL=index.cjs.map