@muibook/components 19.0.0 → 19.1.0

package/dist/esm/custom-elements.json

@@ -2,6 +2,36 @@
   "schemaVersion": "1.0.0",
   "readme": "",
   "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/components/mui-accordion/doc.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "muiDocs",
+          "type": {
+            "text": "MuiDocs"
+          },
+          "default": "{ Accordion: { title: \"Accordion\", description: \"A collapsible container used to reveal sections of related content. Useful for progressive disclosure, especially when space is limited or the content is secondary. On smaller viewports, accordions can replace tables to group and reveal related rows of data.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/1TykTEhPNTJlZdyzqAayEH/b5293336f033020bbcef964db811cdd3/Accordion_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=958-8558&t=0ytskb8cxriEmdz2-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/content-accordion--docs\"], website: [\"https://muibook.com/#/accordion\"], guides: [\"https://guides.muibook.com/accordion\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-accordion/index.ts\"], usage: { list: [ \"Use to progressively reveal grouped or secondary content.\", \"Can replace tables on small viewports when content is grouped by row.\", \"Ideal for mobile or narrow layouts where space is constrained.\", \"Stack, slat, or grid layouts can be used inside an accordion for custom structures.\", ], }, accessibility: { designerList: [ \"Accordion summary uses role='button' and tabindex='0' for keyboard access.\", \"Supports Enter and Space keys for toggling.\", \"aria-expanded reflects open/closed state.\", \"aria-controls links summary to detail with a unique ID.\", \"mui-heading applies semantic heading with role='heading' and aria-level.\", \"Chevron icon rotates visually and the state is conveyed via aria-expanded.\", ], engineerList: [ \"Accordion summary uses role='button' and tabindex='0' for keyboard access.\", \"Supports Enter and Space keys for toggling.\", \"aria-expanded reflects open/closed state.\", \"aria-controls links summary to detail with a unique ID.\", \"mui-heading applies semantic heading with role='heading' and aria-level.\", \"Chevron icon rotates visually and the state is conveyed via aria-expanded.\", ], }, anatomy: { list: [ \"Heading: Provides the accordion with a heading\", \"Icon: A chevron icon that indicates the state of the Accordion\", \"Detail: Define the detail content for the expanded section within the Accordion.\", ], image: \"https://images.ctfassets.net/i5uwscj4pkk2/4JgAhsxwz3YOt28fLTVgDB/b404f3407eb06e2f26a196da04f7d217/Accordion_-_Anatomy.png\", }, variants: { items: [ { key: \"accordion-block\", title: \"Accordion Block\", description: \"The block accordion is typically used within a page layout full-width to the parent container.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/1L2XfteVwNBQcFlddTYmfi/c791eb538285e2cfb919342e84228811/accordion-block_-_Variants.png\", }, { key: \"accordion-inline\", title: \"Accordion Inline\", description: \"The inline accordion is typically used within a block layout as a secondary UI element to a block element.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/RMnvBLRsW3Vvq9V3yaTcW/86afba39ed0b7ffc00d0033b1b1bfd07/accordion_inline_-_Variants.png\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"menu-groups\", name: \"Menu Groups\", description: \"Accordions can be used in menus to collapse and expand groups of related items, helping keep navigation organized and reducing visual clutter.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/zFHrSdH3CYbZXOv8WFKkL/90cad70c32b40fca61a875263d4cc366/accordion_menu_-_composition.png\", }, { key: \"code-snippets\", name: \"Code snippets\", description: \"An accordion in a card footer allows code snippets or supporting details to be revealed on demand, keeping the card compact while still providing access to additional information.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/7FKVgkCxv3UenOQTC9Tr4R/25c357aceea16b169c48775d7363df1d/accordion_card_footer_-_composition.png\", }, { key: \"account-activity\", name: \"Account Activity (Accordion + Card)\", description: \"Accordions can split account activity into segments, such as by year, with the ability to expand each section for detailed transactions. This makes large sets of data easier to scan and navigate.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/4PEUUHgxpuDM6nDgdGOotY/bf078e07bc3fbabf07f03b99800e5306/accordion_card_body_-_composition.png\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [ { description: \"\", image: \"\" }, { description: \"\", image: \"\" }, ], dontContent: [{ description: \"\" }, { description: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, related: { items: [ { name: \"Card\", link: \"https://guides.muibook.com/card\" }, { name: \"Slat\", link: \"https://guides.muibook.com/slat\" }, ], }, }, }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "muiDocs",
+          "declaration": {
+            "name": "muiDocs",
+            "module": "src/components/mui-accordion/doc.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/mui-accordion/index.ts",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/mui-addon/doc.ts",
@@ -71,36 +101,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/mui-accordion/doc.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "muiDocs",
-          "type": {
-            "text": "MuiDocs"
-          },
-          "default": "{ Accordion: { title: \"Accordion\", description: \"A collapsible container used to reveal sections of related content. Useful for progressive disclosure, especially when space is limited or the content is secondary. On smaller viewports, accordions can replace tables to group and reveal related rows of data.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/1TykTEhPNTJlZdyzqAayEH/b5293336f033020bbcef964db811cdd3/Accordion_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=958-8558&t=0ytskb8cxriEmdz2-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/content-accordion--docs\"], website: [\"https://muibook.com/#/accordion\"], guides: [\"https://guides.muibook.com/accordion\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-accordion/index.ts\"], usage: { list: [ \"Use to progressively reveal grouped or secondary content.\", \"Can replace tables on small viewports when content is grouped by row.\", \"Ideal for mobile or narrow layouts where space is constrained.\", \"Stack, slat, or grid layouts can be used inside an accordion for custom structures.\", ], }, accessibility: { designerList: [ \"Accordion summary uses role='button' and tabindex='0' for keyboard access.\", \"Supports Enter and Space keys for toggling.\", \"aria-expanded reflects open/closed state.\", \"aria-controls links summary to detail with a unique ID.\", \"mui-heading applies semantic heading with role='heading' and aria-level.\", \"Chevron icon rotates visually and the state is conveyed via aria-expanded.\", ], engineerList: [ \"Accordion summary uses role='button' and tabindex='0' for keyboard access.\", \"Supports Enter and Space keys for toggling.\", \"aria-expanded reflects open/closed state.\", \"aria-controls links summary to detail with a unique ID.\", \"mui-heading applies semantic heading with role='heading' and aria-level.\", \"Chevron icon rotates visually and the state is conveyed via aria-expanded.\", ], }, anatomy: { list: [ \"Heading: Provides the accordion with a heading\", \"Icon: A chevron icon that indicates the state of the Accordion\", \"Detail: Define the detail content for the expanded section within the Accordion.\", ], image: \"https://images.ctfassets.net/i5uwscj4pkk2/4JgAhsxwz3YOt28fLTVgDB/b404f3407eb06e2f26a196da04f7d217/Accordion_-_Anatomy.png\", }, variants: { items: [ { key: \"accordion-block\", title: \"Accordion Block\", description: \"The block accordion is typically used within a page layout full-width to the parent container.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/1L2XfteVwNBQcFlddTYmfi/c791eb538285e2cfb919342e84228811/accordion-block_-_Variants.png\", }, { key: \"accordion-inline\", title: \"Accordion Inline\", description: \"The inline accordion is typically used within a block layout as a secondary UI element to a block element.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/RMnvBLRsW3Vvq9V3yaTcW/86afba39ed0b7ffc00d0033b1b1bfd07/accordion_inline_-_Variants.png\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"menu-groups\", name: \"Menu Groups\", description: \"Accordions can be used in menus to collapse and expand groups of related items, helping keep navigation organized and reducing visual clutter.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/zFHrSdH3CYbZXOv8WFKkL/90cad70c32b40fca61a875263d4cc366/accordion_menu_-_composition.png\", }, { key: \"code-snippets\", name: \"Code snippets\", description: \"An accordion in a card footer allows code snippets or supporting details to be revealed on demand, keeping the card compact while still providing access to additional information.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/7FKVgkCxv3UenOQTC9Tr4R/25c357aceea16b169c48775d7363df1d/accordion_card_footer_-_composition.png\", }, { key: \"account-activity\", name: \"Account Activity (Accordion + Card)\", description: \"Accordions can split account activity into segments, such as by year, with the ability to expand each section for detailed transactions. This makes large sets of data easier to scan and navigate.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/4PEUUHgxpuDM6nDgdGOotY/bf078e07bc3fbabf07f03b99800e5306/accordion_card_body_-_composition.png\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [ { description: \"\", image: \"\" }, { description: \"\", image: \"\" }, ], dontContent: [{ description: \"\" }, { description: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, related: { items: [ { name: \"Card\", link: \"https://guides.muibook.com/card\" }, { name: \"Slat\", link: \"https://guides.muibook.com/slat\" }, ], }, }, }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "muiDocs",
-          "declaration": {
-            "name": "muiDocs",
-            "module": "src/components/mui-accordion/doc.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/mui-accordion/index.ts",
-      "declarations": [],
-      "exports": []
-    },
     {
       "kind": "javascript-module",
       "path": "src/components/mui-alert/doc.ts",
@@ -243,107 +243,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/mui-avatar/doc.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "muiDocs",
-          "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.\", ], }, 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: [\"\"], }, 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": [
-        {
-          "kind": "js",
-          "name": "muiDocs",
-          "declaration": {
-            "name": "muiDocs",
-            "module": "src/components/mui-avatar/doc.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/mui-avatar/index.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "MuiAvatar",
-          "members": [
-            {
-              "kind": "field",
-              "name": "_imageFailed",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "hasSlottedContent"
-            },
-            {
-              "kind": "method",
-              "name": "getInitials",
-              "parameters": [
-                {
-                  "name": "label",
-                  "type": {
-                    "text": "string | null"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "getBackgroundCSS"
-            },
-            {
-              "kind": "method",
-              "name": "render"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "label"
-            },
-            {
-              "name": "image"
-            },
-            {
-              "name": "size"
-            },
-            {
-              "name": "background"
-            },
-            {
-              "name": "background-color"
-            }
-          ],
-          "superclass": {
-            "name": "HTMLElement"
-          },
-          "tagName": "mui-avatar",
-          "customElement": true
-        }
-      ],
-      "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",
@@ -654,7 +553,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/mui-button/doc.ts",
+      "path": "src/components/mui-avatar/doc.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -662,7 +561,7 @@
           "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.\", ], }, 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": "{ 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.\", ], }, 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: [\"\"], }, 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": [
@@ -671,120 +570,221 @@
           "name": "muiDocs",
           "declaration": {
             "name": "muiDocs",
-            "module": "src/components/mui-button/doc.ts"
+            "module": "src/components/mui-avatar/doc.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/mui-button/index.ts",
+      "path": "src/components/mui-avatar/index.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "MuiButton",
+          "name": "MuiAvatar",
           "members": [
             {
-              "kind": "method",
-              "name": "updateAvatarSizes",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "_imageFailed",
+              "type": {
+                "text": "boolean | undefined"
               },
-              "parameters": [
-                {
-                  "name": "nodes",
-                  "type": {
-                    "text": "Node[]"
-                  }
-                }
-              ]
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "updateIconSizes",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "nodes",
-                  "type": {
-                    "text": "Node[]"
-                  }
-                },
-                {
-                  "name": "isIconOnly",
-                  "type": {
-                    "text": "boolean"
-                  }
-                }
-              ]
+              "name": "hasSlottedContent"
             },
             {
               "kind": "method",
-              "name": "updateBadgeSizes",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
+              "name": "getInitials",
               "parameters": [
                 {
-                  "name": "nodes",
+                  "name": "label",
                   "type": {
-                    "text": "Node[]"
+                    "text": "string | null"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "waitForPartMap",
-              "return": {
-                "type": {
-                  "text": "Promise<void>"
-                }
-              }
+              "name": "getBackgroundCSS"
+            },
+            {
+              "kind": "method",
+              "name": "render"
             }
           ],
           "attributes": [
             {
-              "name": "onclick"
-            },
-            {
-              "name": "type"
-            },
-            {
-              "name": "aria-label"
+              "name": "label"
             },
             {
-              "name": "disabled"
+              "name": "image"
             },
             {
-              "name": "variant"
+              "name": "size"
             },
             {
-              "name": "size"
+              "name": "background"
             },
             {
-              "name": "usage"
+              "name": "background-color"
             }
           ],
           "superclass": {
             "name": "HTMLElement"
           },
-          "tagName": "mui-button",
-          "customElement": true,
-          "cssParts": [
-            {
-              "name": "color",
-              "description": "Style hook from part-map"
-            },
+          "tagName": "mui-avatar",
+          "customElement": true
+        }
+      ],
+      "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-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.\", ], }, 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": [
+        {
+          "kind": "js",
+          "name": "muiDocs",
+          "declaration": {
+            "name": "muiDocs",
+            "module": "src/components/mui-button/doc.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/mui-button/index.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "MuiButton",
+          "members": [
+            {
+              "kind": "method",
+              "name": "updateAvatarSizes",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "nodes",
+                  "type": {
+                    "text": "Node[]"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "updateIconSizes",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "nodes",
+                  "type": {
+                    "text": "Node[]"
+                  }
+                },
+                {
+                  "name": "isIconOnly",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "updateBadgeSizes",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "nodes",
+                  "type": {
+                    "text": "Node[]"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "waitForPartMap",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "onclick"
+            },
+            {
+              "name": "type"
+            },
+            {
+              "name": "aria-label"
+            },
+            {
+              "name": "disabled"
+            },
+            {
+              "name": "variant"
+            },
+            {
+              "name": "size"
+            },
+            {
+              "name": "usage"
+            }
+          ],
+          "superclass": {
+            "name": "HTMLElement"
+          },
+          "tagName": "mui-button",
+          "customElement": true,
+          "cssParts": [
+            {
+              "name": "color",
+              "description": "Style hook from part-map"
+            },
             {
               "name": "font-family",
               "description": "Style hook from part-map"
@@ -953,7 +953,7 @@
           "type": {
             "text": "MuiDocs"
           },
-          "default": "{ ButtonGroup: { title: \"Button Group\", description: \"Example of actions that are present at the top of a page or card footer use.\", hero: [\"\"], figma: [\"\"], storybook: [\"\"], github: [\"\"], website: [\"\"], guides: [\"\"], usage: { list: [ \"Use small (default) size icon when paired with text-based action is used in a button group.\", \"Use medium size icon when the icon-only action appears on its own. E.g. Menu.\", ], }, 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": "{ ButtonGroup: { title: \"Button Group\", description: \"Example of actions that are present at the top of a page or card footer use.\", hero: [\"\"], figma: [\"\"], storybook: [\"\"], github: [\"\"], website: [\"\"], guides: [\"\"], usage: { list: [ \"Use layout='row|column' to match the intended action arrangement.\", \"Use align='left|right' to control action alignment for row layouts.\", \"Column layout is intended for full-width stacked actions.\", \"Prefer align='right' instead of the legacy right attribute.\", \"Use small (default) size icon when paired with text-based action is used in a button group.\", \"Use medium size icon when the icon-only action appears on its own. E.g. Menu.\", ], }, 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": [
@@ -975,6 +975,17 @@
           "kind": "class",
           "description": "",
           "name": "MuiButtonGroup",
+          "attributes": [
+            {
+              "name": "layout"
+            },
+            {
+              "name": "align"
+            },
+            {
+              "name": "right"
+            }
+          ],
           "superclass": {
             "name": "HTMLElement"
           },
@@ -3751,6 +3762,13 @@
                 "text": "(e: Event) => void | undefined"
               }
             },
+            {
+              "kind": "field",
+              "name": "_slotResizeObserver",
+              "type": {
+                "text": "ResizeObserver | undefined"
+              }
+            },
             {
               "kind": "method",
               "name": "cleanupListeners"
@@ -4153,36 +4171,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/mui-list/doc.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "muiDocs",
-          "type": {
-            "text": "MuiDocs"
-          },
-          "default": "{ List: { title: \"List\", description: \"Used to display related items in a clear, readable sequence. Lists can be ordered (numbered) to suggest priority or sequence, or unordered (bulleted) for grouped information without hierarchy.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/OSwQtL8kK29OUOG0oLMSJ/0a488efb3f6cf8f6e6faa40e124aa975/List_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=958-8673&t=0ytskb8cxriEmdz2-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/content-list--docs\"], github: [\"https://github.com/michaeltrilford/muibook/tree/main/src/components/mui-list\"], website: [\"https://muibook.com/#/list\"], guides: [\"https://guides.muibook.com/list\"], usage: { list: [ \"Use ordered lists when the order or steps matter (e.g. instructions).\", \"Use unordered lists for grouped or related items without a set order.\", \"Keep items concise and consistent in structure for scanability.\", \"void using lists for complex content — consider a table or grid instead.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"], }, anatomy: { image: \"\", list: [\"\"], }, 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-list/doc.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/mui-list/index.ts",
-      "declarations": [],
-      "exports": []
-    },
     {
       "kind": "javascript-module",
       "path": "src/components/mui-icons/accessibility.ts",
@@ -6477,6 +6465,36 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/mui-list/doc.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "muiDocs",
+          "type": {
+            "text": "MuiDocs"
+          },
+          "default": "{ List: { title: \"List\", description: \"Used to display related items in a clear, readable sequence. Lists can be ordered (numbered) to suggest priority or sequence, or unordered (bulleted) for grouped information without hierarchy.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/OSwQtL8kK29OUOG0oLMSJ/0a488efb3f6cf8f6e6faa40e124aa975/List_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=958-8673&t=0ytskb8cxriEmdz2-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/content-list--docs\"], github: [\"https://github.com/michaeltrilford/muibook/tree/main/src/components/mui-list\"], website: [\"https://muibook.com/#/list\"], guides: [\"https://guides.muibook.com/list\"], usage: { list: [ \"Use ordered lists when the order or steps matter (e.g. instructions).\", \"Use unordered lists for grouped or related items without a set order.\", \"Keep items concise and consistent in structure for scanability.\", \"void using lists for complex content — consider a table or grid instead.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"], }, anatomy: { image: \"\", list: [\"\"], }, 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-list/doc.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/mui-list/index.ts",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/mui-loader/doc.ts",
@@ -8187,21 +8205,126 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/mui-radio-group/index.ts",
+      "path": "src/components/mui-radio/doc.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "muiDocs",
+          "type": {
+            "text": "MuiDocs"
+          },
+          "default": "{ Radio: { title: \"Radio\", description: \"A radio control for selecting exactly one option from a set.\", hero: [\"\"], figma: [\"\"], storybook: [\"\"], github: [\"https://github.com/michaeltrilford/muibook/tree/main/src/components/mui-radio\"], website: [\"https://muibook.com/#/radio\"], guides: [\"\"], usage: { list: [ \"Use radio when users must choose one option from a known set.\", \"Group related radios using mui-radio-group for shared name and state handling.\", \"Use label / hide-label / optional on mui-radio-group to align with other fielded controls.\", \"Use size='x-small|small|medium|large' on radio or radio-group to scale controls consistently.\", ], }, accessibility: { designerList: [\"\"], engineerList: [ \"Use mui-radio-group to provide radiogroup semantics and shared selection state.\", \"Each radio should include visible text or aria-label when no visible label is present.\", ], }, anatomy: { image: \"\", list: [\"Unchecked\", \"Checked\", \"Disabled\"], }, variants: { items: [{ key: \"\", title: \"\", description: \"\", image: \"\" }], }, compositions: { description: \"\", items: [], }, related: { items: [ { name: \"Checkbox\", link: \"https://guides.muibook.com/checkbox\" }, { name: \"Field\", link: \"https://guides.muibook.com/field\" }, ], }, 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-radio/doc.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/mui-radio/index.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "MuiRadioGroup",
+          "name": "MuiRadio",
           "members": [
             {
               "kind": "field",
-              "name": "_groupName",
+              "name": "_changeHandler",
               "type": {
-                "text": "string"
+                "text": "(e: Event) => void | undefined"
               },
-              "privacy": "private",
-              "default": "\"\""
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "cleanupListeners",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "setupListener",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "events": [
+            {
+              "name": "change",
+              "type": {
+                "text": "CustomEvent"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "checked"
+            },
+            {
+              "name": "disabled"
+            },
+            {
+              "name": "id"
+            },
+            {
+              "name": "name"
+            },
+            {
+              "name": "value"
+            },
+            {
+              "name": "aria-label"
+            },
+            {
+              "name": "size"
+            }
+          ],
+          "superclass": {
+            "name": "HTMLElement"
+          },
+          "tagName": "mui-radio",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "mui-radio",
+          "declaration": {
+            "name": "MuiRadio",
+            "module": "src/components/mui-radio/index.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/mui-radio-group/index.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "MuiRadioGroup",
+          "members": [
+            {
+              "kind": "field",
+              "name": "_groupName",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "\"\""
             },
             {
               "kind": "method",
@@ -8477,6 +8600,25 @@
               "privacy": "private",
               "default": "null"
             },
+            {
+              "kind": "field",
+              "name": "cleanup",
+              "type": {
+                "text": "(() => void) | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "method",
+              "name": "teardownResponsive",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "setupResponsive",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "innerHTML",
@@ -8514,7 +8656,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/mui-radio/doc.ts",
+      "path": "src/components/mui-rule/doc.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -8522,7 +8664,7 @@
           "type": {
             "text": "MuiDocs"
           },
-          "default": "{ Radio: { title: \"Radio\", description: \"A radio control for selecting exactly one option from a set.\", hero: [\"\"], figma: [\"\"], storybook: [\"\"], github: [\"https://github.com/michaeltrilford/muibook/tree/main/src/components/mui-radio\"], website: [\"https://muibook.com/#/radio\"], guides: [\"\"], usage: { list: [ \"Use radio when users must choose one option from a known set.\", \"Group related radios using mui-radio-group for shared name and state handling.\", \"Use label / hide-label / optional on mui-radio-group to align with other fielded controls.\", \"Use size='x-small|small|medium|large' on radio or radio-group to scale controls consistently.\", ], }, accessibility: { designerList: [\"\"], engineerList: [ \"Use mui-radio-group to provide radiogroup semantics and shared selection state.\", \"Each radio should include visible text or aria-label when no visible label is present.\", ], }, anatomy: { image: \"\", list: [\"Unchecked\", \"Checked\", \"Disabled\"], }, variants: { items: [{ key: \"\", title: \"\", description: \"\", image: \"\" }], }, compositions: { description: \"\", items: [], }, related: { items: [ { name: \"Checkbox\", link: \"https://guides.muibook.com/checkbox\" }, { name: \"Field\", link: \"https://guides.muibook.com/field\" }, ], }, 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.\", \"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": [
@@ -8531,88 +8673,55 @@
           "name": "muiDocs",
           "declaration": {
             "name": "muiDocs",
-            "module": "src/components/mui-radio/doc.ts"
+            "module": "src/components/mui-rule/doc.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/mui-radio/index.ts",
+      "path": "src/components/mui-rule/index.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "MuiRadio",
+          "name": "MuiRule",
           "members": [
-            {
-              "kind": "field",
-              "name": "_changeHandler",
-              "type": {
-                "text": "(e: Event) => void | undefined"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "cleanupListeners",
-              "privacy": "private"
-            },
             {
               "kind": "method",
-              "name": "setupListener",
+              "name": "syncContextAttributes",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "render"
-            }
-          ],
-          "events": [
-            {
-              "name": "change",
-              "type": {
-                "text": "CustomEvent"
-              }
+              "name": "updateStyles"
             }
           ],
           "attributes": [
             {
-              "name": "checked"
-            },
-            {
-              "name": "disabled"
-            },
-            {
-              "name": "id"
-            },
-            {
-              "name": "name"
-            },
-            {
-              "name": "value"
+              "name": "length"
             },
             {
-              "name": "aria-label"
+              "name": "weight"
             },
             {
-              "name": "size"
+              "name": "direction"
             }
           ],
           "superclass": {
             "name": "HTMLElement"
           },
-          "tagName": "mui-radio",
+          "tagName": "mui-rule",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "custom-element-definition",
-          "name": "mui-radio",
+          "name": "mui-rule",
           "declaration": {
-            "name": "MuiRadio",
-            "module": "src/components/mui-radio/index.ts"
+            "name": "MuiRule",
+            "module": "src/components/mui-rule/index.ts"
           }
         }
       ]
@@ -8901,78 +9010,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/mui-rule/doc.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "muiDocs",
-          "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: [\"\"], }, }, }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "muiDocs",
-          "declaration": {
-            "name": "muiDocs",
-            "module": "src/components/mui-rule/doc.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/mui-rule/index.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "MuiRule",
-          "members": [
-            {
-              "kind": "method",
-              "name": "syncContextAttributes",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "updateStyles"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "length"
-            },
-            {
-              "name": "weight"
-            },
-            {
-              "name": "direction"
-            }
-          ],
-          "superclass": {
-            "name": "HTMLElement"
-          },
-          "tagName": "mui-rule",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "custom-element-definition",
-          "name": "mui-rule",
-          "declaration": {
-            "name": "MuiRule",
-            "module": "src/components/mui-rule/index.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/components/mui-skeleton/doc.ts",
@@ -9138,54 +9175,21 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/mui-slide-section/index.ts",
+      "path": "src/components/mui-slide-frame/doc.ts",
       "declarations": [
         {
-          "kind": "class",
-          "description": "",
-          "name": "MuiSlideSection",
-          "members": [
-            {
-              "kind": "method",
-              "name": "render",
-              "privacy": "private"
-            }
-          ],
-          "superclass": {
-            "name": "HTMLElement"
+          "kind": "variable",
+          "name": "muiDocs",
+          "type": {
+            "text": "MuiDocs"
           },
-          "tagName": "mui-slide-section",
-          "customElement": true
+          "default": "{ SlideFrame: { title: \"Slide Frame\", description: \"Slide Frame is a composable presentation surface for UI-builder workflows. It supports configurable ratio, variants, image composition, and overflow handling.\", hero: [\"\"], figma: [\"\"], storybook: [\"\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-slide-frame/index.ts\"], website: [\"https://muibook.com/#/slide-frame\"], guides: [\"https://guides.muibook.com/slide-frame\"], usage: { list: [ \"Use as a presentation shell and compose page content with existing components like Stack, Grid, Card, and Media.\", \"Prefer one <mui-slide-section> per page in the default slot for scalable composition.\", \"Use ratio='16:9|4:3|1:1|3:2|9:16' (or any valid W:H string) for presentation formats.\", \"Use title for built-in header text and footer-text for built-in footer copy.\", \"Section counter is built into the footer and updates with active-section.\", \"Use slot='header-after' and slot='footer-after' for trailing actions.\", \"Use slot='header-description' for secondary lines.\", \"Use variant='default|plain' to control frame chrome.\", \"Use scroll to opt into surface scrolling when content exceeds the frame.\", \"When multiple sections exist, users can navigate with Left/Right arrows.\", \"In present mode, press Esc to exit quickly.\", \"Use header/footer slots for frame-level controls, metadata, or actions.\", ], }, accessibility: { designerList: [\"\"], engineerList: [ \"The surface is focusable in present mode and supports keyboard section navigation with Left/Right arrows.\", \"Esc exits present mode.\", \"Expose external controls for next/previous actions when building guided presentation flows.\", ], }, anatomy: { image: \"\", list: [\"Header Slot\", \"Surface\", \"Image Slot\", \"Default Slot Content\", \"Notes Slot\", \"Footer Slot\"], }, variants: { items: [ { key: \"default\", title: \"Default\", description: \"Standard frame with ratio and padding control.\", image: \"\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [], }, related: { items: [ { name: \"Stack\", link: \"https://guides.muibook.com/stack\" }, { name: \"Grid\", link: \"https://guides.muibook.com/grid\" }, { name: \"Card\", link: \"https://guides.muibook.com/card\" }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"] }, writing: { list: [\"\"] }, }, }"
         }
       ],
       "exports": [
         {
-          "kind": "custom-element-definition",
-          "name": "mui-slide-section",
-          "declaration": {
-            "name": "MuiSlideSection",
-            "module": "src/components/mui-slide-section/index.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/mui-slide-frame/doc.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "muiDocs",
-          "type": {
-            "text": "MuiDocs"
-          },
-          "default": "{ SlideFrame: { title: \"Slide Frame\", description: \"Slide Frame is a composable presentation surface for UI-builder workflows. It supports configurable ratio, variants, image composition, and overflow handling.\", hero: [\"\"], figma: [\"\"], storybook: [\"\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-slide-frame/index.ts\"], website: [\"https://muibook.com/#/slide-frame\"], guides: [\"https://guides.muibook.com/slide-frame\"], usage: { list: [ \"Use as a presentation shell and compose page content with existing components like Stack, Grid, Card, and Media.\", \"Prefer one <mui-slide-section> per page in the default slot for scalable composition.\", \"Use ratio='16:9|4:3|1:1|3:2|9:16' (or any valid W:H string) for presentation formats.\", \"Use title for built-in header text and footer-text for built-in footer copy.\", \"Section counter is built into the footer and updates with active-section.\", \"Use slot='header-after' and slot='footer-after' for trailing actions.\", \"Use slot='header-description' for secondary lines.\", \"Use variant='default|plain' to control frame chrome.\", \"Use scroll to opt into surface scrolling when content exceeds the frame.\", \"When multiple sections exist, users can navigate with Left/Right arrows.\", \"In present mode, press Esc to exit quickly.\", \"Use header/footer slots for frame-level controls, metadata, or actions.\", ], }, accessibility: { designerList: [\"\"], engineerList: [ \"The surface is focusable in present mode and supports keyboard section navigation with Left/Right arrows.\", \"Esc exits present mode.\", \"Expose external controls for next/previous actions when building guided presentation flows.\", ], }, anatomy: { image: \"\", list: [\"Header Slot\", \"Surface\", \"Image Slot\", \"Default Slot Content\", \"Notes Slot\", \"Footer Slot\"], }, variants: { items: [ { key: \"default\", title: \"Default\", description: \"Standard frame with ratio and padding control.\", image: \"\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [], }, related: { items: [ { name: \"Stack\", link: \"https://guides.muibook.com/stack\" }, { name: \"Grid\", link: \"https://guides.muibook.com/grid\" }, { 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",
+          "kind": "js",
+          "name": "muiDocs",
           "declaration": {
             "name": "muiDocs",
             "module": "src/components/mui-slide-frame/doc.ts"
@@ -9581,6 +9585,39 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/mui-slide-section/index.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "MuiSlideSection",
+          "members": [
+            {
+              "kind": "method",
+              "name": "render",
+              "privacy": "private"
+            }
+          ],
+          "superclass": {
+            "name": "HTMLElement"
+          },
+          "tagName": "mui-slide-section",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "mui-slide-section",
+          "declaration": {
+            "name": "MuiSlideSection",
+            "module": "src/components/mui-slide-section/index.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/mui-smart-card/doc.ts",
@@ -10128,12 +10165,12 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/mui-accordion/core/index.ts",
+      "path": "src/components/mui-accordion/block/index.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "MuiAccordionCore",
+          "name": "MuiAccordionBlock",
           "members": [
             {
               "kind": "field",
@@ -10141,7 +10178,8 @@
               "type": {
                 "text": "HTMLElement | null"
               },
-              "privacy": "private"
+              "privacy": "private",
+              "default": "null"
             },
             {
               "kind": "field",
@@ -10149,7 +10187,8 @@
               "type": {
                 "text": "HTMLElement | null"
               },
-              "privacy": "private"
+              "privacy": "private",
+              "default": "null"
             },
             {
               "kind": "field",
@@ -10157,100 +10196,44 @@
               "type": {
                 "text": "HTMLElement | null"
               },
-              "privacy": "private"
+              "privacy": "private",
+              "default": "null"
             },
             {
               "kind": "field",
-              "name": "iconToggleEl",
+              "name": "detailSlotEl",
               "type": {
-                "text": "HTMLElement | null"
+                "text": "HTMLSlotElement | null"
               },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "open"
-            },
-            {
-              "kind": "method",
-              "name": "toggleAccordion"
-            },
-            {
-              "kind": "method",
-              "name": "openAccordion"
+              "privacy": "private",
+              "default": "null"
             },
-            {
-              "kind": "method",
-              "name": "closeAccordion"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "open"
-            }
-          ],
-          "superclass": {
-            "name": "HTMLElement"
-          },
-          "tagName": "mui-accordion-core",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "custom-element-definition",
-          "name": "mui-accordion-core",
-          "declaration": {
-            "name": "MuiAccordionCore",
-            "module": "src/components/mui-accordion/core/index.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/mui-accordion/block/index.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "MuiAccordionBlock",
-          "members": [
             {
               "kind": "field",
-              "name": "summaryEl",
+              "name": "accordionId",
               "type": {
-                "text": "HTMLElement | null"
+                "text": "string"
               },
               "privacy": "private",
-              "default": "null"
+              "default": "`accordion-detail-${Math.random() .toString(36) .substring(2, 9)}`"
             },
             {
               "kind": "field",
-              "name": "detailEl",
-              "type": {
-                "text": "HTMLElement | null"
-              },
+              "name": "handleSummaryClick",
               "privacy": "private",
-              "default": "null"
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "chevronEl",
-              "type": {
-                "text": "HTMLElement | null"
-              },
+              "name": "handleSummaryKeydown",
               "privacy": "private",
-              "default": "null"
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "accordionId",
-              "type": {
-                "text": "string"
-              },
+              "name": "handleDetailSlotChange",
               "privacy": "private",
-              "default": "`accordion-detail-${Math.random() .toString(36) .substring(2, 9)}`"
+              "readonly": true
             },
             {
               "kind": "method",
@@ -10262,6 +10245,26 @@
                 }
               }
             },
+            {
+              "kind": "method",
+              "name": "applyAccordionUsage",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "bindEvents",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "syncOpenHeight",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "render",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "toggleAccordion"
@@ -10291,6 +10294,20 @@
               }
             }
           ],
+          "attributes": [
+            {
+              "name": "heading"
+            },
+            {
+              "name": "size"
+            },
+            {
+              "name": "level"
+            },
+            {
+              "name": "detail-space"
+            }
+          ],
           "superclass": {
             "name": "HTMLElement"
           },
@@ -10311,12 +10328,12 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/mui-accordion/inline/index.ts",
+      "path": "src/components/mui-accordion/core/index.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "MuiAccordionInline",
+          "name": "MuiAccordionCore",
           "members": [
             {
               "kind": "field",
@@ -10342,25 +10359,50 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "iconToggleEl",
+              "type": {
+                "text": "HTMLElement | null"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "open"
+            },
             {
               "kind": "method",
               "name": "toggleAccordion"
+            },
+            {
+              "kind": "method",
+              "name": "openAccordion"
+            },
+            {
+              "kind": "method",
+              "name": "closeAccordion"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "open"
             }
           ],
           "superclass": {
             "name": "HTMLElement"
           },
-          "tagName": "mui-accordion-inline",
+          "tagName": "mui-accordion-core",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "custom-element-definition",
-          "name": "mui-accordion-inline",
+          "name": "mui-accordion-core",
           "declaration": {
-            "name": "MuiAccordionInline",
-            "module": "src/components/mui-accordion/inline/index.ts"
+            "name": "MuiAccordionCore",
+            "module": "src/components/mui-accordion/core/index.ts"
           }
         }
       ]
@@ -10404,43 +10446,115 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/mui-card/card/index.ts",
+      "path": "src/components/mui-accordion/inline/index.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "MuiCard",
-          "attributes": [
+          "name": "MuiAccordionInline",
+          "members": [
             {
-              "name": "footer"
+              "kind": "field",
+              "name": "summaryEl",
+              "type": {
+                "text": "HTMLElement | null"
+              },
+              "privacy": "private"
             },
             {
-              "name": "borderless"
-            }
-          ],
-          "superclass": {
-            "name": "HTMLElement"
-          },
-          "tagName": "mui-card",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "custom-element-definition",
-          "name": "mui-card",
-          "declaration": {
-            "name": "MuiCard",
-            "module": "src/components/mui-card/card/index.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/mui-card/body/index.ts",
-      "declarations": [
-        {
+              "kind": "field",
+              "name": "detailEl",
+              "type": {
+                "text": "HTMLElement | null"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "chevronEl",
+              "type": {
+                "text": "HTMLElement | null"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "detailSlotEl",
+              "type": {
+                "text": "HTMLSlotElement | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "handleSummaryClick",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "handleSummaryKeydown",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "handleDetailSlotChange",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "bindEvents",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "syncOpenHeight",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "render",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "toggleAccordion"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "heading"
+            },
+            {
+              "name": "level"
+            }
+          ],
+          "superclass": {
+            "name": "HTMLElement"
+          },
+          "tagName": "mui-accordion-inline",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "mui-accordion-inline",
+          "declaration": {
+            "name": "MuiAccordionInline",
+            "module": "src/components/mui-accordion/inline/index.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/mui-card/body/index.ts",
+      "declarations": [
+        {
           "kind": "class",
           "description": "",
           "name": "MuiCardBody",
@@ -10484,26 +10598,34 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/mui-card/header/index.ts",
+      "path": "src/components/mui-card/card/index.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "MuiCardHeader",
+          "name": "MuiCard",
+          "attributes": [
+            {
+              "name": "footer"
+            },
+            {
+              "name": "borderless"
+            }
+          ],
           "superclass": {
             "name": "HTMLElement"
           },
-          "tagName": "mui-card-header",
+          "tagName": "mui-card",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "custom-element-definition",
-          "name": "mui-card-header",
+          "name": "mui-card",
           "declaration": {
-            "name": "MuiCardHeader",
-            "module": "src/components/mui-card/header/index.ts"
+            "name": "MuiCard",
+            "module": "src/components/mui-card/card/index.ts"
           }
         }
       ]
@@ -10536,42 +10658,26 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/mui-carousel/panel/index.ts",
+      "path": "src/components/mui-card/header/index.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "MuiCarouselPanel",
-          "members": [
-            {
-              "kind": "field",
-              "name": "item"
-            },
-            {
-              "kind": "field",
-              "name": "innerHTML",
-              "default": "` <style> :host { display: block; box-sizing: border-box; overflow: hidden; } </style> <slot></slot> `"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "item"
-            }
-          ],
+          "name": "MuiCardHeader",
           "superclass": {
             "name": "HTMLElement"
           },
-          "tagName": "mui-carousel-panel",
+          "tagName": "mui-card-header",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "custom-element-definition",
-          "name": "mui-carousel-panel",
+          "name": "mui-card-header",
           "declaration": {
-            "name": "MuiCarouselPanel",
-            "module": "src/components/mui-carousel/panel/index.ts"
+            "name": "MuiCardHeader",
+            "module": "src/components/mui-card/header/index.ts"
           }
         }
       ]
@@ -10710,6 +10816,48 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/mui-carousel/panel/index.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "MuiCarouselPanel",
+          "members": [
+            {
+              "kind": "field",
+              "name": "item"
+            },
+            {
+              "kind": "field",
+              "name": "innerHTML",
+              "default": "` <style> :host { display: block; box-sizing: border-box; overflow: hidden; } </style> <slot></slot> `"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "item"
+            }
+          ],
+          "superclass": {
+            "name": "HTMLElement"
+          },
+          "tagName": "mui-carousel-panel",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "mui-carousel-panel",
+          "declaration": {
+            "name": "MuiCarouselPanel",
+            "module": "src/components/mui-carousel/panel/index.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/mui-list/item/index.ts",
@@ -10753,6 +10901,32 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/mui-list/list/index.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "MuiList",
+          "superclass": {
+            "name": "HTMLElement"
+          },
+          "tagName": "mui-list",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "mui-list",
+          "declaration": {
+            "name": "MuiList",
+            "module": "src/components/mui-list/list/index.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/mui-slat/group/index.ts",
@@ -10818,32 +10992,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/mui-list/list/index.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "MuiList",
-          "superclass": {
-            "name": "HTMLElement"
-          },
-          "tagName": "mui-list",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "custom-element-definition",
-          "name": "mui-list",
-          "declaration": {
-            "name": "MuiList",
-            "module": "src/components/mui-list/list/index.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/components/mui-slat/slat/index.ts",
@@ -11149,255 +11297,30 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/mui-stepper/step/index.ts",
+      "path": "src/components/mui-stack/vstack/index.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "MuiStep",
+          "name": "MuiVStack",
           "members": [
             {
-              "kind": "method",
-              "name": "render"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "state"
+              "kind": "field",
+              "name": "space",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "`var(--space-500)`"
             },
             {
-              "name": "resolved-state"
-            },
-            {
-              "name": "title"
-            },
-            {
-              "name": "direction"
-            },
-            {
-              "name": "hide-icon"
-            },
-            {
-              "name": "size"
-            }
-          ],
-          "superclass": {
-            "name": "HTMLElement"
-          },
-          "tagName": "mui-step",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "custom-element-definition",
-          "name": "mui-step",
-          "declaration": {
-            "name": "MuiStep",
-            "module": "src/components/mui-stepper/step/index.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/mui-stepper/stepper/index.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "MuiStepper",
-          "members": [
-            {
-              "kind": "field",
-              "name": "onKeyDown",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "steps",
-              "privacy": "private",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "activeStepIndex",
-              "privacy": "private",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "emitStepChange",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "previousIndex",
-                  "type": {
-                    "text": "number"
-                  }
-                },
-                {
-                  "name": "nextIndex",
-                  "type": {
-                    "text": "number"
-                  }
-                },
-                {
-                  "name": "source",
-                  "type": {
-                    "text": "\"click\" | \"keyboard\" | \"api\""
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "setActiveStep",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "index",
-                  "type": {
-                    "text": "number"
-                  }
-                },
-                {
-                  "name": "source",
-                  "type": {
-                    "text": "\"click\" | \"keyboard\" | \"api\""
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "resolveStepState",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "string"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "step",
-                  "type": {
-                    "text": "HTMLElement"
-                  }
-                },
-                {
-                  "name": "index",
-                  "type": {
-                    "text": "number"
-                  }
-                },
-                {
-                  "name": "activeIndex",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "canActivateStep",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "targetIndex",
-                  "type": {
-                    "text": "number"
-                  }
-                },
-                {
-                  "name": "activeIndex",
-                  "type": {
-                    "text": "number"
-                  }
-                },
-                {
-                  "name": "steps",
-                  "type": {
-                    "text": "HTMLElement[]"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "render"
-            }
-          ],
-          "events": [
-            {
-              "name": "step-change",
-              "type": {
-                "text": "CustomEvent"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "direction"
-            },
-            {
-              "name": "active-step"
-            },
-            {
-              "name": "linear"
-            },
-            {
-              "name": "interactive"
-            },
-            {
-              "name": "size"
-            }
-          ],
-          "superclass": {
-            "name": "HTMLElement"
-          },
-          "tagName": "mui-stepper",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "custom-element-definition",
-          "name": "mui-stepper",
-          "declaration": {
-            "name": "MuiStepper",
-            "module": "src/components/mui-stepper/stepper/index.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/mui-stack/vstack/index.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "MuiVStack",
-          "members": [
-            {
-              "kind": "field",
-              "name": "space",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "private",
-              "default": "`var(--space-500)`"
-            },
-            {
-              "kind": "field",
-              "name": "alignX",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "private",
-              "default": "`normal`"
+              "kind": "field",
+              "name": "alignX",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "`normal`"
             },
             {
               "kind": "field",
@@ -11606,6 +11529,231 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/mui-stepper/step/index.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "MuiStep",
+          "members": [
+            {
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "state"
+            },
+            {
+              "name": "resolved-state"
+            },
+            {
+              "name": "title"
+            },
+            {
+              "name": "direction"
+            },
+            {
+              "name": "hide-icon"
+            },
+            {
+              "name": "size"
+            }
+          ],
+          "superclass": {
+            "name": "HTMLElement"
+          },
+          "tagName": "mui-step",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "mui-step",
+          "declaration": {
+            "name": "MuiStep",
+            "module": "src/components/mui-stepper/step/index.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/mui-stepper/stepper/index.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "MuiStepper",
+          "members": [
+            {
+              "kind": "field",
+              "name": "onKeyDown",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "steps",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "activeStepIndex",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "emitStepChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "previousIndex",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "nextIndex",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "source",
+                  "type": {
+                    "text": "\"click\" | \"keyboard\" | \"api\""
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "setActiveStep",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "source",
+                  "type": {
+                    "text": "\"click\" | \"keyboard\" | \"api\""
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "resolveStepState",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "step",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                },
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "activeIndex",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "canActivateStep",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "targetIndex",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "activeIndex",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "steps",
+                  "type": {
+                    "text": "HTMLElement[]"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "events": [
+            {
+              "name": "step-change",
+              "type": {
+                "text": "CustomEvent"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "direction"
+            },
+            {
+              "name": "active-step"
+            },
+            {
+              "name": "linear"
+            },
+            {
+              "name": "interactive"
+            },
+            {
+              "name": "size"
+            }
+          ],
+          "superclass": {
+            "name": "HTMLElement"
+          },
+          "tagName": "mui-stepper",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "mui-stepper",
+          "declaration": {
+            "name": "MuiStepper",
+            "module": "src/components/mui-stepper/stepper/index.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/mui-table/cell/index.ts",
@@ -11645,26 +11793,77 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/mui-table/table/index.ts",
+      "path": "src/components/mui-table/row/index.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "MuiTable",
+          "name": "MuiRow",
+          "members": [
+            {
+              "kind": "field",
+              "name": "tableObserver",
+              "type": {
+                "text": "MutationObserver | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "syncContextAttributes",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "observeTableChanges",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "clearActionPlaceholderStyles",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "cell",
+                  "type": {
+                    "text": "Element"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "syncActionColumnState",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "render",
+              "privacy": "private"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "columns"
+            },
+            {
+              "name": "size"
+            }
+          ],
           "superclass": {
             "name": "HTMLElement"
           },
-          "tagName": "mui-table",
+          "tagName": "mui-row",
           "customElement": true
         }
       ],
       "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"
           }
         }
       ]
@@ -11695,6 +11894,32 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/mui-table/table/index.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "MuiTable",
+          "superclass": {
+            "name": "HTMLElement"
+          },
+          "tagName": "mui-table",
+          "customElement": true
+        }
+      ],
+      "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",
@@ -11767,128 +11992,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/mui-table/row/index.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "MuiRow",
-          "members": [
-            {
-              "kind": "field",
-              "name": "tableObserver",
-              "type": {
-                "text": "MutationObserver | undefined"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "syncContextAttributes",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "observeTableChanges",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "clearActionPlaceholderStyles",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "cell",
-                  "type": {
-                    "text": "Element"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "syncActionColumnState",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "render",
-              "privacy": "private"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "columns"
-            },
-            {
-              "name": "size"
-            }
-          ],
-          "superclass": {
-            "name": "HTMLElement"
-          },
-          "tagName": "mui-row",
-          "customElement": true
-        }
-      ],
-      "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-tabs/panel/index.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "MuiTabPanel",
-          "members": [
-            {
-              "kind": "field",
-              "name": "item",
-              "type": {
-                "text": "string | null"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "innerHTML",
-              "default": "` <style> :host { display: block; } :host([hidden]) { display: none !important; } .inner { padding: var(--tab-panel-padding, 0); } </style> <div class=\"inner\"> <slot></slot> </div> `"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "item"
-            }
-          ],
-          "superclass": {
-            "name": "HTMLElement"
-          },
-          "tagName": "mui-tab-panel",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "custom-element-definition",
-          "name": "mui-tab-panel",
-          "declaration": {
-            "name": "MuiTabPanel",
-            "module": "src/components/mui-tabs/panel/index.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/components/mui-tabs/item/index.ts",
@@ -11994,6 +12097,51 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/mui-tabs/panel/index.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "MuiTabPanel",
+          "members": [
+            {
+              "kind": "field",
+              "name": "item",
+              "type": {
+                "text": "string | null"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "innerHTML",
+              "default": "` <style> :host { display: block; } :host([hidden]) { display: none !important; } .inner { padding: var(--tab-panel-padding, 0); } </style> <div class=\"inner\"> <slot></slot> </div> `"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "item"
+            }
+          ],
+          "superclass": {
+            "name": "HTMLElement"
+          },
+          "tagName": "mui-tab-panel",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "mui-tab-panel",
+          "declaration": {
+            "name": "MuiTabPanel",
+            "module": "src/components/mui-tabs/panel/index.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/mui-tabs/tab-bar/index.ts",