@muibook/components 19.5.1 → 19.6.0

package/dist/esm/custom-elements.json

@@ -108,7 +108,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/mui-alert/doc.ts",
+      "path": "src/components/mui-avatar/doc.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -116,7 +116,7 @@
           "type": {
             "text": "MuiDocs"
           },
-          "default": "{ Alert: { title: \"Alert\", description: \"Alerts surface meaningful system messages related to the users' current task or action.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/7GnGBCbpMF3wyjCDC06hX7/24739b86a907d15400fe8e9e240a9619/Alert_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=3-4444&t=ZA9uH4LK37tSuk6r-1\", ], guides: [\"https://guides.muibook.com/alert\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-alert/index.ts\"], storybook: [\"https://stories.muibook.com/?path=/docs/feedback-alert--docs\"], website: [\"https://muibook.com/#/alert\"], usage: { list: [ \"Success: Confirm completed actions such as form submissions, data saves, or task completion.\", \"Info: For sharing new features, updates, contextual tips, or non-urgent system statuses.\", \"Warning: Alert users to unsaved changes, deprecated features, or risky actions.\", \"Error: Alert users of form validation issues, system failures, or tasks that need attention.\", ], }, accessibility: { designerList: [ \"ARIA-live is built in, using POLITE + ASSERTIVE for screen readers.\", \"The role is set to ALERT for immediate screen reader feedback.\", ], engineerList: [ \"ARIA-live is built in, using POLITE + ASSERTIVE for screen readers.\", \"The role is set to ALERT for immediate screen reader feedback.\", ], }, anatomy: { list: [ \"Preset icon: Communicates the type of alert visually. E.g. info, success, warning, error.\", \"Preset title: Provides a clear, predefined heading that reflects the alert’s purpose.\", \"Customisable text: Allows for specific details or guidance relevant to the situation.\", ], image: \"https://images.ctfassets.net/i5uwscj4pkk2/17j3DxAFlne6rvMi6QUXqZ/aedab2c349c8f8b0a8414b41132cda51/Alert_-_Anatomy.png\", }, variants: { items: [ { key: \"success\", title: \"Success\", description: \"Indicates that an operation or action has been completed successfully. Use this variant for scenarios such as form submissions processed without errors, successful data updates or saves, and confirmations of completed tasks or actions. For accessibility, this variant uses an aria-live value of polite.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2EbJsP3GZ98WPOiF4PbGh2/bc3e020b37b73f949be745e4e26b6e5a/alert-success.png\", }, { key: \"info\", title: \"Info\", description: \"Provides general information or updates that are helpful but not critical. This variant is used for announcing new features or updates, offering contextual information or tips, and informing users about non-urgent system statuses. For accessibility, it uses an aria-live value of polite.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/1SDh1JVNouysPHylu9lTUj/6793dd8aa854d08045c2159b450b762c/alert-info.png\", }, { key: \"warning\", title: \"Warning\", description: \"Alerts users to potential issues or situations that require caution. Common use cases include notifying about unsaved changes, indicating deprecated features or upcoming changes, and highlighting actions that may have unintended consequences. For accessibility, this variant uses an aria-live value of assertive.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2zympGRb3wlU5P36FsKWsL/dd9bde33646345e65d5bff505d512e22/alert-warning.png\", }, { key: \"error\", title: \"Error\", description: \"Indicates that an error has occurred, requiring user attention or action. This variant is typically used for form validation errors, system failures or exceptions, and failed operations or transactions. For accessibility, it uses an aria-live value of assertive.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/zOH2Xinum4ZjIv3qp6LJM/180a2306dd624b6bc2fa55c0ad81ea0e/alert-error.png\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"ai-playground-error-1\", name: \"AI Playground (Error)\", description: \"Demonstrates the Muiplay AI Playground showing a floating error positioned close to the field where a prompt is required to generate a task.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/40RfRPVAN9dvWO7UFuIiUC/52de3cffd69a5bcc2e457f8de03bb9cf/Play-Alert-Composition.png\", }, { key: \"ai-playground-error-2\", name: \"AI Playground (Error)\", description: \"Demonstrates the Muiplay AI Playground showing a floating error positioned close to the field where a prompt is required to generate a task.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/40RfRPVAN9dvWO7UFuIiUC/52de3cffd69a5bcc2e457f8de03bb9cf/Play-Alert-Composition.png\", }, ], }, related: { items: [ { name: \"Message\", link: \"https://guides.muibook.com/message\" }, { name: \"Link\", link: \"https://guides.muibook.com/link\" }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [ { description: \"\", image: \"\" }, { description: \"\", image: \"\" }, ], dontContent: [{ description: \"\" }, { description: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
+          "default": "{ Avatar: { title: \"Avatar\", description: \"Avatar components are used to represent users or entities visually, often through images, initials, or icons.\", hero: [\"https://images.ctfassets.net/i5uwscj4pkk2/2Qj1aPRsHVZZs6eF8XO6XC/54dd3c04d5a0ac379050cfa6f45d9732/Avatar_-_Home_Image.png\"], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=1498-15366&t=2P2nhh7B70fl6xQ4-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/inputs-avatar--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-avatar/index.ts\"], website: [\"https://muibook.com/#/avatar\"], guides: [\"https://guides.muibook.com/avatar\"], usage: { list: [ \"Represent a user or entity visually in lists, chats, comments, or profiles.\", \"Display a profile photo, initials, or icon associated with a person or object.\", \"Use in compact UI elements where space is limited (e.g., tables, cards).\", \"Pair with user metadata (name, role, status) for context.\", \"Indicate presence, status, or selection in collaborative interfaces.\", \"Avatar can be slotted into Button for identity-led actions such as switching video platform profiles, opening an account menu, or accessing workspace controls.\", \"Use an avatar-only button when the avatar itself is the visible trigger for a profile dropdown, account settings drawer, workspace switcher, or compact dialog action.\", \"In global app headers, avatar-only buttons are a good fit for account settings, billing, support, or team context menus.\", \"When Avatar is the only content inside Button, let the avatar define the final size and treat Button as the interactive wrapper.\", ], }, accessibility: { designerList: [ \"Avatars should always include an accessible label via the label attribute to ensure screen readers can convey their purpose.\", \"When using images, ensure they are clear and appropriately sized for the avatar component.\", \"For avatars representing users, consider using initials or icons when images are not available to maintain visual consistency.\", ], engineerList: [ \"Avatars should always include an accessible label via the label attribute to ensure screen readers can convey their purpose.\", \"When using images, ensure they are clear and appropriately sized for the avatar component.\", \"For avatars representing users, consider using initials or icons when images are not available to maintain visual consistency.\", ], }, anatomy: { image: \"\", list: [ \"Image / Initials / Icon: The visible identity marker shown inside the avatar.\", \"Label: Accessible name announced to assistive technology.\", \"Status or Context (optional): Additional meaning can be conveyed through surrounding UI such as presence, role, or action context.\", ], }, variants: { items: [ { key: \"image\", title: \"Image\", description: \"Use when a profile or entity image is available and recognition matters.\", image: \"\", }, { key: \"initials\", title: \"Initials\", description: \"Use as the default fallback when no image is present but the entity has a clear name.\", image: \"\", }, { key: \"icon\", title: \"Icon\", description: \"Use for generic entities, products, or utility actions where a person-specific identity is not required.\", image: \"\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how Avatar fits into identity, communication, and account-oriented UI patterns.\", items: [ { key: \"account-menu\", name: \"Account Menu Trigger\", description: \"An avatar-only button used in a global app header to open account, billing, or support actions.\", image: \"\", }, { key: \"profile-switcher\", name: \"Profile Switcher\", description: \"A compact avatar trigger used to switch between people, channels, or workspace identities in a media or collaboration product.\", image: \"\", }, ], }, related: { items: [ { name: \"Button\", link: \"https://guides.muibook.com/button\", }, { name: \"Chip\", link: \"https://guides.muibook.com/chip\", }, { name: \"Slat\", link: \"https://guides.muibook.com/slat\", }, ], }, rules: [ { heading: \"Use the right identity source\", description: \"Choose the avatar content type based on confidence in the identity data and the importance of recognition.\", doContent: [ { description: \"Use a real image when recognition matters, initials when a name is available, and an icon for generic or product-level identities.\", image: \"\", }, ], dontContent: [ { description: \"Do not force decorative imagery or inconsistent fallback logic when the identity is unclear.\", image: \"\", }, ], }, ], behaviour: { list: [ \"Avatar is presentational by default and becomes interactive when wrapped by Button or another interactive parent.\", \"When used inside an avatar-only button, Avatar owns the visible size while Button owns interaction semantics, focus, and disabled behaviour.\", ], }, writing: { list: [ \"Provide a meaningful label so assistive technology can identify the person, entity, or action context represented by the avatar.\", ], }, }, }"
         }
       ],
       "exports": [
@@ -125,84 +125,174 @@
           "name": "muiDocs",
           "declaration": {
             "name": "muiDocs",
-            "module": "src/components/mui-alert/doc.ts"
+            "module": "src/components/mui-avatar/doc.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/mui-alert/index.ts",
+      "path": "src/components/mui-avatar/index.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Surfaces task-related feedback with an intent icon, message content and optional action.",
-          "name": "MuiAlert",
+          "description": "Displays an image, initials, or slotted icon for a represented person or entity.",
+          "name": "MuiAvatar",
           "attributes": [
             {
-              "name": "variant",
+              "name": "label",
               "type": {
-                "text": "\"positive\" | \"info\" | \"warning\" | \"attention\" | \"success\" | \"error\""
+                "text": "string"
               },
-              "default": "positive",
-              "description": "Feedback intent. `success` normalises to `positive`; `error` normalises to `attention`."
+              "description": "Accessible name and initials source when no image or slotted content is present."
             },
             {
-              "name": "label",
+              "name": "image",
               "type": {
                 "text": "string"
               },
-              "description": "Overrides the intent prefix label."
+              "description": "Image URL used when no slotted content is supplied."
             },
             {
-              "name": "hide-label",
+              "name": "size",
               "type": {
-                "text": "boolean"
+                "text": "\"xx-small\" | \"x-small\" | \"small\" | \"medium\" | \"large\""
               },
-              "default": "false",
-              "description": "Hides the visible intent prefix label."
+              "default": "medium",
+              "description": "Avatar dimensions. Defaults map `xx-small` to 24px and `x-small` to 32px."
             },
             {
-              "name": "size",
+              "name": "background",
               "type": {
-                "text": "\"small\" | \"medium\" | \"large\""
+                "text": "string"
               },
-              "default": "medium",
-              "description": "Alert density and coordinated icon/action size."
+              "default": "neutral",
+              "description": "Named semantic or profile color background."
+            },
+            {
+              "name": "background-color",
+              "type": {
+                "text": "string"
+              },
+              "description": "Custom CSS color overriding the named background treatment."
             }
           ],
           "superclass": {
             "name": "HTMLElement"
           },
-          "tagName": "mui-alert",
+          "tagName": "mui-avatar",
           "customElement": true,
           "slots": [
             {
               "name": "",
-              "description": "Alert message content, including optional inline links."
-            },
-            {
-              "name": "action",
-              "description": "Optional `mui-button` or `mui-link` action aligned and sized for the alert."
+              "description": "Optional icon or custom visible avatar content."
             }
           ],
           "events": [],
           "cssProperties": [
             {
-              "name": "--alert-radius",
-              "description": "Alert surface corner radius."
+              "name": "--avatar-xx-small",
+              "description": "Dimension for `size=\"xx-small\"`; defaults to 24px."
             },
             {
-              "name": "--alert-padding-small",
-              "description": "Surface padding for small alerts."
+              "name": "--avatar-x-small",
+              "description": "Dimension for `size=\"x-small\"`; defaults to 32px."
             },
             {
-              "name": "--alert-padding-medium",
-              "description": "Surface padding for medium alerts."
+              "name": "--avatar-background-override",
+              "description": "Overrides the resolved avatar background color."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "mui-avatar",
+          "declaration": {
+            "name": "MuiAvatar",
+            "module": "src/components/mui-avatar/index.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/mui-badge/doc.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "muiDocs",
+          "type": {
+            "text": "MuiDocs"
+          },
+          "default": "{ Badge: { title: \"Badge\", description: \"Badges are non-interactive and indicate counts or statuses.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/3uhL6lnJTEY4LtVyMA3og5/7844fa7e691b9f97e3c335e1a978e881/Badge_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=3-1108&t=FSv3FEahG8VQW1FZ-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/feedback-badge--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-badge/index.ts\"], website: [\"https://muibook.com/#/badge\"], guides: [\"https://guides.muibook.com/badge\"], usage: { list: [ \"Show the number of unread notifications – E.g. '4' unread messages\", \"Indicate the status of a user – E.g. Online, Busy, or Away\", \"Use size variants (xx-small, x-small, small, medium, large) to match surrounding component scale.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"], }, anatomy: { image: \"\", list: [\"\"], }, variants: { items: [ { key: \"default\", title: \"default\", description: \"Used for data that is visually in the foreground.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3Xgz2qoLs8NACel4fRr9iC/52699b5763f1efd4853a9ffb991b3ff3/badge-default.png\", }, { key: \"positive\", title: \"positive\", description: \"For positive or completed statuses.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/65RMIuUEUIzusbSAwqLQcI/63edb290041c708fc69d0d27fc49e25d/badge-positive.png\", }, { key: \"warning\", title: \"warning\", description: \"For urgent or important statuses.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/5AFfOShVyTEKO1wgIe6rYv/e809c76ddabdfd9789adc31a26becf83/badge-warning.png\", }, { key: \"error\", title: \"error\", description: \"Represents an error, issue or critical state.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/E0jtn7WSTwYligMqSNl0k/c3c041e025c3725682ec12eb3ab98400/badge-error.png\", }, { key: \"overlay\", title: \"overlay\", description: \"For labels placed on media/image surfaces with stronger contrast.\", image: \"\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"outcome-based-roadmap\", name: \"Outcome-Based Roadmap\", description: \"Example of an Outcome-Based Roadmap page showing objectives organised into Upcoming, Doing, and Finished columns. Progress bars indicate the completion status of each task, providing a clear view of overall progress.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3w5htPtfEz7QMCH9alVcwf/de35725fb4542b891bd695b900195291/Outcomes-Progress-Composition.png\", }, { key: \"compliance-dashboard-table\", name: \"Compliance Dashboard Table\", description: \"This example shows a desktop view of a table used within an accounting compliance dashboard.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3vUKA5C5iJ3LvjLwf2WiO9/274ffe423dbe828244294f6809172ce1/table-composition-compliance-dashboard.png\", }, { key: \"carousel-showcase\", name: \"Carousel Showcase\", description: \"This example from the GuruSuite website demonstrates the carousel used to showcase two of the products on offer.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2TaRRm351HyujF9mT2w1wH/3958f69e939d20618751742130dc5f06/GuruSuite-Carousel-Composition.png\", }, { key: \"outcomes-roadmap-dashboard\", name: \"Outcomes Roadmap Dashboard\", description: \"Example of the responsive component in the Outcomes Roadmap Dashboard, demonstrating layout, title, and padding adjustments across breakpoints.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3FsXandRr1Z9BAKv33twxT/b0d0e4a8b6237bf7d38660111bceb8ab/responsive-composition.gif\", }, ], }, related: { items: [ { name: \"Button\", link: \"https://guides.muibook.com/button\", }, { name: \"Link\", link: \"https://guides.muibook.com/link\", }, { name: \"Tab Bar\", link: \"https://guides.muibook.com/tab-bar\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "muiDocs",
+          "declaration": {
+            "name": "muiDocs",
+            "module": "src/components/mui-badge/doc.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/mui-badge/index.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Displays compact status or metadata labels with semantic variants and size scaling.",
+          "name": "MuiBadge",
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "\"neutral\" | \"positive\" | \"warning\" | \"attention\" | \"overlay\""
+              },
+              "default": "neutral",
+              "description": "Sets the badge intent style."
             },
             {
-              "name": "--alert-padding-large",
-              "description": "Surface padding for large alerts."
+              "name": "size",
+              "type": {
+                "text": "\"xx-small\" | \"x-small\" | \"small\" | \"medium\" | \"large\""
+              },
+              "default": "medium",
+              "description": "Controls the badge scale."
+            },
+            {
+              "name": "usage",
+              "type": {
+                "text": "\"slat-end\""
+              },
+              "description": "Applies layout-specific styling for supported parent patterns."
+            }
+          ],
+          "superclass": {
+            "name": "HTMLElement"
+          },
+          "tagName": "mui-badge",
+          "customElement": true,
+          "slots": [
+            {
+              "name": "",
+              "description": "Badge text content."
+            }
+          ],
+          "events": [],
+          "cssProperties": [
+            {
+              "name": "--badge-radius",
+              "description": "Controls the badge corner radius."
+            },
+            {
+              "name": "--badge-font-weight",
+              "description": "Controls the badge text weight."
             }
           ]
         }
@@ -210,10 +300,10 @@
       "exports": [
         {
           "kind": "custom-element-definition",
-          "name": "mui-alert",
+          "name": "mui-badge",
           "declaration": {
-            "name": "MuiAlert",
-            "module": "src/components/mui-alert/index.ts"
+            "name": "MuiBadge",
+            "module": "src/components/mui-badge/index.ts"
           }
         }
       ]
@@ -228,7 +318,7 @@
           "type": {
             "text": "MuiDocs"
           },
-          "default": "{ Body: { title: \"Body\", description: \"Use the Body component for clear and readable paragraph text across the UI. It’s ideal for longer-form content such as descriptions, explanations, or supporting information. Variant styles are also available for status messages and other contextual needs.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/GGmtyOnGHBMGMrvkPTWSL/2c6ff12702d76c1393b2315b19728aa3/Body_-_Home_Image.png\", ], figma: [\"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=3-892&t=fSFYVey9aCoE5oQa-1\"], storybook: [\"https://stories.muibook.com/?path=/docs/content-body--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-body/index.ts\"], website: [\"https://muibook.com/#/button\"], guides: [\"https://guides.muibook.com/body\"], usage: { list: [ \"Use for supporting content or descriptions.\", \"Use states like Default, Success, Warning and Error to align with feedback or messaging contexts.\", \"Match the body size to the layout’s overall design and readability.\", \"Adjust the size by selecting x-small, small, medium or large.\", \"Use before/after slots to compose inline icons, badges, or helper UI with body text.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"], }, anatomy: { image: \"\", list: [\"\"], }, variants: { items: [ { key: \"default\", title: \"Default\", description: \"Standard body text with x-small, small, medium and large for tailored readability. In addition to the size, font weight of regular and bold is available.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2NAalFsBAkeBz69hO093eb/b9390132c50df11749aaa47dafdb2b93/default.png\", }, { key: \"optional\", title: \"Optional\", description: \"Optional text is visually lighter, providing subtle contrast to Standard body text. It comes in four sizes—x-small, small, medium, and large—for tailored readability. Font weights of regular and bold are also available, giving flexibility for emphasis or hierarchy.\", image: \"\", }, { key: \"success\", title: \"Success\", description: \"Indicates positive feedback with the option of x-small, small, medium and large for tailored readability. In addition to the size, font weight of regular and bold is available.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/8RChklU9yHSY7PTJH0JLD/c72f630006f2be4e7f1d850d7510c92f/success.png\", }, { key: \"warning\", title: \"Warning\", description: \"Highlights warning messages with the option of x-small, small, medium, and large for tailored readability. In addition to the size, font weight of regular and bold is available.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2UJaVEXU2fbKPi3L7afjt/e82b06ef54e92cf2d6f6e984d8a27079/warning.png\", }, { key: \"error\", title: \"Error\", description: \"Highlights error messages with the option of x-small, small, medium, and large for tailored readability. In addition to the size, font weight of regular and bold is available.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/egb4l4ubM0A6T44xAxDgz/5d94fa59f0069b689da537710650e22b/error.png\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"muibook-resource\", name: \"Muibook Resource\", description: \"The Muibook documentation site uses MUI components to compose its layout, including headings, text, lists, buttons, icons, and image components.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3LVvuYDZWRnMhxNy6GMLNd/c5074a05eacb2c22c50ea172b3567c48/Muibook-List-Composition.png\", }, { key: \"outcomes-roadmap-dashboard\", name: \"Outcomes Roadmap Dashboard\", description: \"Example of the responsive component in the Outcomes Roadmap Dashboard, demonstrating layout, title, and padding adjustments across breakpoints.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3FsXandRr1Z9BAKv33twxT/b0d0e4a8b6237bf7d38660111bceb8ab/responsive-composition.gif\", }, { key: \"outcome-based-roadmap\", name: \"Outcome-Based Roadmap\", description: \"Example of an Outcome-Based Roadmap page showing objectives organised into Upcoming, Doing, and Finished columns. Progress bars indicate the completion status of each task, providing a clear view of overall progress.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3w5htPtfEz7QMCH9alVcwf/de35725fb4542b891bd695b900195291/Outcomes-Progress-Composition.png\", }, ], }, related: { items: [ { name: \"Heading\", link: \"https://guides.muibook.com/heading\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
+          "default": "{ Body: { title: \"Body\", description: \"Use the Body component for clear and readable paragraph text across the UI. It’s ideal for longer-form content such as descriptions, explanations, or supporting information. Variant styles are also available for status messages and other contextual needs.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/GGmtyOnGHBMGMrvkPTWSL/2c6ff12702d76c1393b2315b19728aa3/Body_-_Home_Image.png\", ], figma: [\"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=3-892&t=fSFYVey9aCoE5oQa-1\"], storybook: [\"https://stories.muibook.com/?path=/docs/content-body--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-body/index.ts\"], website: [\"https://muibook.com/#/button\"], guides: [\"https://guides.muibook.com/body\"], usage: { list: [ \"Use for supporting content or descriptions.\", \"Use states like Default, Info, Success, Warning and Error to align with feedback or messaging contexts.\", \"Match the body size to the layout’s overall design and readability.\", \"Adjust the size by selecting x-small, small, medium or large.\", \"Use before/after slots to compose inline icons, badges, or helper UI with body text.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"], }, anatomy: { image: \"\", list: [\"\"], }, variants: { items: [ { key: \"default\", title: \"Default\", description: \"Standard body text with x-small, small, medium and large for tailored readability. In addition to the size, font weight of regular and bold is available.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2NAalFsBAkeBz69hO093eb/b9390132c50df11749aaa47dafdb2b93/default.png\", }, { key: \"optional\", title: \"Optional\", description: \"Optional text is visually lighter, providing subtle contrast to Standard body text. It comes in four sizes—x-small, small, medium, and large—for tailored readability. Font weights of regular and bold are also available, giving flexibility for emphasis or hierarchy.\", image: \"\", }, { key: \"info\", title: \"Info\", description: \"Provides lightweight informational guidance in body text using a less impactful visual state. Pair with an info icon in the before slot when the copy needs inline context without the weight of a Message or Alert.\", image: \"\", }, { key: \"success\", title: \"Success\", description: \"Indicates positive feedback with the option of x-small, small, medium and large for tailored readability. In addition to the size, font weight of regular and bold is available.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/8RChklU9yHSY7PTJH0JLD/c72f630006f2be4e7f1d850d7510c92f/success.png\", }, { key: \"warning\", title: \"Warning\", description: \"Highlights warning messages with the option of x-small, small, medium, and large for tailored readability. In addition to the size, font weight of regular and bold is available.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2UJaVEXU2fbKPi3L7afjt/e82b06ef54e92cf2d6f6e984d8a27079/warning.png\", }, { key: \"error\", title: \"Error\", description: \"Highlights error messages with the option of x-small, small, medium, and large for tailored readability. In addition to the size, font weight of regular and bold is available.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/egb4l4ubM0A6T44xAxDgz/5d94fa59f0069b689da537710650e22b/error.png\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"muibook-resource\", name: \"Muibook Resource\", description: \"The Muibook documentation site uses MUI components to compose its layout, including headings, text, lists, buttons, icons, and image components.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3LVvuYDZWRnMhxNy6GMLNd/c5074a05eacb2c22c50ea172b3567c48/Muibook-List-Composition.png\", }, { key: \"outcomes-roadmap-dashboard\", name: \"Outcomes Roadmap Dashboard\", description: \"Example of the responsive component in the Outcomes Roadmap Dashboard, demonstrating layout, title, and padding adjustments across breakpoints.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3FsXandRr1Z9BAKv33twxT/b0d0e4a8b6237bf7d38660111bceb8ab/responsive-composition.gif\", }, { key: \"outcome-based-roadmap\", name: \"Outcome-Based Roadmap\", description: \"Example of an Outcome-Based Roadmap page showing objectives organised into Upcoming, Doing, and Finished columns. Progress bars indicate the completion status of each task, providing a clear view of overall progress.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3w5htPtfEz7QMCH9alVcwf/de35725fb4542b891bd695b900195291/Outcomes-Progress-Composition.png\", }, ], }, related: { items: [ { name: \"Heading\", link: \"https://guides.muibook.com/heading\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
         }
       ],
       "exports": [
@@ -270,10 +360,25 @@
             {
               "name": "variant",
               "type": {
-                "text": "\"default\" | \"optional\" | \"success\" | \"warning\" | \"error\""
+                "text": "\"default\" | \"optional\" | \"info\" | \"success\" | \"warning\" | \"error\""
               },
               "default": "default",
               "description": "Sets the semantic text color treatment."
+            },
+            {
+              "name": "truncate",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Clamps body text to a single line with ellipsis when the available width is constrained."
+            },
+            {
+              "name": "clamp",
+              "type": {
+                "text": "number"
+              },
+              "description": "Limits body text to the provided number of lines. Ignored when truncate is present."
             }
           ],
           "superclass": {
@@ -446,7 +551,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/mui-avatar/doc.ts",
+      "path": "src/components/mui-alert/doc.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -454,7 +559,7 @@
           "type": {
             "text": "MuiDocs"
           },
-          "default": "{ Avatar: { title: \"Avatar\", description: \"Avatar components are used to represent users or entities visually, often through images, initials, or icons.\", hero: [\"https://images.ctfassets.net/i5uwscj4pkk2/2Qj1aPRsHVZZs6eF8XO6XC/54dd3c04d5a0ac379050cfa6f45d9732/Avatar_-_Home_Image.png\"], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=1498-15366&t=2P2nhh7B70fl6xQ4-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/inputs-avatar--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-avatar/index.ts\"], website: [\"https://muibook.com/#/avatar\"], guides: [\"https://guides.muibook.com/avatar\"], usage: { list: [ \"Represent a user or entity visually in lists, chats, comments, or profiles.\", \"Display a profile photo, initials, or icon associated with a person or object.\", \"Use in compact UI elements where space is limited (e.g., tables, cards).\", \"Pair with user metadata (name, role, status) for context.\", \"Indicate presence, status, or selection in collaborative interfaces.\", \"Avatar can be slotted into Button for identity-led actions such as switching video platform profiles, opening an account menu, or accessing workspace controls.\", \"Use an avatar-only button when the avatar itself is the visible trigger for a profile dropdown, account settings drawer, workspace switcher, or compact dialog action.\", \"In global app headers, avatar-only buttons are a good fit for account settings, billing, support, or team context menus.\", \"When Avatar is the only content inside Button, let the avatar define the final size and treat Button as the interactive wrapper.\", ], }, accessibility: { designerList: [ \"Avatars should always include an accessible label via the label attribute to ensure screen readers can convey their purpose.\", \"When using images, ensure they are clear and appropriately sized for the avatar component.\", \"For avatars representing users, consider using initials or icons when images are not available to maintain visual consistency.\", ], engineerList: [ \"Avatars should always include an accessible label via the label attribute to ensure screen readers can convey their purpose.\", \"When using images, ensure they are clear and appropriately sized for the avatar component.\", \"For avatars representing users, consider using initials or icons when images are not available to maintain visual consistency.\", ], }, anatomy: { image: \"\", list: [ \"Image / Initials / Icon: The visible identity marker shown inside the avatar.\", \"Label: Accessible name announced to assistive technology.\", \"Status or Context (optional): Additional meaning can be conveyed through surrounding UI such as presence, role, or action context.\", ], }, variants: { items: [ { key: \"image\", title: \"Image\", description: \"Use when a profile or entity image is available and recognition matters.\", image: \"\", }, { key: \"initials\", title: \"Initials\", description: \"Use as the default fallback when no image is present but the entity has a clear name.\", image: \"\", }, { key: \"icon\", title: \"Icon\", description: \"Use for generic entities, products, or utility actions where a person-specific identity is not required.\", image: \"\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how Avatar fits into identity, communication, and account-oriented UI patterns.\", items: [ { key: \"account-menu\", name: \"Account Menu Trigger\", description: \"An avatar-only button used in a global app header to open account, billing, or support actions.\", image: \"\", }, { key: \"profile-switcher\", name: \"Profile Switcher\", description: \"A compact avatar trigger used to switch between people, channels, or workspace identities in a media or collaboration product.\", image: \"\", }, ], }, related: { items: [ { name: \"Button\", link: \"https://guides.muibook.com/button\", }, { name: \"Chip\", link: \"https://guides.muibook.com/chip\", }, { name: \"Slat\", link: \"https://guides.muibook.com/slat\", }, ], }, rules: [ { heading: \"Use the right identity source\", description: \"Choose the avatar content type based on confidence in the identity data and the importance of recognition.\", doContent: [ { description: \"Use a real image when recognition matters, initials when a name is available, and an icon for generic or product-level identities.\", image: \"\", }, ], dontContent: [ { description: \"Do not force decorative imagery or inconsistent fallback logic when the identity is unclear.\", image: \"\", }, ], }, ], behaviour: { list: [ \"Avatar is presentational by default and becomes interactive when wrapped by Button or another interactive parent.\", \"When used inside an avatar-only button, Avatar owns the visible size while Button owns interaction semantics, focus, and disabled behaviour.\", ], }, writing: { list: [ \"Provide a meaningful label so assistive technology can identify the person, entity, or action context represented by the avatar.\", ], }, }, }"
+          "default": "{ Alert: { title: \"Alert\", description: \"Alerts surface meaningful system messages related to the users' current task or action.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/7GnGBCbpMF3wyjCDC06hX7/24739b86a907d15400fe8e9e240a9619/Alert_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=3-4444&t=ZA9uH4LK37tSuk6r-1\", ], guides: [\"https://guides.muibook.com/alert\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-alert/index.ts\"], storybook: [\"https://stories.muibook.com/?path=/docs/feedback-alert--docs\"], website: [\"https://muibook.com/#/alert\"], usage: { list: [ \"Success: Confirm completed actions such as form submissions, data saves, or task completion.\", \"Info: For sharing new features, updates, contextual tips, or non-urgent system statuses.\", \"Warning: Alert users to unsaved changes, deprecated features, or risky actions.\", \"Error: Alert users of form validation issues, system failures, or tasks that need attention.\", ], }, accessibility: { designerList: [ \"ARIA-live is built in, using POLITE + ASSERTIVE for screen readers.\", \"The role is set to ALERT for immediate screen reader feedback.\", ], engineerList: [ \"ARIA-live is built in, using POLITE + ASSERTIVE for screen readers.\", \"The role is set to ALERT for immediate screen reader feedback.\", ], }, anatomy: { list: [ \"Preset icon: Communicates the type of alert visually. E.g. info, success, warning, error.\", \"Preset title: Provides a clear, predefined heading that reflects the alert’s purpose.\", \"Customisable text: Allows for specific details or guidance relevant to the situation.\", ], image: \"https://images.ctfassets.net/i5uwscj4pkk2/17j3DxAFlne6rvMi6QUXqZ/aedab2c349c8f8b0a8414b41132cda51/Alert_-_Anatomy.png\", }, variants: { items: [ { key: \"success\", title: \"Success\", description: \"Indicates that an operation or action has been completed successfully. Use this variant for scenarios such as form submissions processed without errors, successful data updates or saves, and confirmations of completed tasks or actions. For accessibility, this variant uses an aria-live value of polite.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2EbJsP3GZ98WPOiF4PbGh2/bc3e020b37b73f949be745e4e26b6e5a/alert-success.png\", }, { key: \"info\", title: \"Info\", description: \"Provides general information or updates that are helpful but not critical. This variant is used for announcing new features or updates, offering contextual information or tips, and informing users about non-urgent system statuses. For accessibility, it uses an aria-live value of polite.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/1SDh1JVNouysPHylu9lTUj/6793dd8aa854d08045c2159b450b762c/alert-info.png\", }, { key: \"warning\", title: \"Warning\", description: \"Alerts users to potential issues or situations that require caution. Common use cases include notifying about unsaved changes, indicating deprecated features or upcoming changes, and highlighting actions that may have unintended consequences. For accessibility, this variant uses an aria-live value of assertive.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2zympGRb3wlU5P36FsKWsL/dd9bde33646345e65d5bff505d512e22/alert-warning.png\", }, { key: \"error\", title: \"Error\", description: \"Indicates that an error has occurred, requiring user attention or action. This variant is typically used for form validation errors, system failures or exceptions, and failed operations or transactions. For accessibility, it uses an aria-live value of assertive.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/zOH2Xinum4ZjIv3qp6LJM/180a2306dd624b6bc2fa55c0ad81ea0e/alert-error.png\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"ai-playground-error-1\", name: \"AI Playground (Error)\", description: \"Demonstrates the Muiplay AI Playground showing a floating error positioned close to the field where a prompt is required to generate a task.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/40RfRPVAN9dvWO7UFuIiUC/52de3cffd69a5bcc2e457f8de03bb9cf/Play-Alert-Composition.png\", }, { key: \"ai-playground-error-2\", name: \"AI Playground (Error)\", description: \"Demonstrates the Muiplay AI Playground showing a floating error positioned close to the field where a prompt is required to generate a task.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/40RfRPVAN9dvWO7UFuIiUC/52de3cffd69a5bcc2e457f8de03bb9cf/Play-Alert-Composition.png\", }, ], }, related: { items: [ { name: \"Message\", link: \"https://guides.muibook.com/message\" }, { name: \"Link\", link: \"https://guides.muibook.com/link\" }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [ { description: \"\", image: \"\" }, { description: \"\", image: \"\" }, ], dontContent: [{ description: \"\" }, { description: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
         }
       ],
       "exports": [
@@ -463,82 +568,84 @@
           "name": "muiDocs",
           "declaration": {
             "name": "muiDocs",
-            "module": "src/components/mui-avatar/doc.ts"
+            "module": "src/components/mui-alert/doc.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/mui-avatar/index.ts",
+      "path": "src/components/mui-alert/index.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Displays an image, initials, or slotted icon for a represented person or entity.",
-          "name": "MuiAvatar",
+          "description": "Surfaces task-related feedback with an intent icon, message content and optional action.",
+          "name": "MuiAlert",
           "attributes": [
             {
-              "name": "label",
+              "name": "variant",
               "type": {
-                "text": "string"
+                "text": "\"positive\" | \"info\" | \"warning\" | \"attention\" | \"success\" | \"error\""
               },
-              "description": "Accessible name and initials source when no image or slotted content is present."
+              "default": "positive",
+              "description": "Feedback intent. `success` normalises to `positive`; `error` normalises to `attention`."
             },
             {
-              "name": "image",
+              "name": "label",
               "type": {
                 "text": "string"
               },
-              "description": "Image URL used when no slotted content is supplied."
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "\"xx-small\" | \"x-small\" | \"small\" | \"medium\" | \"large\""
-              },
-              "default": "medium",
-              "description": "Avatar dimensions. Defaults map `xx-small` to 24px and `x-small` to 32px."
+              "description": "Overrides the intent prefix label."
             },
             {
-              "name": "background",
+              "name": "hide-label",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "neutral",
-              "description": "Named semantic or profile color background."
+              "default": "false",
+              "description": "Hides the visible intent prefix label."
             },
             {
-              "name": "background-color",
+              "name": "size",
               "type": {
-                "text": "string"
+                "text": "\"small\" | \"medium\" | \"large\""
               },
-              "description": "Custom CSS color overriding the named background treatment."
+              "default": "medium",
+              "description": "Alert density and coordinated icon/action size."
             }
           ],
           "superclass": {
             "name": "HTMLElement"
           },
-          "tagName": "mui-avatar",
+          "tagName": "mui-alert",
           "customElement": true,
           "slots": [
             {
               "name": "",
-              "description": "Optional icon or custom visible avatar content."
+              "description": "Alert message content, including optional inline links."
+            },
+            {
+              "name": "action",
+              "description": "Optional `mui-button` or `mui-link` action aligned and sized for the alert."
             }
           ],
           "events": [],
           "cssProperties": [
             {
-              "name": "--avatar-xx-small",
-              "description": "Dimension for `size=\"xx-small\"`; defaults to 24px."
+              "name": "--alert-radius",
+              "description": "Alert surface corner radius."
             },
             {
-              "name": "--avatar-x-small",
-              "description": "Dimension for `size=\"x-small\"`; defaults to 32px."
+              "name": "--alert-padding-small",
+              "description": "Surface padding for small alerts."
             },
             {
-              "name": "--avatar-background-override",
-              "description": "Overrides the resolved avatar background color."
+              "name": "--alert-padding-medium",
+              "description": "Surface padding for medium alerts."
+            },
+            {
+              "name": "--alert-padding-large",
+              "description": "Surface padding for large alerts."
             }
           ]
         }
