@marwes-ui/core 1.2.0 → 1.4.0

package/dist/index.js

@@ -1,8 +1,24 @@
+// src/theme/text-variant.ts
+var TextVariant = {
+  display: "display",
+  label: "label",
+  labelSmall: "label-small",
+  caption: "caption",
+  overline: "overline",
+  micro: "micro"
+};
+
 // src/theme/theme-types.ts
 var ThemeMode = {
   light: "light",
   dark: "dark"
 };
+var defaultThemeBreakpoints = {
+  mobile: 640,
+  tablet: 900,
+  desktop: 1200,
+  wideDesktop: 1440
+};
 
 // src/theme/theme-mode.ts
 function isThemeMode(value) {
@@ -84,6 +100,30 @@ function colorRoleVars(role, cr) {
     [`--mw-color-${role}-label-disabled`]: cr.labelDisabled
   };
 }
+function statusColorVars(role, tokens) {
+  return {
+    [`--mw-color-status-${role}-background`]: tokens.background,
+    [`--mw-color-status-${role}-text`]: tokens.text,
+    [`--mw-color-status-${role}-icon`]: tokens.icon,
+    [`--mw-color-status-${role}-border`]: tokens.border,
+    ...tokens.borderAccessible ? { [`--mw-color-status-${role}-border-accessible`]: tokens.borderAccessible } : {},
+    [`--mw-color-status-${role}-border-strong`]: tokens.borderStrong
+  };
+}
+function typographyStyleVars(prefix, style) {
+  return {
+    [`${prefix}-font-size`]: `${style.fontSize}px`,
+    [`${prefix}-line-height`]: `${style.lineHeight}`,
+    [`${prefix}-font-weight`]: `${style.fontWeight}`,
+    [`${prefix}-letter-spacing`]: `${style.letterSpacing}px`
+  };
+}
+function textTypographyStyleVars(variant, style) {
+  return {
+    ...typographyStyleVars(`--mw-typography-text-${variant}`, style),
+    [`--mw-typography-text-${variant}-transform`]: style.textTransform ?? "none"
+  };
+}
 function themeToCSSVars(theme) {
   const { color, font, ui, typography } = theme;
   return {
@@ -97,10 +137,12 @@ function themeToCSSVars(theme) {
     ...colorRoleVars("secondary", color.secondary),
     "--mw-color-secondary-border": color.secondary.border,
     "--mw-color-secondary-border-disabled": color.secondary.borderDisabled,
-    // Surface / semantic neutrals (16)
+    // Surface / semantic neutrals (24)
     "--mw-color-background": color.background,
     "--mw-color-surface": color.surface,
+    "--mw-color-surface-primary": color.surfacePrimary,
     "--mw-color-surface-subtle": color.surfaceSubtle,
+    "--mw-color-surface-brand": color.surfaceBrand,
     "--mw-color-surface-elevated": color.surfaceElevated,
     "--mw-color-surface-disabled": color.surfaceDisabled,
     "--mw-color-surface-inverted": color.surfaceInverted,
@@ -109,11 +151,22 @@ function themeToCSSVars(theme) {
     "--mw-color-text-subtle": color.textSubtle,
     "--mw-color-text-disabled": color.textDisabled,
     "--mw-color-text-inverted": color.textInverted,
+    "--mw-color-text-brand": color.textBrand,
+    "--mw-color-text-link": color.textLink,
+    "--mw-color-icon-muted": color.iconMuted,
+    "--mw-color-border-low": color.borderLow,
     "--mw-color-border": color.border,
     "--mw-color-border-subtle": color.borderSubtle,
     "--mw-color-border-strong": color.borderStrong,
     "--mw-color-border-disabled": color.borderDisabled,
+    "--mw-color-border-brand": color.borderBrand,
+    "--mw-color-border-full": color.borderFull,
     "--mw-color-focus": color.focus,
+    // Status role tokens (4 × 5 + optional accessible warning border = 21)
+    ...statusColorVars("success", color.status.success),
+    ...statusColorVars("warning", color.status.warning),
+    ...statusColorVars("error", color.status.error),
+    ...statusColorVars("info", color.status.info),
     // Font (3)
     "--mw-font-primary": font.primary,
     "--mw-font-secondary": font.secondary,
@@ -122,19 +175,17 @@ function themeToCSSVars(theme) {
     "--mw-ui-radius": `${ui.radius}px`,
     // Density (10)
     ...densityToCSSVars(ui.density),
-    // Typography — headings (3 × 4 = 12)
-    "--mw-typography-h1-font-size": `${typography.h1.fontSize}px`,
-    "--mw-typography-h1-line-height": `${typography.h1.lineHeight}`,
-    "--mw-typography-h1-font-weight": `${typography.h1.fontWeight}`,
-    "--mw-typography-h1-letter-spacing": `${typography.h1.letterSpacing}px`,
-    "--mw-typography-h2-font-size": `${typography.h2.fontSize}px`,
-    "--mw-typography-h2-line-height": `${typography.h2.lineHeight}`,
-    "--mw-typography-h2-font-weight": `${typography.h2.fontWeight}`,
-    "--mw-typography-h2-letter-spacing": `${typography.h2.letterSpacing}px`,
-    "--mw-typography-h3-font-size": `${typography.h3.fontSize}px`,
-    "--mw-typography-h3-line-height": `${typography.h3.lineHeight}`,
-    "--mw-typography-h3-font-weight": `${typography.h3.fontWeight}`,
-    "--mw-typography-h3-letter-spacing": `${typography.h3.letterSpacing}px`,
+    // Typography
+    ...typographyStyleVars("--mw-typography-display", typography.display),
+    ...typographyStyleVars("--mw-typography-h1", typography.h1),
+    ...typographyStyleVars("--mw-typography-h2", typography.h2),
+    ...typographyStyleVars("--mw-typography-h3", typography.h3),
+    ...textTypographyStyleVars("display", typography.text.display),
+    ...textTypographyStyleVars("label", typography.text.label),
+    ...textTypographyStyleVars("label-small", typography.text["label-small"]),
+    ...textTypographyStyleVars("caption", typography.text.caption),
+    ...textTypographyStyleVars("overline", typography.text.overline),
+    ...textTypographyStyleVars("micro", typography.text.micro),
     // Typography — paragraph (3 × 2 = 6)
     "--mw-typography-paragraph-sm-font-size": `${typography.paragraph.sm.fontSize}px`,
     "--mw-typography-paragraph-sm-line-height": `${typography.paragraph.sm.lineHeight}`,
@@ -349,7 +400,9 @@ var lightThemeDefaults = {
     // Background & Surface
     background: "#FFFFFF",
     surface: "#F8F8F8",
+    surfacePrimary: "#FFFFFF",
     surfaceSubtle: "#F5F5F5",
+    surfaceBrand: "#EEEEFF",
     surfaceElevated: "#FFFFFF",
     surfaceDisabled: "#F5F5F5",
     surfaceInverted: "#141414",
@@ -359,17 +412,54 @@ var lightThemeDefaults = {
     textSubtle: "#737373",
     textDisabled: "#737373",
     textInverted: "#FFFFFF",
+    textBrand: "#2F31FC",
+    textLink: "#2527CA",
+    iconMuted: "#A3A3A3",
     // Borders
+    borderLow: "#00000026",
     border: "#D8D8D8",
     borderSubtle: "#D8D8D8",
     borderStrong: "#A3A3A3",
     borderDisabled: "#D8D8D8",
+    borderBrand: "#2F31FC",
+    borderFull: "#000000",
     // Focus
     focus: "#2F31FC",
     // Semantic colors
     danger: "#D90429",
     success: "#006633",
-    warning: "#B45309"
+    warning: "#B45309",
+    status: {
+      success: {
+        background: "#E6F4ED",
+        text: "#006633",
+        icon: "#006D48",
+        border: "#90CAAD",
+        borderStrong: "#2E9970"
+      },
+      warning: {
+        background: "#FFF8E6",
+        text: "#B45309",
+        icon: "#D97706",
+        border: "#FDE08A",
+        borderAccessible: "#B45309",
+        borderStrong: "#E46F00"
+      },
+      error: {
+        background: "#FFE8EB",
+        text: "#A8031F",
+        icon: "#D90429",
+        border: "#FF8A95",
+        borderStrong: "#FF2847"
+      },
+      info: {
+        background: "#EEEEFF",
+        text: "#1B1D97",
+        icon: "#2F31FC",
+        border: "#ABABFD",
+        borderStrong: "#5859FC"
+      }
+    }
   },
   font: {
     primary: "'Instrument Sans', Inter, system-ui, sans-serif",
@@ -380,7 +470,14 @@ var lightThemeDefaults = {
     radius: 4,
     density: "comfortable"
   },
+  breakpoint: defaultThemeBreakpoints,
   typography: {
+    display: {
+      fontSize: 44,
+      lineHeight: 1.1818181818,
+      fontWeight: 700,
+      letterSpacing: -1.32
+    },
     h1: {
       fontSize: 32,
       lineHeight: 1.1875,
@@ -399,6 +496,45 @@ var lightThemeDefaults = {
       fontWeight: 500,
       letterSpacing: -0.6
     },
+    text: {
+      display: {
+        fontSize: 44,
+        lineHeight: 1.1818181818,
+        fontWeight: 700,
+        letterSpacing: -1.32
+      },
+      label: {
+        fontSize: 14,
+        lineHeight: 1.1428571429,
+        fontWeight: 500,
+        letterSpacing: -0.42
+      },
+      "label-small": {
+        fontSize: 12,
+        lineHeight: 1,
+        fontWeight: 500,
+        letterSpacing: -0.36
+      },
+      caption: {
+        fontSize: 12,
+        lineHeight: 1.3333333333,
+        fontWeight: 500,
+        letterSpacing: 0
+      },
+      overline: {
+        fontSize: 11,
+        lineHeight: 1.4545454545,
+        fontWeight: 500,
+        letterSpacing: 0.88,
+        textTransform: "uppercase"
+      },
+      micro: {
+        fontSize: 11,
+        lineHeight: 1.2727272727,
+        fontWeight: 400,
+        letterSpacing: -0.33
+      }
+    },
     paragraph: {
       sm: {
         fontSize: 14,
@@ -423,7 +559,9 @@ var darkThemeDefaults = {
     // Background & Surface
     background: "#0F0F0F",
     surface: "#1A1A1A",
+    surfacePrimary: "#0F0F0F",
     surfaceSubtle: "#050505",
+    surfaceBrand: "#090A32",
     surfaceElevated: "#2B2B2B",
     surfaceDisabled: "#1A1A1A",
     surfaceInverted: "#FFFFFF",
@@ -433,17 +571,54 @@ var darkThemeDefaults = {
     textSubtle: "#595959",
     textDisabled: "#595959",
     textInverted: "#141414",
+    textBrand: "#8182FC",
+    textLink: "#8182FC",
+    iconMuted: "#595959",
     // Borders
+    borderLow: "#FFFFFF26",
     border: "#474747",
     borderSubtle: "#474747",
     borderStrong: "#A3A3A3",
     borderDisabled: "#474747",
+    borderBrand: "#5859FC",
+    borderFull: "#FFFFFF",
     // Focus
     focus: "#8182FC",
     // Semantic colors
     danger: "#FF002C",
     success: "#90CAAD",
-    warning: "#FCC94A"
+    warning: "#FCC94A",
+    status: {
+      success: {
+        background: "#001A0C",
+        text: "#90CAAD",
+        icon: "#5DB189",
+        border: "#5DB189",
+        borderStrong: "#006D48"
+      },
+      warning: {
+        background: "#221004",
+        text: "#FCC94A",
+        icon: "#F9B21A",
+        border: "#E46F00",
+        borderAccessible: "#B45309",
+        borderStrong: "#B45308"
+      },
+      error: {
+        background: "#240006",
+        text: "#FF5566",
+        icon: "#FF2847",
+        border: "#FF2847",
+        borderStrong: "#FF2847"
+      },
+      info: {
+        background: "#040519",
+        text: "#ABABFD",
+        icon: "#8182FC",
+        border: "#8182FC",
+        borderStrong: "#252599"
+      }
+    }
   },
   font: {
     primary: "'Instrument Sans', Inter, system-ui, sans-serif",
@@ -454,7 +629,14 @@ var darkThemeDefaults = {
     radius: 4,
     density: "comfortable"
   },
+  breakpoint: defaultThemeBreakpoints,
   typography: {
+    display: {
+      fontSize: 44,
+      lineHeight: 1.1818181818,
+      fontWeight: 700,
+      letterSpacing: -1.32
+    },
     h1: {
       fontSize: 32,
       lineHeight: 1.1875,
@@ -473,6 +655,45 @@ var darkThemeDefaults = {
       fontWeight: 500,
       letterSpacing: -0.6
     },
+    text: {
+      display: {
+        fontSize: 44,
+        lineHeight: 1.1818181818,
+        fontWeight: 700,
+        letterSpacing: -1.32
+      },
+      label: {
+        fontSize: 14,
+        lineHeight: 1.1428571429,
+        fontWeight: 500,
+        letterSpacing: -0.42
+      },
+      "label-small": {
+        fontSize: 12,
+        lineHeight: 1,
+        fontWeight: 500,
+        letterSpacing: -0.36
+      },
+      caption: {
+        fontSize: 12,
+        lineHeight: 1.3333333333,
+        fontWeight: 500,
+        letterSpacing: 0
+      },
+      overline: {
+        fontSize: 11,
+        lineHeight: 1.4545454545,
+        fontWeight: 500,
+        letterSpacing: 0.88,
+        textTransform: "uppercase"
+      },
+      micro: {
+        fontSize: 11,
+        lineHeight: 1.2727272727,
+        fontWeight: 400,
+        letterSpacing: -0.33
+      }
+    },
     paragraph: {
       sm: {
         fontSize: 14,
@@ -625,6 +846,7 @@ var darkDefaultColorRoles = {
 };
 function resolveThemeInput(input) {
   const mode = input.mode ?? ThemeMode.light;
+  const personality = input.personality ?? "flat";
   const colorBase = mode === ThemeMode.dark ? darkThemeDefaults.color : lightThemeDefaults.color;
   const defaultColorRoles = mode === ThemeMode.dark ? darkDefaultColorRoles : lightDefaultColorRoles;
   const base = lightThemeDefaults;
@@ -637,6 +859,7 @@ function resolveThemeInput(input) {
   const info = input.color?.primary === void 0 ? normalizeColorInput(defaultColorRoles.info) : resolveInfoRole(primary);
   return {
     mode,
+    personality,
     color: {
       primary,
       secondary,
@@ -646,7 +869,9 @@ function resolveThemeInput(input) {
       info,
       background: input.color?.background ?? colorBase.background,
       surface: input.color?.surface ?? colorBase.surface,
+      surfacePrimary: input.color?.surfacePrimary ?? colorBase.surfacePrimary,
       surfaceSubtle: input.color?.surfaceSubtle ?? colorBase.surfaceSubtle,
+      surfaceBrand: input.color?.surfaceBrand ?? colorBase.surfaceBrand,
       surfaceElevated: input.color?.surfaceElevated ?? colorBase.surfaceElevated,
       surfaceDisabled: input.color?.surfaceDisabled ?? colorBase.surfaceDisabled,
       surfaceInverted: input.color?.surfaceInverted ?? colorBase.surfaceInverted,
@@ -655,18 +880,63 @@ function resolveThemeInput(input) {
       textSubtle: input.color?.textSubtle ?? colorBase.textSubtle,
       textDisabled: input.color?.textDisabled ?? colorBase.textDisabled,
       textInverted: input.color?.textInverted ?? colorBase.textInverted,
+      textBrand: colorBase.textBrand,
+      textLink: input.color?.textLink ?? colorBase.textLink,
+      iconMuted: input.color?.iconMuted ?? colorBase.iconMuted,
+      borderLow: input.color?.borderLow ?? colorBase.borderLow,
       border: input.color?.border ?? colorBase.border,
       borderSubtle: input.color?.borderSubtle ?? colorBase.borderSubtle,
       borderStrong: input.color?.borderStrong ?? colorBase.borderStrong,
       borderDisabled: input.color?.borderDisabled ?? colorBase.borderDisabled,
-      focus: input.color?.focus ?? colorBase.focus
+      borderBrand: colorBase.borderBrand,
+      borderFull: input.color?.borderFull ?? colorBase.borderFull,
+      focus: input.color?.focus ?? colorBase.focus,
+      status: colorBase.status
     },
     font: { ...base.font, ...tone.font, ...input.font },
     ui: { ...base.ui, ...tone.ui, ...input.ui },
+    breakpoint: { ...defaultThemeBreakpoints, ...input.breakpoint },
     typography: {
+      display: {
+        ...base.typography.display,
+        ...tone.typography?.display,
+        ...input.typography?.display
+      },
       h1: { ...base.typography.h1, ...tone.typography?.h1, ...input.typography?.h1 },
       h2: { ...base.typography.h2, ...tone.typography?.h2, ...input.typography?.h2 },
       h3: { ...base.typography.h3, ...tone.typography?.h3, ...input.typography?.h3 },
+      text: {
+        display: {
+          ...base.typography.text.display,
+          ...tone.typography?.text?.display,
+          ...input.typography?.text?.display
+        },
+        label: {
+          ...base.typography.text.label,
+          ...tone.typography?.text?.label,
+          ...input.typography?.text?.label
+        },
+        "label-small": {
+          ...base.typography.text["label-small"],
+          ...tone.typography?.text?.["label-small"],
+          ...input.typography?.text?.["label-small"]
+        },
+        caption: {
+          ...base.typography.text.caption,
+          ...tone.typography?.text?.caption,
+          ...input.typography?.text?.caption
+        },
+        overline: {
+          ...base.typography.text.overline,
+          ...tone.typography?.text?.overline,
+          ...input.typography?.text?.overline
+        },
+        micro: {
+          ...base.typography.text.micro,
+          ...tone.typography?.text?.micro,
+          ...input.typography?.text?.micro
+        }
+      },
       paragraph: {
         sm: {
           ...base.typography.paragraph.sm,
@@ -739,6 +1009,21 @@ function serializeScriptData(value) {
 function mwVar(name, fallback) {
   return fallback === void 0 ? `var(${name})` : `var(${name}, ${fallback})`;
 }
+function createMwThemeMedia(breakpoint) {
+  return {
+    mobileAndAbove: `@media (min-width: ${breakpoint.mobile}px)`,
+    tabletAndAbove: `@media (min-width: ${breakpoint.tablet}px)`,
+    desktopAndAbove: `@media (min-width: ${breakpoint.desktop}px)`,
+    wideDesktopAndAbove: `@media (min-width: ${breakpoint.wideDesktop}px)`,
+    mobileAndBelow: `@media (max-width: ${formatMaxBreakpoint(breakpoint.mobile)}px)`,
+    tabletAndBelow: `@media (max-width: ${formatMaxBreakpoint(breakpoint.tablet)}px)`,
+    desktopAndBelow: `@media (max-width: ${formatMaxBreakpoint(breakpoint.desktop)}px)`,
+    wideDesktopAndBelow: `@media (max-width: ${formatMaxBreakpoint(breakpoint.wideDesktop)}px)`
+  };
+}
+function formatMaxBreakpoint(value) {
+  return `${Number((value - 0.02).toFixed(2))}`;
+}
 var mwThemeVarNames = {
   color: {
     primary: {
@@ -793,7 +1078,9 @@ var mwThemeVarNames = {
     },
     background: "--mw-color-background",
     surface: "--mw-color-surface",
+    surfacePrimary: "--mw-color-surface-primary",
     surfaceSubtle: "--mw-color-surface-subtle",
+    surfaceBrand: "--mw-color-surface-brand",
     surfaceElevated: "--mw-color-surface-elevated",
     surfaceDisabled: "--mw-color-surface-disabled",
     surfaceInverted: "--mw-color-surface-inverted",
@@ -802,17 +1089,55 @@ var mwThemeVarNames = {
     textSubtle: "--mw-color-text-subtle",
     textDisabled: "--mw-color-text-disabled",
     textInverted: "--mw-color-text-inverted",
+    textBrand: "--mw-color-text-brand",
+    textLink: "--mw-color-text-link",
+    iconMuted: "--mw-color-icon-muted",
+    borderLow: "--mw-color-border-low",
     border: "--mw-color-border",
     borderSubtle: "--mw-color-border-subtle",
     borderStrong: "--mw-color-border-strong",
     borderDisabled: "--mw-color-border-disabled",
-    focus: "--mw-color-focus"
+    borderBrand: "--mw-color-border-brand",
+    borderFull: "--mw-color-border-full",
+    focus: "--mw-color-focus",
+    status: {
+      success: {
+        background: "--mw-color-status-success-background",
+        text: "--mw-color-status-success-text",
+        icon: "--mw-color-status-success-icon",
+        border: "--mw-color-status-success-border",
+        borderStrong: "--mw-color-status-success-border-strong"
+      },
+      warning: {
+        background: "--mw-color-status-warning-background",
+        text: "--mw-color-status-warning-text",
+        icon: "--mw-color-status-warning-icon",
+        border: "--mw-color-status-warning-border",
+        borderAccessible: "--mw-color-status-warning-border-accessible",
+        borderStrong: "--mw-color-status-warning-border-strong"
+      },
+      error: {
+        background: "--mw-color-status-error-background",
+        text: "--mw-color-status-error-text",
+        icon: "--mw-color-status-error-icon",
+        border: "--mw-color-status-error-border",
+        borderStrong: "--mw-color-status-error-border-strong"
+      },
+      info: {
+        background: "--mw-color-status-info-background",
+        text: "--mw-color-status-info-text",
+        icon: "--mw-color-status-info-icon",
+        border: "--mw-color-status-info-border",
+        borderStrong: "--mw-color-status-info-border-strong"
+      }
+    }
   },
   spacing: {
     sp0: "--mw-spacing-sp-0",
     sp2: "--mw-spacing-sp-2",
     sp4: "--mw-spacing-sp-4",
     sp8: "--mw-spacing-sp-8",
+    sp12: "--mw-spacing-sp-12",
     sp16: "--mw-spacing-sp-16",
     sp24: "--mw-spacing-sp-24",
     sp32: "--mw-spacing-sp-32",
@@ -849,6 +1174,12 @@ var mwThemeVarNames = {
     fontSizeSm: "--mw-density-font-size-sm"
   },
   typography: {
+    display: {
+      fontSize: "--mw-typography-display-font-size",
+      lineHeight: "--mw-typography-display-line-height",
+      fontWeight: "--mw-typography-display-font-weight",
+      letterSpacing: "--mw-typography-display-letter-spacing"
+    },
     h1: {
       fontSize: "--mw-typography-h1-font-size",
       lineHeight: "--mw-typography-h1-line-height",
@@ -867,6 +1198,50 @@ var mwThemeVarNames = {
       fontWeight: "--mw-typography-h3-font-weight",
       letterSpacing: "--mw-typography-h3-letter-spacing"
     },
+    text: {
+      display: {
+        fontSize: "--mw-typography-text-display-font-size",
+        lineHeight: "--mw-typography-text-display-line-height",
+        fontWeight: "--mw-typography-text-display-font-weight",
+        letterSpacing: "--mw-typography-text-display-letter-spacing",
+        textTransform: "--mw-typography-text-display-transform"
+      },
+      label: {
+        fontSize: "--mw-typography-text-label-font-size",
+        lineHeight: "--mw-typography-text-label-line-height",
+        fontWeight: "--mw-typography-text-label-font-weight",
+        letterSpacing: "--mw-typography-text-label-letter-spacing",
+        textTransform: "--mw-typography-text-label-transform"
+      },
+      "label-small": {
+        fontSize: "--mw-typography-text-label-small-font-size",
+        lineHeight: "--mw-typography-text-label-small-line-height",
+        fontWeight: "--mw-typography-text-label-small-font-weight",
+        letterSpacing: "--mw-typography-text-label-small-letter-spacing",
+        textTransform: "--mw-typography-text-label-small-transform"
+      },
+      caption: {
+        fontSize: "--mw-typography-text-caption-font-size",
+        lineHeight: "--mw-typography-text-caption-line-height",
+        fontWeight: "--mw-typography-text-caption-font-weight",
+        letterSpacing: "--mw-typography-text-caption-letter-spacing",
+        textTransform: "--mw-typography-text-caption-transform"
+      },
+      overline: {
+        fontSize: "--mw-typography-text-overline-font-size",
+        lineHeight: "--mw-typography-text-overline-line-height",
+        fontWeight: "--mw-typography-text-overline-font-weight",
+        letterSpacing: "--mw-typography-text-overline-letter-spacing",
+        textTransform: "--mw-typography-text-overline-transform"
+      },
+      micro: {
+        fontSize: "--mw-typography-text-micro-font-size",
+        lineHeight: "--mw-typography-text-micro-line-height",
+        fontWeight: "--mw-typography-text-micro-font-weight",
+        letterSpacing: "--mw-typography-text-micro-letter-spacing",
+        textTransform: "--mw-typography-text-micro-transform"
+      }
+    },
     paragraph: {
       sm: {
         fontSize: "--mw-typography-paragraph-sm-font-size",
@@ -937,7 +1312,9 @@ var mwThemeVars = {
     },
     background: "var(--mw-color-background)",
     surface: "var(--mw-color-surface)",
+    surfacePrimary: "var(--mw-color-surface-primary)",
     surfaceSubtle: "var(--mw-color-surface-subtle)",
+    surfaceBrand: "var(--mw-color-surface-brand)",
     surfaceElevated: "var(--mw-color-surface-elevated)",
     surfaceDisabled: "var(--mw-color-surface-disabled)",
     surfaceInverted: "var(--mw-color-surface-inverted)",
@@ -946,17 +1323,55 @@ var mwThemeVars = {
     textSubtle: "var(--mw-color-text-subtle)",
     textDisabled: "var(--mw-color-text-disabled)",
     textInverted: "var(--mw-color-text-inverted)",
+    textBrand: "var(--mw-color-text-brand)",
+    textLink: "var(--mw-color-text-link)",
+    iconMuted: "var(--mw-color-icon-muted)",
+    borderLow: "var(--mw-color-border-low)",
     border: "var(--mw-color-border)",
     borderSubtle: "var(--mw-color-border-subtle)",
     borderStrong: "var(--mw-color-border-strong)",
     borderDisabled: "var(--mw-color-border-disabled)",
-    focus: "var(--mw-color-focus)"
+    borderBrand: "var(--mw-color-border-brand)",
+    borderFull: "var(--mw-color-border-full)",
+    focus: "var(--mw-color-focus)",
+    status: {
+      success: {
+        background: "var(--mw-color-status-success-background)",
+        text: "var(--mw-color-status-success-text)",
+        icon: "var(--mw-color-status-success-icon)",
+        border: "var(--mw-color-status-success-border)",
+        borderStrong: "var(--mw-color-status-success-border-strong)"
+      },
+      warning: {
+        background: "var(--mw-color-status-warning-background)",
+        text: "var(--mw-color-status-warning-text)",
+        icon: "var(--mw-color-status-warning-icon)",
+        border: "var(--mw-color-status-warning-border)",
+        borderAccessible: "var(--mw-color-status-warning-border-accessible)",
+        borderStrong: "var(--mw-color-status-warning-border-strong)"
+      },
+      error: {
+        background: "var(--mw-color-status-error-background)",
+        text: "var(--mw-color-status-error-text)",
+        icon: "var(--mw-color-status-error-icon)",
+        border: "var(--mw-color-status-error-border)",
+        borderStrong: "var(--mw-color-status-error-border-strong)"
+      },
+      info: {
+        background: "var(--mw-color-status-info-background)",
+        text: "var(--mw-color-status-info-text)",
+        icon: "var(--mw-color-status-info-icon)",
+        border: "var(--mw-color-status-info-border)",
+        borderStrong: "var(--mw-color-status-info-border-strong)"
+      }
+    }
   },
   spacing: {
     sp0: "var(--mw-spacing-sp-0)",
     sp2: "var(--mw-spacing-sp-2)",
     sp4: "var(--mw-spacing-sp-4)",
     sp8: "var(--mw-spacing-sp-8)",
+    sp12: "var(--mw-spacing-sp-12)",
     sp16: "var(--mw-spacing-sp-16)",
     sp24: "var(--mw-spacing-sp-24)",
     sp32: "var(--mw-spacing-sp-32)",
@@ -993,6 +1408,12 @@ var mwThemeVars = {
     fontSizeSm: "var(--mw-density-font-size-sm)"
   },
   typography: {
+    display: {
+      fontSize: "var(--mw-typography-display-font-size)",
+      lineHeight: "var(--mw-typography-display-line-height)",
+      fontWeight: "var(--mw-typography-display-font-weight)",
+      letterSpacing: "var(--mw-typography-display-letter-spacing)"
+    },
     h1: {
       fontSize: "var(--mw-typography-h1-font-size)",
       lineHeight: "var(--mw-typography-h1-line-height)",
@@ -1011,6 +1432,50 @@ var mwThemeVars = {
       fontWeight: "var(--mw-typography-h3-font-weight)",
       letterSpacing: "var(--mw-typography-h3-letter-spacing)"
     },
+    text: {
+      display: {
+        fontSize: "var(--mw-typography-text-display-font-size)",
+        lineHeight: "var(--mw-typography-text-display-line-height)",
+        fontWeight: "var(--mw-typography-text-display-font-weight)",
+        letterSpacing: "var(--mw-typography-text-display-letter-spacing)",
+        textTransform: "var(--mw-typography-text-display-transform)"
+      },
+      label: {
+        fontSize: "var(--mw-typography-text-label-font-size)",
+        lineHeight: "var(--mw-typography-text-label-line-height)",
+        fontWeight: "var(--mw-typography-text-label-font-weight)",
+        letterSpacing: "var(--mw-typography-text-label-letter-spacing)",
+        textTransform: "var(--mw-typography-text-label-transform)"
+      },
+      "label-small": {
+        fontSize: "var(--mw-typography-text-label-small-font-size)",
+        lineHeight: "var(--mw-typography-text-label-small-line-height)",
+        fontWeight: "var(--mw-typography-text-label-small-font-weight)",
+        letterSpacing: "var(--mw-typography-text-label-small-letter-spacing)",
+        textTransform: "var(--mw-typography-text-label-small-transform)"
+      },
+      caption: {
+        fontSize: "var(--mw-typography-text-caption-font-size)",
+        lineHeight: "var(--mw-typography-text-caption-line-height)",
+        fontWeight: "var(--mw-typography-text-caption-font-weight)",
+        letterSpacing: "var(--mw-typography-text-caption-letter-spacing)",
+        textTransform: "var(--mw-typography-text-caption-transform)"
+      },
+      overline: {
+        fontSize: "var(--mw-typography-text-overline-font-size)",
+        lineHeight: "var(--mw-typography-text-overline-line-height)",
+        fontWeight: "var(--mw-typography-text-overline-font-weight)",
+        letterSpacing: "var(--mw-typography-text-overline-letter-spacing)",
+        textTransform: "var(--mw-typography-text-overline-transform)"
+      },
+      micro: {
+        fontSize: "var(--mw-typography-text-micro-font-size)",
+        lineHeight: "var(--mw-typography-text-micro-line-height)",
+        fontWeight: "var(--mw-typography-text-micro-font-weight)",
+        letterSpacing: "var(--mw-typography-text-micro-letter-spacing)",
+        textTransform: "var(--mw-typography-text-micro-transform)"
+      }
+    },
     paragraph: {
       sm: {
         fontSize: "var(--mw-typography-paragraph-sm-font-size)",
@@ -1027,7 +1492,19 @@ var mwThemeVars = {
     }
   }
 };
-var mwStyledTheme = mwThemeVars;
+function createMwTheme(theme) {
+  return {
+    ...mwThemeVars,
+    breakpoint: theme.breakpoint,
+    media: createMwThemeMedia(theme.breakpoint)
+  };
+}
+var mwTheme = {
+  ...mwThemeVars,
+  breakpoint: defaultThemeBreakpoints,
+  media: createMwThemeMedia(defaultThemeBreakpoints)
+};
+var mwStyledTheme = mwTheme;
 
 // src/theme/font-loader.ts
 var mwFontFallbacks = {
@@ -1144,9 +1621,13 @@ function shouldLoadGoogleFont(name, config = "auto") {
 }
 function extractUsedWeights(typography) {
   const weights = /* @__PURE__ */ new Set([400, 500]);
+  if (typography.display) weights.add(typography.display.fontWeight);
   weights.add(typography.h1.fontWeight);
   weights.add(typography.h2.fontWeight);
   weights.add(typography.h3.fontWeight);
+  for (const textStyle of Object.values(typography.text ?? {})) {
+    weights.add(textStyle.fontWeight);
+  }
   return [...weights].sort((a, b) => a - b);
 }
 
@@ -1167,7 +1648,17 @@ var canonicalSemanticAttributeNames = [
   "data-orientation"
 ];
 var semanticLayers = ["atom", "molecule", "purpose"];
-var semanticFamilies = ["button", "badge", "avatar", "toast", "dialog"];
+var semanticFamilies = [
+  "button",
+  "badge",
+  "banner",
+  "avatar",
+  "toast",
+  "dialog",
+  "drawer",
+  "context-menu",
+  "breadcrumb"
+];
 var semanticIntents = [
   "success",
   "error",
@@ -1207,12 +1698,19 @@ var toastPurposes = [
   "warning-toast",
   "info-toast"
 ];
+var bannerPurposes = [
+  "info-banner",
+  "success-banner",
+  "warning-banner",
+  "error-banner"
+];
 var dialogPurposes = ["confirm-dialog", "destructive-dialog", "info-dialog"];
 var semanticPurposes = [
   ...buttonPurposes,
   ...badgePurposes,
   ...avatarPurposes,
   ...toastPurposes,
+  ...bannerPurposes,
   ...dialogPurposes
 ];
 
@@ -1281,7 +1779,7 @@ var canonicalSemanticAttributes = {
     name: "data-destructive",
     description: "Boolean marker for destructive actions or flows.",
     allowedValues: ["true", "false"],
-    applicableFamilies: ["button", "dialog"],
+    applicableFamilies: ["button", "dialog", "context-menu"],
     applicableLayers: semanticLayers
   },
   "data-confirmation-required": {
@@ -1355,6 +1853,16 @@ var familySemanticsRegistry = {
     allowedPurposes: ["status", "priority", "notification"],
     notes: "Badge needs base family identity normalized before full parity governance."
   },
+  banner: {
+    family: "banner",
+    defaultLayer: "atom",
+    baseAttributes: {
+      "data-component": "banner"
+    },
+    canonicalAttributes: ["data-component", "data-variant"],
+    allowedPurposes: ["info-banner", "success-banner", "warning-banner", "error-banner"],
+    notes: "Banner is a single-atom family with thin purpose variants that preset the variant prop and emit canonical data-purpose metadata."
+  },
   avatar: {
     family: "avatar",
     defaultLayer: "atom",
@@ -1384,6 +1892,36 @@ var familySemanticsRegistry = {
     canonicalAttributes: ["data-component", "data-size", "data-intent"],
     allowedPurposes: ["confirm-dialog", "destructive-dialog", "info-dialog"],
     notes: "Dialog already has a strong purpose mapping and workflow semantics in adapters."
+  },
+  drawer: {
+    family: "drawer",
+    defaultLayer: "atom",
+    baseAttributes: {
+      "data-component": "drawer"
+    },
+    canonicalAttributes: ["data-component", "data-size"],
+    allowedPurposes: [],
+    notes: "Drawer shares dialog semantics while adding panel placement and scrim composition at the family level."
+  },
+  "context-menu": {
+    family: "context-menu",
+    defaultLayer: "atom",
+    baseAttributes: {
+      "data-component": "context-menu"
+    },
+    canonicalAttributes: ["data-component", "data-destructive"],
+    allowedPurposes: [],
+    notes: "ContextMenu exposes a menu surface and button-backed menu items while popover/open-state orchestration stays adapter-owned."
+  },
+  breadcrumb: {
+    family: "breadcrumb",
+    defaultLayer: "atom",
+    baseAttributes: {
+      "data-component": "breadcrumb"
+    },
+    canonicalAttributes: ["data-component"],
+    allowedPurposes: [],
+    notes: "Breadcrumb exposes navigation hierarchy while routing, link resolution, and page ownership stay consumer-owned."
   }
 };
 
@@ -1687,6 +2225,48 @@ var toastPurposeSemantics = {
     supportedFrameworks: frameworks
   }
 };
+var bannerPurposeSemantics = {
+  infoBanner: {
+    purpose: "info-banner",
+    family: "banner",
+    layer: "purpose",
+    attributes: {
+      "data-purpose": "info-banner",
+      "data-intent": "info"
+    },
+    supportedFrameworks: frameworks
+  },
+  successBanner: {
+    purpose: "success-banner",
+    family: "banner",
+    layer: "purpose",
+    attributes: {
+      "data-purpose": "success-banner",
+      "data-intent": "success"
+    },
+    supportedFrameworks: frameworks
+  },
+  warningBanner: {
+    purpose: "warning-banner",
+    family: "banner",
+    layer: "purpose",
+    attributes: {
+      "data-purpose": "warning-banner",
+      "data-intent": "warning"
+    },
+    supportedFrameworks: frameworks
+  },
+  errorBanner: {
+    purpose: "error-banner",
+    family: "banner",
+    layer: "purpose",
+    attributes: {
+      "data-purpose": "error-banner",
+      "data-intent": "error"
+    },
+    supportedFrameworks: frameworks
+  }
+};
 var dialogPurposeSemantics = {
   confirmDialog: {
     purpose: "confirm-dialog",
@@ -1726,6 +2306,7 @@ var purposeSemanticsRegistry = {
   ...badgePurposeSemantics,
   ...avatarPurposeSemantics,
   ...toastPurposeSemantics,
+  ...bannerPurposeSemantics,
   ...dialogPurposeSemantics
 };
 
@@ -3742,7 +4323,8 @@ var buttonVariantVisualStyles = [
   { label: "secondary", text: "Outlined, brand-accent emphasis (action utilities)" },
   { label: "neutral", text: "Outlined, low-chroma emphasis (cancel/close/filter actions)" },
   { label: "text", text: "Minimal, low emphasis (tertiary/inline actions)" },
-  { label: "success", text: "Filled, positive emphasis (confirm actions)" }
+  { label: "success", text: "Filled, positive emphasis (confirm actions)" },
+  { label: "danger", text: "Filled, destructive emphasis (delete/discard actions)" }
 ];
 var buttonActionSemanticPurposes = [
   { label: "submit", text: "Form submission" },
@@ -4208,14 +4790,15 @@ function resolveAvatarA11y(options, resolvedType, normalizedInitials) {
     };
   }
   if (resolvedType === AvatarType.image) {
-    if (__DEV__ && !options.alt && !options.ariaLabel) {
+    const imageAccessibleLabel = options.ariaLabel ?? options.label;
+    if (__DEV__ && !options.alt && !imageAccessibleLabel) {
       console.warn(
-        "[marwes] Avatar: an image avatar was rendered without alt text or ariaLabel. Provide alt to describe the person, or ariaLabel as a fallback, or use decorative={true} to explicitly mark it as presentational."
+        "[marwes] Avatar: an image avatar was rendered without alt text, ariaLabel, or label. Provide alt to describe the person, ariaLabel/label as a fallback, or use decorative={true} to explicitly mark it as presentational."
       );
     }
     return {};
   }
-  const accessibleLabel = options.ariaLabel ?? normalizedInitials ?? "Avatar";
+  const accessibleLabel = options.ariaLabel ?? options.label ?? normalizedInitials ?? "Avatar";
   return {
     role: "img",
     ariaLabel: accessibleLabel
@@ -4368,6 +4951,305 @@ function createDialogRecipe(opts = {}) {
   };
 }
 
+// src/components/atoms/drawer/drawer-a11y.ts
+function resolveDrawerA11y(opts) {
+  const a11y = {
+    role: "dialog"
+  };
+  if (opts.modal) {
+    a11y.ariaModal = true;
+  }
+  if (opts.ariaLabel) {
+    a11y.ariaLabel = opts.ariaLabel;
+  }
+  if (opts.ariaLabelledBy) {
+    a11y.ariaLabelledBy = opts.ariaLabelledBy;
+  }
+  if (opts.ariaDescribedBy) {
+    a11y.ariaDescribedBy = opts.ariaDescribedBy;
+  }
+  return a11y;
+}
+
+// src/components/atoms/drawer/drawer-recipe.ts
+function cx4(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function createDrawerRecipe(opts = {}) {
+  const size = opts.size ?? "medium";
+  const placement = opts.placement ?? "right";
+  const showFooter = opts.showFooter ?? true;
+  const showCloseButton = opts.dismissible ?? true;
+  const showScrim = opts.showScrim ?? true;
+  const rootDataAttributes = {
+    ...createFamilySemanticAttributes("drawer", {
+      "data-size": size
+    }),
+    "data-placement": placement,
+    "data-footer": showFooter ? "true" : "false",
+    "data-dismissible": showCloseButton ? "true" : "false",
+    "data-scrim": showScrim ? "true" : "false",
+    ...opts.dataAttributes
+  };
+  return {
+    tag: "div",
+    className: cx4(
+      "mw-drawer",
+      `mw-drawer--${placement}`,
+      `mw-drawer--${size}`,
+      showFooter ? "mw-drawer--with-footer" : "mw-drawer--without-footer",
+      showScrim && "mw-drawer--with-scrim",
+      showCloseButton && "mw-drawer--dismissible"
+    ),
+    vars: {},
+    size,
+    placement,
+    showFooter,
+    showCloseButton,
+    showScrim,
+    dataAttributes: rootDataAttributes,
+    panel: {
+      tag: "div",
+      className: "mw-drawer__panel",
+      vars: {},
+      a11y: resolveDrawerA11y(opts),
+      dataAttributes: {
+        ...rootDataAttributes,
+        "data-part": "panel"
+      }
+    },
+    scrim: {
+      tag: "div",
+      className: "mw-drawer__scrim",
+      vars: {},
+      dataAttributes: {
+        "data-component": "drawer",
+        "data-part": "scrim",
+        "data-placement": placement
+      }
+    }
+  };
+}
+
+// src/components/atoms/context-menu/context-menu-a11y.ts
+function resolveContextMenuA11y(options = {}) {
+  return {
+    role: "menu",
+    ariaLabel: options.ariaLabel ?? "Context menu"
+  };
+}
+function resolveContextMenuItemA11y(disabled = false) {
+  return {
+    role: "menuitem",
+    type: "button",
+    ...disabled ? {
+      disabled: true,
+      ariaDisabled: "true"
+    } : {}
+  };
+}
+function resolveContextMenuDividerA11y() {
+  return {
+    role: "separator",
+    ariaOrientation: "horizontal"
+  };
+}
+
+// src/components/atoms/context-menu/context-menu-recipe.ts
+function cx5(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function isActionItem(item) {
+  return item.kind !== "divider";
+}
+function createContextMenuItemKey(item, index) {
+  if (isActionItem(item)) {
+    return `item-${item.value}`;
+  }
+  return item.id ?? `divider-${index}`;
+}
+function createContextMenuRecipe(options = {}) {
+  const rootDataAttributes = {
+    ...createFamilySemanticAttributes("context-menu"),
+    ...options.dataAttributes
+  };
+  return {
+    tag: "div",
+    className: "mw-context-menu",
+    vars: {},
+    a11y: resolveContextMenuA11y(options),
+    dataAttributes: rootDataAttributes,
+    items: (options.items ?? []).map((item, index) => {
+      const key = createContextMenuItemKey(item, index);
+      if (!isActionItem(item)) {
+        return {
+          kind: "divider",
+          key,
+          item,
+          className: "mw-context-menu__divider",
+          vars: {},
+          a11y: resolveContextMenuDividerA11y(),
+          dataAttributes: {
+            "data-component": "context-menu",
+            "data-part": "divider",
+            ...item.dataAttributes
+          }
+        };
+      }
+      const disabled = item.disabled ?? false;
+      const destructive = item.destructive ?? false;
+      return {
+        kind: "item",
+        key,
+        item,
+        label: item.label,
+        value: item.value,
+        ...item.icon ? { icon: item.icon } : {},
+        className: cx5(
+          "mw-context-menu__item",
+          destructive && "mw-context-menu__item--destructive",
+          disabled && "mw-context-menu__item--disabled"
+        ),
+        vars: {},
+        a11y: resolveContextMenuItemA11y(disabled),
+        dataAttributes: {
+          "data-component": "context-menu",
+          "data-part": "item",
+          "data-value": item.value,
+          "data-disabled": disabled ? "true" : void 0,
+          "data-destructive": destructive ? "true" : void 0,
+          ...item.dataAttributes
+        }
+      };
+    })
+  };
+}
+
+// src/components/atoms/breadcrumb/breadcrumb-a11y.ts
+function resolveBreadcrumbA11y(options = {}) {
+  return {
+    ariaLabel: options.ariaLabel ?? "Breadcrumb"
+  };
+}
+function resolveBreadcrumbListA11y() {
+  return {
+    role: "list"
+  };
+}
+function resolveBreadcrumbSeparatorA11y() {
+  return {
+    ariaHidden: true
+  };
+}
+function resolveBreadcrumbHomeA11y(homeLabel) {
+  return {
+    ariaLabel: homeLabel
+  };
+}
+function resolveBreadcrumbItemA11y(item, current) {
+  return {
+    ...current ? { ariaCurrent: "page" } : {},
+    ...item.ariaLabel ? { ariaLabel: item.ariaLabel } : {}
+  };
+}
+
+// src/components/atoms/breadcrumb/breadcrumb-recipe.ts
+function cx6(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function createItemKey(item, index) {
+  return item.id ?? item.value ?? `${index}-${item.href ?? item.label}`;
+}
+function resolveCurrentIndex(items) {
+  const explicitIndex = items.findIndex((item) => item.current === true);
+  if (explicitIndex >= 0) return explicitIndex;
+  return items.length - 1;
+}
+function createBreadcrumbItemRenderKit(item, index, currentIndex) {
+  const current = index === currentIndex;
+  const value = item.value ?? item.id ?? item.href ?? item.label;
+  return {
+    key: `item-${createItemKey(item, index)}`,
+    kind: "item",
+    item,
+    label: item.label,
+    value,
+    ...item.href ? { href: item.href } : {},
+    current,
+    className: cx6("mw-breadcrumb__item", current && "mw-breadcrumb__item--current"),
+    actionClassName: cx6("mw-breadcrumb__action", current && "mw-breadcrumb__current"),
+    vars: {},
+    a11y: resolveBreadcrumbItemA11y(item, current),
+    dataAttributes: {
+      "data-component": "breadcrumb",
+      "data-part": "item",
+      "data-current": current ? "true" : void 0,
+      "data-value": value,
+      ...item.dataAttributes
+    }
+  };
+}
+function createBreadcrumbRecipe(options = {}) {
+  const showHome = options.showHome ?? true;
+  const homeLabel = options.homeLabel ?? "Home";
+  const items = options.items ?? [];
+  const currentIndex = resolveCurrentIndex(items);
+  const rootDataAttributes = {
+    ...createFamilySemanticAttributes("breadcrumb"),
+    ...options.dataAttributes
+  };
+  return {
+    tag: "nav",
+    className: "mw-breadcrumb",
+    vars: {},
+    a11y: resolveBreadcrumbA11y(options),
+    dataAttributes: rootDataAttributes,
+    list: {
+      tag: "ol",
+      className: "mw-breadcrumb__list",
+      vars: {},
+      a11y: resolveBreadcrumbListA11y()
+    },
+    separator: {
+      tag: "span",
+      className: "mw-breadcrumb__separator",
+      vars: {},
+      a11y: resolveBreadcrumbSeparatorA11y()
+    },
+    items: [
+      ...showHome ? [
+        {
+          key: "home",
+          kind: "home",
+          label: homeLabel,
+          value: "home",
+          ...options.homeHref ? { href: options.homeHref } : {},
+          current: items.length === 0,
+          className: cx6(
+            "mw-breadcrumb__item",
+            "mw-breadcrumb__item--home",
+            items.length === 0 && "mw-breadcrumb__item--current"
+          ),
+          actionClassName: cx6(
+            "mw-breadcrumb__action",
+            "mw-breadcrumb__home",
+            items.length === 0 && "mw-breadcrumb__current"
+          ),
+          vars: {},
+          a11y: resolveBreadcrumbHomeA11y(homeLabel),
+          dataAttributes: {
+            "data-component": "breadcrumb",
+            "data-part": "home",
+            "data-current": items.length === 0 ? "true" : void 0,
+            "data-value": "home"
+          }
+        }
+      ] : [],
+      ...items.map((item, index) => createBreadcrumbItemRenderKit(item, index, currentIndex))
+    ]
+  };
+}
+
 // src/components/atoms/toast/toast-a11y.ts
 function resolveToastA11y(opts) {
   const ariaLive = opts.ariaLive ?? "polite";
@@ -4379,14 +5261,14 @@ function resolveToastA11y(opts) {
 }
 
 // src/components/atoms/toast/toast-recipe.ts
-function cx4(...parts) {
+function cx7(...parts) {
   return parts.filter(Boolean).join(" ");
 }
 function createToastRecipe(opts) {
   const variant = opts.variant ?? "outline";
   return {
     tag: "div",
-    className: cx4("mw-toast", `mw-toast--${variant}`),
+    className: cx7("mw-toast", `mw-toast--${variant}`),
     vars: {},
     a11y: resolveToastA11y(opts),
     dataAttributes: createFamilySemanticAttributes("toast", {
@@ -4419,19 +5301,20 @@ function createTooltipRecipe(options = {}) {
 // src/components/atoms/badge/badge-a11y.ts
 function resolveBadgeA11y(opts) {
   const a11y = {};
-  if (opts.ariaLabel) a11y.ariaLabel = opts.ariaLabel;
+  const accessibleLabel = opts.ariaLabel ?? opts.label;
+  if (accessibleLabel) a11y.ariaLabel = accessibleLabel;
   return a11y;
 }
 
 // src/components/atoms/badge/badge-recipe.ts
-function cx5(...parts) {
+function cx8(...parts) {
   return parts.filter(Boolean).join(" ");
 }
 function createBadgeRecipe(opts) {
   const variant = opts.variant ?? "neutral";
   return {
     tag: "span",
-    className: cx5("mw-badge", `mw-badge--${variant}`),
+    className: cx8("mw-badge", `mw-badge--${variant}`),
     vars: {},
     a11y: resolveBadgeA11y(opts),
     dataAttributes: createFamilySemanticAttributes("badge", {
@@ -4449,6 +5332,65 @@ var BadgeVariant = {
   error: "error"
 };
 
+// src/components/atoms/banner/banner-a11y.ts
+function resolveBannerA11y(opts) {
+  const variant = opts.variant ?? "neutral";
+  const isUrgent = variant === "error" || variant === "warning";
+  return {
+    role: isUrgent ? "alert" : "status",
+    ariaLabel: opts.ariaLabel,
+    ariaLive: isUrgent ? "assertive" : "polite"
+  };
+}
+
+// src/components/atoms/banner/banner-recipe.ts
+function cx9(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function createBannerRecipe(opts) {
+  const variant = opts.variant ?? "neutral";
+  const showIcon = opts.showIcon ?? true;
+  const showAction = opts.showAction ?? false;
+  const dismissible = opts.dismissible ?? true;
+  return {
+    root: {
+      className: cx9("mw-banner", `mw-banner--${variant}`),
+      a11y: resolveBannerA11y(opts),
+      dataAttributes: createFamilySemanticAttributes("banner", {
+        "data-variant": variant
+      })
+    },
+    content: {
+      className: "mw-banner__content"
+    },
+    icon: {
+      className: "mw-banner__icon",
+      visible: showIcon
+    },
+    message: {
+      className: "mw-banner__message"
+    },
+    action: {
+      className: "mw-banner__action",
+      visible: showAction
+    },
+    dismiss: {
+      className: "mw-banner__dismiss",
+      visible: dismissible,
+      ariaLabel: "Dismiss banner"
+    }
+  };
+}
+
+// src/components/atoms/banner/banner-types.ts
+var BannerVariant = {
+  neutral: "neutral",
+  info: "info",
+  success: "success",
+  warning: "warning",
+  error: "error"
+};
+
 // src/components/atoms/button/button-types.ts
 var ButtonSize = {
   xs: "xs",
@@ -4461,7 +5403,8 @@ var ButtonVariant = {
   secondary: "secondary",
   neutral: "neutral",
   text: "text",
-  success: "success"
+  success: "success",
+  danger: "danger"
 };
 var ButtonAction = {
   submit: "submit",
@@ -4540,13 +5483,21 @@ function resolveButtonA11y(opts, resolvedLoading) {
   const isDisabled = !!opts.disabled || resolvedLoading.isLoading && resolvedLoading.disableWhileLoading;
   if (__DEV__2) {
     const iconOnly = opts.iconOnly || opts.hasVisibleText === false;
+    const accessibleLabel = opts.ariaLabel ?? opts.label;
     const loadingAccessibleLabel = resolvedLoading.isLoading ? resolvedLoading.loadingLabel : void 0;
-    if (iconOnly && !opts.ariaLabel && !loadingAccessibleLabel) {
-      console.warn("[marwes] Icon-only Button requires ariaLabel, or loadingLabel while loading.");
+    if (iconOnly && !accessibleLabel && !loadingAccessibleLabel) {
+      console.warn(
+        "[marwes] Icon-only Button requires ariaLabel, label, or loadingLabel while loading."
+      );
     }
   }
   const common = {};
-  if (opts.ariaLabel) common.ariaLabel = opts.ariaLabel;
+  if (opts.ariaLabelledBy) {
+    common.ariaLabelledBy = opts.ariaLabelledBy;
+  } else {
+    const accessibleLabel = opts.ariaLabel ?? opts.label;
+    if (accessibleLabel) common.ariaLabel = accessibleLabel;
+  }
   if (resolvedLoading.isLoading) common.ariaBusy = true;
   if (isDisabled) common.ariaDisabled = true;
   if (opts.toggle) common.ariaPressed = !!opts.pressed;
@@ -4577,6 +5528,7 @@ function createButtonRecipe(opts) {
   const size = opts.size ?? "md";
   const variant = opts.variant ?? "primary";
   const action = opts.action ?? (tag === "button" ? "button" : "navigate");
+  const hasAffordance = resolvedLoading.isLoading || Boolean(opts.iconLeft || opts.iconRight);
   return {
     tag,
     blockClick,
@@ -4598,6 +5550,8 @@ function createButtonRecipe(opts) {
         "data-size": size
       }),
       "data-error": opts.error ? "true" : void 0,
+      "data-has-affordance": hasAffordance ? "true" : void 0,
+      "data-icon-only": opts.iconOnly ? "true" : void 0,
       ...opts.dataAttributes
     },
     vars: {}
@@ -4612,7 +5566,8 @@ function buildRadioA11y(opts) {
   if (opts.value) a11y.value = opts.value;
   if (opts.disabled) a11y.disabled = true;
   if (opts.required) a11y.required = true;
-  if (opts.ariaLabel) a11y.ariaLabel = opts.ariaLabel;
+  const accessibleLabel = opts.ariaLabel ?? opts.label;
+  if (accessibleLabel) a11y.ariaLabel = accessibleLabel;
   if (opts.ariaLabelledBy) a11y.ariaLabelledBy = opts.ariaLabelledBy;
   if (opts.ariaDescribedBy) a11y.ariaDescribedBy = opts.ariaDescribedBy;
   if (opts.invalid) a11y.ariaInvalid = true;
@@ -4620,7 +5575,7 @@ function buildRadioA11y(opts) {
 }
 
 // src/components/atoms/radio/radio-recipe.ts
-function cx6(...parts) {
+function cx10(...parts) {
   return parts.filter(Boolean).join(" ");
 }
 function radioRecipe({
@@ -4628,7 +5583,7 @@ function radioRecipe({
   invalid = false,
   ...opts
 }) {
-  const className = cx6("mw-radio", disabled && "mw-radio--disabled", invalid && "mw-radio--invalid");
+  const className = cx10("mw-radio", disabled && "mw-radio--disabled", invalid && "mw-radio--invalid");
   const kit = {
     tag: "input",
     className,
@@ -4650,8 +5605,9 @@ function resolveSwitchA11y(opts) {
     ariaChecked: opts.checked ?? false
   };
   if (opts.disabled) a11y.ariaDisabled = true;
-  if (opts.ariaLabel) a11y.ariaLabel = opts.ariaLabel;
-  if (opts.ariaLabelledby) a11y.ariaLabelledby = opts.ariaLabelledby;
+  const accessibleLabel = opts.ariaLabel ?? opts.label;
+  if (accessibleLabel) a11y.ariaLabel = accessibleLabel;
+  if (opts.ariaLabelledBy) a11y.ariaLabelledBy = opts.ariaLabelledBy;
   if (opts.ariaDescribedBy) a11y.ariaDescribedBy = opts.ariaDescribedBy;
   return a11y;
 }
@@ -4664,14 +5620,14 @@ var SwitchSize = {
 };
 
 // src/components/atoms/switch/switch-recipe.ts
-function cx7(...parts) {
+function cx11(...parts) {
   return parts.filter(Boolean).join(" ");
 }
 function createSwitchRecipe(opts) {
   const size = opts.size ?? SwitchSize.compact;
   return {
     tag: "button",
-    className: cx7(
+    className: cx11(
       "mw-switch",
       `mw-switch--${size}`,
       opts.checked && "mw-switch--checked",
@@ -4718,7 +5674,8 @@ function resolveSliderA11y(opts) {
   if (opts.name) a11y.name = opts.name;
   if (opts.disabled) a11y.disabled = true;
   if (opts.required) a11y.required = true;
-  if (opts.ariaLabel) a11y.ariaLabel = opts.ariaLabel;
+  const accessibleLabel = opts.ariaLabel ?? opts.label;
+  if (accessibleLabel) a11y.ariaLabel = accessibleLabel;
   if (opts.ariaLabelledBy) a11y.ariaLabelledBy = opts.ariaLabelledBy;
   if (opts.ariaDescribedBy) a11y.ariaDescribedBy = opts.ariaDescribedBy;
   if (opts.ariaValueText) a11y.ariaValueText = opts.ariaValueText;
@@ -4739,13 +5696,13 @@ function resolveSliderCurrentValue(opts, min, max) {
   return clampSliderValue(candidateValue, min, max);
 }
 function resolveSliderFillPercentage(currentValue, min, max) {
-  const range = max - min;
-  if (range <= 0) {
+  const range2 = max - min;
+  if (range2 <= 0) {
     return 0;
   }
-  return (currentValue - min) / range * 100;
+  return (currentValue - min) / range2 * 100;
 }
-function cx8(...parts) {
+function cx12(...parts) {
   return parts.filter(Boolean).join(" ");
 }
 function createSliderRecipe(opts = {}) {
@@ -4757,7 +5714,7 @@ function createSliderRecipe(opts = {}) {
   const orientation = opts.orientation ?? "horizontal";
   return {
     tag: "div",
-    className: cx8(
+    className: cx12(
       "mw-slider",
       `mw-slider--${orientation}`,
       opts.disabled && "mw-slider--disabled",
@@ -4792,7 +5749,8 @@ function buildCheckboxA11y(props) {
   if (props.value) a11y.value = props.value;
   if (props.disabled) a11y.disabled = true;
   if (props.required) a11y.required = true;
-  if (props.ariaLabel) a11y.ariaLabel = props.ariaLabel;
+  const accessibleLabel = props.ariaLabel ?? props.label;
+  if (accessibleLabel) a11y.ariaLabel = accessibleLabel;
   if (props.ariaLabelledBy) a11y.ariaLabelledBy = props.ariaLabelledBy;
   if (props.ariaDescribedBy) a11y.ariaDescribedBy = props.ariaDescribedBy;
   if (props.indeterminate) a11y.ariaChecked = "mixed";
@@ -4801,7 +5759,7 @@ function buildCheckboxA11y(props) {
 }
 
 // src/components/atoms/checkbox/checkbox-recipe.ts
-function cx9(...parts) {
+function cx13(...parts) {
   return parts.filter(Boolean).join(" ");
 }
 function checkboxRecipe({
@@ -4810,7 +5768,7 @@ function checkboxRecipe({
   ...props
 }) {
   const size = props.size ?? "md";
-  const className = cx9(
+  const className = cx13(
     "mw-checkbox",
     size === "sm" && "mw-checkbox--sm",
     size === "md" && "mw-checkbox--md",
@@ -4888,17 +5846,18 @@ function resolveSpinnerA11y(options = {}) {
       ariaHidden: true
     };
   }
-  if (options.ariaLabel) {
+  const accessibleLabel = options.ariaLabel ?? options.label;
+  if (accessibleLabel) {
     return {
       ...options.id ? { id: options.id } : {},
       role: "status",
-      ariaLabel: options.ariaLabel,
+      ariaLabel: accessibleLabel,
       ariaLive: "polite"
     };
   }
   if (__DEV__3 && options.decorative === false) {
     console.warn(
-      "[marwes] Spinner: decorative={false} was passed without ariaLabel. The spinner stays hidden from assistive technology unless ariaLabel is also provided."
+      "[marwes] Spinner: decorative={false} was passed without ariaLabel. The spinner stays hidden from assistive technology unless ariaLabel or label is also provided."
     );
   }
   return {
@@ -5018,7 +5977,7 @@ function createDotsSquareNodes() {
       y: "1.5",
       width: "4",
       height: "5",
-      rx: "1.5",
+      rx: "999",
       fill: INDICATOR_COLOR,
       opacity: "0.89375"
     }),
@@ -5027,7 +5986,7 @@ function createDotsSquareNodes() {
       y: "4.4",
       width: "4.8",
       height: "4.8",
-      rx: "1.5",
+      rx: "999",
       fill: INDICATOR_COLOR,
       opacity: "0.46875"
     }),
@@ -5036,7 +5995,7 @@ function createDotsSquareNodes() {
       y: "10",
       width: "5",
       height: "4",
-      rx: "1.5",
+      rx: "999",
       fill: INDICATOR_COLOR,
       opacity: "0.3625"
     }),
@@ -5045,7 +6004,7 @@ function createDotsSquareNodes() {
       y: "14.8",
       width: "4.8",
       height: "4.8",
-      rx: "1.5",
+      rx: "999",
       fill: INDICATOR_COLOR,
       opacity: "0.15"
     }),
@@ -5054,7 +6013,7 @@ function createDotsSquareNodes() {
       y: "17.5",
       width: "4",
       height: "5",
-      rx: "1.5",
+      rx: "999",
       fill: INDICATOR_COLOR,
       opacity: "0.575"
     }),
@@ -5063,7 +6022,7 @@ function createDotsSquareNodes() {
       y: "14.8",
       width: "4.8",
       height: "4.8",
-      rx: "1.5",
+      rx: "999",
       fill: INDICATOR_COLOR,
       opacity: "0.7875"
     }),
@@ -5072,7 +6031,7 @@ function createDotsSquareNodes() {
       y: "10",
       width: "5",
       height: "4",
-      rx: "1.5",
+      rx: "999",
       fill: INDICATOR_COLOR,
       opacity: "0.68125"
     }),
@@ -5081,7 +6040,7 @@ function createDotsSquareNodes() {
       y: "4.4",
       width: "4.8",
       height: "4.8",
-      rx: "1.5",
+      rx: "999",
       fill: INDICATOR_COLOR,
       opacity: "0.25625"
     })
@@ -5177,7 +6136,7 @@ function createSpinnerSvgDefinition(variant) {
 }
 
 // src/components/atoms/spinner/spinner-recipe.ts
-function cx10(...parts) {
+function cx14(...parts) {
   return parts.filter(Boolean).join(" ");
 }
 function resolveSpinnerDataSize(size) {
@@ -5192,7 +6151,7 @@ function createSpinnerRecipe(options = {}) {
   const resolvedSize = resolveSpinnerSize(requestedSize);
   return {
     tag: "span",
-    className: cx10("mw-spinner", `mw-spinner--${variant}`),
+    className: cx14("mw-spinner", `mw-spinner--${variant}`),
     vars: {
       "--mw-spinner-size": `${resolvedSize}px`,
       "--mw-spinner-rotation-duration": "800ms"
@@ -5264,7 +6223,7 @@ var FIGMA_TEXT_HEIGHT = 12;
 var FIGMA_CIRCULAR_SIZE = 40;
 var FIGMA_RECTANGULAR_SIZE = 120;
 var FIGMA_RADIUS = 4;
-function cx11(...parts) {
+function cx15(...parts) {
   return parts.filter(Boolean).join(" ");
 }
 function toCssDimension(value) {
@@ -5289,7 +6248,7 @@ function createSkeletonRecipe(options = {}) {
   const animation = options.animation ?? SkeletonAnimation.pulse;
   return {
     tag: "span",
-    className: cx11(
+    className: cx15(
       "mw-skeleton",
       `mw-skeleton--${variant}`,
       animation !== SkeletonAnimation.none && `mw-skeleton--${animation}`
@@ -5308,6 +6267,117 @@ function createSkeletonRecipe(options = {}) {
   };
 }
 
+// src/components/atoms/progress-bar/progress-bar-a11y.ts
+var DEFAULT_PROGRESS_BAR_MIN = 0;
+var DEFAULT_PROGRESS_BAR_MAX = 100;
+var DEFAULT_PROGRESS_BAR_LABEL = "Progress";
+function resolveFiniteNumber(value, fallback) {
+  return value === void 0 || !Number.isFinite(value) ? fallback : value;
+}
+function resolveProgressBarBounds(options) {
+  const min = resolveFiniteNumber(options.min, DEFAULT_PROGRESS_BAR_MIN);
+  const rawMax = resolveFiniteNumber(options.max, DEFAULT_PROGRESS_BAR_MAX);
+  const max = rawMax > min ? rawMax : min + 1;
+  return { min, max };
+}
+function clampProgressBarValue(value, min, max) {
+  if (!Number.isFinite(value)) return min;
+  return Math.min(max, Math.max(min, value));
+}
+function resolveProgressBarA11y(options, value) {
+  const { min, max } = resolveProgressBarBounds(options);
+  const label = options.label ?? DEFAULT_PROGRESS_BAR_LABEL;
+  const labelId = options.id && options.showLabel !== false ? `${options.id}-label` : void 0;
+  const ariaLabelledBy = options.ariaLabelledBy ?? labelId;
+  const ariaLabel = ariaLabelledBy ? void 0 : options.ariaLabel ?? label;
+  return {
+    ...options.id ? { id: options.id } : {},
+    role: "progressbar",
+    ariaValueMin: min,
+    ariaValueMax: max,
+    ariaValueNow: value,
+    ...options.valueLabel ? { ariaValueText: options.valueLabel } : {},
+    ...ariaLabel ? { ariaLabel } : {},
+    ...ariaLabelledBy ? { ariaLabelledBy } : {},
+    ...options.ariaDescribedBy ? { ariaDescribedBy: options.ariaDescribedBy } : {},
+    ...options.disabled ? { ariaDisabled: true } : {}
+  };
+}
+
+// src/components/atoms/progress-bar/progress-bar-types.ts
+var ProgressBarSize = {
+  small: "small",
+  default: "default"
+};
+var progressBarSizes = Object.values(ProgressBarSize);
+var ProgressBarState = {
+  default: "default",
+  hover: "hover",
+  pressed: "pressed",
+  focus: "focus"
+};
+var progressBarStates = Object.values(ProgressBarState);
+
+// src/components/atoms/progress-bar/progress-bar-recipe.ts
+function cx16(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function resolveProgressBarPercentage(value, min, max) {
+  const range2 = max - min;
+  if (range2 <= 0) return 0;
+  return (value - min) / range2 * 100;
+}
+function resolvePercentageLabel(percentage, valueLabel) {
+  if (valueLabel) return valueLabel;
+  return `${Math.round(percentage)}%`;
+}
+function createProgressBarRecipe(options = {}) {
+  const { min, max } = resolveProgressBarBounds(options);
+  const value = clampProgressBarValue(options.value ?? min, min, max);
+  const percentage = resolveProgressBarPercentage(value, min, max);
+  const size = options.size ?? ProgressBarSize.default;
+  const state = options.state ?? ProgressBarState.default;
+  const showLabel = options.showLabel !== false;
+  const showPercentage = options.showPercentage !== false;
+  const label = options.label ?? DEFAULT_PROGRESS_BAR_LABEL;
+  const percentageLabel = resolvePercentageLabel(percentage, options.valueLabel);
+  const a11y = resolveProgressBarA11y({ ...options, showLabel }, value);
+  return {
+    tag: "div",
+    className: cx16(
+      "mw-progress-bar",
+      `mw-progress-bar--${size}`,
+      state !== ProgressBarState.default && `mw-progress-bar--state-${state}`,
+      options.disabled && "mw-progress-bar--disabled"
+    ),
+    trackClassName: "mw-progress-bar__track",
+    fillClassName: "mw-progress-bar__fill",
+    labelClassName: "mw-progress-bar__label",
+    percentageClassName: "mw-progress-bar__percentage",
+    ...a11y.ariaLabelledBy && options.id ? { labelId: `${options.id}-label` } : {},
+    vars: {
+      "--mw-progress-bar-value-percentage": `${percentage}%`
+    },
+    a11y,
+    dataAttributes: {
+      "data-component": "progress-bar",
+      "data-size": size,
+      "data-state": state,
+      ...options.disabled ? { "data-disabled": "true" } : {}
+    },
+    label,
+    percentageLabel,
+    value,
+    min,
+    max,
+    percentage,
+    size,
+    state,
+    showLabel,
+    showPercentage
+  };
+}
+
 // src/components/atoms/stat-tile/stat-tile-a11y.ts
 function resolveStatTileTrendLabel(direction, trendValue) {
   if (!direction || !trendValue) return void 0;
@@ -5451,6 +6521,9 @@ function createDayKit(day) {
 function createDatePickerRecipe(opts = {}) {
   const device = resolveDevice(opts.device);
   const weeks = opts.weeks ?? defaultWeeks;
+  const calendarLabel = opts.ariaLabel ?? opts.calendarLabel ?? "Choose date";
+  const a11y = opts.ariaLabelledBy ? { ariaLabelledBy: opts.ariaLabelledBy } : { ariaLabel: calendarLabel };
+  if (opts.ariaDescribedBy) a11y.ariaDescribedBy = opts.ariaDescribedBy;
   return {
     className: ["mw-date-picker", `mw-date-picker--${device}`].join(" "),
     dataAttributes: {
@@ -5458,6 +6531,7 @@ function createDatePickerRecipe(opts = {}) {
       "data-component": "date-picker",
       "data-device": device
     },
+    a11y,
     monthLabel: opts.monthLabel ?? "March 2026",
     weekdayLabels: opts.weekdayLabels ?? defaultWeekdayLabels,
     weeks,
@@ -5476,7 +6550,7 @@ function createDatePickerRecipe(opts = {}) {
       footerButtonClassName: "mw-date-picker__footer-button"
     },
     labels: {
-      calendar: opts.calendarLabel ?? "Choose date",
+      calendar: calendarLabel,
       previousYear: opts.previousYearLabel ?? "Previous year",
       previousMonth: opts.previousMonthLabel ?? "Previous month",
       nextMonth: opts.nextMonthLabel ?? "Next month",
@@ -10360,7 +11434,12 @@ function resolveInputA11y(opts) {
   if (opts.inputMode) a11y.inputMode = opts.inputMode;
   if (opts.autoComplete) a11y.autoComplete = opts.autoComplete;
   if (opts.placeholder) a11y.placeholder = opts.placeholder;
-  if (opts.ariaLabel) a11y.ariaLabel = opts.ariaLabel;
+  if (opts.ariaLabelledBy) {
+    a11y.ariaLabelledBy = opts.ariaLabelledBy;
+  } else {
+    const accessibleLabel = opts.ariaLabel ?? opts.label;
+    if (accessibleLabel) a11y.ariaLabel = accessibleLabel;
+  }
   if (opts.invalid) a11y.ariaInvalid = true;
   if (opts.describedBy) a11y.ariaDescribedBy = opts.describedBy;
   return a11y;
@@ -10402,8 +11481,11 @@ function resolveInputOtpA11y(options) {
   if (options.required) {
     a11yProps.required = true;
   }
-  if (options.ariaLabel) {
-    a11yProps.ariaLabel = options.ariaLabel;
+  if (options.ariaLabelledBy) {
+    a11yProps.ariaLabelledBy = options.ariaLabelledBy;
+  } else {
+    const accessibleLabel = options.ariaLabel ?? options.label;
+    if (accessibleLabel) a11yProps.ariaLabel = accessibleLabel;
   }
   if (options.invalid) {
     a11yProps.ariaInvalid = true;
@@ -10415,7 +11497,7 @@ function resolveInputOtpA11y(options) {
 }
 
 // src/components/atoms/input/input-otp-recipe.ts
-function cx12(...parts) {
+function cx17(...parts) {
   return parts.filter(Boolean).join(" ");
 }
 function sanitizeInputOtpValue(rawValue, length) {
@@ -10451,7 +11533,7 @@ function createInputOtpRecipe(options) {
   };
   return {
     tag: "div",
-    className: cx12(
+    className: cx17(
       "mw-input-otp",
       options.invalid && "mw-input-otp--invalid",
       options.disabled && "mw-input-otp--disabled",
@@ -10472,7 +11554,12 @@ function resolveSelectA11y(opts) {
   if (opts.name) a11y.name = opts.name;
   if (opts.disabled) a11y.disabled = true;
   if (opts.required) a11y.required = true;
-  if (opts.ariaLabel) a11y.ariaLabel = opts.ariaLabel;
+  if (opts.ariaLabelledBy) {
+    a11y.ariaLabelledBy = opts.ariaLabelledBy;
+  } else {
+    const accessibleLabel = opts.ariaLabel ?? opts.label;
+    if (accessibleLabel) a11y.ariaLabel = accessibleLabel;
+  }
   if (opts.invalid) a11y.ariaInvalid = true;
   if (opts.describedBy) a11y.ariaDescribedBy = opts.describedBy;
   return a11y;
@@ -10515,7 +11602,12 @@ function resolveTextareaA11y(opts) {
   if (opts.placeholder) a11y.placeholder = opts.placeholder;
   if (opts.rows !== void 0) a11y.rows = opts.rows;
   if (opts.cols !== void 0) a11y.cols = opts.cols;
-  if (opts.ariaLabel) a11y.ariaLabel = opts.ariaLabel;
+  if (opts.ariaLabelledBy) {
+    a11y.ariaLabelledBy = opts.ariaLabelledBy;
+  } else {
+    const accessibleLabel = opts.ariaLabel ?? opts.label;
+    if (accessibleLabel) a11y.ariaLabel = accessibleLabel;
+  }
   if (opts.invalid) a11y.ariaInvalid = true;
   if (opts.describedBy) a11y.ariaDescribedBy = opts.describedBy;
   return a11y;
@@ -10545,7 +11637,8 @@ function resolveRichTextA11y(opts) {
     ariaMultiline: true
   };
   if (opts.id) a11y.id = opts.id;
-  if (opts.ariaLabel) a11y.ariaLabel = opts.ariaLabel;
+  const accessibleLabel = opts.ariaLabel ?? opts.label;
+  if (accessibleLabel) a11y.ariaLabel = accessibleLabel;
   if (opts.labelledBy) a11y.ariaLabelledBy = opts.labelledBy;
   if (opts.describedBy) a11y.ariaDescribedBy = opts.describedBy;
   if (opts.invalid) a11y.ariaInvalid = true;
@@ -10623,7 +11716,14 @@ function normalizeRichTextHtml(rawHtml) {
   if (!trimmedHtml.includes("<")) {
     return escapeRichTextHtml(trimmedHtml);
   }
-  const normalizedHtml = trimmedHtml.replace(/<b(?:\s[^>]*)?>/gi, "<strong>").replace(/<\/b>/gi, "</strong>").replace(/<i(?:\s[^>]*)?>/gi, "<em>").replace(/<\/i>/gi, "</em>").replace(blockTagPattern, "<p>").replace(closingBlockTagPattern, "</p>").replace(openingParagraphPattern, "<p>").replace(openingStrongPattern, "<strong>").replace(openingEmphasisPattern, "<em>").replace(openingUnderlinePattern, "<u>").replace(lineBreakPattern, "<br>").replace(disallowedTagPattern, "").replace(unsupportedAnglePattern, "&lt;").replace(/\s+/g, " ").trim();
+  let normalizedHtml = trimmedHtml.replace(/<b(?:\s[^>]*)?>/gi, "<strong>").replace(/<\/b>/gi, "</strong>").replace(/<i(?:\s[^>]*)?>/gi, "<em>").replace(/<\/i>/gi, "</em>").replace(blockTagPattern, "<p>").replace(closingBlockTagPattern, "</p>").replace(openingParagraphPattern, "<p>").replace(openingStrongPattern, "<strong>").replace(openingEmphasisPattern, "<em>").replace(openingUnderlinePattern, "<u>").replace(lineBreakPattern, "<br>");
+  let previous;
+  do {
+    previous = normalizedHtml;
+    normalizedHtml = normalizedHtml.replace(disallowedTagPattern, "");
+  } while (normalizedHtml !== previous);
+  normalizedHtml = normalizedHtml.replace(unsupportedAnglePattern, "&lt;");
+  normalizedHtml = normalizedHtml.replace(/\s+/g, " ").trim();
   return isRichTextHtmlEmpty(normalizedHtml) ? "" : normalizedHtml;
 }
 function isRichTextHtmlEmpty(rawHtml) {
@@ -10683,6 +11783,27 @@ function paragraphRecipe(opts, theme) {
   };
 }
 
+// src/components/atoms/text/text-recipe.ts
+function textRecipe(opts, theme) {
+  const variant = opts.variant ?? "caption";
+  const tag = opts.headingLevel ? `h${opts.headingLevel}` : opts.as ?? "span";
+  const className = ["mw-text", `mw-text--${variant}`].filter(Boolean).join(" ");
+  const typo = theme.typography.text[variant];
+  const vars = {
+    "--mw-text-size": `${typo.fontSize}px`,
+    "--mw-text-line-height": `${typo.lineHeight}`,
+    "--mw-text-weight": `${typo.fontWeight}`,
+    "--mw-text-letter-spacing": `${typo.letterSpacing}px`,
+    "--mw-text-transform": typo.textTransform ?? "none"
+  };
+  return {
+    tag,
+    className,
+    vars,
+    a11y: opts.id ? { id: opts.id } : {}
+  };
+}
+
 // src/components/atoms/tab/tab-a11y.ts
 function resolveTabA11y(opts) {
   const a11y = {
@@ -10693,19 +11814,20 @@ function resolveTabA11y(opts) {
     tabIndex: opts.selected && !opts.disabled ? 0 : -1
   };
   if (opts.disabled) a11y.ariaDisabled = true;
-  if (opts.ariaLabel) a11y.ariaLabel = opts.ariaLabel;
+  const accessibleLabel = opts.ariaLabel ?? opts.label;
+  if (accessibleLabel) a11y.ariaLabel = accessibleLabel;
   if (opts.ariaControls) a11y.ariaControls = opts.ariaControls;
   return a11y;
 }
 
 // src/components/atoms/tab/tab-recipe.ts
-function cx13(...parts) {
+function cx18(...parts) {
   return parts.filter(Boolean).join(" ");
 }
 function createTabRecipe(opts) {
   return {
     tag: "button",
-    className: cx13(
+    className: cx18(
       "mw-tab",
       opts.selected && "mw-tab--selected",
       opts.disabled && "mw-tab--disabled"
@@ -10796,6 +11918,7 @@ var Spacings = {
   sp2: "sp-2",
   sp4: "sp-4",
   sp8: "sp-8",
+  sp12: "sp-12",
   sp16: "sp-16",
   sp24: "sp-24",
   sp32: "sp-32",
@@ -10814,6 +11937,7 @@ var Spacings = {
   "sp-2": "sp-2",
   "sp-4": "sp-4",
   "sp-8": "sp-8",
+  "sp-12": "sp-12",
   "sp-16": "sp-16",
   "sp-24": "sp-24",
   "sp-32": "sp-32",
@@ -10830,6 +11954,478 @@ var Spacings = {
   "sp-120": "sp-120"
 };
 
+// src/components/atoms/segmented-control/segmented-control-a11y.ts
+function resolveSegmentedControlA11y(opts) {
+  const a11y = {
+    role: "radiogroup"
+  };
+  if (opts.ariaLabelledBy) {
+    a11y.ariaLabelledBy = opts.ariaLabelledBy;
+  } else {
+    const accessibleLabel = opts.ariaLabel ?? opts.label;
+    if (accessibleLabel) a11y.ariaLabel = accessibleLabel;
+  }
+  if (opts.ariaDescribedBy) a11y.ariaDescribedBy = opts.ariaDescribedBy;
+  if (opts.disabled) a11y.ariaDisabled = true;
+  return a11y;
+}
+function resolveSegmentedControlItemA11y(opts) {
+  const a11y = {
+    role: "radio",
+    ariaChecked: opts.selected ?? false,
+    tabIndex: opts.selected && !opts.disabled ? 0 : -1
+  };
+  if (opts.disabled) a11y.ariaDisabled = true;
+  const accessibleLabel = opts.ariaLabel ?? opts.label;
+  if (accessibleLabel) a11y.ariaLabel = accessibleLabel;
+  return a11y;
+}
+function resolveSegmentedControlValue(items, requestedValue) {
+  if (items.length === 0) return void 0;
+  if (requestedValue) {
+    const match = items.find((item) => item.value === requestedValue && !item.disabled);
+    if (match) return match.value;
+  }
+  return items.find((item) => !item.disabled)?.value;
+}
+function moveSegmentedControlSelection(items, currentValue, direction) {
+  const enabled = items.filter((item) => !item.disabled);
+  if (enabled.length === 0) return void 0;
+  if (direction === "start") return enabled[0]?.value;
+  if (direction === "end") return enabled[enabled.length - 1]?.value;
+  const currentIndex = enabled.findIndex((item) => item.value === currentValue);
+  if (currentIndex === -1) return enabled[0]?.value;
+  const delta = direction === "next" ? 1 : -1;
+  const nextIndex = (currentIndex + delta + enabled.length) % enabled.length;
+  return enabled[nextIndex]?.value;
+}
+
+// src/components/atoms/segmented-control/segmented-control-recipe.ts
+function cx19(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function createSegmentedControlRecipe(opts) {
+  const variant = opts.variant ?? "default";
+  const size = opts.size ?? "md";
+  return {
+    tag: "div",
+    className: cx19(
+      "mw-segmented-control",
+      variant !== "default" && `mw-segmented-control--${variant}`,
+      size !== "md" && `mw-segmented-control--${size}`,
+      opts.disabled && "mw-segmented-control--disabled",
+      opts.fullWidth && "mw-segmented-control--full-width"
+    ),
+    vars: {},
+    a11y: resolveSegmentedControlA11y(opts)
+  };
+}
+function createSegmentedControlItemRecipe(opts) {
+  return {
+    tag: "button",
+    className: cx19(
+      "mw-segmented-control__item",
+      opts.selected && "mw-segmented-control__item--selected",
+      opts.disabled && "mw-segmented-control__item--disabled",
+      opts.iconOnly && "mw-segmented-control__item--icon-only"
+    ),
+    vars: {},
+    a11y: resolveSegmentedControlItemA11y(opts)
+  };
+}
+
+// src/components/atoms/pagination/pagination-a11y.ts
+function resolvePaginationA11y(opts) {
+  const a11y = {};
+  if (opts.ariaLabelledBy) {
+    a11y.ariaLabelledBy = opts.ariaLabelledBy;
+  } else {
+    a11y.ariaLabel = opts.ariaLabel ?? "Pagination";
+  }
+  if (opts.ariaDescribedBy) a11y.ariaDescribedBy = opts.ariaDescribedBy;
+  if (opts.disabled) a11y.ariaDisabled = true;
+  return a11y;
+}
+function resolvePaginationListA11y() {
+  return { role: "list" };
+}
+function resolvePaginationControlA11y(opts) {
+  const fallbackByDirection = {
+    first: "First page",
+    previous: "Previous page",
+    next: "Next page",
+    last: "Last page"
+  };
+  const a11y = {
+    ariaLabel: opts.ariaLabel ?? opts.label ?? fallbackByDirection[opts.direction]
+  };
+  if (opts.disabled) a11y.ariaDisabled = true;
+  return a11y;
+}
+function resolvePaginationPageA11y(opts) {
+  const a11y = {
+    ariaLabel: opts.ariaLabel ?? (opts.selected ? `Page ${opts.page}, current page` : `Go to page ${opts.page}`)
+  };
+  if (opts.selected) a11y.ariaCurrent = "page";
+  if (opts.disabled) a11y.ariaDisabled = true;
+  return a11y;
+}
+function resolvePaginationEllipsisA11y() {
+  return { ariaHidden: true };
+}
+function resolvePaginationItemAriaLabel(getItemAriaLabel, item) {
+  return getItemAriaLabel?.(item);
+}
+
+// src/components/atoms/pagination/pagination-recipe.ts
+function cx20(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function normalizeCount(value, fallback) {
+  if (value === void 0) return fallback;
+  if (!Number.isFinite(value)) return fallback;
+  return Math.max(0, Math.floor(value));
+}
+function range(start, end) {
+  if (end < start) return [];
+  return Array.from({ length: end - start + 1 }, (_, index) => start + index);
+}
+function toPageItem(pageNumber, currentPage) {
+  return {
+    type: "page",
+    page: pageNumber,
+    key: `page-${pageNumber}`,
+    selected: pageNumber === currentPage
+  };
+}
+function clampPaginationPage(page, pageCount) {
+  const normalizedPageCount = normalizeCount(pageCount, 0);
+  if (normalizedPageCount <= 0) return 0;
+  if (page === void 0 || !Number.isFinite(page)) return 1;
+  return Math.min(Math.max(1, Math.floor(page)), normalizedPageCount);
+}
+function resolvePaginationAdaptiveMaxVisibleItems(opts) {
+  const containerWidth = Math.max(0, opts.containerWidth);
+  if (containerWidth <= 0) return void 0;
+  const itemSize = opts.itemSize ?? 32;
+  const itemGap = opts.itemGap ?? 2;
+  const sectionGap = opts.sectionGap ?? 12;
+  const controlWidth = opts.controlWidth ?? 0;
+  const controlCount = opts.controlCount ?? 0;
+  const controlGaps = controlCount > 0 ? sectionGap * controlCount : 0;
+  const availableItemWidth = Math.max(0, containerWidth - controlWidth - controlGaps);
+  return Math.max(1, Math.floor((availableItemWidth + itemGap) / (itemSize + itemGap)));
+}
+function resolvePaginationListWidth(itemCount, itemSize, itemGap) {
+  if (itemCount <= 0) return 0;
+  return itemCount * itemSize + Math.max(0, itemCount - 1) * itemGap;
+}
+function resolvePaginationLayoutWidth(itemCount, controlWidth, controlCount, itemSize, itemGap, sectionGap) {
+  const controlGaps = controlCount > 0 ? sectionGap * controlCount : 0;
+  return controlWidth + controlGaps + resolvePaginationListWidth(itemCount, itemSize, itemGap);
+}
+function resolvePaginationReducedItemCount(opts, controlWidth) {
+  return resolvePaginationAdaptiveMaxVisibleItems({
+    containerWidth: opts.containerWidth,
+    controlWidth,
+    ...opts.controlCount !== void 0 ? { controlCount: opts.controlCount } : {},
+    ...opts.itemSize !== void 0 ? { itemSize: opts.itemSize } : {},
+    ...opts.itemGap !== void 0 ? { itemGap: opts.itemGap } : {},
+    ...opts.sectionGap !== void 0 ? { sectionGap: opts.sectionGap } : {}
+  });
+}
+function createPaginationAdaptiveProfile(opts, controlDisplay, maxVisibleItems) {
+  return {
+    controlDisplay,
+    maxVisibleItems,
+    reservedItemCount: resolvePaginationReservedItemCount({
+      pageCount: opts.pageCount,
+      ...opts.siblingCount !== void 0 ? { siblingCount: opts.siblingCount } : {},
+      ...opts.boundaryCount !== void 0 ? { boundaryCount: opts.boundaryCount } : {},
+      ...maxVisibleItems !== void 0 ? { maxVisibleItems } : {}
+    })
+  };
+}
+function resolvePaginationAdaptiveProfile(opts) {
+  const containerWidth = Math.max(0, opts.containerWidth);
+  const pageCount = normalizeCount(opts.pageCount, 0);
+  const controlDisplay = opts.controlDisplay ?? "auto";
+  if (containerWidth <= 0 || pageCount <= 0) {
+    return createPaginationAdaptiveProfile(
+      opts,
+      controlDisplay === "icon" ? "icon" : "label",
+      void 0
+    );
+  }
+  const itemSize = opts.itemSize ?? 32;
+  const itemGap = opts.itemGap ?? 2;
+  const sectionGap = opts.sectionGap ?? 12;
+  const controlCount = opts.controlCount ?? 0;
+  const labelControlWidth = opts.labelControlWidth ?? opts.iconControlWidth ?? 0;
+  const iconControlWidth = opts.iconControlWidth ?? labelControlWidth;
+  const preferredItemCount = resolvePaginationReservedItemCount(opts);
+  const preferredMaxVisibleItems = preferredItemCount > 0 ? preferredItemCount : void 0;
+  const labelWidth = resolvePaginationLayoutWidth(
+    preferredItemCount,
+    labelControlWidth,
+    controlCount,
+    itemSize,
+    itemGap,
+    sectionGap
+  );
+  const iconWidth = resolvePaginationLayoutWidth(
+    preferredItemCount,
+    iconControlWidth,
+    controlCount,
+    itemSize,
+    itemGap,
+    sectionGap
+  );
+  if (controlDisplay === "label") {
+    const maxVisibleItems = labelWidth <= containerWidth ? preferredMaxVisibleItems : resolvePaginationReducedItemCount(opts, labelControlWidth);
+    return createPaginationAdaptiveProfile(opts, "label", maxVisibleItems);
+  }
+  if (controlDisplay === "icon") {
+    const maxVisibleItems = iconWidth <= containerWidth ? preferredMaxVisibleItems : resolvePaginationReducedItemCount(opts, iconControlWidth);
+    return createPaginationAdaptiveProfile(opts, "icon", maxVisibleItems);
+  }
+  if (labelWidth <= containerWidth) {
+    return createPaginationAdaptiveProfile(opts, "label", preferredMaxVisibleItems);
+  }
+  if (iconWidth <= containerWidth) {
+    return createPaginationAdaptiveProfile(opts, "icon", preferredMaxVisibleItems);
+  }
+  return createPaginationAdaptiveProfile(
+    opts,
+    "icon",
+    resolvePaginationReducedItemCount(opts, iconControlWidth)
+  );
+}
+function resolvePaginationReservedItemCount(opts) {
+  const pageCount = normalizeCount(opts.pageCount, 0);
+  if (pageCount <= 0) return 0;
+  const maxVisibleItems = resolvePaginationEffectiveMaxVisibleItems(opts);
+  if (maxVisibleItems > 0) return Math.min(pageCount, maxVisibleItems);
+  const siblingCount = normalizeCount(opts.siblingCount, 1);
+  const boundaryCount = normalizeCount(opts.boundaryCount, 1);
+  const slotsWithEllipsis = boundaryCount * 2 + siblingCount * 2 + 3;
+  return Math.min(pageCount, slotsWithEllipsis);
+}
+function resolvePaginationEffectiveMaxVisibleItems(opts) {
+  const maxVisibleItems = normalizeCount(opts.maxVisibleItems, 0);
+  if (maxVisibleItems <= 0) return 0;
+  const siblingCount = normalizeCount(opts.siblingCount, 1);
+  if (maxVisibleItems < 6 || siblingCount < 1) return maxVisibleItems;
+  const pageCount = normalizeCount(opts.pageCount, 0);
+  const boundaryCount = normalizeCount(opts.boundaryCount, 1);
+  const muiMiddleRangeCount = boundaryCount * 2 + 5;
+  return Math.min(pageCount, Math.max(maxVisibleItems, muiMiddleRangeCount));
+}
+function createFixedPaginationItems(opts) {
+  const pageCount = normalizeCount(opts.pageCount, 0);
+  if (pageCount <= 0) return [];
+  const page = clampPaginationPage(opts.page, pageCount);
+  const siblingCount = normalizeCount(opts.siblingCount, 1);
+  const boundaryCount = normalizeCount(opts.boundaryCount, 1);
+  const slotsWithoutEllipsis = boundaryCount * 2 + siblingCount * 2 + 1;
+  const slotsWithEllipsis = slotsWithoutEllipsis + 2;
+  if (pageCount <= slotsWithEllipsis) {
+    return range(1, pageCount).map((pageNumber) => toPageItem(pageNumber, page));
+  }
+  const items = [];
+  const startPages = range(1, Math.min(boundaryCount, pageCount));
+  const endPages = range(Math.max(pageCount - boundaryCount + 1, boundaryCount + 1), pageCount);
+  const leftSibling = Math.max(page - siblingCount, boundaryCount + 1);
+  const rightSibling = Math.min(page + siblingCount, pageCount - boundaryCount);
+  for (const pageNumber of startPages) items.push(toPageItem(pageNumber, page));
+  if (leftSibling > boundaryCount + 1) {
+    items.push({ type: "start-ellipsis", key: "ellipsis-start" });
+  } else {
+    for (const pageNumber of range(boundaryCount + 1, leftSibling - 1)) {
+      items.push(toPageItem(pageNumber, page));
+    }
+  }
+  for (const pageNumber of range(leftSibling, rightSibling)) {
+    items.push(toPageItem(pageNumber, page));
+  }
+  if (rightSibling < pageCount - boundaryCount) {
+    items.push({ type: "end-ellipsis", key: "ellipsis-end" });
+  } else {
+    for (const pageNumber of range(rightSibling + 1, pageCount - boundaryCount)) {
+      items.push(toPageItem(pageNumber, page));
+    }
+  }
+  for (const pageNumber of endPages) items.push(toPageItem(pageNumber, page));
+  return items;
+}
+function createCompactPaginationItems(opts, maxVisibleItems) {
+  const pageCount = normalizeCount(opts.pageCount, 0);
+  const page = clampPaginationPage(opts.page, pageCount);
+  if (pageCount <= 0 || maxVisibleItems <= 0) return [];
+  if (maxVisibleItems === 1 || pageCount === 1) return [toPageItem(page, page)];
+  if (maxVisibleItems === 2) {
+    const edgePage = page === pageCount ? 1 : pageCount;
+    return [page, edgePage].sort((a, b) => a - b).map((pageNumber) => toPageItem(pageNumber, page));
+  }
+  if (maxVisibleItems === 3) {
+    return Array.from(/* @__PURE__ */ new Set([1, page, pageCount])).slice(0, maxVisibleItems).map((pageNumber) => toPageItem(pageNumber, page));
+  }
+  if (page <= 2) {
+    return [
+      toPageItem(1, page),
+      toPageItem(2, page),
+      { type: "end-ellipsis", key: "ellipsis-end" },
+      toPageItem(pageCount, page)
+    ];
+  }
+  if (page >= pageCount - 1) {
+    return [
+      toPageItem(1, page),
+      { type: "start-ellipsis", key: "ellipsis-start" },
+      toPageItem(pageCount - 1, page),
+      toPageItem(pageCount, page)
+    ];
+  }
+  return [
+    toPageItem(1, page),
+    { type: "start-ellipsis", key: "ellipsis-start" },
+    toPageItem(page, page),
+    toPageItem(pageCount, page)
+  ];
+}
+function fillEdgePaginationItems(opts, maxVisibleItems, items) {
+  const pageCount = normalizeCount(opts.pageCount, 0);
+  const boundaryCount = normalizeCount(opts.boundaryCount, 1);
+  const hasStartEllipsis = items.some((item) => item.type === "start-ellipsis");
+  const hasEndEllipsis = items.some((item) => item.type === "end-ellipsis");
+  if (items.length >= maxVisibleItems || pageCount <= maxVisibleItems) return items;
+  if (hasStartEllipsis === hasEndEllipsis) return items;
+  const page = clampPaginationPage(opts.page, pageCount);
+  const edgePageCount = Math.max(boundaryCount + 1, maxVisibleItems - boundaryCount - 1);
+  if (hasEndEllipsis) {
+    const leadingPages = range(1, Math.min(edgePageCount, pageCount - boundaryCount - 1));
+    return [
+      ...leadingPages.map((pageNumber) => toPageItem(pageNumber, page)),
+      { type: "end-ellipsis", key: "ellipsis-end" },
+      ...range(Math.max(pageCount - boundaryCount + 1, edgePageCount + 1), pageCount).map(
+        (pageNumber) => toPageItem(pageNumber, page)
+      )
+    ];
+  }
+  const trailingPages = range(Math.max(pageCount - edgePageCount + 1, boundaryCount + 2), pageCount);
+  return [
+    ...range(1, Math.min(boundaryCount, pageCount)).map(
+      (pageNumber) => toPageItem(pageNumber, page)
+    ),
+    { type: "start-ellipsis", key: "ellipsis-start" },
+    ...trailingPages.map((pageNumber) => toPageItem(pageNumber, page))
+  ];
+}
+function createPaginationItems(opts) {
+  const pageCount = normalizeCount(opts.pageCount, 0);
+  const maxVisibleItems = resolvePaginationEffectiveMaxVisibleItems(opts);
+  if (pageCount <= 0) return [];
+  if (maxVisibleItems <= 0) return createFixedPaginationItems(opts);
+  if (pageCount <= maxVisibleItems) return createFixedPaginationItems(opts);
+  const siblingCount = normalizeCount(opts.siblingCount, 1);
+  const boundaryCount = normalizeCount(opts.boundaryCount, 1);
+  for (let nextBoundaryCount = boundaryCount; nextBoundaryCount >= 1; nextBoundaryCount -= 1) {
+    for (let nextSiblingCount = siblingCount; nextSiblingCount >= 0; nextSiblingCount -= 1) {
+      const items = createFixedPaginationItems({
+        ...opts,
+        boundaryCount: nextBoundaryCount,
+        siblingCount: nextSiblingCount
+      });
+      if (items.length <= maxVisibleItems) {
+        return fillEdgePaginationItems(opts, maxVisibleItems, items);
+      }
+    }
+  }
+  return createCompactPaginationItems(opts, maxVisibleItems);
+}
+function createPaginationRecipe(opts) {
+  const reservedItemCount = resolvePaginationReservedItemCount(opts);
+  const controlDisplay = opts.controlDisplay === "icon" ? "icon" : "label";
+  return {
+    tag: "nav",
+    className: cx20(
+      "mw-pagination",
+      `mw-pagination--controls-${controlDisplay}`,
+      opts.disabled && "mw-pagination--disabled"
+    ),
+    vars: reservedItemCount > 0 ? {
+      "--mw-pagination-list-width": `calc(${reservedItemCount} * var(--mw-pagination-size) + ${Math.max(
+        0,
+        reservedItemCount - 1
+      )} * var(--mw-pagination-gap))`
+    } : {},
+    a11y: resolvePaginationA11y(opts),
+    items: createPaginationItems(opts),
+    reservedItemCount,
+    controlDisplay,
+    showPrevNext: opts.showPrevNext ?? true,
+    showFirstLast: opts.showFirstLast ?? false
+  };
+}
+function createPaginationListRecipe() {
+  return {
+    tag: "ul",
+    className: "mw-pagination__list",
+    vars: {},
+    a11y: resolvePaginationListA11y()
+  };
+}
+function createPaginationListItemRecipe() {
+  return {
+    tag: "li",
+    className: "mw-pagination__list-item",
+    vars: {}
+  };
+}
+function createPaginationControlRecipe(opts) {
+  return {
+    tag: "button",
+    className: cx20(
+      "mw-pagination__control",
+      `mw-pagination__control--${opts.direction}`,
+      opts.disabled && "mw-pagination__control--disabled"
+    ),
+    vars: {},
+    a11y: resolvePaginationControlA11y(opts)
+  };
+}
+function createPaginationPageRecipe(opts) {
+  return {
+    tag: "button",
+    className: cx20(
+      "mw-pagination__page",
+      opts.selected && "mw-pagination__page--selected",
+      opts.disabled && "mw-pagination__page--disabled"
+    ),
+    vars: {},
+    a11y: resolvePaginationPageA11y(opts)
+  };
+}
+function createPaginationEllipsisRecipe() {
+  return {
+    tag: "span",
+    className: "mw-pagination__ellipsis",
+    vars: {},
+    a11y: resolvePaginationEllipsisA11y()
+  };
+}
+
+// src/components/atoms/skip-link/skip-link-recipe.ts
+function cx21(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function createSkipLinkRecipe(opts) {
+  return {
+    tag: "a",
+    className: cx21("mw-skip-link", opts.className)
+  };
+}
+
 // src/storybook/storybook-fixtures.ts
 var storybookLayout = {
   centered: { layout: "centered" },
@@ -10846,6 +12442,10 @@ var storybookA11yPolicy = {
 };
 var storybookIconNames = [...iconNames];
 var storybookOptionalIconNames = [void 0, ...storybookIconNames];
+var storybookButtonVariantArgType = {
+  control: "select",
+  options: ["primary", "secondary", "neutral", "text", "success", "danger"]
+};
 var storybookButtonIconArgTypes = {
   iconLeft: {
     control: "select",
@@ -10860,7 +12460,18 @@ var storybookButtonIconArgTypes = {
   }
 };
 var storybookButtonGeneralArgTypes = {
-  ...storybookButtonIconArgTypes
+  ...storybookButtonIconArgTypes,
+  variant: storybookButtonVariantArgType
+};
+var storybookIconButtonArgTypes = {
+  icon: {
+    control: "select",
+    options: storybookIconNames
+  },
+  variant: storybookButtonVariantArgType,
+  disabled: {
+    control: "boolean"
+  }
 };
 var storybookButtonPurposeArgTypes = {
   ...storybookButtonIconArgTypes
@@ -10939,6 +12550,27 @@ var storybookSkeletonArgTypes = {
     description: "Accessible label for standalone loading placeholder groups"
   }
 };
+var storybookProgressBarArgTypes = {
+  label: { control: "text" },
+  value: { control: { type: "number", min: -1e3, max: 1e3, step: 1 } },
+  min: { control: { type: "number", min: -1e3, max: 1e3, step: 1 } },
+  max: { control: { type: "number", min: -1e3, max: 1e3, step: 1 } },
+  size: {
+    control: "inline-radio",
+    options: ["small", "default"],
+    description: "Figma track size: small is 4px, default is 8px"
+  },
+  state: {
+    control: "select",
+    options: ["default", "hover", "pressed", "focus"],
+    description: "Visual state for documentation and visual QA"
+  },
+  disabled: { control: "boolean" },
+  showLabel: { control: "boolean" },
+  showPercentage: { control: "boolean" },
+  valueLabel: { control: "text" },
+  ariaLabel: { control: "text" }
+};
 var storybookStatTileArgTypes = {
   tone: {
     control: "select",
@@ -10981,6 +12613,7 @@ var storybookSpacingArgTypes = {
       "sp-2",
       "sp-4",
       "sp-8",
+      "sp-12",
       "sp-16",
       "sp-24",
       "sp-32",
@@ -10996,7 +12629,7 @@ var storybookSpacingArgTypes = {
       "sp-112",
       "sp-120"
     ],
-    description: "Size variant (sp-0=0 \u2026 sp-24=24 \u2026 sp-80=80 \u2026 sp-120=120px)"
+    description: "Size variant (sp-0=0 \u2026 sp-12=12 \u2026 sp-24=24 \u2026 sp-120=120px)"
   },
   scale: {
     control: { type: "number", min: 1, max: 8, step: 0.5 },
@@ -11048,7 +12681,7 @@ var storybookSliderArgTypes = {
 };
 var storybookDocsDescription = {
   linkButton: "LinkButton locks navigation semantics, renders as an anchor, and keeps the canonical text treatment. Use Button for intentional visual deviations.",
-  destructiveButton: "DestructiveButton locks destructive semantics, uses the canonical primary + error treatment, and requires confirmation by default. Use Button for intentional exceptions.",
+  destructiveButton: "DestructiveButton locks destructive semantics, uses the canonical danger treatment, and requires confirmation by default. Use Button for intentional exceptions.",
   submitButton: "SubmitButton locks form-submit semantics, always renders as a button, and keeps the canonical primary treatment.",
   saveButton: "SaveButton locks save semantics and the canonical primary treatment. Use Button if you need a different visual hierarchy.",
   confirmButton: "ConfirmButton locks affirmative confirmation semantics, always renders as a button, and keeps the canonical success treatment.",
@@ -11066,6 +12699,6 @@ var storybookDocsDescription = {
   colors: "Complete color palette from the design system. Semantic roles map to CSS variables, with label colors auto-derived by default and overrideable for brand-specific fills."
 };
 
-export { AvatarSize, AvatarType, BadgeVariant, ButtonAction, ButtonSize, ButtonVariant, DENSITY_SCALES, IconName, SkeletonAnimation, SkeletonVariant, Spacings, SpinnerVariant, SpinnerVariants, SwitchSize, ThemeMode, accordionPurposeComponentReference, accordionWhyPurposeComponents, avatarPurposeSemantics, avatarPurposes, badgePurposeComponentReference, badgePurposeSemantics, badgePurposes, badgeWhyPurposeComponents, buildAccordionFieldA11yIds, buildCheckboxA11y, buildCheckboxFieldA11yIds, buildCheckboxGroupFieldA11yIds, buildCurrencyHelperText, buildGoogleFontsUrl, buildHeadingA11y, buildInputFieldA11yIds, buildRadioA11y, buildRadioGroupFieldA11yIds, buildRichTextFieldA11yIds, buildSliderFieldA11yIds, buildSwitchFieldA11yIds, buildTabGroupA11yIds, buttonActionSemanticPurposes, buttonPurposeSemantics, buttonPurposes, buttonVariantVisualStyles, buttonWhySemanticComponents, canonicalSemanticAttributeNames, canonicalSemanticAttributeRegistry, canonicalSemanticAttributes, cardPurposeComponentReference, cardWhyPurposeComponents, checkboxRecipe, createAccordionRecipe, createAvatarRecipe, createBadgeRecipe, createButtonRecipe, createCardRecipe, createDatePickerRecipe, createDialogRecipe, createDividerRecipe, createFamilySemanticAttributes, createFontStack, createIconRecipe, createInputOtpRecipe, createInputRecipe, createMarwesThemeScript, createMarwesThemeStyle, createPurposeSemanticAttributes, createRichTextRecipe, createSelectRecipe, createSkeletonRecipe, createSliderRecipe, createSpacingRecipe, createSpinnerRecipe, createStatTileRecipe, createSwitchRecipe, createTabRecipe, createTextareaRecipe, createToastRecipe, createTooltipRecipe, currencyCodes, darkThemeDefaults, densityToCSSVars, dialogPurposeComponentReference, dialogPurposeSemantics, dialogPurposes, dialogWhyPurposeComponents, emptySemanticAttributes, escapeRichTextHtml, extractFontFamilyName, extractUsedWeights, familySemanticsRegistry, fieldComparisonRows, fieldWhyPurposeComponents, filterUndefinedSemanticAttributes, getCurrencySymbol, headingRecipe, iconNames, iconNamesList, iconRegistry, iconSizeScale, iconStrokeWidthScale, isRichTextHtmlEmpty, isSystemFont, isThemeMode, isThemePreference, lightThemeDefaults, mergeIdRefs, mergeSemanticAttributes, moveTabSelection, mwAvailableFonts, mwFontFallbacks, mwGoogleFontFamilies, mwStyledTheme, mwThemeVarNames, mwThemeVars, mwVar, nextThemeMode, normalizeRichTextHtml, paragraphRecipe, purposeSemanticsRegistry, radioPurposeComponentReference, radioRecipe, radioWhyPurposeComponents, resolveAccordionA11y, resolveAvatarA11y, resolveBadgeA11y, resolveButtonLoading, resolveDatePickerDayLabel, resolveDialogA11y, resolveIconA11y, resolveIconSize, resolveIconStrokeWidth, resolveRichTextAllowedFormats, resolveSelectMode, resolveServerThemeMode, resolveSkeletonA11y, resolveSliderA11y, resolveSpinnerA11y, resolveSpinnerSize, resolveStatTileTrendLabel, resolveSwitchA11y, resolveTabA11y, resolveTabValue, resolveThemeInput, resolveThemePreference, resolveToastA11y, resolveTone, resolveTooltipA11y, richTextCommandByFormat, richTextFormattingReference, richTextWhyUseIt, sanitizeCurrencyValue, sanitizeInputOtpValue, semanticFamilies, semanticFrameworkSupport, semanticIntents, semanticLayers, semanticOrientations, semanticOutcomes, semanticPurposes, shouldLoadGoogleFont, skeletonAnimations, skeletonVariants, sliderPurposeComponentReference, sliderWhyPurposeComponents, spinnerSizeScale, spinnerSizes, spinnerVariants, storybookA11yPolicy, storybookButtonGeneralArgTypes, storybookButtonIconArgTypes, storybookButtonPurposeArgTypes, storybookCheckboxArgTypes, storybookDatePickerArgTypes, storybookDividerArgTypes, storybookDocsDescription, storybookIconGalleryArgTypes, storybookIconGalleryDefaults, storybookIconNames, storybookLayout, storybookOptionalIconNames, storybookRadioArgTypes, storybookSkeletonArgTypes, storybookSliderArgTypes, storybookSpacingArgTypes, storybookSpinnerArgTypes, storybookStatTileArgTypes, switchPurposeComponentReference, switchWhyPurposeComponents, tabPurposeComponentReference, tabWhyPurposeComponents, themeModesToCSSRules, themeToCSSRule, themeToCSSVars, toastPurposeComponentReference, toastPurposeSemantics, toastPurposes, toastWhyPurposeComponents, validateSemanticRegistry };
+export { AvatarSize, AvatarType, BadgeVariant, BannerVariant, ButtonAction, ButtonSize, ButtonVariant, DEFAULT_PROGRESS_BAR_LABEL, DEFAULT_PROGRESS_BAR_MAX, DEFAULT_PROGRESS_BAR_MIN, DENSITY_SCALES, IconName, ProgressBarSize, ProgressBarState, SkeletonAnimation, SkeletonVariant, Spacings, SpinnerVariant, SpinnerVariants, SwitchSize, TextVariant, ThemeMode, accordionPurposeComponentReference, accordionWhyPurposeComponents, avatarPurposeSemantics, avatarPurposes, badgePurposeComponentReference, badgePurposeSemantics, badgePurposes, badgeWhyPurposeComponents, bannerPurposeSemantics, bannerPurposes, buildAccordionFieldA11yIds, buildCheckboxA11y, buildCheckboxFieldA11yIds, buildCheckboxGroupFieldA11yIds, buildCurrencyHelperText, buildGoogleFontsUrl, buildHeadingA11y, buildInputFieldA11yIds, buildRadioA11y, buildRadioGroupFieldA11yIds, buildRichTextFieldA11yIds, buildSliderFieldA11yIds, buildSwitchFieldA11yIds, buildTabGroupA11yIds, buttonActionSemanticPurposes, buttonPurposeSemantics, buttonPurposes, buttonVariantVisualStyles, buttonWhySemanticComponents, canonicalSemanticAttributeNames, canonicalSemanticAttributeRegistry, canonicalSemanticAttributes, cardPurposeComponentReference, cardWhyPurposeComponents, checkboxRecipe, clampPaginationPage, clampProgressBarValue, createAccordionRecipe, createAvatarRecipe, createBadgeRecipe, createBannerRecipe, createBreadcrumbRecipe, createButtonRecipe, createCardRecipe, createContextMenuRecipe, createDatePickerRecipe, createDialogRecipe, createDividerRecipe, createDrawerRecipe, createFamilySemanticAttributes, createFontStack, createIconRecipe, createInputOtpRecipe, createInputRecipe, createMarwesThemeScript, createMarwesThemeStyle, createMwTheme, createMwThemeMedia, createPaginationControlRecipe, createPaginationEllipsisRecipe, createPaginationItems, createPaginationListItemRecipe, createPaginationListRecipe, createPaginationPageRecipe, createPaginationRecipe, createProgressBarRecipe, createPurposeSemanticAttributes, createRichTextRecipe, createSegmentedControlItemRecipe, createSegmentedControlRecipe, createSelectRecipe, createSkeletonRecipe, createSkipLinkRecipe, createSliderRecipe, createSpacingRecipe, createSpinnerRecipe, createStatTileRecipe, createSwitchRecipe, createTabRecipe, createTextareaRecipe, createToastRecipe, createTooltipRecipe, currencyCodes, darkThemeDefaults, defaultThemeBreakpoints, densityToCSSVars, dialogPurposeComponentReference, dialogPurposeSemantics, dialogPurposes, dialogWhyPurposeComponents, emptySemanticAttributes, escapeRichTextHtml, extractFontFamilyName, extractUsedWeights, familySemanticsRegistry, fieldComparisonRows, fieldWhyPurposeComponents, filterUndefinedSemanticAttributes, getCurrencySymbol, headingRecipe, iconNames, iconNamesList, iconRegistry, iconSizeScale, iconStrokeWidthScale, isRichTextHtmlEmpty, isSystemFont, isThemeMode, isThemePreference, lightThemeDefaults, mergeIdRefs, mergeSemanticAttributes, moveSegmentedControlSelection, moveTabSelection, mwAvailableFonts, mwFontFallbacks, mwGoogleFontFamilies, mwStyledTheme, mwTheme, mwThemeVarNames, mwThemeVars, mwVar, nextThemeMode, normalizeRichTextHtml, paragraphRecipe, progressBarSizes, progressBarStates, purposeSemanticsRegistry, radioPurposeComponentReference, radioRecipe, radioWhyPurposeComponents, resolveAccordionA11y, resolveAvatarA11y, resolveBadgeA11y, resolveBannerA11y, resolveBreadcrumbA11y, resolveBreadcrumbHomeA11y, resolveBreadcrumbItemA11y, resolveBreadcrumbListA11y, resolveBreadcrumbSeparatorA11y, resolveButtonLoading, resolveContextMenuA11y, resolveContextMenuDividerA11y, resolveContextMenuItemA11y, resolveDatePickerDayLabel, resolveDialogA11y, resolveDrawerA11y, resolveIconA11y, resolveIconSize, resolveIconStrokeWidth, resolvePaginationA11y, resolvePaginationAdaptiveMaxVisibleItems, resolvePaginationAdaptiveProfile, resolvePaginationControlA11y, resolvePaginationEllipsisA11y, resolvePaginationItemAriaLabel, resolvePaginationListA11y, resolvePaginationPageA11y, resolvePaginationReservedItemCount, resolveProgressBarA11y, resolveProgressBarBounds, resolveRichTextAllowedFormats, resolveSegmentedControlA11y, resolveSegmentedControlItemA11y, resolveSegmentedControlValue, resolveSelectMode, resolveServerThemeMode, resolveSkeletonA11y, resolveSliderA11y, resolveSpinnerA11y, resolveSpinnerSize, resolveStatTileTrendLabel, resolveSwitchA11y, resolveTabA11y, resolveTabValue, resolveThemeInput, resolveThemePreference, resolveToastA11y, resolveTone, resolveTooltipA11y, richTextCommandByFormat, richTextFormattingReference, richTextWhyUseIt, sanitizeCurrencyValue, sanitizeInputOtpValue, semanticFamilies, semanticFrameworkSupport, semanticIntents, semanticLayers, semanticOrientations, semanticOutcomes, semanticPurposes, shouldLoadGoogleFont, skeletonAnimations, skeletonVariants, sliderPurposeComponentReference, sliderWhyPurposeComponents, spinnerSizeScale, spinnerSizes, spinnerVariants, storybookA11yPolicy, storybookButtonGeneralArgTypes, storybookButtonIconArgTypes, storybookButtonPurposeArgTypes, storybookCheckboxArgTypes, storybookDatePickerArgTypes, storybookDividerArgTypes, storybookDocsDescription, storybookIconButtonArgTypes, storybookIconGalleryArgTypes, storybookIconGalleryDefaults, storybookIconNames, storybookLayout, storybookOptionalIconNames, storybookProgressBarArgTypes, storybookRadioArgTypes, storybookSkeletonArgTypes, storybookSliderArgTypes, storybookSpacingArgTypes, storybookSpinnerArgTypes, storybookStatTileArgTypes, switchPurposeComponentReference, switchWhyPurposeComponents, tabPurposeComponentReference, tabWhyPurposeComponents, textRecipe, themeModesToCSSRules, themeToCSSRule, themeToCSSVars, toastPurposeComponentReference, toastPurposeSemantics, toastPurposes, toastWhyPurposeComponents, validateSemanticRegistry };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map