@mason-ds/vue 0.2.1 → 0.2.2

package/dist/index.js

@@ -20,7 +20,7 @@ var MasonProvider = defineComponent({
   }
 });
 
-// src/Text.ts
+// src/primitives/Text.ts
 import { defineComponent as defineComponent2, h as h2 } from "vue";
 
 // src/styles.ts
@@ -31,6 +31,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}`);
 }
@@ -54,7 +57,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",
@@ -70,7 +73,7 @@ function textStyle({
   };
 }
 
-// src/Text.ts
+// src/primitives/Text.ts
 var Text = defineComponent2({
   name: "MasonText",
   inheritAttrs: false,
@@ -122,10 +125,10 @@ var Text = defineComponent2({
   }
 });
 
-// src/Stack.ts
+// src/primitives/Stack.ts
 import { defineComponent as defineComponent3, h as h3 } from "vue";
 
-// src/stackStyles.ts
+// src/primitives/stackStyles.ts
 var FLEX_ALIGN = {
   start: "flex-start",
   center: "center",
@@ -158,7 +161,7 @@ function stackStyle({
   };
 }
 
-// src/Stack.ts
+// src/primitives/Stack.ts
 var Stack = defineComponent3({
   name: "MasonStack",
   inheritAttrs: false,
@@ -216,11 +219,237 @@ var Stack = defineComponent3({
   }
 });
 
-// src/Card.ts
+// src/primitives/Box.ts
 import { defineComponent as defineComponent4, h as h4 } from "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 = defineComponent4({
+  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 h4(
+        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
+import { defineComponent as defineComponent5, h as h5 } from "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 = defineComponent5({
+  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 h5(
+        "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
+import { defineComponent as defineComponent6, h as h6 } from "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 = defineComponent6({
+  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 h6(
+        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
+import { defineComponent as defineComponent7, h as h7 } from "vue";
+
+// src/primitives/cardStyles.ts
+var TONE_BG2 = {
   surface: "color.bg.surface",
   canvas: "color.bg.canvas",
   elevated: "color.bg.elevated"
@@ -235,7 +464,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),
@@ -245,8 +474,8 @@ function cardStyle({
   };
 }
 
-// src/Card.ts
-var Card = defineComponent4({
+// src/primitives/Card.ts
+var Card = defineComponent7({
   name: "MasonCard",
   inheritAttrs: false,
   props: {
@@ -274,7 +503,7 @@ var Card = defineComponent4({
   setup(props, { slots, attrs }) {
     return () => {
       const { class: attrClass, style: attrStyle, ...rest } = attrs;
-      return h4(
+      return h7(
         "div",
         {
           ...rest,
@@ -298,10 +527,10 @@ var Card = defineComponent4({
   }
 });
 
-// src/Divider.ts
-import { defineComponent as defineComponent5, h as h5 } from "vue";
+// src/primitives/Divider.ts
+import { defineComponent as defineComponent8, h as h8 } from "vue";
 
-// src/dividerStyles.ts
+// src/primitives/dividerStyles.ts
 function dividerStyle(orientation = "horizontal") {
   const line = `1px solid ${cssVar("color.border.subtle")}`;
   if (orientation === "vertical") {
@@ -323,8 +552,8 @@ function dividerStyle(orientation = "horizontal") {
   };
 }
 
-// src/Divider.ts
-var Divider = defineComponent5({
+// src/primitives/Divider.ts
+var Divider = defineComponent8({
   name: "MasonDivider",
   inheritAttrs: false,
   props: {
@@ -336,7 +565,7 @@ var Divider = defineComponent5({
   setup(props, { attrs }) {
     return () => {
       const { class: attrClass, style: attrStyle, ...rest } = attrs;
-      return h5("hr", {
+      return h8("hr", {
         ...rest,
         "data-mason-component": "divider",
         "data-orientation": props.orientation,
@@ -348,10 +577,10 @@ var Divider = defineComponent5({
   }
 });
 
-// src/Link.ts
-import { defineComponent as defineComponent6, h as h6 } from "vue";
+// src/primitives/Link.ts
+import { defineComponent as defineComponent9, h as h9 } from "vue";
 
-// src/linkStyles.ts
+// src/primitives/linkStyles.ts
 function linkStyle({
   tone = "link",
   underline = "hover"
@@ -365,8 +594,8 @@ function linkStyle({
   };
 }
 
-// src/Link.ts
-var Link = defineComponent6({
+// src/primitives/Link.ts
+var Link = defineComponent9({
   name: "MasonLink",
   inheritAttrs: false,
   props: {
@@ -388,7 +617,7 @@ var Link = defineComponent6({
     return () => {
       const { class: attrClass, style: attrStyle, ...rest } = attrs;
       const externalAttrs = props.external ? { target: "_blank", rel: "noreferrer noopener" } : null;
-      return h6(
+      return h9(
         "a",
         {
           "data-mason-component": "link",
@@ -408,13 +637,13 @@ var Link = defineComponent6({
   }
 });
 
-// src/Button.ts
-import { computed, defineComponent as defineComponent8, h as h8 } from "vue";
+// src/primitives/Button.ts
+import { computed, defineComponent as defineComponent11, h as h11 } from "vue";
 
-// src/Spinner.ts
-import { defineComponent as defineComponent7, h as h7 } from "vue";
+// src/primitives/Spinner.ts
+import { defineComponent as defineComponent10, h as h10 } from "vue";
 
-// src/spinnerStyles.ts
+// src/primitives/spinnerStyles.ts
 var SIZE_DIMENSION = {
   sm: cssVar("font.body.sm.size"),
   md: cssVar("font.body.md.size"),
@@ -434,8 +663,8 @@ function spinnerStyle(size = "md") {
   };
 }
 
-// src/Spinner.ts
-var Spinner = defineComponent7({
+// src/primitives/Spinner.ts
+var Spinner = defineComponent10({
   name: "MasonSpinner",
   inheritAttrs: false,
   props: {
@@ -452,7 +681,7 @@ var Spinner = defineComponent7({
   setup(props, { attrs }) {
     return () => {
       const { class: attrClass, style: attrStyle, ...rest } = attrs;
-      return h7("span", {
+      return h10("span", {
         ...rest,
         "data-mason-component": "spinner",
         "data-size": props.size,
@@ -466,14 +695,7 @@ var Spinner = defineComponent7({
   }
 });
 
-// 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"),
@@ -497,14 +719,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",
@@ -514,9 +729,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),
@@ -525,8 +737,8 @@ function buttonStyle({
   };
 }
 
-// src/Button.ts
-var Button = defineComponent8({
+// src/primitives/Button.ts
+var Button = defineComponent11({
   name: "MasonButton",
   inheritAttrs: false,
   props: {
@@ -556,19 +768,19 @@ var Button = defineComponent8({
     return () => {
       const children = [];
       if (props.loading) {
-        children.push(h8(Spinner, { size: "inherit", "data-mason-slot": "spinner" }));
+        children.push(h11(Spinner, { size: "inherit", "data-mason-slot": "spinner" }));
       } else if (slots.leading) {
-        children.push(h8("span", { "data-mason-slot": "leading" }, slots.leading()));
+        children.push(h11("span", { "data-mason-slot": "leading" }, slots.leading()));
       }
       if (slots.default) {
-        children.push(h8("span", { "data-mason-slot": "label" }, slots.default()));
+        children.push(h11("span", { "data-mason-slot": "label" }, slots.default()));
       }
       if (slots.trailing && !props.loading) {
-        children.push(h8("span", { "data-mason-slot": "trailing" }, slots.trailing()));
+        children.push(h11("span", { "data-mason-slot": "trailing" }, slots.trailing()));
       }
       const attrClass = attrs.class;
       const attrStyle = attrs.style;
-      return h8(
+      return h11(
         "button",
         {
           ...attrs,
@@ -579,15 +791,7 @@ var Button = defineComponent8({
           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
       );
@@ -595,10 +799,10 @@ var Button = defineComponent8({
   }
 });
 
-// src/Badge.ts
-import { defineComponent as defineComponent9, h as h9 } from "vue";
+// src/primitives/Badge.ts
+import { defineComponent as defineComponent12, h as h12 } from "vue";
 
-// src/badgeStyles.ts
+// src/primitives/badgeStyles.ts
 function badgeStyle({
   tone = "neutral",
   size = "sm"
@@ -627,8 +831,8 @@ function badgeStyle({
   };
 }
 
-// src/Badge.ts
-var Badge = defineComponent9({
+// src/primitives/Badge.ts
+var Badge = defineComponent12({
   name: "MasonBadge",
   inheritAttrs: false,
   props: {
@@ -644,7 +848,7 @@ var Badge = defineComponent9({
   setup(props, { slots, attrs }) {
     return () => {
       const { class: attrClass, style: attrStyle, ...rest } = attrs;
-      return h9(
+      return h12(
         "span",
         {
           ...rest,
@@ -663,10 +867,10 @@ var Badge = defineComponent9({
   }
 });
 
-// src/Callout.ts
-import { defineComponent as defineComponent10, h as h10 } from "vue";
+// src/primitives/Callout.ts
+import { defineComponent as defineComponent13, h as h13 } from "vue";
 
-// src/calloutStyles.ts
+// src/primitives/calloutStyles.ts
 function calloutStyle(tone = "info") {
   return {
     display: "flex",
@@ -695,8 +899,8 @@ function calloutBodyStyle() {
   return { margin: "0", ...typographyStyle("body.sm") };
 }
 
-// src/Callout.ts
-var Callout = defineComponent10({
+// src/primitives/Callout.ts
+var Callout = defineComponent13({
   name: "MasonCallout",
   inheritAttrs: false,
   props: {
@@ -718,18 +922,18 @@ var Callout = defineComponent10({
       const content = [];
       if (title) {
         content.push(
-          h10("p", { "data-mason-slot": "title", style: calloutTitleStyle() }, title)
+          h13("p", { "data-mason-slot": "title", style: calloutTitleStyle() }, title)
         );
       }
       if (body) {
         content.push(
-          h10("div", { "data-mason-slot": "body", style: calloutBodyStyle() }, body)
+          h13("div", { "data-mason-slot": "body", style: calloutBodyStyle() }, body)
         );
       }
       const children = [];
       if (slots.icon) {
         children.push(
-          h10(
+          h13(
             "span",
             { "data-mason-slot": "icon", "aria-hidden": "true" },
             slots.icon()
@@ -737,13 +941,13 @@ var Callout = defineComponent10({
         );
       }
       children.push(
-        h10(
+        h13(
           "div",
           { "data-mason-slot": "content", style: calloutContentStyle() },
           content
         )
       );
-      return h10(
+      return h13(
         "div",
         {
           ...rest,
@@ -758,13 +962,13 @@ var Callout = defineComponent10({
   }
 });
 
-// src/TextField.ts
-import { defineComponent as defineComponent11, h as h12 } from "vue";
+// src/compounds/TextField.ts
+import { defineComponent as defineComponent14, h as h15 } from "vue";
 
-// src/field.ts
-import { h as h11 } from "vue";
+// src/compounds/field.ts
+import { h as h14 } from "vue";
 
-// src/fieldStyles.ts
+// src/compounds/fieldStyles.ts
 var CONTROL_FONT = {
   sm: "body.sm",
   md: "body.md",
@@ -828,10 +1032,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",
@@ -841,7 +1047,7 @@ function visuallyHiddenControlStyle() {
   };
 }
 
-// src/field.ts
+// src/compounds/field.ts
 var fieldSeq = 0;
 function nextFieldId() {
   fieldSeq += 1;
@@ -873,7 +1079,7 @@ function renderFieldFrame({
   const children = [];
   if (label) {
     children.push(
-      h11(
+      h14(
         "label",
         {
           "data-mason-slot": "label",
@@ -887,7 +1093,7 @@ function renderFieldFrame({
   children.push(control);
   if (description) {
     children.push(
-      h11(
+      h14(
         "p",
         {
           "data-mason-slot": "description",
@@ -900,7 +1106,7 @@ function renderFieldFrame({
   }
   if (error) {
     children.push(
-      h11(
+      h14(
         "p",
         {
           "data-mason-slot": "error",
@@ -912,7 +1118,7 @@ function renderFieldFrame({
       )
     );
   }
-  return h11(
+  return h14(
     "div",
     {
       "data-mason-component": component,
@@ -926,8 +1132,8 @@ function renderFieldFrame({
   );
 }
 
-// src/TextField.ts
-var TextField = defineComponent11({
+// src/compounds/TextField.ts
+var TextField = defineComponent14({
   name: "MasonTextField",
   inheritAttrs: false,
   props: {
@@ -984,7 +1190,7 @@ var TextField = defineComponent11({
         emit("update:modelValue", event.target.value);
       };
       const forwarded = attrInput;
-      const control = h12("input", {
+      const control = h15("input", {
         ...controlAttrs,
         id: ids.controlId,
         "data-mason-slot": "control",
@@ -1016,9 +1222,9 @@ var TextField = defineComponent11({
   }
 });
 
-// src/Select.ts
-import { defineComponent as defineComponent12, h as h13 } from "vue";
-var Select = defineComponent12({
+// src/compounds/Select.ts
+import { defineComponent as defineComponent15, h as h16 } from "vue";
+var Select = defineComponent15({
   name: "MasonSelect",
   inheritAttrs: false,
   props: {
@@ -1081,13 +1287,13 @@ var Select = defineComponent12({
       const forwarded = attrChange;
       const options = [];
       if (props.placeholder) {
-        options.push(h13("option", { value: "" }, props.placeholder));
+        options.push(h16("option", { value: "" }, props.placeholder));
       }
       const provided = slots.default?.();
       if (provided) {
         options.push(provided);
       }
-      const control = h13(
+      const control = h16(
         "select",
         {
           ...controlAttrs,
@@ -1123,13 +1329,14 @@ var Select = defineComponent12({
   }
 });
 
-// src/Checkbox.ts
-import { defineComponent as defineComponent13, h as h14 } from "vue";
+// src/compounds/Checkbox.ts
+import { defineComponent as defineComponent16, h as h17 } from "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"),
@@ -1162,8 +1369,8 @@ function checkboxIndicatorStyle() {
   };
 }
 
-// src/Checkbox.ts
-var Checkbox = defineComponent13({
+// src/compounds/Checkbox.ts
+var Checkbox = defineComponent16({
   name: "MasonCheckbox",
   inheritAttrs: false,
   props: {
@@ -1216,7 +1423,7 @@ var Checkbox = defineComponent13({
       };
       const forwarded = attrChange;
       const children = [
-        h14(
+        h17(
           "label",
           {
             "data-mason-slot": "label",
@@ -1224,7 +1431,7 @@ var Checkbox = defineComponent13({
             style: checkboxLabelStyle(props.disabled)
           },
           [
-            h14("input", {
+            h17("input", {
               ...controlAttrs,
               type: "checkbox",
               id: ids.controlId,
@@ -1236,18 +1443,18 @@ var Checkbox = defineComponent13({
               onChange: forwarded ? [emitChange, forwarded] : emitChange,
               style: visuallyHiddenControlStyle()
             }),
-            h14("span", {
+            h17("span", {
               "data-mason-slot": "indicator",
               "aria-hidden": "true",
               style: checkboxIndicatorStyle()
             }),
-            label ? h14("span", { "data-mason-slot": "label-text" }, label) : null
+            label ? h17("span", { "data-mason-slot": "label-text" }, label) : null
           ]
         )
       ];
       if (description) {
         children.push(
-          h14(
+          h17(
             "p",
             {
               "data-mason-slot": "description",
@@ -1260,7 +1467,7 @@ var Checkbox = defineComponent13({
       }
       if (error) {
         children.push(
-          h14(
+          h17(
             "p",
             {
               "data-mason-slot": "error",
@@ -1272,7 +1479,7 @@ var Checkbox = defineComponent13({
           )
         );
       }
-      return h14(
+      return h17(
         "div",
         {
           "data-mason-component": "checkbox",
@@ -1287,13 +1494,14 @@ var Checkbox = defineComponent13({
   }
 });
 
-// src/Radio.ts
-import { defineComponent as defineComponent14, h as h15 } from "vue";
+// src/compounds/Radio.ts
+import { defineComponent as defineComponent17, h as h18 } from "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"),
@@ -1326,8 +1534,8 @@ function radioIndicatorStyle() {
   };
 }
 
-// src/Radio.ts
-var Radio = defineComponent14({
+// src/compounds/Radio.ts
+var Radio = defineComponent17({
   name: "MasonRadio",
   inheritAttrs: false,
   props: {
@@ -1386,7 +1594,7 @@ var Radio = defineComponent14({
       const forwarded = attrChange;
       const checked = props.modelValue === void 0 || props.value === void 0 ? void 0 : props.modelValue === props.value;
       const children = [
-        h15(
+        h18(
           "label",
           {
             "data-mason-slot": "label",
@@ -1394,7 +1602,7 @@ var Radio = defineComponent14({
             style: radioLabelStyle(props.disabled)
           },
           [
-            h15("input", {
+            h18("input", {
               ...controlAttrs,
               type: "radio",
               id: ids.controlId,
@@ -1407,18 +1615,18 @@ var Radio = defineComponent14({
               onChange: forwarded ? [emitChange, forwarded] : emitChange,
               style: visuallyHiddenControlStyle()
             }),
-            h15("span", {
+            h18("span", {
               "data-mason-slot": "indicator",
               "aria-hidden": "true",
               style: radioIndicatorStyle()
             }),
-            label ? h15("span", { "data-mason-slot": "label-text" }, label) : null
+            label ? h18("span", { "data-mason-slot": "label-text" }, label) : null
           ]
         )
       ];
       if (description) {
         children.push(
-          h15(
+          h18(
             "p",
             {
               "data-mason-slot": "description",
@@ -1431,7 +1639,7 @@ var Radio = defineComponent14({
       }
       if (error) {
         children.push(
-          h15(
+          h18(
             "p",
             {
               "data-mason-slot": "error",
@@ -1443,7 +1651,7 @@ var Radio = defineComponent14({
           )
         );
       }
-      return h15(
+      return h18(
         "div",
         {
           "data-mason-component": "radio",
@@ -1457,13 +1665,211 @@ var Radio = defineComponent14({
     };
   }
 });
+
+// src/compounds/Toggle.ts
+import { defineComponent as defineComponent18, h as h19 } from "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 = defineComponent18({
+  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 = [
+        h19(
+          "label",
+          {
+            "data-mason-slot": "label",
+            for: ids.controlId,
+            style: toggleLabelStyle(props.disabled)
+          },
+          [
+            label ? h19("span", { "data-mason-slot": "label-text" }, label) : null,
+            h19("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()
+            }),
+            h19(
+              "span",
+              {
+                "data-mason-slot": "indicator",
+                "aria-hidden": "true",
+                style: toggleIndicatorStyle(props.size)
+              },
+              [
+                h19("span", {
+                  "data-mason-slot": "thumb",
+                  style: toggleThumbStyle(props.size)
+                })
+              ]
+            )
+          ]
+        )
+      ];
+      if (description) {
+        children.push(
+          h19(
+            "p",
+            {
+              "data-mason-slot": "description",
+              id: ids.descriptionId,
+              style: fieldDescriptionStyle()
+            },
+            description
+          )
+        );
+      }
+      if (error) {
+        children.push(
+          h19(
+            "p",
+            {
+              "data-mason-slot": "error",
+              id: ids.errorId,
+              role: "alert",
+              style: fieldErrorStyle()
+            },
+            error
+          )
+        );
+      }
+      return h19(
+        "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
+      );
+    };
+  }
+});
 export {
   Badge,
+  Box,
   Button,
   Callout,
   Card,
   Checkbox,
+  Container,
   Divider,
+  Grid,
   Link,
   MasonProvider,
   Radio,
@@ -1471,6 +1877,7 @@ export {
   Spinner,
   Stack,
   Text,
-  TextField
+  TextField,
+  Toggle
 };
 //# sourceMappingURL=index.js.map