@@ -546,17 +653,17 @@
       "exports": [
         {
           "kind": "custom-element-definition",
-          "name": "mui-avatar",
+          "name": "mui-alert",
           "declaration": {
-            "name": "MuiAvatar",
-            "module": "src/components/mui-avatar/index.ts"
+            "name": "MuiAlert",
+            "module": "src/components/mui-alert/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/mui-badge/doc.ts",
+      "path": "src/components/mui-button/doc.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -564,99 +671,7 @@
           "type": {
             "text": "MuiDocs"
           },
-          "default": "{ Badge: { title: \"Badge\", description: \"Badges are non-interactive and indicate counts or statuses.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/3uhL6lnJTEY4LtVyMA3og5/7844fa7e691b9f97e3c335e1a978e881/Badge_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=3-1108&t=FSv3FEahG8VQW1FZ-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/feedback-badge--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-badge/index.ts\"], website: [\"https://muibook.com/#/badge\"], guides: [\"https://guides.muibook.com/badge\"], usage: { list: [ \"Show the number of unread notifications – E.g. '4' unread messages\", \"Indicate the status of a user – E.g. Online, Busy, or Away\", \"Use size variants (xx-small, x-small, small, medium, large) to match surrounding component scale.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"], }, anatomy: { image: \"\", list: [\"\"], }, variants: { items: [ { key: \"default\", title: \"default\", description: \"Used for data that is visually in the foreground.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3Xgz2qoLs8NACel4fRr9iC/52699b5763f1efd4853a9ffb991b3ff3/badge-default.png\", }, { key: \"positive\", title: \"positive\", description: \"For positive or completed statuses.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/65RMIuUEUIzusbSAwqLQcI/63edb290041c708fc69d0d27fc49e25d/badge-positive.png\", }, { key: \"warning\", title: \"warning\", description: \"For urgent or important statuses.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/5AFfOShVyTEKO1wgIe6rYv/e809c76ddabdfd9789adc31a26becf83/badge-warning.png\", }, { key: \"error\", title: \"error\", description: \"Represents an error, issue or critical state.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/E0jtn7WSTwYligMqSNl0k/c3c041e025c3725682ec12eb3ab98400/badge-error.png\", }, { key: \"overlay\", title: \"overlay\", description: \"For labels placed on media/image surfaces with stronger contrast.\", image: \"\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"outcome-based-roadmap\", name: \"Outcome-Based Roadmap\", description: \"Example of an Outcome-Based Roadmap page showing objectives organised into Upcoming, Doing, and Finished columns. Progress bars indicate the completion status of each task, providing a clear view of overall progress.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3w5htPtfEz7QMCH9alVcwf/de35725fb4542b891bd695b900195291/Outcomes-Progress-Composition.png\", }, { key: \"compliance-dashboard-table\", name: \"Compliance Dashboard Table\", description: \"This example shows a desktop view of a table used within an accounting compliance dashboard.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3vUKA5C5iJ3LvjLwf2WiO9/274ffe423dbe828244294f6809172ce1/table-composition-compliance-dashboard.png\", }, { key: \"carousel-showcase\", name: \"Carousel Showcase\", description: \"This example from the GuruSuite website demonstrates the carousel used to showcase two of the products on offer.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2TaRRm351HyujF9mT2w1wH/3958f69e939d20618751742130dc5f06/GuruSuite-Carousel-Composition.png\", }, { key: \"outcomes-roadmap-dashboard\", name: \"Outcomes Roadmap Dashboard\", description: \"Example of the responsive component in the Outcomes Roadmap Dashboard, demonstrating layout, title, and padding adjustments across breakpoints.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3FsXandRr1Z9BAKv33twxT/b0d0e4a8b6237bf7d38660111bceb8ab/responsive-composition.gif\", }, ], }, related: { items: [ { name: \"Button\", link: \"https://guides.muibook.com/button\", }, { name: \"Link\", link: \"https://guides.muibook.com/link\", }, { name: \"Tab Bar\", link: \"https://guides.muibook.com/tab-bar\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "muiDocs",
-          "declaration": {
-            "name": "muiDocs",
-            "module": "src/components/mui-badge/doc.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/mui-badge/index.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Displays compact status or metadata labels with semantic variants and size scaling.",
-          "name": "MuiBadge",
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "\"neutral\" | \"positive\" | \"warning\" | \"attention\" | \"overlay\""
-              },
-              "default": "neutral",
-              "description": "Sets the badge intent style."
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "\"xx-small\" | \"x-small\" | \"small\" | \"medium\" | \"large\""
-              },
-              "default": "medium",
-              "description": "Controls the badge scale."
-            },
-            {
-              "name": "usage",
-              "type": {
-                "text": "\"slat-end\""
-              },
-              "description": "Applies layout-specific styling for supported parent patterns."
-            }
-          ],
-          "superclass": {
-            "name": "HTMLElement"
-          },
-          "tagName": "mui-badge",
-          "customElement": true,
-          "slots": [
-            {
-              "name": "",
-              "description": "Badge text content."
-            }
-          ],
-          "events": [],
-          "cssProperties": [
-            {
-              "name": "--badge-radius",
-              "description": "Controls the badge corner radius."
-            },
-            {
-              "name": "--badge-font-weight",
-              "description": "Controls the badge text weight."
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "custom-element-definition",
-          "name": "mui-badge",
-          "declaration": {
-            "name": "MuiBadge",
-            "module": "src/components/mui-badge/index.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/mui-button/doc.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "muiDocs",
-          "type": {
-            "text": "MuiDocs"
-          },
-          "default": "{ Button: { title: \"Button\", description: \"Buttons are essential UI elements that trigger actions when clicked or tapped. They should be easily recognisable, provide clear feedback, and be accessible to all users.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/20zrQqKqJ17evXhkPwlDhq/e7ce6604a49aef64f2c4056d16ea1d97/Button_-_Home_Image.png\", ], figma: [\"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=3-570&t=fSFYVey9aCoE5oQa-1\"], storybook: [\"https://stories.muibook.com/?path=/docs/actions-button--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-button/index.ts\"], website: [\"https://muibook.com/#/button\"], guides: [\"https://guides.muibook.com/button\"], usage: { list: [ \"Reserve buttons for core actions on a page.\", \"Avoid using too many buttons on a single page to prevent confusion.\", \"Use clear and concise label text on buttons.\", \"Ensure labels are action-oriented. E.g. 'Save'.\", \"Ensure sufficient contrast between button text and background.\", \"Buttons can include Avatar for profile, identity, and account-oriented actions.\", \"Use avatar-only buttons when the avatar itself is the visible trigger, such as opening an account menu, switching profiles on a video platform, or launching a compact settings drawer.\", \"When the button only contains mui-avatar, the button collapses to the avatar footprint while preserving interaction semantics, focus, and disabled behaviour.\", \"Avatar-only buttons work well with Dropdown, Drawer, and Dialog when you want the control to read as identity-first rather than as a standard text button.\", ], }, accessibility: { designerList: [ \"Never put tooltips on disabled buttons as Tooltips can't be reached on all devices or by some assitive technologies.\", \"Provide accessible labels for buttons.\", \"For icon-only buttons, ensure an aria-label is provided to describe the action, as screen readers cannot interpret icons alone.\", \"Ensure buttons are focusable via keyboard navigation.\", \"Use appropriate ARIA roles and properties.\", ], engineerList: [ \"Never put tooltips on disabled buttons as Tooltips can't be reached on all devices or by some assitive technologies.\", \"Provide accessible labels for buttons.\", \"For icon-only buttons, ensure an aria-label is provided to describe the action, as screen readers cannot interpret icons alone.\", \"Ensure buttons are focusable via keyboard navigation.\", \"Use appropriate ARIA roles and properties.\", ], }, anatomy: { image: \"https://images.ctfassets.net/i5uwscj4pkk2/2LUuCpBtbL794vr5DyhMCz/44b7a3b75d0418915ebcdbf43bf1214c/button-anatomy.png\", list: [ \"LABEL: Text describing the button action. Use action verbs or phrases to tell the user what will happen next, and follow the button label content guidelines.\", \"BEFORE: An optional area to include an icon before the label. Use an icon to add additional affordance where the icon has a clear and well-established meaning. Most buttons don't require an icon, so be consistent and deliberate when you do.\", \"AFTER: An optional area to include an icon after the label, often used for a chevron-down-arrow icon to indicate a dropdown menu or accordion experiences where the placement is on the far right of the button.\", \"ICON ONLY: Use when the action is easily understood and space is limited. For example: close, add, or menu toggle. Avoid for unfamiliar or complex actions.\", ], }, variants: { items: [ { key: \"primary\", title: \"Primary\", description: \"Used for the main action on a page. It should stand out visually and be used sparingly to avoid confusion. When an icon is slotted into a button, it automatically inherits the button’s default icon size. If you need a different look or emphasis, you can override the size as required.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/7szaFYOxeEH9F6gl0NEGz0/9657b870cd37918ae15f30cfab8b3747/button-primary.png\", }, { key: \"primary-icon-only\", title: \"Primary: Icon-Only\", description: \"An icon only version of the primary button. Used for the main action on a page. Best when the icon meaning is immediately clear, such as submitting, navigating forward, or creating new items. Uses a small size icon when pairing with other buttons, or medium size icon for standalone actions.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/uKSyCIeL7vmWxqVoxxkRD/6d12cec0aaad006d0245a1f6dea8e7ad/button-primary-icon.png\", }, { key: \"secondary\", title: \"Secondary\", description: \"Used for secondary actions that are not as critical as the primary action. It should be distinguishable but less prominent. When an icon is slotted into a button, it automatically inherits the button’s default icon size. If you need a different look or emphasis, you can override the size as required.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/5MgDmdtcMDIIsHKlzMNpj1/42fbbce26a313f72c670ff91ff4fb500/button-secondary.png\", }, { key: \"secondary\", title: \"Secondary\", description: \"Used for secondary actions that are not as critical as the primary action. It should be distinguishable but less prominent. When an icon is slotted into a button, it automatically inherits the button’s default icon size. If you need a different look or emphasis, you can override the size as required.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/5MgDmdtcMDIIsHKlzMNpj1/42fbbce26a313f72c670ff91ff4fb500/button-secondary.png\", }, { key: \"secondary-icon-only\", title: \"Secondary: Icon-only\", description: \"An icon only version of the secondary button. Used for secondary actions that support the main task. Best for actions like edit, copy, or open in a new window. Uses a small size icon when pairing with other buttons, or medium size icon for standalone actions.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3ebS7TgW2aziGoqc59UZAQ/be7c2f7d7d06970b2ddfae9fed5562b3/button-secondary-icon.png\", }, { key: \"tertiary\", title: \"Tertiary\", description: \"Used for less important actions or actions that complement primary and secondary actions. They should be the least prominent. When an icon is slotted into a button, it automatically inherits the button’s default icon size. If you need a different look or emphasis, you can override the size as required.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/78O8tlBpDFb3rxooJkRGgs/27138560e395e947c8782feba06d3f6c/button-tertiary.png\", }, { key: \"tertiary-icon-only\", title: \"Tertiary: Icon-only\", description: \"An icon only version of the tertiary button. Designed for lightweight or supporting actions with minimal emphasis, such as info, settings, expand, open a menu, or close. Uses a small size icon when pairing with other buttons, or medium size icon for standalone actions.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/50Nmp65TaWcwTixZhpLoUT/af5c8743d1482969667cf2a063428759/button-tertiary-icon.png\", }, { key: \"overlay\", title: \"Overlay\", description: \"Use on layered media or tinted surfaces where a subtle translucent action is needed. Keeps controls readable over imagery while staying visually lightweight.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/5MgDmdtcMDIIsHKlzMNpj1/42fbbce26a313f72c670ff91ff4fb500/button-secondary.png\", }, { key: \"attention\", title: \"Attention\", description: \"Used for critical or potentially destructive actions, such as deleting an item or submitting sensitive information. It should stand out clearly to alert users and prompt deliberate interaction. When an icon is slotted into a button, it automatically inherits the button’s default icon size. If you need a different look or emphasis, you can override the size as required.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/6XBCZnwgBw6zp2fjJQR7ko/70a3c7e8931b4fbf442dd997a57e1058/button-attention.png\", }, { key: \"attention-icon-only\", title: \"Attention: Icon-only\", description: \"An icon only version of the attention button. Used for critical or potentially destructive actions, such as delete, remove, or report. Uses a small size icon when pairing with other buttons, or medium size icon for standalone actions.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/1TDTCC0SZZJL3cBEmqjs8Q/29ba81f3f76fb4d15aaa93d25aec87d4/button-attention-icon.png\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"in-browser-design-guidelines\", name: \"In-browser Design Guidelines\", description: \"A promotional example showcasing the in-browser design guidelines feature available on the Muibook website.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/5YR94S9N6P5No4lNQFBxZb/45360d599105d16309486d33ca0705f1/Button_-_Composition.png\", }, { key: \"onboarding-form\", name: \"Onboarding Form\", description: \"Demonstrates an onboarding form within a card, using logic to confirm terms acceptance. Components include Heading, Input Fields, Checkbox, and Button.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/1NrgynTcdmVVKSYCsQwlOW/5fc4776c1860b498a59a2865b4e57ecb/Card-Onboarding-Composition.png\", }, ], }, related: { items: [ { name: \"Link\", link: \"https://guides.muibook.com/link\", }, { name: \"Icons\", link: \"https://guides.muibook.com/icons\", }, ], }, rules: [ { heading: \"Primary vs Secondary\", description: \"Primary buttons signify the main action on a page or view. Use only one per context to avoid confusion. Secondary buttons support the primary action and are used for supplementary or less critical choices.\", doContent: [ { description: \"Use one clear primary action, supported by a secondary button for an alternative or reversible choice.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/5xunviJfjqUYYS5yWSfOqW/56b8cbaab4aeb86cb7585120c0ef911c/primary-actions-do.png\", }, ], dontContent: [ { description: \"Avoid giving multiple buttons equal visual weight, as this creates confusion about what to do next.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/64qD6QvbuqhFgHbj9IEOiD/f61a0250d0139abe4c8f6d9307ce5cad/primary-actions-do-not.png\", }, ], }, { heading: \"Primary and Tertiary\", description: \"Tertiary actions are low-priority, optional paths that support the experience without distracting from the primary or secondary actions. They are typically styled as text buttons and used for non-critical choices like “Skip” or “Learn more.”\", doContent: [ { description: \"The tertiary action offers an optional, less prominent path that doesn’t compete visually with the primary action.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3eFnCzhfq4d10CALfudUZU/de4b6a7d26964acae2245b73a158517d/tertiary-actions-do.png\", }, ], dontContent: [ { description: \"A tertiary action styled like a primary button creates visual confusion and implies equal importance, which undermines the intended hierarchy.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3K59awxzUKnnihZuDFyOpV/a8ba8a13d36bc63208a3079d0c4c86ac/tertiary-actions-do-not.png\", }, ], }, { heading: \"Pairing Buttons\", description: \"In circumstances where an icon-only button is paired with a button that includes both a label and an icon, use a medium icon for the icon-only button and an small icon for the labeled button. Follow a right-to-left layout, placing the primary action on the right.\", doContent: [ { description: \"Place the primary action on the right and use appropriate icon sizes: medium for icon-only, small for labeled buttons.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/34h9SltXeGjU2fRc5iM4PE/438f84d21e142c84bb98c1965a40b36b/button-groups-do.png\", }, ], dontContent: [ { description: \"Don’t place the primary action on the left or mismatch icon sizing for either button type.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/5fwaA1NM6AAQMPbV2vwPMR/b0a491b6aca705f7493806fd13f99734/button-groups-do-not.png\", }, ], }, { heading: \"Table Button-Group\", description: \"You can group multiple actions in a table’s action cell, but be mindful not to overwhelm rows with too many buttons. Prioritize clarity by showing only the most relevant actions per row.\", doContent: [ { description: \"Use a secondary button for labeled actions paired with a tertiary icon-only button, and apply medium icons for icon-only buttons and small icons for labeled buttons.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/7beVBzijhfRsyorthBC1fd/c7460f72456cdb1982b122df77dc9bf7/table-button-group-do.png\", }, ], dontContent: [ { description: \"Avoid using primary, tertiary, or attention variants for labeled buttons, as they can draw too much attention and disrupt the visual hierarchy.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/7zoFP4Rl3InXCgP0tiDQg0/18ec719eb7a970da67bd12fea32c935b/table-button-group-do-not.png\", }, ], }, { heading: \"Button vs Link\", description: \"Buttons and links may look similar, but buttons are for triggering actions, while links are for navigating between pages or sections of your app or site.\", doContent: [ { description: \"Use a link when navigating to another page or view.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/7xOE9DNKWgy1lZoT0FbMOW/cc13fbeeaa85b2507087645d925d7323/button-vs-link-do.png\", }, ], dontContent: [ { description: \"Don’t use a link to trigger tasks like submitting a form or saving data.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/6tSAw6uBvg142Gzw7tenBc/4b8db682687b42f3c53fc32557cc4eee/button-vs-link-do-not.png\", }, ], }, { heading: \"Label Clarity\", description: \"\", doContent: [ { description: \"Use clear and concise labels for buttons: Ensure each button clearly indicates its action. E.g. 'Submit'.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3M9fgCF3JgFwDrooqXTvlf/92ad6b1c3faacebd8ea2884afadab24d/button-label-clarity-do.png\", }, ], dontContent: [ { description: \"Don't use ambiguous labels: Avoid using unclear or generic terms for buttons. E.g. 'Click here'.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/1rXUNW1YiCVPJ2klPwL8WT/8137762316179653687bb1c1178ceb16/button-label-clarity-do-not.png\", }, ], }, { heading: \"Disabled Actions\", description: \"Avoid disabling call-to-action buttons to prevent form submission. Instead, consider using a combination of form validation, toasts, or alerts to inform users why they can’t proceed and how to resolve the issue.\", doContent: [ { description: \"Use form validation in combination with alerts to provide clear instructions on how to resolve the issue.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/41xe78AaqPHUxpd2RC6QoP/46b6f7217a8eb15bd928495d54a0728f/disabled-do.png\", }, ], dontContent: [ { description: \"Avoid disabling actions, as it prevents users from receiving feedback on why they can’t proceed.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/6SiZPnnUlkMbNSJzxV8unt/7e6389d85eaac161d6cfd314190010f9/disabled-do-not.png\", }, ], }, { heading: \"Table Button: Icon-Only\", description: \"Use icon-only buttons in the end (far right) cell of a table row. When implementing tables in-browser, apply the correct action boolean and column auto-spacing to ensure the header and content align properly.\", doContent: [ { description: \"Use a tertiary icon-only button with a medium icon in the end table cell.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/EzbGECpviXXcjsmfftqEm/b21a44dec44b7243688fba26d2c9768c/table-button-do.png\", }, ], dontContent: [ { description: \"Don’t use other button variants or icon sizes in place of the designated icon-only approach.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/722XYLqqBwEJXE6qG0ZLDE/6e9a4d25fc5292688e62960090d92230/table-button-do-not.png\", }, ], }, { heading: \"Card, Dialog and Drawer Actions\", description: \"It is best practice to place actions in a footer for cards, dialogs, and drawers, providing a consistent location for users to find and interact with them.\", doContent: [ { description: \"Place actions in a footer within cards, dialogs, and drawers to ensure they are easily accessible and follow a consistent pattern.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/4nFRwg1AOL74fQXM6OQvnV/d9c1eed80b86919656fb3ab8005f7d71/panel-actions-do.png\", }, ], dontContent: [ { description: \"Avoid placing actions in unconventional or hard-to-find locations within cards, dialogs, or drawers, as this can make them difficult for users to locate and use effectively.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3caBEJQxfRasuxw62RQVbw/4e3620f4e62f2fa8b8f8aa504625776a/panel-actions-do-not.png\", }, ], }, { heading: \"Icon-Only Actions\", description: \"\", doContent: [ { description: \"Use a 'medium' size icon when using an icon-only medium sized action\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3syzrNBEXbBjp5hGEUvF4M/0471f4b16939d8ee54deaf48997ff455/action-icon-do.png\", }, ], dontContent: [ { description: \"Avoid 'x-small', 'medium' or 'large' size icons within an icon-only medium sized action\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/5V2TE85dY848jz1dP6Y0lC/b8e433c8abad5a4402ff1f86ddb8c848/action-icon-dont.png\", }, ], }, { heading: \"Text & Icon Actions\", description: \"Use icon-only buttons in the end (far right) cell of a table row. When implementing tables in-browser, apply the correct action boolean and column auto-spacing to ensure the header and content align properly.\", doContent: [ { description: \"Use the 'small' size icon within a medium sized action\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2W1xs6NPj3jRrW6ZaVGRvZ/3a11566b68fffda85bf5f780c4d6a394/dropdown-bar-icon-do.png\", }, ], dontContent: [ { description: \"Avoid 'x-small', 'medium' or 'large' size icons within a medium sized action\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/6BgHzCgKqk44piisNH4tE6/c08d91a1cf5231a089844d20f6ab968c/dropdown-bar-icon-dont.png\", }, ], }, ], behaviour: { description: \"Buttons should provide visual feedback on hover and click. These states should be factored into the component and baked into the corresponding states in code.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3h2wNhGxd4f9AENDf3K7Qa/0ca6f8b224923e7fa9710735dc8f54e0/Button_-_Behaviour.png\", list: [ \"Default: Normal state.\", \"Hover: Changes when a user hovers over the button.\", \"Focus: Ensure buttons display a visible focus indicator when navigated to via keyboard.\", \"Disabled: Non-interactive, faded appearance.\", ], }, writing: { list: [ \"Keep button text short and action-oriented.\", \"Use sentence case for button text.\", \"Avoid using multiple lines of text on a button.\", ], }, }, }"
+          "default": "{ Button: { title: \"Button\", description: \"Buttons are essential UI elements that trigger actions when clicked or tapped. They should be easily recognisable, provide clear feedback, and be accessible to all users.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/20zrQqKqJ17evXhkPwlDhq/e7ce6604a49aef64f2c4056d16ea1d97/Button_-_Home_Image.png\", ], figma: [\"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=3-570&t=fSFYVey9aCoE5oQa-1\"], storybook: [\"https://stories.muibook.com/?path=/docs/actions-button--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-button/index.ts\"], website: [\"https://muibook.com/#/button\"], guides: [\"https://guides.muibook.com/button\"], usage: { list: [ \"Reserve buttons for core actions on a page.\", \"Avoid using too many buttons on a single page to prevent confusion.\", \"Use clear and concise label text on buttons.\", \"Ensure labels are action-oriented. E.g. 'Save'.\", \"Ensure sufficient contrast between button text and background.\", \"Buttons can include Avatar for profile, identity, and account-oriented actions.\", \"Use avatar-only buttons when the avatar itself is the visible trigger, such as opening an account menu, switching profiles on a video platform, or launching a compact settings drawer.\", \"When the button only contains mui-avatar, the button collapses to the avatar footprint while preserving interaction semantics, focus, and disabled behaviour.\", \"Avatar-only buttons work well with Dropdown, Drawer, and Dialog when you want the control to read as identity-first rather than as a standard text button.\", ], }, accessibility: { designerList: [ \"Never put tooltips on disabled buttons as Tooltips can't be reached on all devices or by some assitive technologies.\", \"Provide accessible labels for buttons.\", \"For icon-only buttons, ensure an aria-label is provided to describe the action, as screen readers cannot interpret icons alone.\", \"Ensure buttons are focusable via keyboard navigation.\", \"Use appropriate ARIA roles and properties.\", ], engineerList: [ \"Never put tooltips on disabled buttons as Tooltips can't be reached on all devices or by some assitive technologies.\", \"Provide accessible labels for buttons.\", \"For icon-only buttons, ensure an aria-label is provided to describe the action, as screen readers cannot interpret icons alone.\", \"Ensure buttons are focusable via keyboard navigation.\", \"Use appropriate ARIA roles and properties.\", ], }, anatomy: { image: \"https://images.ctfassets.net/i5uwscj4pkk2/2LUuCpBtbL794vr5DyhMCz/44b7a3b75d0418915ebcdbf43bf1214c/button-anatomy.png\", list: [ \"LABEL: Text describing the button action. Use action verbs or phrases to tell the user what will happen next, and follow the button label content guidelines.\", \"BEFORE: An optional area to include an icon before the label. Use an icon to add additional affordance where the icon has a clear and well-established meaning. Most buttons don't require an icon, so be consistent and deliberate when you do.\", \"AFTER: An optional area to include an icon after the label, often used for a chevron-down-arrow icon to indicate a dropdown menu or accordion experiences where the placement is on the far right of the button.\", \"ICON ONLY: Use when the action is easily understood and space is limited. For example: close, add, or menu toggle. Avoid for unfamiliar or complex actions.\", ], }, variants: { items: [ { key: \"primary\", title: \"Primary\", description: \"Used for the main action on a page. It should stand out visually and be used sparingly to avoid confusion. When an icon is slotted into a button, it automatically inherits the button’s default icon size. If you need a different look or emphasis, you can override the size as required.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/7szaFYOxeEH9F6gl0NEGz0/9657b870cd37918ae15f30cfab8b3747/button-primary.png\", }, { key: \"primary-icon-only\", title: \"Primary: Icon-Only\", description: \"An icon only version of the primary button. Used for the main action on a page. Best when the icon meaning is immediately clear, such as submitting, navigating forward, or creating new items. Uses a small size icon when pairing with other buttons, or medium size icon for standalone actions.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/uKSyCIeL7vmWxqVoxxkRD/6d12cec0aaad006d0245a1f6dea8e7ad/button-primary-icon.png\", }, { key: \"secondary\", title: \"Secondary\", description: \"Used for secondary actions that are not as critical as the primary action. It should be distinguishable but less prominent. When an icon is slotted into a button, it automatically inherits the button’s default icon size. If you need a different look or emphasis, you can override the size as required.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/5MgDmdtcMDIIsHKlzMNpj1/42fbbce26a313f72c670ff91ff4fb500/button-secondary.png\", }, { key: \"secondary\", title: \"Secondary\", description: \"Used for secondary actions that are not as critical as the primary action. It should be distinguishable but less prominent. When an icon is slotted into a button, it automatically inherits the button’s default icon size. If you need a different look or emphasis, you can override the size as required.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/5MgDmdtcMDIIsHKlzMNpj1/42fbbce26a313f72c670ff91ff4fb500/button-secondary.png\", }, { key: \"secondary-icon-only\", title: \"Secondary: Icon-only\", description: \"An icon only version of the secondary button. Used for secondary actions that support the main task. Best for actions like edit, copy, or open in a new window. Uses a small size icon when pairing with other buttons, or medium size icon for standalone actions.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3ebS7TgW2aziGoqc59UZAQ/be7c2f7d7d06970b2ddfae9fed5562b3/button-secondary-icon.png\", }, { key: \"tertiary\", title: \"Tertiary\", description: \"Used for less important actions or actions that complement primary and secondary actions. They should be the least prominent. When an icon is slotted into a button, it automatically inherits the button’s default icon size. If you need a different look or emphasis, you can override the size as required.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/78O8tlBpDFb3rxooJkRGgs/27138560e395e947c8782feba06d3f6c/button-tertiary.png\", }, { key: \"tertiary-icon-only\", title: \"Tertiary: Icon-only\", description: \"An icon only version of the tertiary button. Designed for lightweight or supporting actions with minimal emphasis, such as info, settings, expand, open a menu, or close. Uses a small size icon when pairing with other buttons, or medium size icon for standalone actions.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/50Nmp65TaWcwTixZhpLoUT/af5c8743d1482969667cf2a063428759/button-tertiary-icon.png\", }, { key: \"overlay\", title: \"Overlay\", description: \"Use on layered media or tinted surfaces where a subtle translucent action is needed. Keeps controls readable over imagery while staying visually lightweight.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/5MgDmdtcMDIIsHKlzMNpj1/42fbbce26a313f72c670ff91ff4fb500/button-secondary.png\", }, { key: \"attention\", title: \"Attention\", description: \"Used for critical or potentially destructive actions, such as deleting an item or submitting sensitive information. It should stand out clearly to alert users and prompt deliberate interaction. When an icon is slotted into a button, it automatically inherits the button’s default icon size. If you need a different look or emphasis, you can override the size as required.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/6XBCZnwgBw6zp2fjJQR7ko/70a3c7e8931b4fbf442dd997a57e1058/button-attention.png\", }, { key: \"attention-icon-only\", title: \"Attention: Icon-only\", description: \"An icon only version of the attention button. Used for critical or potentially destructive actions, such as delete, remove, or report. Uses a small size icon when pairing with other buttons, or medium size icon for standalone actions.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/1TDTCC0SZZJL3cBEmqjs8Q/29ba81f3f76fb4d15aaa93d25aec87d4/button-attention-icon.png\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"in-browser-design-guidelines\", name: \"In-browser Design Guidelines\", description: \"A promotional example showcasing the in-browser design guidelines feature available on the Muibook website.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/5YR94S9N6P5No4lNQFBxZb/45360d599105d16309486d33ca0705f1/Button_-_Composition.png\", }, { key: \"onboarding-form\", name: \"Onboarding Form\", description: \"Demonstrates an onboarding form within a card, using logic to confirm terms acceptance. Components include Heading, Input Fields, Checkbox, and Button.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/1NrgynTcdmVVKSYCsQwlOW/5fc4776c1860b498a59a2865b4e57ecb/Card-Onboarding-Composition.png\", }, ], }, related: { items: [ { name: \"Link\", link: \"https://guides.muibook.com/link\", }, { name: \"Icons\", link: \"https://guides.muibook.com/icons\", }, ], }, rules: [ { heading: \"Primary vs Secondary\", description: \"Primary buttons signify the main action on a page or view. Use only one per context to avoid confusion. Secondary buttons support the primary action and are used for supplementary or less critical choices.\", doContent: [ { description: \"Use one clear primary action, supported by a secondary button for an alternative or reversible choice.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/5xunviJfjqUYYS5yWSfOqW/56b8cbaab4aeb86cb7585120c0ef911c/primary-actions-do.png\", }, ], dontContent: [ { description: \"Avoid giving multiple buttons equal visual weight, as this creates confusion about what to do next.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/64qD6QvbuqhFgHbj9IEOiD/f61a0250d0139abe4c8f6d9307ce5cad/primary-actions-do-not.png\", }, ], }, { heading: \"Primary and Tertiary\", description: \"Tertiary actions are low-priority, optional paths that support the experience without distracting from the primary or secondary actions. They are typically styled as text buttons and used for non-critical choices like “Skip” or “Learn more.”\", doContent: [ { description: \"The tertiary action offers an optional, less prominent path that doesn’t compete visually with the primary action.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3eFnCzhfq4d10CALfudUZU/de4b6a7d26964acae2245b73a158517d/tertiary-actions-do.png\", }, ], dontContent: [ { description: \"A tertiary action styled like a primary button creates visual confusion and implies equal importance, which undermines the intended hierarchy.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3K59awxzUKnnihZuDFyOpV/a8ba8a13d36bc63208a3079d0c4c86ac/tertiary-actions-do-not.png\", }, ], }, { heading: \"Pairing Buttons\", description: \"In circumstances where an icon-only button is paired with a button that includes both a label and an icon, use a medium icon for the icon-only button and an small icon for the labeled button. Follow a right-to-left layout, placing the primary action on the right.\", doContent: [ { description: \"Place the primary action on the right and use appropriate icon sizes: medium for icon-only, small for labeled buttons.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/34h9SltXeGjU2fRc5iM4PE/438f84d21e142c84bb98c1965a40b36b/button-groups-do.png\", }, ], dontContent: [ { description: \"Don’t place the primary action on the left or mismatch icon sizing for either button type.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/5fwaA1NM6AAQMPbV2vwPMR/b0a491b6aca705f7493806fd13f99734/button-groups-do-not.png\", }, ], }, { heading: \"Table Button-Group\", description: \"You can group multiple actions in a table’s action cell, but be mindful not to overwhelm rows with too many buttons. Prioritize clarity by showing only the most relevant actions per row.\", doContent: [ { description: \"Use a secondary button for labeled actions paired with a tertiary icon-only button, and apply medium icons for icon-only buttons and small icons for labeled buttons.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/7beVBzijhfRsyorthBC1fd/c7460f72456cdb1982b122df77dc9bf7/table-button-group-do.png\", }, ], dontContent: [ { description: \"Avoid using primary, tertiary, or attention variants for labeled buttons, as they can draw too much attention and disrupt the visual hierarchy.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/7zoFP4Rl3InXCgP0tiDQg0/18ec719eb7a970da67bd12fea32c935b/table-button-group-do-not.png\", }, ], }, { heading: \"Button vs Link\", description: \"Buttons and links may look similar, but buttons are for triggering actions, while links are for navigating between pages or sections of your app or site.\", doContent: [ { description: \"Use a link when navigating to another page or view.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/7xOE9DNKWgy1lZoT0FbMOW/cc13fbeeaa85b2507087645d925d7323/button-vs-link-do.png\", }, ], dontContent: [ { description: \"Don’t use a link to trigger tasks like submitting a form or saving data.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/6tSAw6uBvg142Gzw7tenBc/4b8db682687b42f3c53fc32557cc4eee/button-vs-link-do-not.png\", }, ], }, { heading: \"Label Clarity\", description: \"\", doContent: [ { description: \"Use clear and concise labels for buttons: Ensure each button clearly indicates its action. E.g. 'Submit'.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3M9fgCF3JgFwDrooqXTvlf/92ad6b1c3faacebd8ea2884afadab24d/button-label-clarity-do.png\", }, ], dontContent: [ { description: \"Don't use ambiguous labels: Avoid using unclear or generic terms for buttons. E.g. 'Click here'.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/1rXUNW1YiCVPJ2klPwL8WT/8137762316179653687bb1c1178ceb16/button-label-clarity-do-not.png\", }, ], }, { heading: \"Disabled Actions\", description: \"Avoid disabling call-to-action buttons to prevent form submission. Instead, consider using a combination of form validation, toasts, or alerts to inform users why they can’t proceed and how to resolve the issue.\", doContent: [ { description: \"Use form validation in combination with alerts to provide clear instructions on how to resolve the issue.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/41xe78AaqPHUxpd2RC6QoP/46b6f7217a8eb15bd928495d54a0728f/disabled-do.png\", }, ], dontContent: [ { description: \"Avoid disabling actions, as it prevents users from receiving feedback on why they can’t proceed.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/6SiZPnnUlkMbNSJzxV8unt/7e6389d85eaac161d6cfd314190010f9/disabled-do-not.png\", }, ], }, { heading: \"Table Button: Icon-Only\", description: \"Use icon-only buttons in the end (far right) cell of a table row. When implementing tables in-browser, apply the correct action boolean and column auto-spacing to ensure the header and content align properly.\", doContent: [ { description: \"Use a tertiary icon-only button with a medium icon in the end table cell.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/EzbGECpviXXcjsmfftqEm/b21a44dec44b7243688fba26d2c9768c/table-button-do.png\", }, ], dontContent: [ { description: \"Don’t use other button variants or icon sizes in place of the designated icon-only approach.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/722XYLqqBwEJXE6qG0ZLDE/6e9a4d25fc5292688e62960090d92230/table-button-do-not.png\", }, ], }, { heading: \"Card, Dialog and Drawer Actions\", description: \"It is best practice to place actions in a footer for cards, dialogs, and drawers, providing a consistent location for users to find and interact with them.\", doContent: [ { description: \"Place actions in a footer within cards, dialogs, and drawers to ensure they are easily accessible and follow a consistent pattern.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/4nFRwg1AOL74fQXM6OQvnV/d9c1eed80b86919656fb3ab8005f7d71/panel-actions-do.png\", }, ], dontContent: [ { description: \"Avoid placing actions in unconventional or hard-to-find locations within cards, dialogs, or drawers, as this can make them difficult for users to locate and use effectively.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3caBEJQxfRasuxw62RQVbw/4e3620f4e62f2fa8b8f8aa504625776a/panel-actions-do-not.png\", }, ], }, { heading: \"Icon-Only Actions\", description: \"\", doContent: [ { description: \"Use a 'medium' size icon when using an icon-only medium sized action\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3syzrNBEXbBjp5hGEUvF4M/0471f4b16939d8ee54deaf48997ff455/action-icon-do.png\", }, ], dontContent: [ { description: \"Avoid 'x-small', 'medium' or 'large' size icons within an icon-only medium sized action\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/5V2TE85dY848jz1dP6Y0lC/b8e433c8abad5a4402ff1f86ddb8c848/action-icon-dont.png\", }, ], }, { heading: \"Text & Icon Actions\", description: \"Use icon-only buttons in the end (far right) cell of a table row. When implementing tables in-browser, apply the correct action boolean and column auto-spacing to ensure the header and content align properly.\", doContent: [ { description: \"Use the 'small' size icon within a medium sized action\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2W1xs6NPj3jRrW6ZaVGRvZ/3a11566b68fffda85bf5f780c4d6a394/dropdown-bar-icon-do.png\", }, ], dontContent: [ { description: \"Avoid 'x-small', 'medium' or 'large' size icons within a medium sized action\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/6BgHzCgKqk44piisNH4tE6/c08d91a1cf5231a089844d20f6ab968c/dropdown-bar-icon-dont.png\", }, ], }, ], behaviour: { description: \"Buttons should provide visual feedback on hover and click. These states should be factored into the component and baked into the corresponding states in code.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3h2wNhGxd4f9AENDf3K7Qa/0ca6f8b224923e7fa9710735dc8f54e0/Button_-_Behaviour.png\", list: [ \"Default: Normal state.\", \"Hover: Changes when a user hovers over the button.\", \"Focus: Ensure buttons display a visible focus indicator when navigated to via keyboard.\", \"Disabled: Non-interactive, faded appearance.\", ], }, writing: { list: [ \"Keep button text short and action-oriented.\", \"Use sentence case for button text.\", \"Avoid using multiple lines of text on a button.\", ], }, }, }"
         }
       ],
       "exports": [
@@ -1813,7 +1828,7 @@
           "type": {
             "text": "MuiDocs"
           },
-          "default": "{ Drawer: { title: \"Drawer\", description: \"A drawer view that prompts users to take a specific action or provide additional information without navigating away from the current context.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/1iLh5CQqFjulW1v1LqDuDd/5a429cd1616a087644a8460f4182ba35/Drawer_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=958-8626&t=sYltPCmy96M6DX5X-1\", ], guides: [\"https://guides.muibook.com/drawer\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-drawer/index.ts\"], storybook: [\"https://stories.muibook.com/?path=/docs/content-drawer--docs\"], website: [\"https://muibook.com/#/drawer\"], usage: { list: [ \"Used for navigation, settings and detailed tasks.\", \"Can be a temporary overlay Drawer that appears over content. E.g. Navigation\", \"Can be a persistent push Drawer until workflow complete. E.g. Tasks\", \"Task based Drawers are often positioned right of the viewport.\", ], }, accessibility: { designerList: [ \"Overlay and push drawers act like dialogs.\", \"Persistent drawers act like complementary content.\", \"Drawers have a clear title and description for screen readers.\", \"When open, focus is locked in the drawer and the rest of the app is inactive.\", \"On close, focus returns to the trigger.\", \"The close button is labeled 'Close drawer'.\", \"The footer hides when empty to reduce noise.\", \"Overlay and push drawers close with Escape or backdrop click.\", ], engineerList: [ \"Uses role='dialog' for overlay/push variants and role='complementary' for persistent layout variants.\", \"Supports aria-labelledby and aria-describedby for accessible titles and descriptions.\", \"The close button includes aria-label='Close drawer'.\", \"Footer slot is hidden when empty to reduce screen reader noise.\", \"When open, consumers must trap focus in the drawer and apply inert/aria-hidden to the background.\", \"Backdrop click and Escape close the drawer in overlay and push variants.\", \"Exposes 'mui-drawer-open' and 'mui-drawer-close' events for external state sync.\", ], }, anatomy: { list: [ \"Heading: Text that describes the purpose or contents of the drawer.\", \"Close: An icon or button that allows users to close the drawer.\", \"Body: Section to slot navigation links, settings, or other relevant information.\", \"Footer: Optional section for additional actions, such as 'Cancel' or 'Save'.\", ], image: \"https://images.ctfassets.net/i5uwscj4pkk2/7aOA4WtcFwev6f3tZy6VgX/83c0b087170d859406526e5d7ad66d6b/Drawer_-_Anatomy.png\", }, variants: { items: [ { key: \"\", title: \"\", description: \"\", image: \"\", }, ], }, related: { items: [ { name: \"Dialog\", link: \"https://guides.muibook.com/dialog\" }, { name: \"Button\", link: \"https://guides.muibook.com/button\" }, ], }, rules: [ { heading: \"Dismissing a Drawer\", description: \"\", doContent: [ { description: \"Dismiss the Drawer by clicking the cross icon, cancel button, esc key or the surrounding background.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/57NkU3oAQcirF5MGE13com/ad76c20d1895daf7d7c1e3467066e65a/drawer-dismiss-do.png\", }, ], dontContent: [ { description: \"Avoid hiding the close button or replacing the footer action with a close function.\" }, { image: \"https://images.ctfassets.net/i5uwscj4pkk2/18OP63gYKYYM22rkwWeR2B/b1f496968b693385afcfdae4fe54f1c2/drawer-dismiss-dont.png\", }, ], }, { heading: \"Push Drawer\", description: \"Ideal when both drawer and the main content need to be visible, such as for filters or tools that need to be accessed with the main view still present.\", doContent: [ { description: \"Ensure the drawer does not obscure crucial information when the user is working on a task.\" }, { image: \"https://images.ctfassets.net/i5uwscj4pkk2/5wsKf5Cnw9RNvyIUp2LQkc/5394a8450361acb0d100356688190301/drawer-push-drawer-do.png\", }, ], dontContent: [ { description: \"The drawer shouldn't cover key content or controls when the user is completing a task.\" }, { image: \"https://images.ctfassets.net/i5uwscj4pkk2/2DH7KR12spaSoBbTq4rzav/4f46f916a3918a2cf6b61995f984bc36/drawer-push-drawer-dont.png\", }, ], }, { heading: \"Overlay Drawer / Menu\", description: \"Overlay navigation drawers appear above the main content and are used to access app sections or menus. They block background interaction to keep the user focused on making a selection.\", doContent: [ { description: \"Ensure the user can close the drawer by clicking the background, using the close (X) button, or hitting the Escape key.\", }, { image: \"https://images.ctfassets.net/i5uwscj4pkk2/5VOY2WHXcUCqblWIqAg0di/718f85a9b69d5467179deb4ae7fa65db/drawer-overlay-do.png\", }, ], dontContent: [ { description: \"Don't use footer actions, such as “Save” or “Cancel,” to close the navigation drawer. These actions are reserved for task workflows.\", }, { image: \"https://images.ctfassets.net/i5uwscj4pkk2/5PpEeYZf4PslTKh42u81Uf/9e59e9a3f1bf533699b20ede7d289b75/drawer-overlay-dont.png\", }, ], }, ], compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"navigation-menu\", name: \"Navigation Menu\", description: \"Overlay Drawer used for navigating between major sections of the product. It appears as a temporary overlay and is dismissed easily when users make a selection or interact outside the drawer. Ideal for mobile or smaller viewports where persistent navigation isn’t suitable.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/56QeC3M4PhQVmlwVKwUqLl/1e3119e0d817813c88c1352408e53c64/drawer-composition-menu.png\", }, { key: \"create-roadmap-task\", name: \"Create Roadmap Task\", description: \"Overlay Drawer used for completing temporary, focused tasks such as editing a field or filling out a short form, where the surrounding content (background) is not needed for context. If the task depends on the main content, use a push or permanent drawer that sits alongside the view.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2FFW8tnnM6leJbd0LPyeKl/1ab79ffb7165d6fbd35b151bc69cad5a/drawer-composition-outcomes.png\", }, { key: \"invoice-details-task\", name: \"Invoice Details Task\", description: \"Overlay Drawer used for navigating between major sections of the product. It appears as a temporary overlay and is dismissed easily when users make a selection or interact outside the drawer. Ideal for mobile or smaller viewports where persistent navigation isn’t suitable.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/XXqWZOjNxUkK9Ou2FPTCB/5fd1db2b2315d0ae41ec543feac2a03c/drawer-composition-invoice.png\", }, { key: \"review-items-task\", name: \"Review Items Task\", description: \"Push Drawer used for completing persistent tasks such as editing a field or filling out a short form, where surrounding content remains visible for context. An entry action is required to open the drawer, but it can be hidden while the task is active to keep focus on the workflow.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/rHTSU9sPUdmwrmGETRLcC/fa444ff8d8a72a28e8f10537324bbca3/drawer-composition-smart-bills.png\", }, ], }, behaviour: { list: [ \"Animate the drawer smoothly to enhance user experience.\", \"Don't make the animation too slow or jarring\", \"Avoid animations that are too fast, slow, or abrupt.\", \"rawers often slide in from the right-side of the viewport.\", ], }, writing: { list: [ \"Keep drawer content simple and concise.\", \"Use clear labels for navigation items or actions.\", \"Avoid overcrowding the drawer with too much information.\", ], }, }, }"
+          "default": "{ Drawer: { title: \"Drawer\", description: \"A drawer view that prompts users to take a specific action or provide additional information without navigating away from the current context.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/1iLh5CQqFjulW1v1LqDuDd/5a429cd1616a087644a8460f4182ba35/Drawer_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=958-8626&t=sYltPCmy96M6DX5X-1\", ], guides: [\"https://guides.muibook.com/drawer\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-drawer/index.ts\"], storybook: [\"https://stories.muibook.com/?path=/docs/content-drawer--docs\"], website: [\"https://muibook.com/#/drawer\"], usage: { list: [ \"Used for navigation, settings and detailed tasks.\", \"Can be a temporary overlay Drawer that appears over content. E.g. Navigation\", \"Can be a persistent push Drawer until workflow complete. E.g. Tasks\", \"Task based Drawers are often positioned right of the viewport.\", \"For push and persistent drawers, use a plain div as the direct slot='page' wrapper and compose layout components inside it.\", \"Avoid assigning slot='page' directly to Stack or other sized layout components because Drawer owns the page viewport sizing.\", ], }, accessibility: { designerList: [ \"Overlay and push drawers act like dialogs.\", \"Persistent drawers act like complementary content.\", \"Drawers have a clear title and description for screen readers.\", \"When open, focus is locked in the drawer and the rest of the app is inactive.\", \"On close, focus returns to the trigger.\", \"The close button is labeled 'Close drawer'.\", \"The footer hides when empty to reduce noise.\", \"Overlay and push drawers close with Escape or backdrop click.\", ], engineerList: [ \"Uses role='dialog' for overlay/push variants and role='complementary' for persistent layout variants.\", \"Supports aria-labelledby and aria-describedby for accessible titles and descriptions.\", \"The close button includes aria-label='Close drawer'.\", \"Footer slot is hidden when empty to reduce screen reader noise.\", \"When open, consumers must trap focus in the drawer and apply inert/aria-hidden to the background.\", \"Backdrop click and Escape close the drawer in overlay and push variants.\", \"Exposes 'mui-drawer-open' and 'mui-drawer-close' events for external state sync.\", ], }, anatomy: { list: [ \"Heading: Text that describes the purpose or contents of the drawer.\", \"Close: An icon or button that allows users to close the drawer.\", \"Body: Section to slot navigation links, settings, or other relevant information.\", \"Footer: Optional section for additional actions, such as 'Cancel' or 'Save'.\", \"Page: Plain div wrapper assigned to slot='page' for push and persistent layouts; place app layout content inside it.\", ], image: \"https://images.ctfassets.net/i5uwscj4pkk2/7aOA4WtcFwev6f3tZy6VgX/83c0b087170d859406526e5d7ad66d6b/Drawer_-_Anatomy.png\", }, variants: { items: [ { key: \"\", title: \"\", description: \"\", image: \"\", }, ], }, related: { items: [ { name: \"Dialog\", link: \"https://guides.muibook.com/dialog\" }, { name: \"Button\", link: \"https://guides.muibook.com/button\" }, ], }, rules: [ { heading: \"Dismissing a Drawer\", description: \"\", doContent: [ { description: \"Dismiss the Drawer by clicking the cross icon, cancel button, esc key or the surrounding background.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/57NkU3oAQcirF5MGE13com/ad76c20d1895daf7d7c1e3467066e65a/drawer-dismiss-do.png\", }, ], dontContent: [ { description: \"Avoid hiding the close button or replacing the footer action with a close function.\" }, { image: \"https://images.ctfassets.net/i5uwscj4pkk2/18OP63gYKYYM22rkwWeR2B/b1f496968b693385afcfdae4fe54f1c2/drawer-dismiss-dont.png\", }, ], }, { heading: \"Push Drawer\", description: \"Ideal when both drawer and the main content need to be visible, such as for filters or tools that need to be accessed with the main view still present.\", doContent: [ { description: \"Ensure the drawer does not obscure crucial information when the user is working on a task.\" }, { image: \"https://images.ctfassets.net/i5uwscj4pkk2/5wsKf5Cnw9RNvyIUp2LQkc/5394a8450361acb0d100356688190301/drawer-push-drawer-do.png\", }, ], dontContent: [ { description: \"The drawer shouldn't cover key content or controls when the user is completing a task.\" }, { image: \"https://images.ctfassets.net/i5uwscj4pkk2/2DH7KR12spaSoBbTq4rzav/4f46f916a3918a2cf6b61995f984bc36/drawer-push-drawer-dont.png\", }, ], }, { heading: \"Overlay Drawer / Menu\", description: \"Overlay navigation drawers appear above the main content and are used to access app sections or menus. They block background interaction to keep the user focused on making a selection.\", doContent: [ { description: \"Ensure the user can close the drawer by clicking the background, using the close (X) button, or hitting the Escape key.\", }, { image: \"https://images.ctfassets.net/i5uwscj4pkk2/5VOY2WHXcUCqblWIqAg0di/718f85a9b69d5467179deb4ae7fa65db/drawer-overlay-do.png\", }, ], dontContent: [ { description: \"Don't use footer actions, such as “Save” or “Cancel,” to close the navigation drawer. These actions are reserved for task workflows.\", }, { image: \"https://images.ctfassets.net/i5uwscj4pkk2/5PpEeYZf4PslTKh42u81Uf/9e59e9a3f1bf533699b20ede7d289b75/drawer-overlay-dont.png\", }, ], }, ], compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"navigation-menu\", name: \"Navigation Menu\", description: \"Overlay Drawer used for navigating between major sections of the product. It appears as a temporary overlay and is dismissed easily when users make a selection or interact outside the drawer. Ideal for mobile or smaller viewports where persistent navigation isn’t suitable.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/56QeC3M4PhQVmlwVKwUqLl/1e3119e0d817813c88c1352408e53c64/drawer-composition-menu.png\", }, { key: \"create-roadmap-task\", name: \"Create Roadmap Task\", description: \"Overlay Drawer used for completing temporary, focused tasks such as editing a field or filling out a short form, where the surrounding content (background) is not needed for context. If the task depends on the main content, use a push or permanent drawer that sits alongside the view.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2FFW8tnnM6leJbd0LPyeKl/1ab79ffb7165d6fbd35b151bc69cad5a/drawer-composition-outcomes.png\", }, { key: \"invoice-details-task\", name: \"Invoice Details Task\", description: \"Overlay Drawer used for navigating between major sections of the product. It appears as a temporary overlay and is dismissed easily when users make a selection or interact outside the drawer. Ideal for mobile or smaller viewports where persistent navigation isn’t suitable.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/XXqWZOjNxUkK9Ou2FPTCB/5fd1db2b2315d0ae41ec543feac2a03c/drawer-composition-invoice.png\", }, { key: \"review-items-task\", name: \"Review Items Task\", description: \"Push Drawer used for completing persistent tasks such as editing a field or filling out a short form, where surrounding content remains visible for context. An entry action is required to open the drawer, but it can be hidden while the task is active to keep focus on the workflow.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/rHTSU9sPUdmwrmGETRLcC/fa444ff8d8a72a28e8f10537324bbca3/drawer-composition-smart-bills.png\", }, ], }, behaviour: { list: [ \"Animate the drawer smoothly to enhance user experience.\", \"Don't make the animation too slow or jarring\", \"Avoid animations that are too fast, slow, or abrupt.\", \"rawers often slide in from the right-side of the viewport.\", ], }, writing: { list: [ \"Keep drawer content simple and concise.\", \"Use clear labels for navigation items or actions.\", \"Avoid overcrowding the drawer with too much information.\", ], }, }, }"
         }
       ],
       "exports": [
@@ -1952,7 +1967,7 @@
             },
             {
               "name": "page",
-              "description": "Page content displayed alongside `push` and `persistent` drawer variants."
+              "description": "Page region displayed alongside `push` and `persistent` variants. Use a plain `div` as the direct slotted wrapper, then compose Stack or other layout components inside it."
             }
           ],
           "cssProperties": [
@@ -2461,7 +2476,7 @@
           "type": {
             "text": "MuiDocs"
           },
-          "default": "{ FormMessage: { title: \"Form Message\", description: \"Form Message provides supporting text below form controls for guidance, validation, and status messaging.\", hero: [\"\"], figma: [\"\"], storybook: [\"https://stories.muibook.com\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-form-message/index.ts\"], website: [\"https://muibook.com/#/form-message\"], guides: [\"https://guides.muibook.com/field\"], usage: { list: [ \"Use for supporting text below form controls.\", \"Use inside mui-field with slot='message' for consistent spacing and placement.\", \"When used in Form Group layouts, attach each Form Message to its specific Field using slot='message'.\", \"Form Message wraps Mui Body with form-oriented defaults.\", \"Form Message renders an info icon by default; provide slot='before' to replace it.\", \"Supporting copy is intentionally knocked back so inputs and selections stay visually primary.\", \"Slot icons in before/after using Mui Body slot behavior.\", \"Style state feedback through slotted icon color and text styling in usage context.\", \"Use size to match nearby body text (x-small, small, medium, large).\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"] }, anatomy: { image: \"\", list: [\"Optional leading slot\", \"Hint text\", \"Optional trailing slot\"] }, variants: { items: [{ key: \"\", title: \"\", description: \"\", image: \"\" }] }, compositions: { description: \"\", items: [] }, related: { items: [ { name: \"Field\", link: \"https://guides.muibook.com/field\" }, { name: \"Input\", link: \"https://guides.muibook.com/input\" }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"] }, writing: { list: [\"\"] }, }, }"
+          "default": "{ FormMessage: { title: \"Form Message\", description: \"Form Message provides supporting text below form controls for guidance, validation, and status messaging.\", hero: [\"\"], figma: [\"\"], storybook: [\"https://stories.muibook.com\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-form-message/index.ts\"], website: [\"https://muibook.com/#/form-message\"], guides: [\"https://guides.muibook.com/field\"], usage: { list: [ \"Use for supporting text below form controls.\", \"Use inside mui-field with slot='message' for consistent spacing and placement.\", \"When used in Form Group layouts, attach each Form Message to its specific Field using slot='message'.\", \"Form Message wraps Mui Body with form-oriented defaults.\", \"Form Message renders an info icon by default; provide slot='before' to replace it.\", \"Use variant='info' for lighter informational guidance that should remain less visually impactful than warning, success, or error states.\", \"Supporting copy is intentionally knocked back so inputs and selections stay visually primary.\", \"Slot icons in before/after using Mui Body slot behavior.\", \"Style state feedback through slotted icon color and text styling in usage context.\", \"Use size to match nearby body text (x-small, small, medium, large).\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"] }, anatomy: { image: \"\", list: [\"Optional leading slot\", \"Hint text\", \"Optional trailing slot\"] }, variants: { items: [{ key: \"\", title: \"\", description: \"\", image: \"\" }] }, compositions: { description: \"\", items: [] }, related: { items: [ { name: \"Field\", link: \"https://guides.muibook.com/field\" }, { name: \"Input\", link: \"https://guides.muibook.com/input\" }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"] }, writing: { list: [\"\"] }, }, }"
         }
       ],
       "exports": [
@@ -2503,7 +2518,7 @@
             {
               "name": "variant",
               "type": {
-                "text": "\"optional\" | \"warning\" | \"success\" | \"error\""
+                "text": "\"optional\" | \"info\" | \"warning\" | \"success\" | \"error\""
               },
               "default": "optional",
               "description": "Sets the semantic message color and default icon treatment."
@@ -2683,74 +2698,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/mui-form-section-footer/doc.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "muiDocs",
-          "type": {
-            "text": "MuiDocs"
-          },
-          "default": "{ FormSectionFooter: { title: \"Form Section Footer\", description: \"Footer wrapper for Form Section actions and divider patterns.\", hero: [\"\"], figma: [\"\"], storybook: [\"https://stories.muibook.com\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-form-section-footer/index.ts\"], website: [\"https://muibook.com/#/form-section-footer\"], guides: [\"https://guides.muibook.com/form-section\"], usage: { list: [ \"Use in slot='footer' on mui-form-section for consistent footer spacing.\", \"Place mui-rule first when you need a visual separation before actions.\", \"Keep responsive action layouts inside the footer wrapper.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"Footer actions remain keyboard accessible based on slotted controls.\"], }, anatomy: { image: \"\", list: [\"Footer wrapper\", \"Optional divider (mui-rule)\", \"Action content\"], }, variants: { items: [{ key: \"\", title: \"\", description: \"\", image: \"\" }] }, compositions: { description: \"\", items: [] }, related: { items: [ { name: \"Form Section\", link: \"https://guides.muibook.com/form-section\" }, { name: \"Form Group\", link: \"https://guides.muibook.com/form-group\" }, ], }, rules: [{ heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }] }], behaviour: { list: [\"\"] }, writing: { list: [\"\"] }, }, }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "muiDocs",
-          "declaration": {
-            "name": "muiDocs",
-            "module": "src/components/mui-form-section-footer/doc.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/mui-form-section-footer/index.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Provides consistent spacing for actions and optional divider content in a form section footer.",
-          "name": "MuiFormSectionFooter",
-          "superclass": {
-            "name": "HTMLElement"
-          },
-          "tagName": "mui-form-section-footer",
-          "customElement": true,
-          "attributes": [],
-          "slots": [
-            {
-              "name": "",
-              "description": "Footer actions and optional leading `mui-rule` divider."
-            }
-          ],
-          "events": [],
-          "cssProperties": [
-            {
-              "name": "--form-section-footer-gap",
-              "description": "Gap between footer children without a divider."
-            },
-            {
-              "name": "--form-section-footer-gap-with-rule",
-              "description": "Gap between footer children when a divider is present."
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "custom-element-definition",
-          "name": "mui-form-section-footer",
-          "declaration": {
-            "name": "MuiFormSectionFooter",
-            "module": "src/components/mui-form-section-footer/index.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/components/mui-grid/doc.ts",
@@ -3005,7 +2952,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/mui-heading/doc.ts",
+      "path": "src/components/mui-form-section-footer/doc.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -3013,7 +2960,7 @@
           "type": {
             "text": "MuiDocs"
           },
-          "default": "{ Heading: { title: \"Heading\", description: \"The Heading component includes six levels (H1–H6) for structured heading usage, supporting a range of hierarchies in text presentation.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/mGURbbhEBEMoMv5KlrbhD/46b2fdc16823b3750955a6bfd451e3ed/Heading_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=3-1120&t=fSFYVey9aCoE5oQa-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/content-heading--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-heading/index.ts\"], website: [\"https://muibook.com/#/heading\"], guides: [\"https://guides.muibook.com/heading\"], usage: { list: [ \"Blog/Info Pages: Follow a structured, descending order to create clear sections. E.g. H1 → H2 → H3.\", \"Rich Data or Workflows: Headings may be used out of strict order to maintain visual balance and usability. E.g. Skip an H3 if H4 better suits the layout.\", \"Use only one H1 per page to establish a clear primary title and improve accessibility.\", \"Use H2–H6 to structure content logically, maintaining a clear hierarchy.\", ], }, accessibility: { designerList: [ \"Use the level property (H1–H6) to maintain correct semantic structure.\", \"Follow a logical order — don’t skip heading levels.\", \"Helps screen readers understand and navigate the page hierarchy.\", ], engineerList: [ \"Use the level property (H1–H6) to maintain correct semantic structure.\", \"Follow a logical order — don’t skip heading levels.\", \"Helps screen readers understand and navigate the page hierarchy.\", ], }, anatomy: { image: \"\", list: [\"\"], }, variants: { items: [ { key: \"heading-1\", title: \"Heading 1\", description: \"The primary heading is typically the page's main title. It plays a crucial role in accessibility and SEO, as screen readers and search engines rely on H1s to understand page structure.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/4qDOWEyMtO0U40Ot9aSKNb/a3ae2d059cb9caeb26c6c65e36df71b2/heading-1.png\", }, { key: \"heading-2\", title: \"Heading 2\", description: \"A secondary heading that introduces major sections within a page, following the H1.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/WXCjRrpLpqzGUhY8auOMv/66d0cd721db330f68547a16a63feec4f/heading-2.png\", }, { key: \"heading-3\", title: \"Heading 3\", description: \"A heading is used to structure content under H2, providing additional hierarchy.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/146ZPfxWf50ahUf35SAMWU/ffaacafbe9f905da81850a60d00e48d7/heading-3.png\", }, { key: \"heading-4\", title: \"Heading 4\", description: \"A heading for organising detailed content under H3, maintaining readability.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/53f9iMdJUV7DPsiZhPToiY/83141d25fb2de26bcb7c0e66a4fd14f6/heading-4.png\", }, { key: \"heading-5\", title: \"Heading 5\", description: \"A heading that introduces lower-level content, often for minor divisions within H4 sections.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/1pocISFs6Ht66gXn4EHn59/f43d402c6cbe3dafbc06d35ef1097cad/heading-5.png\", }, { key: \"heading-6\", title: \"Heading 6\", description: \"The lowest level heading, used for minimal emphasis or supplementary labeling.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3CV5CHrrNrkeTkZDfhpRGA/29d6f9b6da53f4174f8c4d45aee01939/heading-6.png\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"muibook-resource\", name: \"Muibook Resource\", description: \"The Muibook documentation site uses MUI components to compose its layout, including headings, text, lists, buttons, icons, and image components.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3LVvuYDZWRnMhxNy6GMLNd/c5074a05eacb2c22c50ea172b3567c48/Muibook-List-Composition.png\", }, { key: \"guru-outcomes-roadmap\", name: \"Guru Outcomes - Roadmap\", description: \"The Loader component in action on the roadmap page, smoothly loading the UI while masking delays and improving perceived performance.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/7Hebis0o1mlvvDZlQRZfzl/f0c06679ab417f2ee624b570226da77d/outcomes-roadmap.gif\", }, { key: \"guru-outcomes-dashboard\", name: \"Guru Outcomes - Dashboard\", description: \"Use the <mui-loader> component to mask slow network or initial data load times. Combine its features to create a seamless loading experience.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/7fsKn4mqKGieVh2D1EdyuR/a9afa145001e13470054aa9d7004127d/outcomes-home.gif\", }, ], }, related: { items: [ { name: \"Body\", link: \"https://guides.muibook.com/body\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
+          "default": "{ FormSectionFooter: { title: \"Form Section Footer\", description: \"Footer wrapper for Form Section actions and divider patterns.\", hero: [\"\"], figma: [\"\"], storybook: [\"https://stories.muibook.com\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-form-section-footer/index.ts\"], website: [\"https://muibook.com/#/form-section-footer\"], guides: [\"https://guides.muibook.com/form-section\"], usage: { list: [ \"Use in slot='footer' on mui-form-section for consistent footer spacing.\", \"Place mui-rule first when you need a visual separation before actions.\", \"Keep responsive action layouts inside the footer wrapper.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"Footer actions remain keyboard accessible based on slotted controls.\"], }, anatomy: { image: \"\", list: [\"Footer wrapper\", \"Optional divider (mui-rule)\", \"Action content\"], }, variants: { items: [{ key: \"\", title: \"\", description: \"\", image: \"\" }] }, compositions: { description: \"\", items: [] }, related: { items: [ { name: \"Form Section\", link: \"https://guides.muibook.com/form-section\" }, { name: \"Form Group\", link: \"https://guides.muibook.com/form-group\" }, ], }, rules: [{ heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }] }], behaviour: { list: [\"\"] }, writing: { list: [\"\"] }, }, }"
         }
       ],
       "exports": [
@@ -3022,56 +2969,40 @@
           "name": "muiDocs",
           "declaration": {
             "name": "muiDocs",
-            "module": "src/components/mui-heading/doc.ts"
+            "module": "src/components/mui-form-section-footer/doc.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/mui-heading/index.ts",
+      "path": "src/components/mui-form-section-footer/index.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Renders a semantic heading with an independently configurable visual size.",
-          "name": "MuiHeading",
-          "attributes": [
-            {
-              "name": "size",
-              "type": {
-                "text": "1 | 2 | 3 | 4 | 5 | 6"
-              },
-              "default": "1",
-              "description": "Sets the visual heading size."
-            },
-            {
-              "name": "level",
-              "type": {
-                "text": "1 | 2 | 3 | 4 | 5 | 6"
-              },
-              "description": "Sets the semantic heading level; defaults to the selected visual size."
-            }
-          ],
+          "description": "Provides consistent spacing for actions and optional divider content in a form section footer.",
+          "name": "MuiFormSectionFooter",
           "superclass": {
             "name": "HTMLElement"
           },
-          "tagName": "mui-heading",
+          "tagName": "mui-form-section-footer",
           "customElement": true,
+          "attributes": [],
           "slots": [
             {
               "name": "",
-              "description": "Heading text content."
+              "description": "Footer actions and optional leading `mui-rule` divider."
             }
           ],
           "events": [],
           "cssProperties": [
             {
-              "name": "--heading-font-weight",
-              "description": "Font weight applied to heading text."
+              "name": "--form-section-footer-gap",
+              "description": "Gap between footer children without a divider."
             },
             {
-              "name": "--heading-text-color",
-              "description": "Color applied to heading text."
+              "name": "--form-section-footer-gap-with-rule",
+              "description": "Gap between footer children when a divider is present."
             }
           ]
         }
@@ -3079,10 +3010,10 @@
       "exports": [
         {
           "kind": "custom-element-definition",
-          "name": "mui-heading",
+          "name": "mui-form-section-footer",
           "declaration": {
-            "name": "MuiHeading",
-            "module": "src/components/mui-heading/index.ts"
+            "name": "MuiFormSectionFooter",
+            "module": "src/components/mui-form-section-footer/index.ts"
           }
         }
       ]
@@ -3097,7 +3028,7 @@
           "type": {
             "text": "MuiDocs"
           },
-          "default": "{ Hint: { title: \"Hint\", description: \"Hint provides a trigger + floating tooltip pattern for contextual help.\", hero: [\"\"], figma: [\"\"], storybook: [\"https://stories.muibook.com\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-hint/index.ts\"], website: [\"https://muibook.com/#/hint\"], guides: [\"https://guides.muibook.com/field\"], usage: { list: [ \"Use for short contextual help that appears on hover or focus.\", \"Slot the trigger UI into slot='trigger' (icon, badge, text, or custom content).\", \"Set placement to top, bottom, left, or right to control tooltip position.\", \"Delay is intentional by default: hint open is clamped to 1000-2000ms (default 1500ms) to prevent instant pop.\", \"Use delay and initial-delay to tune open timing when needed.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"] }, anatomy: { image: \"\", list: [\"Trigger slot\", \"Tooltip content\", \"Placement behavior\"] }, variants: { items: [{ key: \"\", title: \"\", description: \"\", image: \"\" }] }, compositions: { description: \"\", items: [] }, related: { items: [ { name: \"Body\", link: \"https://guides.muibook.com/body\" }, { name: \"Form Message\", link: \"https://guides.muibook.com/field\" }, ], }, rules: [{ heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }] }], behaviour: { list: [\"\"] }, writing: { list: [\"\"] }, }, }"
+          "default": "{ Hint: { title: \"Hint\", description: \"Hint provides a trigger + floating tooltip pattern for contextual help.\", hero: [\"\"], figma: [\"\"], storybook: [\"https://stories.muibook.com\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-hint/index.ts\"], website: [\"https://muibook.com/#/hint\"], guides: [\"https://guides.muibook.com/field\"], usage: { list: [ \"Use for short contextual help that appears on hover or focus.\", \"Slot the trigger UI into slot='trigger' (icon, badge, text, or custom content).\", \"Set placement to top, bottom, left, or right to control tooltip position.\", \"Delay is intentional by default: hint open is clamped to 250-2000ms (default 500ms) to prevent instant pop.\", \"Use delay and initial-delay to tune open timing when needed.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"] }, anatomy: { image: \"\", list: [\"Trigger slot\", \"Tooltip content\", \"Placement behavior\"] }, variants: { items: [{ key: \"\", title: \"\", description: \"\", image: \"\" }] }, compositions: { description: \"\", items: [] }, related: { items: [ { name: \"Body\", link: \"https://guides.muibook.com/body\" }, { name: \"Form Message\", link: \"https://guides.muibook.com/field\" }, ], }, rules: [{ heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }] }], behaviour: { list: [\"\"] }, writing: { list: [\"\"] }, }, }"
         }
       ],
       "exports": [
@@ -3141,16 +3072,16 @@
               "type": {
                 "text": "number"
               },
-              "default": "1500",
-              "description": "Delay in milliseconds for subsequent openings, clamped between 1000 and 2000."
+              "default": "500",
+              "description": "Delay in milliseconds for subsequent openings, clamped between 250 and 2000."
             },
             {
               "name": "initial-delay",
               "type": {
                 "text": "number"
               },
-              "default": "1500",
-              "description": "Delay in milliseconds for the first opening, clamped between 1000 and 2000."
+              "default": "500",
+              "description": "Delay in milliseconds for the first opening, clamped between 250 and 2000."
             },
             {
               "name": "size",
@@ -3198,7 +3129,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/mui-illustrations/doc.ts",
+      "path": "src/components/mui-heading/doc.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -3206,7 +3137,7 @@
           "type": {
             "text": "MuiDocs"
           },
-          "default": "{ Illustrations: { title: \"Illustrations\", description: \"Large-format decorative visuals used to support empty states, onboarding moments, and explanatory content without competing with the primary interface.\", hero: [\"\"], figma: [\"\"], storybook: [\"\"], github: [\"https://github.com/michaeltrilford/muibook/tree/main/src/components/mui-illustrations\"], website: [\"https://muibook.com/#/illustrations\"], guides: [\"\"], usage: { list: [ \"Use illustrations to add tone and clarity to empty states, helper panels, and onboarding screens.\", \"Prefer one illustration per message area so the visual supports the content instead of competing with it.\", \"Use color='default' for light contexts and color='inverted' when the illustration needs to sit on dark surfaces.\", \"Use a custom CSS color only when the illustration needs to inherit a specific product accent.\", \"Keep illustration sizing consistent within the same product area.\", ], }, accessibility: { designerList: [\"\"], engineerList: [ \"Treat illustrations as decorative unless they communicate unique meaning that is not already present in adjacent text.\", ], }, anatomy: { image: \"\", list: [\"\"], }, variants: { items: [ { key: \"trash\", title: \"Trash\", description: \"A single illustration export for destructive, discard, or empty-bin related moments.\", image: \"\", }, ], }, compositions: { description: \"Illustrations are typically paired with heading, body copy, and one primary action.\", items: [ { key: \"empty-state\", name: \"Empty State\", description: \"A compact empty-state composition using an illustration to anchor the message.\", image: \"\", }, ], }, related: { items: [ { name: \"Icons\", link: \"https://guides.muibook.com/icons\" }, { name: \"Message\", link: \"https://guides.muibook.com/message\" }, { name: \"Card\", link: \"https://guides.muibook.com/card\" }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
+          "default": "{ Heading: { title: \"Heading\", description: \"The Heading component includes six levels (H1–H6) for structured heading usage, supporting a range of hierarchies in text presentation.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/mGURbbhEBEMoMv5KlrbhD/46b2fdc16823b3750955a6bfd451e3ed/Heading_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=3-1120&t=fSFYVey9aCoE5oQa-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/content-heading--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-heading/index.ts\"], website: [\"https://muibook.com/#/heading\"], guides: [\"https://guides.muibook.com/heading\"], usage: { list: [ \"Blog/Info Pages: Follow a structured, descending order to create clear sections. E.g. H1 → H2 → H3.\", \"Rich Data or Workflows: Headings may be used out of strict order to maintain visual balance and usability. E.g. Skip an H3 if H4 better suits the layout.\", \"Use only one H1 per page to establish a clear primary title and improve accessibility.\", \"Use H2–H6 to structure content logically, maintaining a clear hierarchy.\", ], }, accessibility: { designerList: [ \"Use the level property (H1–H6) to maintain correct semantic structure.\", \"Follow a logical order — don’t skip heading levels.\", \"Helps screen readers understand and navigate the page hierarchy.\", ], engineerList: [ \"Use the level property (H1–H6) to maintain correct semantic structure.\", \"Follow a logical order — don’t skip heading levels.\", \"Helps screen readers understand and navigate the page hierarchy.\", ], }, anatomy: { image: \"\", list: [\"\"], }, variants: { items: [ { key: \"heading-1\", title: \"Heading 1\", description: \"The primary heading is typically the page's main title. It plays a crucial role in accessibility and SEO, as screen readers and search engines rely on H1s to understand page structure.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/4qDOWEyMtO0U40Ot9aSKNb/a3ae2d059cb9caeb26c6c65e36df71b2/heading-1.png\", }, { key: \"heading-2\", title: \"Heading 2\", description: \"A secondary heading that introduces major sections within a page, following the H1.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/WXCjRrpLpqzGUhY8auOMv/66d0cd721db330f68547a16a63feec4f/heading-2.png\", }, { key: \"heading-3\", title: \"Heading 3\", description: \"A heading is used to structure content under H2, providing additional hierarchy.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/146ZPfxWf50ahUf35SAMWU/ffaacafbe9f905da81850a60d00e48d7/heading-3.png\", }, { key: \"heading-4\", title: \"Heading 4\", description: \"A heading for organising detailed content under H3, maintaining readability.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/53f9iMdJUV7DPsiZhPToiY/83141d25fb2de26bcb7c0e66a4fd14f6/heading-4.png\", }, { key: \"heading-5\", title: \"Heading 5\", description: \"A heading that introduces lower-level content, often for minor divisions within H4 sections.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/1pocISFs6Ht66gXn4EHn59/f43d402c6cbe3dafbc06d35ef1097cad/heading-5.png\", }, { key: \"heading-6\", title: \"Heading 6\", description: \"The lowest level heading, used for minimal emphasis or supplementary labeling.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3CV5CHrrNrkeTkZDfhpRGA/29d6f9b6da53f4174f8c4d45aee01939/heading-6.png\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"muibook-resource\", name: \"Muibook Resource\", description: \"The Muibook documentation site uses MUI components to compose its layout, including headings, text, lists, buttons, icons, and image components.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3LVvuYDZWRnMhxNy6GMLNd/c5074a05eacb2c22c50ea172b3567c48/Muibook-List-Composition.png\", }, { key: \"guru-outcomes-roadmap\", name: \"Guru Outcomes - Roadmap\", description: \"The Loader component in action on the roadmap page, smoothly loading the UI while masking delays and improving perceived performance.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/7Hebis0o1mlvvDZlQRZfzl/f0c06679ab417f2ee624b570226da77d/outcomes-roadmap.gif\", }, { key: \"guru-outcomes-dashboard\", name: \"Guru Outcomes - Dashboard\", description: \"Use the <mui-loader> component to mask slow network or initial data load times. Combine its features to create a seamless loading experience.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/7fsKn4mqKGieVh2D1EdyuR/a9afa145001e13470054aa9d7004127d/outcomes-home.gif\", }, ], }, related: { items: [ { name: \"Body\", link: \"https://guides.muibook.com/body\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
         }
       ],
       "exports": [
@@ -3215,48 +3146,151 @@
           "name": "muiDocs",
           "declaration": {
             "name": "muiDocs",
-            "module": "src/components/mui-illustrations/doc.ts"
+            "module": "src/components/mui-heading/doc.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/mui-illustrations/trash.ts",
+      "path": "src/components/mui-heading/index.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Representative API for Muibook illustration elements.",
-          "name": "MuiIllustrationTrash",
+          "description": "Renders a semantic heading with an independently configurable visual size.",
+          "name": "MuiHeading",
           "attributes": [
             {
               "name": "size",
               "type": {
-                "text": "\"small\" | \"medium\" | \"large\" | \"x-large\""
+                "text": "1 | 2 | 3 | 4 | 5 | 6"
               },
-              "default": "medium",
-              "description": "Sets the illustration footprint."
+              "default": "1",
+              "description": "Sets the visual heading size."
             },
             {
-              "name": "color",
+              "name": "level",
               "type": {
-                "text": "\"default\" | \"inverted\" | string"
+                "text": "1 | 2 | 3 | 4 | 5 | 6"
               },
-              "default": "default",
-              "description": "Sets an illustration color preset or accepts any valid CSS color."
+              "description": "Sets the semantic heading level; defaults to the selected visual size."
+            },
+            {
+              "name": "truncate",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Clamps heading text to a single line with ellipsis when the available width is constrained."
+            },
+            {
+              "name": "clamp",
+              "type": {
+                "text": "number"
+              },
+              "description": "Limits heading text to the provided number of lines. Ignored when truncate is present."
             }
           ],
           "superclass": {
             "name": "HTMLElement"
           },
-          "tagName": "mui-illustration-trash",
+          "tagName": "mui-heading",
           "customElement": true,
-          "slots": [],
+          "slots": [
+            {
+              "name": "",
+              "description": "Heading text content."
+            }
+          ],
           "events": [],
           "cssProperties": [
             {
-              "name": "--illustration-main-color-default",
-              "description": "Primary color used by default illustrations."
+              "name": "--heading-font-weight",
+              "description": "Font weight applied to heading text."
+            },
+            {
+              "name": "--heading-text-color",
+              "description": "Color applied to heading text."
+            },
+            {
+              "name": "--heading-line-clamp",
+              "description": "Resolved number of visible lines used by the clamp attribute."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "mui-heading",
+          "declaration": {
+            "name": "MuiHeading",
+            "module": "src/components/mui-heading/index.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/mui-illustrations/doc.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "muiDocs",
+          "type": {
+            "text": "MuiDocs"
+          },
+          "default": "{ Illustrations: { title: \"Illustrations\", description: \"Large-format decorative visuals used to support empty states, onboarding moments, and explanatory content without competing with the primary interface.\", hero: [\"\"], figma: [\"\"], storybook: [\"\"], github: [\"https://github.com/michaeltrilford/muibook/tree/main/src/components/mui-illustrations\"], website: [\"https://muibook.com/#/illustrations\"], guides: [\"\"], usage: { list: [ \"Use illustrations to add tone and clarity to empty states, helper panels, and onboarding screens.\", \"Prefer one illustration per message area so the visual supports the content instead of competing with it.\", \"Use color='default' for light contexts and color='inverted' when the illustration needs to sit on dark surfaces.\", \"Use a custom CSS color only when the illustration needs to inherit a specific product accent.\", \"Keep illustration sizing consistent within the same product area.\", ], }, accessibility: { designerList: [\"\"], engineerList: [ \"Treat illustrations as decorative unless they communicate unique meaning that is not already present in adjacent text.\", ], }, anatomy: { image: \"\", list: [\"\"], }, variants: { items: [ { key: \"trash\", title: \"Trash\", description: \"A single illustration export for destructive, discard, or empty-bin related moments.\", image: \"\", }, ], }, compositions: { description: \"Illustrations are typically paired with heading, body copy, and one primary action.\", items: [ { key: \"empty-state\", name: \"Empty State\", description: \"A compact empty-state composition using an illustration to anchor the message.\", image: \"\", }, ], }, related: { items: [ { name: \"Icons\", link: \"https://guides.muibook.com/icons\" }, { name: \"Message\", link: \"https://guides.muibook.com/message\" }, { name: \"Card\", link: \"https://guides.muibook.com/card\" }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "muiDocs",
+          "declaration": {
+            "name": "muiDocs",
+            "module": "src/components/mui-illustrations/doc.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/mui-illustrations/trash.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Representative API for Muibook illustration elements.",
+          "name": "MuiIllustrationTrash",
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "\"small\" | \"medium\" | \"large\" | \"x-large\""
+              },
+              "default": "medium",
+              "description": "Sets the illustration footprint."
+            },
+            {
+              "name": "color",
+              "type": {
+                "text": "\"default\" | \"inverted\" | string"
+              },
+              "default": "default",
+              "description": "Sets an illustration color preset or accepts any valid CSS color."
+            }
+          ],
+          "superclass": {
+            "name": "HTMLElement"
+          },
+          "tagName": "mui-illustration-trash",
+          "customElement": true,
+          "slots": [],
+          "events": [],
+          "cssProperties": [
+            {
+              "name": "--illustration-main-color-default",
+              "description": "Primary color used by default illustrations."
             },
             {
               "name": "--illustration-main-color-inverted",
@@ -3276,6 +3310,138 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/mui-image/doc.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "muiDocs",
+          "type": {
+            "text": "MuiDocs"
+          },
+          "default": "{ Image: { title: \"Image\", description: \"Displays an image alongside an optional caption to provide context, explanation, or attribution. Useful for supporting content visually while maintaining clarity through descriptive labelling.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/14eozXMPlzipgAfqaIR2Py/4e211990a30b4a08549deccfd30c71a9/Image_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=948-4194&t=0ytskb8cxriEmdz2-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/content-image--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-image/index.ts\"], website: [\"\"], guides: [\"https://guides.muibook.com/image\"], usage: { list: [ \"Use to display images that require additional context or explanation.\", \"Use height + crop + fit=cover when you need fixed-height visual crops.\", \"Use max-height with aspect-ratio for responsive image frames that should not exceed a visual cap.\", \"Use focal-x/focal-y or position to keep important content in frame.\", \"Use zoom carefully to tighten framing without switching to background-image.\", \"Captions should clarify the relevance of the image, not repeat surrounding content.\", \"Ideal for diagrams, UI examples, or content requiring attribution.\", \"Ensure images are accessible with alt text and meaningful captions.\", ], }, accessibility: { designerList: [ \"Use meaningful alt text that describes the image’s purpose.\", \"Use alt=&#8220;&#8221; for decorative images that don’t convey information.\", \"Use the caption slot for extended context, especially for diagrams or UI patterns.\", ], engineerList: [ \"Use meaningful alt text that describes the image’s purpose.\", \"Use alt=&#8220;&#8221; for decorative images that don’t convey information.\", \"Use the caption slot for extended context, especially for diagrams or UI patterns.\", ], }, anatomy: { image: \"https://images.ctfassets.net/i5uwscj4pkk2/3BSbMl1cqUOB6oDmFLQjRx/193889c0f6d3da6178d51e5fff06b8ed/Image_-_Anatomy.png\", list: [\"Standard styling for a hero image.\", \"Optional caption for the image.\"], }, variants: { items: [ { key: \"\", title: \"\", description: \"\", image: \"\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"muibook-resource\", name: \"Muibook Resource\", description: \"The Muibook documentation site uses MUI components to compose its layout, including headings, text, lists, buttons, icons, and image components.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3LVvuYDZWRnMhxNy6GMLNd/c5074a05eacb2c22c50ea172b3567c48/Muibook-List-Composition.png\", }, ], }, related: { items: [ { name: \"\", link: \"\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "muiDocs",
+          "declaration": {
+            "name": "muiDocs",
+            "module": "src/components/mui-image/doc.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/mui-image/index.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Frames a slotted image with optional cropping, focal positioning and caption content.",
+          "name": "MuiImage",
+          "attributes": [
+            {
+              "name": "height",
+              "type": {
+                "text": "string"
+              },
+              "description": "Sets the rendered image container height using any valid CSS height value."
+            },
+            {
+              "name": "fit",
+              "type": {
+                "text": "\"contain\" | \"cover\" | \"fill\" | \"none\" | \"scale-down\""
+              },
+              "default": "contain",
+              "description": "Controls how the image fits its container."
+            },
+            {
+              "name": "crop",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enables cropped image presentation."
+            },
+            {
+              "name": "position",
+              "type": {
+                "text": "string"
+              },
+              "default": "center center",
+              "description": "Sets the object position when a focal position is not supplied."
+            },
+            {
+              "name": "zoom",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "Scales the image around its focal position."
+            },
+            {
+              "name": "focal-x",
+              "type": {
+                "text": "string"
+              },
+              "description": "Sets the horizontal focal point used for cropped images."
+            },
+            {
+              "name": "focal-y",
+              "type": {
+                "text": "string"
+              },
+              "description": "Sets the vertical focal point used for cropped images."
+            },
+            {
+              "name": "radius",
+              "type": {
+                "text": "string"
+              },
+              "default": "var(--radius-300)",
+              "description": "Sets the frame border radius."
+            },
+            {
+              "name": "aspect-ratio",
+              "type": {
+                "text": "string"
+              },
+              "description": "Sets the media aspect ratio using any valid CSS aspect-ratio value."
+            }
+          ],
+          "superclass": {
+            "name": "HTMLElement"
+          },
+          "tagName": "mui-image",
+          "customElement": true,
+          "slots": [
+            {
+              "name": "image",
+              "description": "Image media, normally an `img` element."
+            },
+            {
+              "name": "caption",
+              "description": "Optional caption content, normally a `figcaption` element."
+            }
+          ],
+          "events": [],
+          "cssProperties": []
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "mui-image",
+          "declaration": {
+            "name": "MuiImage",
+            "module": "src/components/mui-image/index.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/mui-icons/accessibility.ts",
@@ -5000,7 +5166,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/mui-image/doc.ts",
+      "path": "src/components/mui-link/doc.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -5008,7 +5174,7 @@
           "type": {
             "text": "MuiDocs"
           },
-          "default": "{ Image: { title: \"Image\", description: \"Displays an image alongside an optional caption to provide context, explanation, or attribution. Useful for supporting content visually while maintaining clarity through descriptive labelling.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/14eozXMPlzipgAfqaIR2Py/4e211990a30b4a08549deccfd30c71a9/Image_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=948-4194&t=0ytskb8cxriEmdz2-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/content-image--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-image/index.ts\"], website: [\"\"], guides: [\"https://guides.muibook.com/image\"], usage: { list: [ \"Use to display images that require additional context or explanation.\", \"Use height + crop + fit=cover when you need fixed-height visual crops.\", \"Use max-height with aspect-ratio for responsive image frames that should not exceed a visual cap.\", \"Use focal-x/focal-y or position to keep important content in frame.\", \"Use zoom carefully to tighten framing without switching to background-image.\", \"Captions should clarify the relevance of the image, not repeat surrounding content.\", \"Ideal for diagrams, UI examples, or content requiring attribution.\", \"Ensure images are accessible with alt text and meaningful captions.\", ], }, accessibility: { designerList: [ \"Use meaningful alt text that describes the image’s purpose.\", \"Use alt=&#8220;&#8221; for decorative images that don’t convey information.\", \"Use the caption slot for extended context, especially for diagrams or UI patterns.\", ], engineerList: [ \"Use meaningful alt text that describes the image’s purpose.\", \"Use alt=&#8220;&#8221; for decorative images that don’t convey information.\", \"Use the caption slot for extended context, especially for diagrams or UI patterns.\", ], }, anatomy: { image: \"https://images.ctfassets.net/i5uwscj4pkk2/3BSbMl1cqUOB6oDmFLQjRx/193889c0f6d3da6178d51e5fff06b8ed/Image_-_Anatomy.png\", list: [\"Standard styling for a hero image.\", \"Optional caption for the image.\"], }, variants: { items: [ { key: \"\", title: \"\", description: \"\", image: \"\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"muibook-resource\", name: \"Muibook Resource\", description: \"The Muibook documentation site uses MUI components to compose its layout, including headings, text, lists, buttons, icons, and image components.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3LVvuYDZWRnMhxNy6GMLNd/c5074a05eacb2c22c50ea172b3567c48/Muibook-List-Composition.png\", }, ], }, related: { items: [ { name: \"\", link: \"\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
+          "default": "{ Link: { title: \"Link\", description: \"Links are used to navigate between pages or external content. They are visually distinct from surrounding text by using underlines — a familiar and accessible pattern that ensures clarity and consistency.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/7bK1593sNzW75ZoqBupCRj/0420d8ef12472208403efa48d2fe98d6/Link_-_Home_Image.png\", ], figma: [\"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=3-663&t=fSFYVey9aCoE5oQa-1\"], storybook: [\"https://stories.muibook.com/?path=/docs/actions-link--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-link/index.ts\"], website: [\"https://muibook.com/#/link\"], guides: [\"https://guides.muibook.com/link\"], usage: { list: [ \"Use links to navigate to related content or different pages.\", \"Use for navigation only — use buttons for actions like submitting forms or changing data.\", \"Keep link text concise and descriptive. Avoid vague labels like 'Click here.'\", \"Use full sentences or phrases that clearly describe the destination.\", \"Prefer inline links within body text unless a more prominent callout is needed.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"], }, anatomy: { image: \"https://images.ctfassets.net/i5uwscj4pkk2/6Rbr0KRWAiNRuPsagpreV7/2adc3626aa45ddc95ddf7d0a508c7917/Link_-_Anatomy.png\", list: [ \"LABEL: Text describing the link / link button action. Use action verbs or phrases to tell the user what will happen next, and follow the link label content guidelines.\", \"BEFORE: An optional area to include an icon before the label. Use an icon to add additional affordance where the icon has a clear and well-established meaning. Most links don't require an icon, so be consistent and deliberate when you do.\", \"AFTER: An optional area to include an icon after the label, often used for a chevron-down-arrow icon to indicate a dropdown menu or accordion experiences where the placement is on the far right of the link.\", \"ICON ONLY: Use when the action is easily understood and space is limited.\", ], }, variants: { items: [ { key: \"size-large\", title: \"Size: Large\", description: \"Used when a link needs to stand out in layouts, such as hero sections or alongside large headings. If used inline, it should match the surrounding text size to maintain visual hierarchy and scale consistency. E.g. Use small size icon when it is paired with large sized link.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/Tbxhps7s88CFzROYc0Lqs/3440df9aefca7cb9de3ce5015a3a4e82/Default_-_Large.png\", }, { key: \"size-medium\", title: \"Size: Medium (Default)\", description: \"The standard size for most link usage. Works well inline with body text or as standalone links within common page layouts. When used inline, it aligns with default body text for consistent reading flow. E.g. Use x-small size icon when it is paired with medium sized link.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3NbinCPLEbtetN63xh18Sy/e0a0e9bbcd11a71faefc6ad1fc0e064d/Default_-_Medium.png\", }, { key: \"size-small\", title: \"Size: Small\", description: \"Ideal for dense interfaces or compact areas such as cards, side panels, or footnotes. When used inline, it should match the smaller text size to preserve a balanced visual rhythm. E.g. Use x-small size icon when it is paired with small sized link.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/4uaoT2KHM6ux4X30BxwGYo/91137cc74414f2f32b869fae59f9625d/Default_-_Small.png\", }, { key: \"size-x-small\", title: \"Size: XSmall\", description: \"Used sparingly in tight spaces like toolbars, metadata, or inline legal text. Should align with surrounding text to avoid disrupting scale and hierarchy. E.g. Use x-small size icon when it is paired with x-small sized link.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/27dAzNJ6Q5XHVKv5ROXq36/ace1f6540b5f363624730be001bf91ce/Default_-_XSmall.png\", }, { key: \"primary\", title: \"Primary\", description: \"A high emphasis link style used for key navigation or calls to action. Visually aligned with the primary button to ensure consistency across components. When an icon is slotted into a link, it automatically inherits the link button’s default icon size. If you need a different look or emphasis, you can override the size as required.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/7wDlLjYvZEOgP8bQ6mfOuY/51b39a09c73f93ee9291e1e053df308a/Primary.png\", }, { key: \"primary-icon-only\", title: \"Primary - IconOnly\", description: \"An icon only version of the primary link. Best used when the icon meaning is immediately clear, such as external links, arrows, or downloads. Uses a small size icon when pairing with other buttons, or medium size icon for standalone actions.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/5sEr4Bhu2mwobKt6yPO9T7/a248fc0fe630ddd7f837c256a9aac126/Primary_-_IconOnly.png\", }, { key: \"secondary\", title: \"Secondary\", description: \"An icon only version of the primary link. Best used when the icon meaning is immediately clear, such as external links, arrows, or downloads. Uses a small size icon when pairing with other buttons, or medium size icon for standalone actions.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/1y7LN0FWjqrAQim9y289YN/2a65b13be6f42399404fb5bb68014700/Secondary.png\", }, { key: \"secondary-icon-only\", title: \"Secondary - IconOnly\", description: \"An icon only version of the secondary link. Ideal for contextual actions placed beside content or inside user interface components. Uses a small size icon when pairing with other buttons, or medium size icon for standalone actions.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/nWMRYy5KcAqFxnrRdBXJS/d02dc2a67ae81bca02b82645c998fb9b/Secondary_-_IconOnly.png\", }, { key: \"tertiary\", title: \"Tertiary\", description: \"A subtle and low emphasis style often used inline with body text or in subdued areas of the interface. Mirrors the styling of the tertiary button for visual harmony in dense content. When an icon is slotted into a link, it automatically inherits the link button’s default icon size. If you need a different look or emphasis, you can override the size as required.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/ydUs1pJsUgg7JBX7xpIOW/8e8cd367963506e35f39a97a8f41d616/Tertiary.png\", }, { key: \"tertiary-icon-only\", title: \"Tertiary - IconOnly\", description: \"A minimal visual style with just an icon. Best for lightweight or background interactions in compact spaces. Uses a small size icon when pairing with other buttons, or medium size icon for standalone actions.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/79wxg2B2u21x1qAKTsFOIM/d8c1665de85c90983bbe50d3762f2298/Tertiary_-_IconOnly.png\", }, { key: \"overlay\", title: \"Overlay\", description: \"Use on layered media or tinted surfaces where link actions need contrast without heavy visual weight. Works well for controls rendered over previews and imagery.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/1y7LN0FWjqrAQim9y289YN/2a65b13be6f42399404fb5bb68014700/Secondary.png\", }, { key: \"attention\", title: \"Attention\", description: \"A visually distinct style intended to highlight urgency, important information, or warnings. Styled to match the attention button, typically used in upgrade prompts or legal notices. When an icon is slotted into a link, it automatically inherits the link button’s default icon size. If you need a different look or emphasis, you can override the size as required.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/6grNjw60gY1ShYuexn23oX/b1cd5e10f9a1f5b8e5e3df4bf4780a0a/Attention.png\", }, { key: \"attention-icon-only\", title: \"Attention - IconOnly\", description: \"An icon only variant that draws attention to critical actions or time sensitive content. Uses a small size icon.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/5osepffgbQtuUmunLgCDPH/83490dc2ac0ef308a53e16e5b992efc5/Attention_-_IconOnly.png\", }, ], }, compositions: { description: \"\", items: [ { key: \"\", name: \"\", description: \"\", image: \"\", }, ], }, related: { items: [ { name: \"Button\", link: \"https://guides.muibook.com/button\", }, { name: \"Icons\", link: \"https://guides.muibook.com/icons\", }, ], }, rules: [ { heading: \"Link vs Button\", description: \"Links and Buttons may look similar, but links are for navigating between pages or sections of your app or site, while buttons are for triggering actions.\", doContent: [ { description: \"Use a link when navigating to another page or view.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/7xOE9DNKWgy1lZoT0FbMOW/cc13fbeeaa85b2507087645d925d7323/button-vs-link-do.png\", }, ], dontContent: [ { description: \"Don’t use a link to trigger tasks like submitting a form or saving data.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/6tSAw6uBvg142Gzw7tenBc/4b8db682687b42f3c53fc32557cc4eee/button-vs-link-do-not.png\", }, ], }, { heading: \"Text & Icon Actions\", description: \"\", doContent: [ { description: \"Use the 'small' size icon within a medium sized action\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2W1xs6NPj3jRrW6ZaVGRvZ/3a11566b68fffda85bf5f780c4d6a394/dropdown-bar-icon-do.png\", }, ], dontContent: [ { description: \"Avoid 'x-small', 'medium' or 'large' size icons within a medium sized action\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/6BgHzCgKqk44piisNH4tE6/c08d91a1cf5231a089844d20f6ab968c/dropdown-bar-icon-dont.png\", }, ], }, { heading: \"Icon-Only Actions\", description: \"\", doContent: [ { description: \"Use a 'medium' size icon when using an icon-only medium sized action\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3syzrNBEXbBjp5hGEUvF4M/0471f4b16939d8ee54deaf48997ff455/action-icon-do.png\", }, ], dontContent: [ { description: \"Avoid 'x-small', 'medium' or 'large' size icons within an icon-only medium sized action\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/5V2TE85dY848jz1dP6Y0lC/b8e433c8abad5a4402ff1f86ddb8c848/action-icon-dont.png\", }, ], }, ], behaviour: { list: [\"\"], image: \"https://images.ctfassets.net/i5uwscj4pkk2/qS1BAkfK7TDpy9rq4cdF1/d2535f48b4d2711f9dba6d056f21e3ec/Link_-_Behaviour.png\", }, writing: { list: [\"\"], }, }, }"
         }
       ],
       "exports": [
@@ -5017,115 +5183,226 @@
           "name": "muiDocs",
           "declaration": {
             "name": "muiDocs",
-            "module": "src/components/mui-image/doc.ts"
+            "module": "src/components/mui-link/doc.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/mui-image/index.ts",
+      "path": "src/components/mui-link/index.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Frames a slotted image with optional cropping, focal positioning and caption content.",
-          "name": "MuiImage",
+          "description": "Provides anchor navigation as an inline link or action-styled link with optional supporting content.",
+          "name": "MuiLink",
           "attributes": [
             {
-              "name": "height",
+              "name": "target",
               "type": {
                 "text": "string"
               },
-              "description": "Sets the rendered image container height using any valid CSS height value."
+              "default": "_self",
+              "description": "Anchor browsing context, such as `_self` or `_blank`."
             },
             {
-              "name": "fit",
+              "name": "href",
               "type": {
-                "text": "\"contain\" | \"cover\" | \"fill\" | \"none\" | \"scale-down\""
+                "text": "string"
               },
-              "default": "contain",
-              "description": "Controls how the image fits its container."
+              "default": "#",
+              "description": "Navigation destination URL."
             },
             {
-              "name": "crop",
+              "name": "variant",
               "type": {
-                "text": "boolean"
+                "text": "\"default\" | \"primary\" | \"secondary\" | \"tertiary\" | \"overlay\" | \"attention\""
               },
-              "default": "false",
-              "description": "Enables cropped image presentation."
+              "default": "default",
+              "description": "Uses standard inline-link styling or an action-style treatment."
             },
             {
-              "name": "position",
+              "name": "disabled",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "center center",
-              "description": "Sets the object position when a focal position is not supplied."
+              "default": "false",
+              "description": "Disables navigation and exposes the anchor as aria-disabled."
             },
             {
-              "name": "zoom",
-              "type": {
-                "text": "number"
-              },
-              "default": "1",
-              "description": "Scales the image around its focal position."
-            },
-            {
-              "name": "focal-x",
+              "name": "weight",
               "type": {
-                "text": "string"
+                "text": "\"regular\" | \"medium\" | \"bold\""
               },
-              "description": "Sets the horizontal focal point used for cropped images."
+              "default": "regular",
+              "description": "Font weight of link content."
             },
             {
-              "name": "focal-y",
+              "name": "size",
               "type": {
-                "text": "string"
+                "text": "\"xx-small\" | \"x-small\" | \"small\" | \"medium\" | \"large\""
               },
-              "description": "Sets the vertical focal point used for cropped images."
+              "default": "medium",
+              "description": "Link scale; also controls automatic icon, avatar, and badge sizing."
             },
             {
-              "name": "radius",
+              "name": "download",
               "type": {
-                "text": "string"
+                "text": "string | boolean"
               },
-              "default": "var(--radius-300)",
-              "description": "Sets the frame border radius."
+              "description": "Downloads the linked resource; provide a value to set a download filename."
             },
             {
-              "name": "aspect-ratio",
+              "name": "usage",
               "type": {
-                "text": "string"
+                "text": "\"input\""
               },
-              "description": "Sets the media aspect ratio using any valid CSS aspect-ratio value."
+              "description": "Uses field-compatible styling when the link is slotted before or after an input."
             }
           ],
           "superclass": {
             "name": "HTMLElement"
           },
-          "tagName": "mui-image",
+          "tagName": "mui-link",
           "customElement": true,
           "slots": [
             {
-              "name": "image",
-              "description": "Image media, normally an `img` element."
+              "name": "",
+              "description": "Link label or a single icon for an icon-only link action."
             },
             {
-              "name": "caption",
-              "description": "Optional caption content, normally a `figcaption` element."
+              "name": "before",
+              "description": "Leading icon, avatar, badge, or other supporting content."
+            },
+            {
+              "name": "after",
+              "description": "Trailing icon, avatar, badge, or other supporting content."
             }
           ],
           "events": [],
-          "cssProperties": []
+          "cssProperties": [],
+          "cssParts": [
+            {
+              "name": "color"
+            },
+            {
+              "name": "font-family"
+            },
+            {
+              "name": "font-size"
+            },
+            {
+              "name": "font-weight"
+            },
+            {
+              "name": "letter-spacing"
+            },
+            {
+              "name": "line-height"
+            },
+            {
+              "name": "text-transform"
+            },
+            {
+              "name": "text-decoration"
+            },
+            {
+              "name": "text-align"
+            },
+            {
+              "name": "padding"
+            },
+            {
+              "name": "margin"
+            },
+            {
+              "name": "gap"
+            },
+            {
+              "name": "width"
+            },
+            {
+              "name": "height"
+            },
+            {
+              "name": "box-sizing"
+            },
+            {
+              "name": "display"
+            },
+            {
+              "name": "flex"
+            },
+            {
+              "name": "flex-direction"
+            },
+            {
+              "name": "flex-wrap"
+            },
+            {
+              "name": "justify-content"
+            },
+            {
+              "name": "align-items"
+            },
+            {
+              "name": "align-content"
+            },
+            {
+              "name": "align-self"
+            },
+            {
+              "name": "grid-template-columns"
+            },
+            {
+              "name": "grid-template-rows"
+            },
+            {
+              "name": "grid-column"
+            },
+            {
+              "name": "grid-row"
+            },
+            {
+              "name": "place-items"
+            },
+            {
+              "name": "place-content"
+            },
+            {
+              "name": "vertical-align"
+            },
+            {
+              "name": "background"
+            },
+            {
+              "name": "border"
+            },
+            {
+              "name": "border-radius"
+            },
+            {
+              "name": "box-shadow"
+            },
+            {
+              "name": "opacity"
+            },
+            {
+              "name": "transition"
+            },
+            {
+              "name": "outline"
+            }
+          ]
         }
       ],
       "exports": [
         {
           "kind": "custom-element-definition",
-          "name": "mui-image",
+          "name": "mui-link",
           "declaration": {
-            "name": "MuiImage",
-            "module": "src/components/mui-image/index.ts"
+            "name": "MuiLink",
+            "module": "src/components/mui-link/index.ts"
           }
         }
       ]
@@ -5271,300 +5548,57 @@
               "description": "Input and slotted affordance size scale."
             },
             {
-              "name": "slot-layout",
-              "type": {
-                "text": "\"inline\" | \"stack-mobile\""
-              },
-              "default": "inline",
-              "description": "Arranges external before and after slots inline or stacked around the input."
-            }
-          ],
-          "superclass": {
-            "name": "HTMLElement"
-          },
-          "tagName": "mui-input",
-          "customElement": true,
-          "slots": [
-            {
-              "name": "before",
-              "description": "Flush leading control, such as `mui-addon`, `mui-select`, `mui-button` or `mui-chip`."
-            },
-            {
-              "name": "after",
-              "description": "Flush trailing control, such as `mui-addon`, `mui-select`, `mui-button` or `mui-chip`."
-            },
-            {
-              "name": "inside-before",
-              "description": "Leading content displayed inside the input edge, such as an icon or badge."
-            },
-            {
-              "name": "inside-after",
-              "description": "Trailing content displayed inside the input edge, such as an icon or badge."
-            },
-            {
-              "name": "hint",
-              "description": "Contextual hint content displayed inside the trailing input affordance area."
-            }
-          ],
-          "cssProperties": [
-            {
-              "name": "--input-before-slot-max-width",
-              "description": "Maximum width for leading external slot content."
-            },
-            {
-              "name": "--input-after-slot-max-width",
-              "description": "Maximum width for trailing external slot content."
-            },
-            {
-              "name": "--input-slot-wrap",
-              "description": "Wrapping behaviour for external slot content."
-            },
-            {
-              "name": "--input-slot-overflow-x",
-              "description": "Horizontal overflow behaviour for external slot content."
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "custom-element-definition",
-          "name": "mui-input",
-          "declaration": {
-            "name": "MuiInput",
-            "module": "src/components/mui-input/index.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/mui-link/doc.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "muiDocs",
-          "type": {
-            "text": "MuiDocs"
-          },
-          "default": "{ Link: { title: \"Link\", description: \"Links are used to navigate between pages or external content. They are visually distinct from surrounding text by using underlines — a familiar and accessible pattern that ensures clarity and consistency.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/7bK1593sNzW75ZoqBupCRj/0420d8ef12472208403efa48d2fe98d6/Link_-_Home_Image.png\", ], figma: [\"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=3-663&t=fSFYVey9aCoE5oQa-1\"], storybook: [\"https://stories.muibook.com/?path=/docs/actions-link--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-link/index.ts\"], website: [\"https://muibook.com/#/link\"], guides: [\"https://guides.muibook.com/link\"], usage: { list: [ \"Use links to navigate to related content or different pages.\", \"Use for navigation only — use buttons for actions like submitting forms or changing data.\", \"Keep link text concise and descriptive. Avoid vague labels like 'Click here.'\", \"Use full sentences or phrases that clearly describe the destination.\", \"Prefer inline links within body text unless a more prominent callout is needed.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"], }, anatomy: { image: \"https://images.ctfassets.net/i5uwscj4pkk2/6Rbr0KRWAiNRuPsagpreV7/2adc3626aa45ddc95ddf7d0a508c7917/Link_-_Anatomy.png\", list: [ \"LABEL: Text describing the link / link button action. Use action verbs or phrases to tell the user what will happen next, and follow the link label content guidelines.\", \"BEFORE: An optional area to include an icon before the label. Use an icon to add additional affordance where the icon has a clear and well-established meaning. Most links don't require an icon, so be consistent and deliberate when you do.\", \"AFTER: An optional area to include an icon after the label, often used for a chevron-down-arrow icon to indicate a dropdown menu or accordion experiences where the placement is on the far right of the link.\", \"ICON ONLY: Use when the action is easily understood and space is limited.\", ], }, variants: { items: [ { key: \"size-large\", title: \"Size: Large\", description: \"Used when a link needs to stand out in layouts, such as hero sections or alongside large headings. If used inline, it should match the surrounding text size to maintain visual hierarchy and scale consistency. E.g. Use small size icon when it is paired with large sized link.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/Tbxhps7s88CFzROYc0Lqs/3440df9aefca7cb9de3ce5015a3a4e82/Default_-_Large.png\", }, { key: \"size-medium\", title: \"Size: Medium (Default)\", description: \"The standard size for most link usage. Works well inline with body text or as standalone links within common page layouts. When used inline, it aligns with default body text for consistent reading flow. E.g. Use x-small size icon when it is paired with medium sized link.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3NbinCPLEbtetN63xh18Sy/e0a0e9bbcd11a71faefc6ad1fc0e064d/Default_-_Medium.png\", }, { key: \"size-small\", title: \"Size: Small\", description: \"Ideal for dense interfaces or compact areas such as cards, side panels, or footnotes. When used inline, it should match the smaller text size to preserve a balanced visual rhythm. E.g. Use x-small size icon when it is paired with small sized link.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/4uaoT2KHM6ux4X30BxwGYo/91137cc74414f2f32b869fae59f9625d/Default_-_Small.png\", }, { key: \"size-x-small\", title: \"Size: XSmall\", description: \"Used sparingly in tight spaces like toolbars, metadata, or inline legal text. Should align with surrounding text to avoid disrupting scale and hierarchy. E.g. Use x-small size icon when it is paired with x-small sized link.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/27dAzNJ6Q5XHVKv5ROXq36/ace1f6540b5f363624730be001bf91ce/Default_-_XSmall.png\", }, { key: \"primary\", title: \"Primary\", description: \"A high emphasis link style used for key navigation or calls to action. Visually aligned with the primary button to ensure consistency across components. When an icon is slotted into a link, it automatically inherits the link button’s default icon size. If you need a different look or emphasis, you can override the size as required.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/7wDlLjYvZEOgP8bQ6mfOuY/51b39a09c73f93ee9291e1e053df308a/Primary.png\", }, { key: \"primary-icon-only\", title: \"Primary - IconOnly\", description: \"An icon only version of the primary link. Best used when the icon meaning is immediately clear, such as external links, arrows, or downloads. Uses a small size icon when pairing with other buttons, or medium size icon for standalone actions.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/5sEr4Bhu2mwobKt6yPO9T7/a248fc0fe630ddd7f837c256a9aac126/Primary_-_IconOnly.png\", }, { key: \"secondary\", title: \"Secondary\", description: \"An icon only version of the primary link. Best used when the icon meaning is immediately clear, such as external links, arrows, or downloads. Uses a small size icon when pairing with other buttons, or medium size icon for standalone actions.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/1y7LN0FWjqrAQim9y289YN/2a65b13be6f42399404fb5bb68014700/Secondary.png\", }, { key: \"secondary-icon-only\", title: \"Secondary - IconOnly\", description: \"An icon only version of the secondary link. Ideal for contextual actions placed beside content or inside user interface components. Uses a small size icon when pairing with other buttons, or medium size icon for standalone actions.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/nWMRYy5KcAqFxnrRdBXJS/d02dc2a67ae81bca02b82645c998fb9b/Secondary_-_IconOnly.png\", }, { key: \"tertiary\", title: \"Tertiary\", description: \"A subtle and low emphasis style often used inline with body text or in subdued areas of the interface. Mirrors the styling of the tertiary button for visual harmony in dense content. When an icon is slotted into a link, it automatically inherits the link button’s default icon size. If you need a different look or emphasis, you can override the size as required.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/ydUs1pJsUgg7JBX7xpIOW/8e8cd367963506e35f39a97a8f41d616/Tertiary.png\", }, { key: \"tertiary-icon-only\", title: \"Tertiary - IconOnly\", description: \"A minimal visual style with just an icon. Best for lightweight or background interactions in compact spaces. Uses a small size icon when pairing with other buttons, or medium size icon for standalone actions.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/79wxg2B2u21x1qAKTsFOIM/d8c1665de85c90983bbe50d3762f2298/Tertiary_-_IconOnly.png\", }, { key: \"overlay\", title: \"Overlay\", description: \"Use on layered media or tinted surfaces where link actions need contrast without heavy visual weight. Works well for controls rendered over previews and imagery.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/1y7LN0FWjqrAQim9y289YN/2a65b13be6f42399404fb5bb68014700/Secondary.png\", }, { key: \"attention\", title: \"Attention\", description: \"A visually distinct style intended to highlight urgency, important information, or warnings. Styled to match the attention button, typically used in upgrade prompts or legal notices. When an icon is slotted into a link, it automatically inherits the link button’s default icon size. If you need a different look or emphasis, you can override the size as required.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/6grNjw60gY1ShYuexn23oX/b1cd5e10f9a1f5b8e5e3df4bf4780a0a/Attention.png\", }, { key: \"attention-icon-only\", title: \"Attention - IconOnly\", description: \"An icon only variant that draws attention to critical actions or time sensitive content. Uses a small size icon.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/5osepffgbQtuUmunLgCDPH/83490dc2ac0ef308a53e16e5b992efc5/Attention_-_IconOnly.png\", }, ], }, compositions: { description: \"\", items: [ { key: \"\", name: \"\", description: \"\", image: \"\", }, ], }, related: { items: [ { name: \"Button\", link: \"https://guides.muibook.com/button\", }, { name: \"Icons\", link: \"https://guides.muibook.com/icons\", }, ], }, rules: [ { heading: \"Link vs Button\", description: \"Links and Buttons may look similar, but links are for navigating between pages or sections of your app or site, while buttons are for triggering actions.\", doContent: [ { description: \"Use a link when navigating to another page or view.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/7xOE9DNKWgy1lZoT0FbMOW/cc13fbeeaa85b2507087645d925d7323/button-vs-link-do.png\", }, ], dontContent: [ { description: \"Don’t use a link to trigger tasks like submitting a form or saving data.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/6tSAw6uBvg142Gzw7tenBc/4b8db682687b42f3c53fc32557cc4eee/button-vs-link-do-not.png\", }, ], }, { heading: \"Text & Icon Actions\", description: \"\", doContent: [ { description: \"Use the 'small' size icon within a medium sized action\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2W1xs6NPj3jRrW6ZaVGRvZ/3a11566b68fffda85bf5f780c4d6a394/dropdown-bar-icon-do.png\", }, ], dontContent: [ { description: \"Avoid 'x-small', 'medium' or 'large' size icons within a medium sized action\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/6BgHzCgKqk44piisNH4tE6/c08d91a1cf5231a089844d20f6ab968c/dropdown-bar-icon-dont.png\", }, ], }, { heading: \"Icon-Only Actions\", description: \"\", doContent: [ { description: \"Use a 'medium' size icon when using an icon-only medium sized action\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3syzrNBEXbBjp5hGEUvF4M/0471f4b16939d8ee54deaf48997ff455/action-icon-do.png\", }, ], dontContent: [ { description: \"Avoid 'x-small', 'medium' or 'large' size icons within an icon-only medium sized action\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/5V2TE85dY848jz1dP6Y0lC/b8e433c8abad5a4402ff1f86ddb8c848/action-icon-dont.png\", }, ], }, ], behaviour: { list: [\"\"], image: \"https://images.ctfassets.net/i5uwscj4pkk2/qS1BAkfK7TDpy9rq4cdF1/d2535f48b4d2711f9dba6d056f21e3ec/Link_-_Behaviour.png\", }, writing: { list: [\"\"], }, }, }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "muiDocs",
-          "declaration": {
-            "name": "muiDocs",
-            "module": "src/components/mui-link/doc.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/mui-link/index.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Provides anchor navigation as an inline link or action-styled link with optional supporting content.",
-          "name": "MuiLink",
-          "attributes": [
-            {
-              "name": "target",
-              "type": {
-                "text": "string"
-              },
-              "default": "_self",
-              "description": "Anchor browsing context, such as `_self` or `_blank`."
-            },
-            {
-              "name": "href",
-              "type": {
-                "text": "string"
-              },
-              "default": "#",
-              "description": "Navigation destination URL."
-            },
-            {
-              "name": "variant",
-              "type": {
-                "text": "\"default\" | \"primary\" | \"secondary\" | \"tertiary\" | \"overlay\" | \"attention\""
-              },
-              "default": "default",
-              "description": "Uses standard inline-link styling or an action-style treatment."
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables navigation and exposes the anchor as aria-disabled."
-            },
-            {
-              "name": "weight",
-              "type": {
-                "text": "\"regular\" | \"medium\" | \"bold\""
-              },
-              "default": "regular",
-              "description": "Font weight of link content."
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "\"xx-small\" | \"x-small\" | \"small\" | \"medium\" | \"large\""
-              },
-              "default": "medium",
-              "description": "Link scale; also controls automatic icon, avatar, and badge sizing."
-            },
-            {
-              "name": "download",
-              "type": {
-                "text": "string | boolean"
-              },
-              "description": "Downloads the linked resource; provide a value to set a download filename."
-            },
-            {
-              "name": "usage",
-              "type": {
-                "text": "\"input\""
-              },
-              "description": "Uses field-compatible styling when the link is slotted before or after an input."
-            }
-          ],
-          "superclass": {
-            "name": "HTMLElement"
-          },
-          "tagName": "mui-link",
-          "customElement": true,
-          "slots": [
-            {
-              "name": "",
-              "description": "Link label or a single icon for an icon-only link action."
-            },
-            {
-              "name": "before",
-              "description": "Leading icon, avatar, badge, or other supporting content."
-            },
-            {
-              "name": "after",
-              "description": "Trailing icon, avatar, badge, or other supporting content."
-            }
-          ],
-          "events": [],
-          "cssProperties": [],
-          "cssParts": [
-            {
-              "name": "color"
-            },
-            {
-              "name": "font-family"
-            },
-            {
-              "name": "font-size"
-            },
-            {
-              "name": "font-weight"
-            },
-            {
-              "name": "letter-spacing"
-            },
-            {
-              "name": "line-height"
-            },
-            {
-              "name": "text-transform"
-            },
-            {
-              "name": "text-decoration"
-            },
-            {
-              "name": "text-align"
-            },
-            {
-              "name": "padding"
-            },
-            {
-              "name": "margin"
-            },
-            {
-              "name": "gap"
-            },
-            {
-              "name": "width"
-            },
-            {
-              "name": "height"
-            },
-            {
-              "name": "box-sizing"
-            },
-            {
-              "name": "display"
-            },
-            {
-              "name": "flex"
-            },
-            {
-              "name": "flex-direction"
-            },
-            {
-              "name": "flex-wrap"
-            },
-            {
-              "name": "justify-content"
-            },
-            {
-              "name": "align-items"
-            },
-            {
-              "name": "align-content"
-            },
-            {
-              "name": "align-self"
-            },
-            {
-              "name": "grid-template-columns"
-            },
-            {
-              "name": "grid-template-rows"
-            },
-            {
-              "name": "grid-column"
-            },
-            {
-              "name": "grid-row"
-            },
-            {
-              "name": "place-items"
-            },
-            {
-              "name": "place-content"
-            },
+              "name": "slot-layout",
+              "type": {
+                "text": "\"inline\" | \"stack-mobile\""
+              },
+              "default": "inline",
+              "description": "Arranges external before and after slots inline or stacked around the input."
+            }
+          ],
+          "superclass": {
+            "name": "HTMLElement"
+          },
+          "tagName": "mui-input",
+          "customElement": true,
+          "slots": [
             {
-              "name": "vertical-align"
+              "name": "before",
+              "description": "Flush leading control, such as `mui-addon`, `mui-select`, `mui-button` or `mui-chip`."
             },
             {
-              "name": "background"
+              "name": "after",
+              "description": "Flush trailing control, such as `mui-addon`, `mui-select`, `mui-button` or `mui-chip`."
             },
             {
-              "name": "border"
+              "name": "inside-before",
+              "description": "Leading content displayed inside the input edge, such as an icon or badge."
             },
             {
-              "name": "border-radius"
+              "name": "inside-after",
+              "description": "Trailing content displayed inside the input edge, such as an icon or badge."
             },
             {
-              "name": "box-shadow"
+              "name": "hint",
+              "description": "Contextual hint content displayed inside the trailing input affordance area."
+            }
+          ],
+          "cssProperties": [
+            {
+              "name": "--input-before-slot-max-width",
+              "description": "Maximum width for leading external slot content."
             },
             {
-              "name": "opacity"
+              "name": "--input-after-slot-max-width",
+              "description": "Maximum width for trailing external slot content."
             },
             {
-              "name": "transition"
+              "name": "--input-slot-wrap",
+              "description": "Wrapping behaviour for external slot content."
             },
             {
-              "name": "outline"
+              "name": "--input-slot-overflow-x",
+              "description": "Horizontal overflow behaviour for external slot content."
             }
           ]
         }
@@ -5572,10 +5606,10 @@
       "exports": [
         {
           "kind": "custom-element-definition",
-          "name": "mui-link",
+          "name": "mui-input",
           "declaration": {
-            "name": "MuiLink",
-            "module": "src/components/mui-link/index.ts"
+            "name": "MuiInput",
+            "module": "src/components/mui-input/index.ts"
           }
         }
       ]
@@ -5827,7 +5861,7 @@
           "type": {
             "text": "MuiDocs"
           },
-          "default": "{ Message: { title: \"Message\", description: \"The message component provides persistent, non-dismissible notifications that remain visible until the system determines they should be suspended. Unlike alerts, these messages are static elements integrated into the page layout, offering continuous information without disrupting the user’s workflow.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/01OU9JbOlDZGvbpkq2ismi/b0410cb8002858ded88987d9556daa04/Message_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=9-1053&t=ZA9uH4LK37tSuk6r-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/feedback-message--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-message/index.ts\"], website: [\"https://muibook.com/#/message\"], guides: [\"https://guides.muibook.com/message\"], usage: { list: [ \"Plain: A subtle, transparent style suited for vibrant backgrounds where minimal visual impact is preferred.\", \"Neutral: A calm, balanced tone for non-critical, persistent messages.\", \"Positive: To confirm successful actions like form submissions, saves, or completed tasks.\", \"Info: To share feature announcements, enhancements, or contextual onboarding tips.\", \"Warning: Caution users about potential issues such as unsaved changes or upcoming expirations.\", \"Attention: Highlight urgent issues like system errors or security breaches requiring immediate action.\", ], }, accessibility: { designerList: [ \"ARIA-live is built in, using POLITE + ASSERTIVE for screen readers.\", \"Neutral, Postive, Info support the role of STATUS for screen reader feedback.\", \"Warning, Attention support the role of ALERT for screen reader feedback.\", ], engineerList: [ \"ARIA-live is built in, using POLITE + ASSERTIVE for screen readers.\", \"Neutral, Postive, Info support the role of STATUS for screen reader feedback.\", \"Warning, Attention support the role of ALERT for screen reader feedback.\", ], }, anatomy: { image: \"https://images.ctfassets.net/i5uwscj4pkk2/6S1MOtZZKP2bxYuIUNScSC/993a910363fbfbba29a3de384ecb182a/Message_-_Anatomy.png\", list: [ \"Preset icon: Communicates the type of message visually. E.g. neutral, positive, info, warning, attention.\", \"Customisable title: Allows for a general heading that describes the message details or guidance relevant to the situation.\", \"Customisable text: Allows for specific details or guidance relevant to the situation.\", ], }, variants: { items: [ { key: \"plain\", title: \"Plain\", description: \"A subtle, transparent style designed for vibrant backgrounds where minimal visual impact is preferred. Best for passive messages like accessibility notes, system status, or routine updates. Use for non-critical information that doesn’t require immediate attention or action. This variant sets aria-live='polite' and role='status' for accessibility.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/21KWc3TZOJPqZ2BtZ3ngrY/3cbf4aa6df3a72f195eebaa8fe8ecfde/message-plain.png\", }, { key: \"neutral\", title: \"Neutral\", description: \"The Neutral state offers a calm, balanced tone for non-critical, persistent messages. It is suitable for displaying non-urgent information, such as background status like sync confirmation or feature explanations. This variant uses aria-live='polite' and role='status' for accessibility.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2VF8KPxaXCm6P4dlpsAnXs/5a2011d1a63a900dcdd6669ec5c097e9/message-neutral.png\", }, { key: \"positive\", title: \"Positive\", description: \"The Positive state conveys successful actions, confirmations, or achievements, helping foster a sense of accomplishment and satisfaction. It’s used to indicate things like successful form submissions, completed tasks, or acknowledged milestones. This variant uses aria-live='polite' and role='status' for accessibility.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2HOuPOpHOuMGuVUoPAs5MI/ff1e156bc8f31e580972289fcc7bf3d7/message-positive.png\", }, { key: \"info\", title: \"Info\", description: \"The Info state provides helpful messages that inform users about system status, feature updates, or changes—guiding them without urgency. It’s suitable for announcing new features, enhancements, or system changes, and works well for onboarding tips or contextual help. This variant uses aria-live='polite' and role='status' for accessibility.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/1x63W880Trpx0GYiYQJhCt/72c09a93d6ec34a18bc15310927fe9ef/message-info.png\", }, { key: \"warning\", title: \"Warning\", description: \"The Warning state alerts users to potential issues that may require attention, helping prevent errors or misunderstandings. It’s commonly used to notify users of unsaved changes, actions with potential consequences, or upcoming limitations or expirations. This variant uses aria-live='assertive' and role='alert' for accessibility.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/50V1Ap7vVxPUWRbbKh0kx5/2fe4c203befa779087c8b23984d951b7/message-warning.png\", }, { key: \"attention\", title: \"Attention\", description: \"The Attention state demands immediate user focus, highlighting critical issues that require prompt action. It’s used to alert users to urgent problems like system errors or security breaches, or for time-sensitive notifications that significantly impact the user experience. This variant uses aria-live='assertive' and role='alert' for accessibility.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/5GXIEuluNJBlg8h4hDCfWH/ddeec560354ab06af73bf5c5d8749c12/message-attention.png\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"plain-message\", name: \"Plain message\", description: \"This example uses the Plain variant, suitable for both white and colored backgrounds. It’s ideal for presenting information passively, without demanding user attention. In this case, it’s used to deliver accessibility notes.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3akJJDd28DOIhQrYq6g4y2/456c02f32dc9c40d84d92371b7ddbead/message-composition-neutral.png\", }, { key: \"info-message\", name: \"Info message\", description: \"Use a page-level Info message to remind users to log in to the provided tools, ensuring the MUI Guidelines are shown instead of the default guidelines.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/1ySFimf3eEleYLPKomWuem/34772aed4257db976f2ca8cb633d3d5b/message-composition-info.png\", }, ], }, related: { items: [ { name: \"Alert\", link: \"https://guides.muibook.com/alert\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
+          "default": "{ Message: { title: \"Message\", description: \"Message is a persistent page-level notification for durable status, guidance, or system context that needs more weight than inline body copy. It should include a clear heading and slotted supporting body content, and should not be used as a styled paragraph, field helper, or routine inline callout.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/01OU9JbOlDZGvbpkq2ismi/b0410cb8002858ded88987d9556daa04/Message_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=9-1053&t=ZA9uH4LK37tSuk6r-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/feedback-message--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-message/index.ts\"], website: [\"https://muibook.com/#/message\"], guides: [\"https://guides.muibook.com/message\"], usage: { list: [ \"Use Message for persistent page-level or section-level notices that apply to the surrounding workflow.\", \"Always provide a specific heading and place the supporting copy in the default slot using Body, List, Link, or other content components.\", \"Do not use Message as a styled text block, generic inline note, or mid-content emphasis treatment.\", \"For form guidance, validation, or field status, use Form Message inside Field with slot='message'.\", \"For lightweight inline context, use Body size='small' with an info icon in slot='before'.\", \"Reserve positive, warning, and attention variants for meaningful page-level status or severity; avoid using them for routine explanatory copy.\", ], }, accessibility: { designerList: [ \"ARIA-live is built in, using POLITE + ASSERTIVE for screen readers.\", \"Neutral, Postive, Info support the role of STATUS for screen reader feedback.\", \"Warning, Attention support the role of ALERT for screen reader feedback.\", ], engineerList: [ \"ARIA-live is built in, using POLITE + ASSERTIVE for screen readers.\", \"Neutral, Postive, Info support the role of STATUS for screen reader feedback.\", \"Warning, Attention support the role of ALERT for screen reader feedback.\", ], }, anatomy: { image: \"https://images.ctfassets.net/i5uwscj4pkk2/6S1MOtZZKP2bxYuIUNScSC/993a910363fbfbba29a3de384ecb182a/Message_-_Anatomy.png\", list: [ \"Preset icon: Communicates the type of message visually. E.g. neutral, positive, info, warning, attention.\", \"Heading: Summarises the page-level notice. Keep this short and do not place the full message body here.\", \"Default slot: Contains the supporting body content, such as Body, List, Link, or related message actions.\", ], }, variants: { items: [ { key: \"plain\", title: \"Plain\", description: \"A subtle, transparent style for passive page-level notices on vibrant backgrounds. Use sparingly for durable non-critical information, not inline helper copy. This variant sets aria-live='polite' and role='status' for accessibility.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/21KWc3TZOJPqZ2BtZ3ngrY/3cbf4aa6df3a72f195eebaa8fe8ecfde/message-plain.png\", }, { key: \"neutral\", title: \"Neutral\", description: \"The Neutral state offers a calm, balanced tone for non-critical persistent notices. Use it for page-level information such as background status or workflow guidance. This variant uses aria-live='polite' and role='status' for accessibility.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2VF8KPxaXCm6P4dlpsAnXs/5a2011d1a63a900dcdd6669ec5c097e9/message-neutral.png\", }, { key: \"positive\", title: \"Positive\", description: \"The Positive state conveys durable success or completion status at page level. Avoid using it for small inline confirmations where Body or Form Message would be lighter. This variant uses aria-live='polite' and role='status' for accessibility.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2HOuPOpHOuMGuVUoPAs5MI/ff1e156bc8f31e580972289fcc7bf3d7/message-positive.png\", }, { key: \"info\", title: \"Info\", description: \"The Info state supports page-level system information, feature changes, or workflow context. For inline notes, use Body with an info icon instead. This variant uses aria-live='polite' and role='status' for accessibility.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/1x63W880Trpx0GYiYQJhCt/72c09a93d6ec34a18bc15310927fe9ef/message-info.png\", }, { key: \"warning\", title: \"Warning\", description: \"The Warning state alerts users to page-level issues that may require attention, such as unsaved changes, consequences, limitations, or expirations. Use Form Message for field-specific warnings. This variant uses aria-live='assertive' and role='alert' for accessibility.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/50V1Ap7vVxPUWRbbKh0kx5/2fe4c203befa779087c8b23984d951b7/message-warning.png\", }, { key: \"attention\", title: \"Attention\", description: \"The Attention state demands immediate focus for critical page-level issues, such as system errors, security problems, or time-sensitive interruptions. Do not use it for ordinary content emphasis. This variant uses aria-live='assertive' and role='alert' for accessibility.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/5GXIEuluNJBlg8h4hDCfWH/ddeec560354ab06af73bf5c5d8749c12/message-attention.png\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"plain-message\", name: \"Plain message\", description: \"This example uses the Plain variant, suitable for both white and colored backgrounds. It’s ideal for presenting information passively, without demanding user attention. In this case, it’s used to deliver accessibility notes.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3akJJDd28DOIhQrYq6g4y2/456c02f32dc9c40d84d92371b7ddbead/message-composition-neutral.png\", }, { key: \"info-message\", name: \"Info message\", description: \"Use a page-level Info message to remind users to log in to the provided tools, ensuring the MUI Guidelines are shown instead of the default guidelines.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/1ySFimf3eEleYLPKomWuem/34772aed4257db976f2ca8cb633d3d5b/message-composition-info.png\", }, ], }, related: { items: [ { name: \"Alert\", link: \"https://guides.muibook.com/alert\", }, { name: \"Form Message\", link: \"https://guides.muibook.com/field\", }, { name: \"Body\", link: \"https://guides.muibook.com/body\", }, ], }, rules: [ { heading: \"Use as a page-level notification\", description: \"Message should feel like a heavier persistent notice, not a general-purpose text style.\", doContent: [ { description: \"Use a concise heading with slotted Body, List, or Link content for supporting detail.\", image: \"\", }, ], dontContent: [ { description: \"Do not use Message for inline guidance, form helper text, or routine status copy; use Form Message or Body instead.\", image: \"\", }, ], }, ], behaviour: { list: [ \"Message is persistent and integrated into the page layout.\", \"Neutral, Positive, and Info use role='status' with polite live-region behaviour.\", \"Warning and Attention use role='alert' with assertive live-region behaviour.\", ], }, writing: { list: [ \"Write the heading as the short status or notice title.\", \"Write the body as the supporting context, impact, or next action.\", \"Keep inline helper copy out of Message; use lighter text treatments for routine guidance.\", ], }, }, }"
         }
       ],
       "exports": [
@@ -5847,7 +5881,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Presents longer-form guidance or status content with an intent icon, heading, and supporting body content.",
+          "description": "Presents a persistent page-level notification with an intent icon, heading, and slotted supporting body content. Use Form Message for form guidance and Body with an info icon for lightweight inline notes.",
           "name": "MuiMessage",
           "attributes": [
             {
@@ -5856,7 +5890,7 @@
                 "text": "\"neutral\" | \"positive\" | \"info\" | \"warning\" | \"attention\""
               },
               "default": "neutral",
-              "description": "Sets the message intent style and default icon."
+              "description": "Sets the page-level intent style and default icon. Reserve positive, warning, and attention for meaningful status or severity, not routine inline emphasis."
             },
             {
               "name": "heading",
@@ -5864,7 +5898,7 @@
                 "text": "string"
               },
               "default": "Heading...",
-              "description": "Sets the message heading text."
+              "description": "Sets the concise message title. Do not put full body copy here; supporting content belongs in the default slot."
             },
             {
               "name": "icon",
@@ -5890,7 +5924,7 @@
           "slots": [
             {
               "name": "",
-              "description": "Supports body copy, lists, links, and related message content."
+              "description": "Required supporting content below the heading. Use `mui-body`, `mui-list`, `mui-link`, or related content; avoid leaving the slot empty."
             }
           ],
           "events": [],
@@ -7426,7 +7460,7 @@
           "type": {
             "text": "MuiDocs"
           },
-          "default": "{ Rule: { title: \"Rule\", description: \"A styling rule that visually separates or divides page elements.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/1MLQoDYuXhKOBDZQRZtBH7/6cd51d6b04fb62f1e04b0383c38d4cce/Rule_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=1059-12617&t=BwezUSymTClm00wJ-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/layout-rule--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-rule/index.ts\"], website: [\"https://muibook.com/#/rule\"], guides: [\"https://guides.muibook.com/rule\"], usage: { list: [ \"Use horizontal rules to separate sections or create visual breaks in flows.\", \"Use vertical rules to divide elements within a row or dense layout.\", \"Align with spacing and layout conventions to maintain visual rhythm.\", \"Avoid using as decoration—rules should support clarity and structure.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"], }, anatomy: { image: \"\", list: [\"\"], }, variants: { items: [ { key: \"\", title: \"\", description: \"\", image: \"\", }, ], }, compositions: { description: \"\", items: [ { key: \"\", name: \"\", description: \"\", image: \"\", }, ], }, related: { items: [ { name: \"\", link: \"\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
+          "default": "{ Rule: { title: \"Rule\", description: \"A styling rule that visually separates or divides page elements.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/1MLQoDYuXhKOBDZQRZtBH7/6cd51d6b04fb62f1e04b0383c38d4cce/Rule_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=1059-12617&t=BwezUSymTClm00wJ-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/layout-rule--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-rule/index.ts\"], website: [\"https://muibook.com/#/rule\"], guides: [\"https://guides.muibook.com/rule\"], usage: { list: [ \"Use horizontal rules to separate sections or create visual breaks in flows.\", \"Use vertical rules to divide elements within a row or dense layout.\", \"Use weight='thin' or weight='thick' for common divider thicknesses.\", \"Use custom CSS values for weight when a composition needs a specific thickness.\", \"Align with spacing and layout conventions to maintain visual rhythm.\", \"Avoid using as decoration—rules should support clarity and structure.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"], }, anatomy: { image: \"\", list: [\"\"], }, variants: { items: [ { key: \"\", title: \"\", description: \"\", image: \"\", }, ], }, compositions: { description: \"\", items: [ { key: \"\", name: \"\", description: \"\", image: \"\", }, ], }, related: { items: [ { name: \"\", link: \"\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
         }
       ],
       "exports": [
@@ -7460,10 +7494,10 @@
             {
               "name": "weight",
               "type": {
-                "text": "string"
+                "text": "\"thin\" | \"thick\" | string"
               },
-              "default": "1px",
-              "description": "Sets divider thickness using any valid CSS size value."
+              "default": "thin",
+              "description": "Sets divider thickness. Use `thin`, `thick`, or any valid CSS size value."
             },
             {
               "name": "direction",
@@ -7943,7 +7977,7 @@
           "type": {
             "text": "MuiDocs"
           },
-          "default": "{ Slat: { title: \"Slat\", description: \"Used to display structured data in a stacked format, typically on smaller viewports or within narrow-width layouts. Slats offer flexibility to surface key content and support custom layouts, stacking, or expansion of additional details.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/2SHOSwTkf7V7Ql4OaobtMg/2cacf5103d02e00f67748578213f4433/Slat_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=957-8535&t=0ytskb8cxriEmdz2-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/content-slat--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-slat/index.ts\"], website: [\"https://muibook.com/#/slat\"], guides: [\"https://guides.muibook.com/slat\"], usage: { list: [ \"Suitable for displaying data in narrow-width containers, such as side panels\", \"Use as a responsive alternative to tables on mobile or narrow viewports\", \"Ideal for presenting structured data in a compact, scannable format\", \"Supports stacking labels and values for easier readability\", \"Can include expandable sections to reveal more content on demand\", \"Use with SlatGroup when rows need to be presented as a related set, such as wallet activity, settings lists, grouped account records, or transaction histories.\", ], }, accessibility: { designerList: [\"mui-slat uses role='row'\", \"slotted children inherit role='cell'\"], engineerList: [\"mui-slat uses role='row'\", \"slotted children inherit role='cell'\"], }, anatomy: { image: \"https://images.ctfassets.net/i5uwscj4pkk2/0OzwVoT0EyK1sR1ufn3Vw/3cbee51beec1240ebeaaad485bff5970/Slat_-_Anatomy.png\", list: [ \"Header (Start): Slot for the header of slat items.\", \"Header (End): Optional area for secondary information.\", \"Row (Start): Primary content slot in a slat layout.\", \"Row (End): Secondary content slot in a slat layout.\", \"Accessory: Use for an icon or other suitable elements within the limited space available.\", \"Action: Enables the slat to become a clickable action.\", ], }, variants: { items: [ { key: \"default\", title: \"Default\", description: \"Use for structured row content where information is primarily read rather than clicked.\", image: \"\", }, { key: \"header\", title: \"Header\", description: \"Use for section headers or grouped row labels where the slat introduces the items that follow.\", image: \"\", }, { key: \"action\", title: \"Action\", description: \"Use when the whole slat acts as the trigger, such as opening details, drilling into settings, or selecting a transaction.\", image: \"\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"smart-card\", name: \"Smart Card\", description: \"The Smart Card composition uses slats to present structured information in a compact format. Slats help organise details such as titles, descriptions, and supporting actions, making the card easy to scan and interact with.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/74knMtil1vp9nHPPWXM1kr/54f8d978b0a82bca2c126e8ab800826f/SmartCard_-_Card_Composition.png\", }, { key: \"account-activity\", name: \"Account Activity\", description: \"In Account Activity, slats are used to display a list of recent actions. Each slat provides a clear breakdown of primary details with optional secondary information, ensuring activity is both easy to read and consistent across the interface.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/5GVrfo3fcsVnX7yduux6kE/978c2c6635bf19ee7e67ccd26744ad33/Slat_-_Account_Composition.png\", }, ], }, related: { items: [ { name: \"Slat Group\", link: \"https://guides.muibook.com/slat\", }, { name: \"Icons\", link: \"https://guides.muibook.com/icons\", }, ], }, rules: [ { heading: \"Choose the right slat variant\", description: \"Use the slat variant that matches the row’s job so grouped lists stay clear and predictable.\", doContent: [ { description: \"Use a header slat to introduce a grouped set, a default slat for readable content, and an action slat when the whole row should be interactive.\", image: \"\", }, ], dontContent: [ { description: \"Avoid making every slat interactive if the rows are only there to present information.\", image: \"\", }, ], }, ], behaviour: { list: [ \"Use the default variant when the slat is primarily informational, and use the action variant when the entire row should be interactive.\", \"Header slats work well as structural labels before a grouped run of related slats.\", ], }, writing: { list: [ \"Keep primary row content concise and scannable so labels, values, and actions remain easy to parse at a glance.\", ], }, }, SlatGroup: { title: \"Slat Group\", description: \"Slat Group arranges multiple slats into a related set so they can be presented as one grouped list or feed.\", hero: [\"\"], figma: [\"\"], storybook: [\"https://stories.muibook.com/?path=/docs/content-slat--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-slat/index.ts\"], website: [\"https://muibook.com/#/slat\"], guides: [\"https://guides.muibook.com/slat\"], usage: { list: [ \"Use to group related slats into one compact list or section.\", \"Works well for wallet and account activity feeds where a header slat is followed by action or detail slats.\", \"A strong pattern is a header slat followed by grouped item slats for balances, recent activity, account options, or grouped settings.\", \"Use inside Card when grouped rows need a shared container or section framing.\", \"Pair with Rule between header and item sets when additional separation is needed.\", \"Use Slat for the individual row content and SlatGroup for the grouped structure.\", ], }, accessibility: { designerList: [\"Maintain a consistent row order so grouped content is easy to scan.\"], engineerList: [\"Use SlatGroup as structural grouping; individual mui-slat rows continue to own their row/cell semantics.\"], }, anatomy: { image: \"\", list: [\"Grouped slat container\", \"Optional header slat\", \"Related slat items\"], }, variants: { items: [ { key: \"default\", title: \"Default\", description: \"A grouped collection of related slats.\", image: \"\", }, ], }, compositions: { description: \"Showcases grouped slat patterns in real-world structures.\", items: [ { key: \"wallet-activity\", name: \"Wallet Activity\", description: \"A header slat followed by grouped activity rows, useful for transactions, balances, and recent account events.\", image: \"\", }, ], }, related: { items: [ { name: \"Slat\", link: \"https://guides.muibook.com/slat\", }, { name: \"Rule\", link: \"https://guides.muibook.com/rule\", }, { name: \"Card\", link: \"https://guides.muibook.com/card\", }, ], }, rules: [ { heading: \"Group meaningfully\", description: \"Use SlatGroup when multiple slats belong to the same topic, task, or account context and should be read together.\", doContent: [ { description: \"Group related rows such as a wallet summary, account activity, or a list of linked settings under one clear header or section label.\", image: \"\", }, ], dontContent: [ { description: \"Avoid using SlatGroup as a generic spacing wrapper when the rows do not share a clear relationship.\", image: \"\", }, ], }, ], behaviour: { list: [ \"SlatGroup provides structure for a related set while each slat continues to handle its own content and interaction behaviour.\", ], }, writing: { list: [ \"Use concise section labels so grouped rows are easy to scan and the relationship between items is obvious.\", ], }, }, }"
+          "default": "{ Slat: { title: \"Slat\", description: \"Used to display structured data in a stacked format, typically on smaller viewports or within narrow-width layouts. Slats offer flexibility to surface key content and support custom layouts, stacking, or expansion of additional details.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/2SHOSwTkf7V7Ql4OaobtMg/2cacf5103d02e00f67748578213f4433/Slat_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=957-8535&t=0ytskb8cxriEmdz2-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/content-slat--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-slat/index.ts\"], website: [\"https://muibook.com/#/slat\"], guides: [\"https://guides.muibook.com/slat\"], usage: { list: [ \"Suitable for displaying data in narrow-width containers, such as side panels\", \"Use as a responsive alternative to tables on mobile or narrow viewports\", \"Ideal for presenting structured data in a compact, scannable format\", \"Supports stacking labels and values for easier readability\", \"Can include expandable sections to reveal more content on demand\", \"Use col and space to tune slat columns and spacing, including action slats.\", \"Use with SlatGroup when rows need to be presented as a related set, such as wallet activity, settings lists, grouped account records, or transaction histories.\", ], }, accessibility: { designerList: [\"mui-slat uses role='row'\", \"slotted children inherit role='cell'\"], engineerList: [\"mui-slat uses role='row'\", \"slotted children inherit role='cell'\"], }, anatomy: { image: \"https://images.ctfassets.net/i5uwscj4pkk2/0OzwVoT0EyK1sR1ufn3Vw/3cbee51beec1240ebeaaad485bff5970/Slat_-_Anatomy.png\", list: [ \"Header (Start): Slot for the header of slat items.\", \"Header (End): Optional area for secondary information.\", \"Row (Start): Primary content slot in a slat layout.\", \"Row (End): Secondary content slot in a slat layout.\", \"Accessory: Use for an icon or other suitable elements within the limited space available.\", \"Action: Enables the slat to become a clickable action.\", ], }, variants: { items: [ { key: \"default\", title: \"Default\", description: \"Use for structured row content where information is primarily read rather than clicked.\", image: \"\", }, { key: \"header\", title: \"Header\", description: \"Use for section headers or grouped row labels where the slat introduces the items that follow.\", image: \"\", }, { key: \"action\", title: \"Action\", description: \"Use when the whole slat acts as the trigger, such as opening details, drilling into settings, or selecting a transaction.\", image: \"\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"smart-card\", name: \"Smart Card\", description: \"The Smart Card composition uses slats to present structured information in a compact format. Slats help organise details such as titles, descriptions, and supporting actions, making the card easy to scan and interact with.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/74knMtil1vp9nHPPWXM1kr/54f8d978b0a82bca2c126e8ab800826f/SmartCard_-_Card_Composition.png\", }, { key: \"account-activity\", name: \"Account Activity\", description: \"In Account Activity, slats are used to display a list of recent actions. Each slat provides a clear breakdown of primary details with optional secondary information, ensuring activity is both easy to read and consistent across the interface.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/5GVrfo3fcsVnX7yduux6kE/978c2c6635bf19ee7e67ccd26744ad33/Slat_-_Account_Composition.png\", }, ], }, related: { items: [ { name: \"Slat Group\", link: \"https://guides.muibook.com/slat\", }, { name: \"Icons\", link: \"https://guides.muibook.com/icons\", }, ], }, rules: [ { heading: \"Choose the right slat variant\", description: \"Use the slat variant that matches the row’s job so grouped lists stay clear and predictable.\", doContent: [ { description: \"Use a header slat to introduce a grouped set, a default slat for readable content, and an action slat when the whole row should be interactive.\", image: \"\", }, ], dontContent: [ { description: \"Avoid making every slat interactive if the rows are only there to present information.\", image: \"\", }, ], }, ], behaviour: { list: [ \"Use the default variant when the slat is primarily informational, and use the action variant when the entire row should be interactive.\", \"Header slats work well as structural labels before a grouped run of related slats.\", ], }, writing: { list: [ \"Keep primary row content concise and scannable so labels, values, and actions remain easy to parse at a glance.\", ], }, }, SlatGroup: { title: \"Slat Group\", description: \"Slat Group arranges multiple slats into a related set so they can be presented as one grouped list or feed.\", hero: [\"\"], figma: [\"\"], storybook: [\"https://stories.muibook.com/?path=/docs/content-slat--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-slat/index.ts\"], website: [\"https://muibook.com/#/slat\"], guides: [\"https://guides.muibook.com/slat\"], usage: { list: [ \"Use to group related slats into one compact list or section.\", \"Works well for wallet and account activity feeds where a header slat is followed by action or detail slats.\", \"A strong pattern is a header slat followed by grouped item slats for balances, recent activity, account options, or grouped settings.\", \"Use inside Card when grouped rows need a shared container or section framing.\", \"Pair with Rule between header and item sets when additional separation is needed.\", \"Use Slat for the individual row content and SlatGroup for the grouped structure.\", ], }, accessibility: { designerList: [\"Maintain a consistent row order so grouped content is easy to scan.\"], engineerList: [\"Use SlatGroup as structural grouping; individual mui-slat rows continue to own their row/cell semantics.\"], }, anatomy: { image: \"\", list: [\"Grouped slat container\", \"Optional header slat\", \"Related slat items\"], }, variants: { items: [ { key: \"default\", title: \"Default\", description: \"A grouped collection of related slats.\", image: \"\", }, ], }, compositions: { description: \"Showcases grouped slat patterns in real-world structures.\", items: [ { key: \"wallet-activity\", name: \"Wallet Activity\", description: \"A header slat followed by grouped activity rows, useful for transactions, balances, and recent account events.\", image: \"\", }, ], }, related: { items: [ { name: \"Slat\", link: \"https://guides.muibook.com/slat\", }, { name: \"Rule\", link: \"https://guides.muibook.com/rule\", }, { name: \"Card\", link: \"https://guides.muibook.com/card\", }, ], }, rules: [ { heading: \"Group meaningfully\", description: \"Use SlatGroup when multiple slats belong to the same topic, task, or account context and should be read together.\", doContent: [ { description: \"Group related rows such as a wallet summary, account activity, or a list of linked settings under one clear header or section label.\", image: \"\", }, ], dontContent: [ { description: \"Avoid using SlatGroup as a generic spacing wrapper when the rows do not share a clear relationship.\", image: \"\", }, ], }, ], behaviour: { list: [ \"SlatGroup provides structure for a related set while each slat continues to handle its own content and interaction behaviour.\", ], }, writing: { list: [ \"Use concise section labels so grouped rows are easy to scan and the relationship between items is obvious.\", ], }, }, }"
         }
       ],
       "exports": [
@@ -8423,7 +8457,7 @@
           "type": {
             "text": "MuiDocs"
           },
-          "default": "{ Stack: { title: \"Stack\", description: \"A layout helper component that arranges its children in a horizontal or vertical flow with consistent spacing.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/37Cyk0jaIIKA8EBj2bp1ep/95d5adc24bccb051c355865d9e14bfa3/Stack_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=1059-12708&t=BwezUSymTClm00wJ-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/layout-stack--docs\"], github: [\"https://github.com/michaeltrilford/muibook/tree/main/src/components/mui-stack\"], website: [\"https://muibook.com/#/stack\"], guides: [\"https://guides.muibook.com/stack\"], usage: { list: [ \"Use to organise content or components in a single, consistent direction.\", \"Ideal for managing spacing without manual margin or padding adjustments.\", \"Supports responsive layouts by changing direction or spacing at breakpoints.\", \"Recognise it as a developer layout tool rather than a design asset.\", \"Use the space design token to maintain consistent gap spacing.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"], }, anatomy: { image: \"\", list: [\"\"], }, variants: { description: \"While not a Figma component (designers should use auto-layout), it’s useful for designers to understand this pattern as engineers commonly use it to control layout and spacing.\", items: [ { key: \"horizontal\", title: \"Horizontal\", description: \"A layout component that arranges its children in a horizontal flow\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/5tHpmQRhIWn0ACqjb1jNBu/d99ca0d9ada0af45cd0f1c2aaa7c995d/stack-horizontal.png\", }, { key: \"vertical\", title: \"Vertical\", description: \"A layout component that arranges its children in a vertical flow\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/1w2YeWwXerMc2YGqfGm6KJ/898f3ef195e01f775ae880e0968dbaa6/stack-vertical.png\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"outcomes-roadmap-dashboard\", name: \"Outcomes Roadmap Dashboard\", description: \"Example of the responsive component in the Outcomes Roadmap Dashboard, demonstrating layout, title, and padding adjustments across breakpoints.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3FsXandRr1Z9BAKv33twxT/b0d0e4a8b6237bf7d38660111bceb8ab/responsive-composition.gif\", }, { key: \"outcomes-roadmap-roadmap\", name: \"Outcome-Based Roadmap\", description: \"Example of an Outcome-Based Roadmap page showing objectives organised into Upcoming, Doing, and Finished columns. Progress bars indicate the completion status of each task, providing a clear view of overall progress.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3w5htPtfEz7QMCH9alVcwf/de35725fb4542b891bd695b900195291/Outcomes-Progress-Composition.png\", }, { key: \"smart-card\", name: \"Smart Card\", description: \"The Smart Card composition uses slats to present structured information in a compact format. Slats help organise details such as titles, descriptions, and supporting actions, making the card easy to scan and interact with.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/74knMtil1vp9nHPPWXM1kr/54f8d978b0a82bca2c126e8ab800826f/SmartCard_-_Card_Composition.png\", }, ], }, related: { items: [ { name: \"Grid\", link: \"https://guides.muibook.com/grid\", }, { name: \"Responsive\", link: \"https://guides.muibook.com/responsive\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
+          "default": "{ Stack: { title: \"Stack\", description: \"A layout helper component that arranges its children in a horizontal or vertical flow with consistent spacing.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/37Cyk0jaIIKA8EBj2bp1ep/95d5adc24bccb051c355865d9e14bfa3/Stack_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=1059-12708&t=BwezUSymTClm00wJ-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/layout-stack--docs\"], github: [\"https://github.com/michaeltrilford/muibook/tree/main/src/components/mui-stack\"], website: [\"https://muibook.com/#/stack\"], guides: [\"https://guides.muibook.com/stack\"], usage: { list: [ \"Use to organise content or components in a single, consistent direction.\", \"Ideal for managing spacing without manual margin or padding adjustments.\", \"Supports responsive layouts by changing direction or spacing at breakpoints.\", \"Recognise it as a developer layout tool rather than a design asset.\", \"Use the space design token to maintain consistent gap spacing.\", \"Use viewport on a top-level stack that owns the viewport-height region.\", \"Use fill only when the parent provides a clearly bounded width and height.\", \"For nested layouts that share height with headers, drawers, or sibling regions, define the page layout explicitly rather than relying on viewport or fill.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"], }, anatomy: { image: \"\", list: [\"\"], }, variants: { description: \"While not a Figma component (designers should use auto-layout), it’s useful for designers to understand this pattern as engineers commonly use it to control layout and spacing.\", items: [ { key: \"horizontal\", title: \"Horizontal\", description: \"A layout component that arranges its children in a horizontal flow\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/5tHpmQRhIWn0ACqjb1jNBu/d99ca0d9ada0af45cd0f1c2aaa7c995d/stack-horizontal.png\", }, { key: \"vertical\", title: \"Vertical\", description: \"A layout component that arranges its children in a vertical flow\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/1w2YeWwXerMc2YGqfGm6KJ/898f3ef195e01f775ae880e0968dbaa6/stack-vertical.png\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"outcomes-roadmap-dashboard\", name: \"Outcomes Roadmap Dashboard\", description: \"Example of the responsive component in the Outcomes Roadmap Dashboard, demonstrating layout, title, and padding adjustments across breakpoints.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3FsXandRr1Z9BAKv33twxT/b0d0e4a8b6237bf7d38660111bceb8ab/responsive-composition.gif\", }, { key: \"outcomes-roadmap-roadmap\", name: \"Outcome-Based Roadmap\", description: \"Example of an Outcome-Based Roadmap page showing objectives organised into Upcoming, Doing, and Finished columns. Progress bars indicate the completion status of each task, providing a clear view of overall progress.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3w5htPtfEz7QMCH9alVcwf/de35725fb4542b891bd695b900195291/Outcomes-Progress-Composition.png\", }, { key: \"smart-card\", name: \"Smart Card\", description: \"The Smart Card composition uses slats to present structured information in a compact format. Slats help organise details such as titles, descriptions, and supporting actions, making the card easy to scan and interact with.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/74knMtil1vp9nHPPWXM1kr/54f8d978b0a82bca2c126e8ab800826f/SmartCard_-_Card_Composition.png\", }, ], }, related: { items: [ { name: \"Grid\", link: \"https://guides.muibook.com/grid\", }, { name: \"Responsive\", link: \"https://guides.muibook.com/responsive\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
         }
       ],
       "exports": [
@@ -9022,96 +9056,96 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/mui-card/card/index.ts",
+      "path": "src/components/mui-card/body/index.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Frames related content in a bordered surface and coordinates spacing with its slotted card sections.",
-          "name": "MuiCard",
+          "description": "Displays the main content area of a card and adapts spacing for known layout components.",
+          "name": "MuiCardBody",
           "attributes": [
             {
-              "name": "footer"
-            },
-            {
-              "name": "borderless",
+              "name": "condensed",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Removes the card border."
+              "description": "Removes the default body padding."
             }
           ],
           "superclass": {
             "name": "HTMLElement"
           },
-          "tagName": "mui-card",
+          "tagName": "mui-card-body",
           "customElement": true,
           "slots": [
             {
               "name": "",
-              "description": "Related `mui-card-header`, `mui-card-body`, and `mui-card-footer` sections."
+              "description": "Main card content, including layouts such as tables, slats, and accordions."
             }
           ],
           "events": [],
-          "cssProperties": [
-            {
-              "name": "--card-radius",
-              "description": "Corner radius applied to the card surface."
-            }
-          ]
+          "cssProperties": []
         }
       ],
       "exports": [
         {
           "kind": "custom-element-definition",
-          "name": "mui-card",
+          "name": "mui-card-body",
           "declaration": {
-            "name": "MuiCard",
-            "module": "src/components/mui-card/card/index.ts"
+            "name": "MuiCardBody",
+            "module": "src/components/mui-card/body/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/mui-card/body/index.ts",
+      "path": "src/components/mui-card/card/index.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Displays the main content area of a card and adapts spacing for known layout components.",
-          "name": "MuiCardBody",
+          "description": "Frames related content in a bordered surface and coordinates spacing with its slotted card sections.",
+          "name": "MuiCard",
           "attributes": [
             {
-              "name": "condensed",
+              "name": "footer"
+            },
+            {
+              "name": "borderless",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Removes the default body padding."
+              "description": "Removes the card border."
             }
           ],
           "superclass": {
             "name": "HTMLElement"
           },
-          "tagName": "mui-card-body",
+          "tagName": "mui-card",
           "customElement": true,
           "slots": [
             {
               "name": "",
-              "description": "Main card content, including layouts such as tables, slats, and accordions."
+              "description": "Related `mui-card-header`, `mui-card-body`, and `mui-card-footer` sections."
             }
           ],
           "events": [],
-          "cssProperties": []
+          "cssProperties": [
+            {
+              "name": "--card-radius",
+              "description": "Corner radius applied to the card surface."
+            }
+          ]
         }
       ],
       "exports": [
         {
           "kind": "custom-element-definition",
-          "name": "mui-card-body",
+          "name": "mui-card",
           "declaration": {
-            "name": "MuiCardBody",
-            "module": "src/components/mui-card/body/index.ts"
+            "name": "MuiCard",
+            "module": "src/components/mui-card/card/index.ts"
           }
         }
       ]
@@ -9466,8 +9500,8 @@
               "type": {
                 "text": "string"
               },
-              "default": "1fr 1fr",
-              "description": "Sets grid columns using any valid `grid-template-columns` value."
+              "default": "1fr 1fr; action: minmax(0, 1fr) auto",
+              "description": "Sets grid columns using any valid `grid-template-columns` value. Action slats default to `minmax(0, 1fr) auto` so trailing content stays aligned to the end."
             },
             {
               "name": "space",
@@ -9475,7 +9509,7 @@
                 "text": "string"
               },
               "default": "var(--space-500)",
-              "description": "Sets spacing between slat columns using any valid CSS gap value or token."
+              "description": "Sets spacing between slat columns using any valid CSS gap value or token, including action slats."
             },
             {
               "name": "radius",
@@ -9593,7 +9627,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Sets stack height to `100dvh` for viewport-height layouts."
+              "description": "Sets stack height to `100dvh`. Intended for a top-level stack that owns the viewport-height region."
             },
             {
               "name": "fill",
@@ -9601,7 +9635,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Sets available width and height to `100%` of the parent layout."
+              "description": "Sets width and height to `100%` when the parent supplies a clearly bounded layout region."
             }
           ],
           "superclass": {
@@ -9813,7 +9847,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Sets stack height to `100dvh` for viewport-height layouts."
+              "description": "Sets stack height to `100dvh`. Intended for a top-level stack that owns the viewport-height region."
             },
             {
               "name": "fill",
@@ -9821,7 +9855,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Sets available width and height to `100%` of the parent layout."
+              "description": "Sets width and height to `100%` when the parent supplies a clearly bounded layout region."
             }
           ],
           "superclass": {
@@ -10128,66 +10162,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/mui-table/row/index.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Arranges table cells in a configurable column grid.",
-          "name": "MuiRow",
-          "attributes": [
-            {
-              "name": "columns",
-              "type": {
-                "text": "string"
-              },
-              "description": "Sets column sizing using any valid `grid-template-columns` value."
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "\"xx-small\" | \"x-small\" | \"small\" | \"medium\" | \"large\""
-              },
-              "default": "medium",
-              "description": "Sets row cell typography and action-column sizing."
-            }
-          ],
-          "superclass": {
-            "name": "HTMLElement"
-          },
-          "tagName": "mui-row",
-          "customElement": true,
-          "slots": [
-            {
-              "name": "",
-              "description": "Related `mui-cell` children."
-            }
-          ],
-          "events": [],
-          "cssProperties": [
-            {
-              "name": "--row-action-size",
-              "description": "Resolved square action-cell size for the current row."
-            },
-            {
-              "name": "--row-min-height",
-              "description": "Minimum row height."
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "custom-element-definition",
-          "name": "mui-row",
-          "declaration": {
-            "name": "MuiRow",
-            "module": "src/components/mui-table/row/index.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/components/mui-table/cell/index.ts",
@@ -10250,35 +10224,60 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/mui-table/table/index.ts",
+      "path": "src/components/mui-table/row/index.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Groups row collections into an accessible table layout.",
-          "name": "MuiTable",
+          "description": "Arranges table cells in a configurable column grid.",
+          "name": "MuiRow",
+          "attributes": [
+            {
+              "name": "columns",
+              "type": {
+                "text": "string"
+              },
+              "description": "Sets column sizing using any valid `grid-template-columns` value."
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "\"xx-small\" | \"x-small\" | \"small\" | \"medium\" | \"large\""
+              },
+              "default": "medium",
+              "description": "Sets row cell typography and action-column sizing."
+            }
+          ],
           "superclass": {
             "name": "HTMLElement"
           },
-          "tagName": "mui-table",
+          "tagName": "mui-row",
           "customElement": true,
-          "attributes": [],
           "slots": [
             {
               "name": "",
-              "description": "Related `mui-row-group` children."
+              "description": "Related `mui-cell` children."
             }
           ],
           "events": [],
-          "cssProperties": []
+          "cssProperties": [
+            {
+              "name": "--row-action-size",
+              "description": "Resolved square action-cell size for the current row."
+            },
+            {
+              "name": "--row-min-height",
+              "description": "Minimum row height."
+            }
+          ]
         }
       ],
       "exports": [
         {
           "kind": "custom-element-definition",
-          "name": "mui-table",
+          "name": "mui-row",
           "declaration": {
-            "name": "MuiTable",
-            "module": "src/components/mui-table/table/index.ts"
+            "name": "MuiRow",
+            "module": "src/components/mui-table/row/index.ts"
           }
         }
       ]
@@ -10327,6 +10326,41 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/mui-table/table/index.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Groups row collections into an accessible table layout.",
+          "name": "MuiTable",
+          "superclass": {
+            "name": "HTMLElement"
+          },
+          "tagName": "mui-table",
+          "customElement": true,
+          "attributes": [],
+          "slots": [
+            {
+              "name": "",
+              "description": "Related `mui-row-group` children."
+            }
+          ],
+          "events": [],
+          "cssProperties": []
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "mui-table",
+          "declaration": {
+            "name": "MuiTable",
+            "module": "src/components/mui-table/table/index.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/mui-tabs/controller/index.ts",