@muibook/components 14.0.0 → 14.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2,6 +2,36 @@
2
2
  "schemaVersion": "1.0.0",
3
3
  "readme": "",
4
4
  "modules": [
5
+ {
6
+ "kind": "javascript-module",
7
+ "path": "src/components/mui-accordion/doc.ts",
8
+ "declarations": [
9
+ {
10
+ "kind": "variable",
11
+ "name": "muiDocs",
12
+ "type": {
13
+ "text": "MuiDocs"
14
+ },
15
+ "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\" }, ], }, }, }"
16
+ }
17
+ ],
18
+ "exports": [
19
+ {
20
+ "kind": "js",
21
+ "name": "muiDocs",
22
+ "declaration": {
23
+ "name": "muiDocs",
24
+ "module": "src/components/mui-accordion/doc.ts"
25
+ }
26
+ }
27
+ ]
28
+ },
29
+ {
30
+ "kind": "javascript-module",
31
+ "path": "src/components/mui-accordion/index.ts",
32
+ "declarations": [],
33
+ "exports": []
34
+ },
5
35
  {
6
36
  "kind": "javascript-module",
7
37
  "path": "src/components/mui-addon/doc.ts",
@@ -71,36 +101,6 @@
71
101
  }
72
102
  ]
73
103
  },
74
- {
75
- "kind": "javascript-module",
76
- "path": "src/components/mui-accordion/doc.ts",
77
- "declarations": [
78
- {
79
- "kind": "variable",
80
- "name": "muiDocs",
81
- "type": {
82
- "text": "MuiDocs"
83
- },
84
- "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\" }, ], }, }, }"
85
- }
86
- ],
87
- "exports": [
88
- {
89
- "kind": "js",
90
- "name": "muiDocs",
91
- "declaration": {
92
- "name": "muiDocs",
93
- "module": "src/components/mui-accordion/doc.ts"
94
- }
95
- }
96
- ]
97
- },
98
- {
99
- "kind": "javascript-module",
100
- "path": "src/components/mui-accordion/index.ts",
101
- "declarations": [],
102
- "exports": []
103
- },
104
104
  {
105
105
  "kind": "javascript-module",
106
106
  "path": "src/components/mui-alert/doc.ts",
@@ -245,7 +245,7 @@
245
245
  },
246
246
  {
247
247
  "kind": "javascript-module",
248
- "path": "src/components/mui-badge/doc.ts",
248
+ "path": "src/components/mui-avatar/doc.ts",
249
249
  "declarations": [
250
250
  {
251
251
  "kind": "variable",
@@ -253,7 +253,7 @@
253
253
  "type": {
254
254
  "text": "MuiDocs"
255
255
  },
256
- "default": "{ Badge: { title: \"Badge\", description: \"Badges are non-interactive and indicate counts or statuses.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/3uhL6lnJTEY4LtVyMA3og5/7844fa7e691b9f97e3c335e1a978e881/Badge_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=3-1108&t=FSv3FEahG8VQW1FZ-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/feedback-badge--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-badge/index.ts\"], website: [\"https://muibook.com/#/badge\"], guides: [\"https://guides.muibook.com/badge\"], usage: { list: [ \"Show the number of unread notifications E.g. '4' unread messages\", \"Indicate the status of a user – E.g. Online, Busy, or Away\", \"Use size variants (xx-small, x-small, small, medium, large) to match surrounding component scale.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"], }, anatomy: { image: \"\", list: [\"\"], }, variants: { items: [ { key: \"default\", title: \"default\", description: \"Used for data that is visually in the foreground.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3Xgz2qoLs8NACel4fRr9iC/52699b5763f1efd4853a9ffb991b3ff3/badge-default.png\", }, { key: \"positive\", title: \"positive\", description: \"For positive or completed statuses.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/65RMIuUEUIzusbSAwqLQcI/63edb290041c708fc69d0d27fc49e25d/badge-positive.png\", }, { key: \"warning\", title: \"warning\", description: \"For urgent or important statuses.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/5AFfOShVyTEKO1wgIe6rYv/e809c76ddabdfd9789adc31a26becf83/badge-warning.png\", }, { key: \"error\", title: \"error\", description: \"Represents an error, issue or critical state.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/E0jtn7WSTwYligMqSNl0k/c3c041e025c3725682ec12eb3ab98400/badge-error.png\", }, { key: \"overlay\", title: \"overlay\", description: \"For labels placed on media/image surfaces with stronger contrast.\", image: \"\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"outcome-based-roadmap\", name: \"Outcome-Based Roadmap\", description: \"Example of an Outcome-Based Roadmap page showing objectives organised into Upcoming, Doing, and Finished columns. Progress bars indicate the completion status of each task, providing a clear view of overall progress.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3w5htPtfEz7QMCH9alVcwf/de35725fb4542b891bd695b900195291/Outcomes-Progress-Composition.png\", }, { key: \"compliance-dashboard-table\", name: \"Compliance Dashboard Table\", description: \"This example shows a desktop view of a table used within an accounting compliance dashboard.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3vUKA5C5iJ3LvjLwf2WiO9/274ffe423dbe828244294f6809172ce1/table-composition-compliance-dashboard.png\", }, { key: \"carousel-showcase\", name: \"Carousel Showcase\", description: \"This example from the GuruSuite website demonstrates the carousel used to showcase two of the products on offer.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2TaRRm351HyujF9mT2w1wH/3958f69e939d20618751742130dc5f06/GuruSuite-Carousel-Composition.png\", }, { key: \"outcomes-roadmap-dashboard\", name: \"Outcomes Roadmap Dashboard\", description: \"Example of the responsive component in the Outcomes Roadmap Dashboard, demonstrating layout, title, and padding adjustments across breakpoints.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3FsXandRr1Z9BAKv33twxT/b0d0e4a8b6237bf7d38660111bceb8ab/responsive-composition.gif\", }, ], }, related: { items: [ { name: \"Button\", link: \"https://guides.muibook.com/button\", }, { name: \"Link\", link: \"https://guides.muibook.com/link\", }, { name: \"Tab Bar\", link: \"https://guides.muibook.com/tab-bar\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
256
+ "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: [\"\"], }, }, }"
257
257
  }
258
258
  ],
259
259
  "exports": [
@@ -262,20 +262,48 @@
262
262
  "name": "muiDocs",
263
263
  "declaration": {
264
264
  "name": "muiDocs",
265
- "module": "src/components/mui-badge/doc.ts"
265
+ "module": "src/components/mui-avatar/doc.ts"
266
266
  }
267
267
  }
268
268
  ]
269
269
  },
270
270
  {
271
271
  "kind": "javascript-module",
272
- "path": "src/components/mui-badge/index.ts",
272
+ "path": "src/components/mui-avatar/index.ts",
273
273
  "declarations": [
274
274
  {
275
275
  "kind": "class",
276
276
  "description": "",
277
- "name": "MuiBadge",
277
+ "name": "MuiAvatar",
278
278
  "members": [
279
+ {
280
+ "kind": "field",
281
+ "name": "_imageFailed",
282
+ "type": {
283
+ "text": "boolean | undefined"
284
+ },
285
+ "privacy": "private"
286
+ },
287
+ {
288
+ "kind": "method",
289
+ "name": "hasSlottedContent"
290
+ },
291
+ {
292
+ "kind": "method",
293
+ "name": "getInitials",
294
+ "parameters": [
295
+ {
296
+ "name": "label",
297
+ "type": {
298
+ "text": "string | null"
299
+ }
300
+ }
301
+ ]
302
+ },
303
+ {
304
+ "kind": "method",
305
+ "name": "getBackgroundCSS"
306
+ },
279
307
  {
280
308
  "kind": "method",
281
309
  "name": "render"
@@ -283,33 +311,42 @@
283
311
  ],
284
312
  "attributes": [
285
313
  {
286
- "name": "variant"
314
+ "name": "label"
315
+ },
316
+ {
317
+ "name": "image"
287
318
  },
288
319
  {
289
320
  "name": "size"
321
+ },
322
+ {
323
+ "name": "background"
324
+ },
325
+ {
326
+ "name": "background-color"
290
327
  }
291
328
  ],
292
329
  "superclass": {
293
330
  "name": "HTMLElement"
294
331
  },
295
- "tagName": "mui-badge",
332
+ "tagName": "mui-avatar",
296
333
  "customElement": true
297
334
  }
298
335
  ],
299
336
  "exports": [
300
337
  {
301
338
  "kind": "custom-element-definition",
302
- "name": "mui-badge",
339
+ "name": "mui-avatar",
303
340
  "declaration": {
304
- "name": "MuiBadge",
305
- "module": "src/components/mui-badge/index.ts"
341
+ "name": "MuiAvatar",
342
+ "module": "src/components/mui-avatar/index.ts"
306
343
  }
307
344
  }
308
345
  ]
309
346
  },
310
347
  {
311
348
  "kind": "javascript-module",
312
- "path": "src/components/mui-body/doc.ts",
349
+ "path": "src/components/mui-badge/doc.ts",
313
350
  "declarations": [
314
351
  {
315
352
  "kind": "variable",
@@ -317,7 +354,7 @@
317
354
  "type": {
318
355
  "text": "MuiDocs"
319
356
  },
320
- "default": "{ Body: { title: \"Body\", description: \"Use the Body component for clear and readable paragraph text across the UI. It’s ideal for longer-form content such as descriptions, explanations, or supporting information. Variant styles are also available for status messages and other contextual needs.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/GGmtyOnGHBMGMrvkPTWSL/2c6ff12702d76c1393b2315b19728aa3/Body_-_Home_Image.png\", ], figma: [\"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=3-892&t=fSFYVey9aCoE5oQa-1\"], storybook: [\"https://stories.muibook.com/?path=/docs/content-body--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-body/index.ts\"], website: [\"https://muibook.com/#/button\"], guides: [\"https://guides.muibook.com/body\"], usage: { list: [ \"Use for supporting content or descriptions.\", \"Use states like Default, Success, Warning and Error to align with feedback or messaging contexts.\", \"Match the body size to the layout’s overall design and readability.\", \"Adjust the size by selecting x-small, small, medium or large.\", \"Use before/after slots to compose inline icons, badges, or helper UI with body text.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"], }, anatomy: { image: \"\", list: [\"\"], }, variants: { items: [ { key: \"default\", title: \"Default\", description: \"Standard body text with x-small, small, medium and large for tailored readability. In addition to the size, font weight of regular and bold is available.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2NAalFsBAkeBz69hO093eb/b9390132c50df11749aaa47dafdb2b93/default.png\", }, { key: \"optional\", title: \"Optional\", description: \"Optional text is visually lighter, providing subtle contrast to Standard body text. It comes in four sizes—x-small, small, medium, and large—for tailored readability. Font weights of regular and bold are also available, giving flexibility for emphasis or hierarchy.\", image: \"\", }, { key: \"success\", title: \"Success\", description: \"Indicates positive feedback with the option of x-small, small, medium and large for tailored readability. In addition to the size, font weight of regular and bold is available.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/8RChklU9yHSY7PTJH0JLD/c72f630006f2be4e7f1d850d7510c92f/success.png\", }, { key: \"warning\", title: \"Warning\", description: \"Highlights warning messages with the option of x-small, small, medium, and large for tailored readability. In addition to the size, font weight of regular and bold is available.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2UJaVEXU2fbKPi3L7afjt/e82b06ef54e92cf2d6f6e984d8a27079/warning.png\", }, { key: \"error\", title: \"Error\", description: \"Highlights error messages with the option of x-small, small, medium, and large for tailored readability. In addition to the size, font weight of regular and bold is available.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/egb4l4ubM0A6T44xAxDgz/5d94fa59f0069b689da537710650e22b/error.png\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"muibook-resource\", name: \"Muibook Resource\", description: \"The Muibook documentation site uses MUI components to compose its layout, including headings, text, lists, buttons, icons, and image components.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3LVvuYDZWRnMhxNy6GMLNd/c5074a05eacb2c22c50ea172b3567c48/Muibook-List-Composition.png\", }, { key: \"outcomes-roadmap-dashboard\", name: \"Outcomes Roadmap Dashboard\", description: \"Example of the responsive component in the Outcomes Roadmap Dashboard, demonstrating layout, title, and padding adjustments across breakpoints.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3FsXandRr1Z9BAKv33twxT/b0d0e4a8b6237bf7d38660111bceb8ab/responsive-composition.gif\", }, { key: \"outcome-based-roadmap\", name: \"Outcome-Based Roadmap\", description: \"Example of an Outcome-Based Roadmap page showing objectives organised into Upcoming, Doing, and Finished columns. Progress bars indicate the completion status of each task, providing a clear view of overall progress.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3w5htPtfEz7QMCH9alVcwf/de35725fb4542b891bd695b900195291/Outcomes-Progress-Composition.png\", }, ], }, related: { items: [ { name: \"Heading\", link: \"https://guides.muibook.com/heading\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
357
+ "default": "{ Badge: { title: \"Badge\", description: \"Badges are non-interactive and indicate counts or statuses.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/3uhL6lnJTEY4LtVyMA3og5/7844fa7e691b9f97e3c335e1a978e881/Badge_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=3-1108&t=FSv3FEahG8VQW1FZ-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/feedback-badge--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-badge/index.ts\"], website: [\"https://muibook.com/#/badge\"], guides: [\"https://guides.muibook.com/badge\"], usage: { list: [ \"Show the number of unread notifications E.g. '4' unread messages\", \"Indicate the status of a user E.g. Online, Busy, or Away\", \"Use size variants (xx-small, x-small, small, medium, large) to match surrounding component scale.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"], }, anatomy: { image: \"\", list: [\"\"], }, variants: { items: [ { key: \"default\", title: \"default\", description: \"Used for data that is visually in the foreground.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3Xgz2qoLs8NACel4fRr9iC/52699b5763f1efd4853a9ffb991b3ff3/badge-default.png\", }, { key: \"positive\", title: \"positive\", description: \"For positive or completed statuses.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/65RMIuUEUIzusbSAwqLQcI/63edb290041c708fc69d0d27fc49e25d/badge-positive.png\", }, { key: \"warning\", title: \"warning\", description: \"For urgent or important statuses.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/5AFfOShVyTEKO1wgIe6rYv/e809c76ddabdfd9789adc31a26becf83/badge-warning.png\", }, { key: \"error\", title: \"error\", description: \"Represents an error, issue or critical state.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/E0jtn7WSTwYligMqSNl0k/c3c041e025c3725682ec12eb3ab98400/badge-error.png\", }, { key: \"overlay\", title: \"overlay\", description: \"For labels placed on media/image surfaces with stronger contrast.\", image: \"\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"outcome-based-roadmap\", name: \"Outcome-Based Roadmap\", description: \"Example of an Outcome-Based Roadmap page showing objectives organised into Upcoming, Doing, and Finished columns. Progress bars indicate the completion status of each task, providing a clear view of overall progress.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3w5htPtfEz7QMCH9alVcwf/de35725fb4542b891bd695b900195291/Outcomes-Progress-Composition.png\", }, { key: \"compliance-dashboard-table\", name: \"Compliance Dashboard Table\", description: \"This example shows a desktop view of a table used within an accounting compliance dashboard.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3vUKA5C5iJ3LvjLwf2WiO9/274ffe423dbe828244294f6809172ce1/table-composition-compliance-dashboard.png\", }, { key: \"carousel-showcase\", name: \"Carousel Showcase\", description: \"This example from the GuruSuite website demonstrates the carousel used to showcase two of the products on offer.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2TaRRm351HyujF9mT2w1wH/3958f69e939d20618751742130dc5f06/GuruSuite-Carousel-Composition.png\", }, { key: \"outcomes-roadmap-dashboard\", name: \"Outcomes Roadmap Dashboard\", description: \"Example of the responsive component in the Outcomes Roadmap Dashboard, demonstrating layout, title, and padding adjustments across breakpoints.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3FsXandRr1Z9BAKv33twxT/b0d0e4a8b6237bf7d38660111bceb8ab/responsive-composition.gif\", }, ], }, related: { items: [ { name: \"Button\", link: \"https://guides.muibook.com/button\", }, { name: \"Link\", link: \"https://guides.muibook.com/link\", }, { name: \"Tab Bar\", link: \"https://guides.muibook.com/tab-bar\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
321
358
  }
322
359
  ],
323
360
  "exports": [
@@ -326,84 +363,54 @@
326
363
  "name": "muiDocs",
327
364
  "declaration": {
328
365
  "name": "muiDocs",
329
- "module": "src/components/mui-body/doc.ts"
366
+ "module": "src/components/mui-badge/doc.ts"
330
367
  }
331
368
  }
332
369
  ]
333
370
  },
334
371
  {
335
372
  "kind": "javascript-module",
336
- "path": "src/components/mui-body/index.ts",
373
+ "path": "src/components/mui-badge/index.ts",
337
374
  "declarations": [
338
375
  {
339
376
  "kind": "class",
340
377
  "description": "",
341
- "name": "MuiBody",
378
+ "name": "MuiBadge",
342
379
  "members": [
343
380
  {
344
381
  "kind": "method",
345
382
  "name": "render"
346
- },
347
- {
348
- "kind": "method",
349
- "name": "setupSlotBehavior",
350
- "privacy": "private"
351
- },
352
- {
353
- "kind": "method",
354
- "name": "syncInlineSlotSizes",
355
- "privacy": "private",
356
- "parameters": [
357
- {
358
- "name": "elements",
359
- "type": {
360
- "text": "Element[]"
361
- }
362
- }
363
- ]
364
- },
365
- {
366
- "kind": "method",
367
- "name": "waitForPartMap",
368
- "return": {
369
- "type": {
370
- "text": "Promise<void>"
371
- }
372
- }
373
383
  }
374
384
  ],
375
385
  "attributes": [
376
386
  {
377
- "name": "size"
378
- },
379
- {
380
- "name": "weight"
387
+ "name": "variant"
381
388
  },
382
389
  {
383
- "name": "variant"
390
+ "name": "size"
384
391
  }
385
392
  ],
386
393
  "superclass": {
387
394
  "name": "HTMLElement"
388
395
  },
389
- "tagName": "mui-body",
396
+ "tagName": "mui-badge",
390
397
  "customElement": true
391
398
  }
392
399
  ],
393
400
  "exports": [
394
401
  {
395
402
  "kind": "custom-element-definition",
396
- "name": "mui-body",
403
+ "name": "mui-badge",
397
404
  "declaration": {
398
- "name": "MuiBody",
399
- "module": "src/components/mui-body/index.ts"
405
+ "name": "MuiBadge",
406
+ "module": "src/components/mui-badge/index.ts"
400
407
  }
401
408
  }
402
409
  ]
403
410
  },
404
411
  {
405
412
  "kind": "javascript-module",
406
- "path": "src/components/mui-avatar/doc.ts",
413
+ "path": "src/components/mui-body/doc.ts",
407
414
  "declarations": [
408
415
  {
409
416
  "kind": "variable",
@@ -411,7 +418,7 @@
411
418
  "type": {
412
419
  "text": "MuiDocs"
413
420
  },
414
- "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: [\"\"], }, }, }"
421
+ "default": "{ Body: { title: \"Body\", description: \"Use the Body component for clear and readable paragraph text across the UI. It’s ideal for longer-form content such as descriptions, explanations, or supporting information. Variant styles are also available for status messages and other contextual needs.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/GGmtyOnGHBMGMrvkPTWSL/2c6ff12702d76c1393b2315b19728aa3/Body_-_Home_Image.png\", ], figma: [\"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=3-892&t=fSFYVey9aCoE5oQa-1\"], storybook: [\"https://stories.muibook.com/?path=/docs/content-body--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-body/index.ts\"], website: [\"https://muibook.com/#/button\"], guides: [\"https://guides.muibook.com/body\"], usage: { list: [ \"Use for supporting content or descriptions.\", \"Use states like Default, Success, Warning and Error to align with feedback or messaging contexts.\", \"Match the body size to the layout’s overall design and readability.\", \"Adjust the size by selecting x-small, small, medium or large.\", \"Use before/after slots to compose inline icons, badges, or helper UI with body text.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"], }, anatomy: { image: \"\", list: [\"\"], }, variants: { items: [ { key: \"default\", title: \"Default\", description: \"Standard body text with x-small, small, medium and large for tailored readability. In addition to the size, font weight of regular and bold is available.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2NAalFsBAkeBz69hO093eb/b9390132c50df11749aaa47dafdb2b93/default.png\", }, { key: \"optional\", title: \"Optional\", description: \"Optional text is visually lighter, providing subtle contrast to Standard body text. It comes in four sizes—x-small, small, medium, and large—for tailored readability. Font weights of regular and bold are also available, giving flexibility for emphasis or hierarchy.\", image: \"\", }, { key: \"success\", title: \"Success\", description: \"Indicates positive feedback with the option of x-small, small, medium and large for tailored readability. In addition to the size, font weight of regular and bold is available.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/8RChklU9yHSY7PTJH0JLD/c72f630006f2be4e7f1d850d7510c92f/success.png\", }, { key: \"warning\", title: \"Warning\", description: \"Highlights warning messages with the option of x-small, small, medium, and large for tailored readability. In addition to the size, font weight of regular and bold is available.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2UJaVEXU2fbKPi3L7afjt/e82b06ef54e92cf2d6f6e984d8a27079/warning.png\", }, { key: \"error\", title: \"Error\", description: \"Highlights error messages with the option of x-small, small, medium, and large for tailored readability. In addition to the size, font weight of regular and bold is available.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/egb4l4ubM0A6T44xAxDgz/5d94fa59f0069b689da537710650e22b/error.png\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"muibook-resource\", name: \"Muibook Resource\", description: \"The Muibook documentation site uses MUI components to compose its layout, including headings, text, lists, buttons, icons, and image components.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3LVvuYDZWRnMhxNy6GMLNd/c5074a05eacb2c22c50ea172b3567c48/Muibook-List-Composition.png\", }, { key: \"outcomes-roadmap-dashboard\", name: \"Outcomes Roadmap Dashboard\", description: \"Example of the responsive component in the Outcomes Roadmap Dashboard, demonstrating layout, title, and padding adjustments across breakpoints.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3FsXandRr1Z9BAKv33twxT/b0d0e4a8b6237bf7d38660111bceb8ab/responsive-composition.gif\", }, { key: \"outcome-based-roadmap\", name: \"Outcome-Based Roadmap\", description: \"Example of an Outcome-Based Roadmap page showing objectives organised into Upcoming, Doing, and Finished columns. Progress bars indicate the completion status of each task, providing a clear view of overall progress.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3w5htPtfEz7QMCH9alVcwf/de35725fb4542b891bd695b900195291/Outcomes-Progress-Composition.png\", }, ], }, related: { items: [ { name: \"Heading\", link: \"https://guides.muibook.com/heading\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
415
422
  }
416
423
  ],
417
424
  "exports": [
@@ -420,84 +427,77 @@
420
427
  "name": "muiDocs",
421
428
  "declaration": {
422
429
  "name": "muiDocs",
423
- "module": "src/components/mui-avatar/doc.ts"
430
+ "module": "src/components/mui-body/doc.ts"
424
431
  }
425
432
  }
426
433
  ]
427
434
  },
428
435
  {
429
436
  "kind": "javascript-module",
430
- "path": "src/components/mui-avatar/index.ts",
437
+ "path": "src/components/mui-body/index.ts",
431
438
  "declarations": [
432
439
  {
433
440
  "kind": "class",
434
441
  "description": "",
435
- "name": "MuiAvatar",
442
+ "name": "MuiBody",
436
443
  "members": [
437
444
  {
438
- "kind": "field",
439
- "name": "_imageFailed",
440
- "type": {
441
- "text": "boolean | undefined"
442
- },
443
- "privacy": "private"
445
+ "kind": "method",
446
+ "name": "render"
444
447
  },
445
448
  {
446
449
  "kind": "method",
447
- "name": "hasSlottedContent"
450
+ "name": "setupSlotBehavior",
451
+ "privacy": "private"
448
452
  },
449
453
  {
450
454
  "kind": "method",
451
- "name": "getInitials",
455
+ "name": "syncInlineSlotSizes",
456
+ "privacy": "private",
452
457
  "parameters": [
453
458
  {
454
- "name": "label",
459
+ "name": "elements",
455
460
  "type": {
456
- "text": "string | null"
461
+ "text": "Element[]"
457
462
  }
458
463
  }
459
464
  ]
460
465
  },
461
466
  {
462
467
  "kind": "method",
463
- "name": "getBackgroundCSS"
464
- },
465
- {
466
- "kind": "method",
467
- "name": "render"
468
+ "name": "waitForPartMap",
469
+ "return": {
470
+ "type": {
471
+ "text": "Promise<void>"
472
+ }
473
+ }
468
474
  }
469
475
  ],
470
476
  "attributes": [
471
- {
472
- "name": "label"
473
- },
474
- {
475
- "name": "image"
476
- },
477
477
  {
478
478
  "name": "size"
479
479
  },
480
480
  {
481
- "name": "background"
481
+ "name": "weight"
482
482
  },
483
483
  {
484
- "name": "background-color"
484
+ "name": "variant"
485
485
  }
486
486
  ],
487
487
  "superclass": {
488
488
  "name": "HTMLElement"
489
489
  },
490
- "tagName": "mui-avatar",
490
+ "tagName": "mui-body",
491
491
  "customElement": true
492
492
  }
493
493
  ],
494
494
  "exports": [
495
495
  {
496
496
  "kind": "custom-element-definition",
497
- "name": "mui-avatar",
497
+ "name": "mui-body",
498
498
  "declaration": {
499
- "name": "MuiAvatar",
500
- "module": "src/components/mui-avatar/index.ts"
499
+ "name": "MuiBody",
500
+ "module": "src/components/mui-body/index.ts"
501
501
  }
502
502
  }
503
503
  ]
@@ -2702,7 +2702,7 @@
2702
2702
  },
2703
2703
  {
2704
2704
  "kind": "javascript-module",
2705
- "path": "src/components/mui-grid/doc.ts",
2705
+ "path": "src/components/mui-form-section-footer/doc.ts",
2706
2706
  "declarations": [
2707
2707
  {
2708
2708
  "kind": "variable",
@@ -2710,7 +2710,7 @@
2710
2710
  "type": {
2711
2711
  "text": "MuiDocs"
2712
2712
  },
2713
- "default": "{ Grid: { title: \"Grid\", description: \"A layout helper component that arranges its children into columns based on a defined structure. It is mainly intended for larger page layouts but can also be used for internal layouts or more condensed arrangements.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/5C5SvkEWzifnvzlV9nUjQ1/e3c8e9bce595cda87bc357d76b99bbb8/Grid_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=1059-12709&t=BwezUSymTClm00wJ-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/layout-grid--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-grid/index.ts\"], website: [\"https://muibook.com/#/grid\"], guides: [\"https://guides.muibook.com/grid\"], usage: { list: [ \"Use to organise content into multi-dimensional layouts with columns.\", \"Ideal for aligning items consistently across different screen sizes.\", \"Supports responsive design by adjusting column count, gaps, and alignment at breakpoints.\", \"Recognise it as a developer tool for layout control rather than a direct design asset.\", \"Use the space design token to maintain consistent gap spacing.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"], }, anatomy: { image: \"\", list: [\"\"], }, variants: { description: \"Although not a Figma component (designers should use Figma’s layout grids), understanding this pattern helps designers anticipate how engineers manage complex, responsive layouts.\", items: [ { key: \"two-column\", title: \"Two Column\", description: \"Example of using a two-column layout within the design system, primarily for horizontal use when content needs to be presented side by side.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/6VrpRKckpwss1Wp0AFDA2k/4478ad22d0bf1ced84bd2547e9f31ac3/grid-2.png\", }, { key: \"three-column\", title: \"Three Columns\", description: \"Example of using a three-column layout within the design system, optimized for horizontal use to distribute information evenly across three sections.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/4iRM4fbfFK5iwtp2jetD0v/b1f62c85f3e2575644cc18e0289cd766/grid-3.png\", }, { key: \"custom-column\", title: \"Custom Columns\", description: \"Example of a custom column layout with varied column sizes, demonstrating flexibility for different content arrangements while maintaining a horizontal orientation.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3aXaQVov9cAk0RyzNLNG3Y/ef1d443f1d23e7de08883213f0e805ac/grid-custom.png\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"guidelines-for-muibook\", name: \"Guidelines for Muibook\", description: \"This is an example of the Guidelines website for the Muibook Design System. It demonstrates the use of the <mui-grid> component for layout, along with actions, typography, links, and theme customisation. The page also showcases how components are combined to create consistent and responsive UI patterns across the system.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/5As4gsdVAyJHrbAMkIrlM/dd78a8bfe8a53a600be91b79c2f4e8eb/Guides-Grid-Composition.png\", }, ], }, related: { items: [ { name: \"Stack\", link: \"https://guides.muibook.com/stack\", }, { name: \"Responsive\", link: \"https://guides.muibook.com/responsive\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
2713
+ "default": "{ FormSectionFooter: { title: \"Form Section Footer\", description: \"Footer wrapper for Form Section actions and divider patterns.\", hero: [\"\"], figma: [\"\"], storybook: [\"https://stories.muibook.com\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-form-section-footer/index.ts\"], website: [\"https://muibook.com/#/form-section-footer\"], guides: [\"https://guides.muibook.com/form-section\"], usage: { list: [ \"Use in slot='footer' on mui-form-section for consistent footer spacing.\", \"Place mui-rule first when you need a visual separation before actions.\", \"Keep responsive action layouts inside the footer wrapper.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"Footer actions remain keyboard accessible based on slotted controls.\"], }, anatomy: { image: \"\", list: [\"Footer wrapper\", \"Optional divider (mui-rule)\", \"Action content\"], }, variants: { items: [{ key: \"\", title: \"\", description: \"\", image: \"\" }] }, compositions: { description: \"\", items: [] }, related: { items: [ { name: \"Form Section\", link: \"https://guides.muibook.com/form-section\" }, { name: \"Form Group\", link: \"https://guides.muibook.com/form-group\" }, ], }, rules: [{ heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }] }], behaviour: { list: [\"\"] }, writing: { list: [\"\"] }, }, }"
2714
2714
  }
2715
2715
  ],
2716
2716
  "exports": [
@@ -2719,101 +2719,52 @@
2719
2719
  "name": "muiDocs",
2720
2720
  "declaration": {
2721
2721
  "name": "muiDocs",
2722
- "module": "src/components/mui-grid/doc.ts"
2722
+ "module": "src/components/mui-form-section-footer/doc.ts"
2723
2723
  }
2724
2724
  }
2725
2725
  ]
2726
2726
  },
2727
2727
  {
2728
2728
  "kind": "javascript-module",
2729
- "path": "src/components/mui-grid/index.ts",
2729
+ "path": "src/components/mui-form-section-footer/index.ts",
2730
2730
  "declarations": [
2731
2731
  {
2732
2732
  "kind": "class",
2733
2733
  "description": "",
2734
- "name": "MuiGrid",
2734
+ "name": "MuiFormSectionFooter",
2735
2735
  "members": [
2736
2736
  {
2737
2737
  "kind": "field",
2738
- "name": "col",
2739
- "type": {
2740
- "text": "string"
2741
- },
2742
- "privacy": "private",
2743
- "default": "`1fr 1fr`"
2744
- },
2745
- {
2746
- "kind": "field",
2747
- "name": "space",
2748
- "type": {
2749
- "text": "string"
2750
- },
2751
- "privacy": "private",
2752
- "default": "`var(--space-000)`"
2753
- },
2754
- {
2755
- "kind": "field",
2756
- "name": "alignX",
2757
- "type": {
2758
- "text": "string"
2759
- },
2760
- "privacy": "private",
2761
- "default": "`normal`"
2762
- },
2763
- {
2764
- "kind": "field",
2765
- "name": "alignY",
2766
- "type": {
2767
- "text": "string"
2768
- },
2769
- "privacy": "private",
2770
- "default": "`normal`"
2738
+ "name": "onSlotChange",
2739
+ "privacy": "private"
2771
2740
  },
2772
2741
  {
2773
2742
  "kind": "method",
2774
- "name": "waitForPartMap",
2775
- "return": {
2776
- "type": {
2777
- "text": "Promise<void>"
2778
- }
2779
- }
2780
- }
2781
- ],
2782
- "attributes": [
2783
- {
2784
- "name": "col"
2785
- },
2786
- {
2787
- "name": "space"
2788
- },
2789
- {
2790
- "name": "alignx"
2791
- },
2792
- {
2793
- "name": "aligny"
2743
+ "name": "render",
2744
+ "privacy": "private"
2794
2745
  }
2795
2746
  ],
2796
2747
  "superclass": {
2797
2748
  "name": "HTMLElement"
2798
2749
  },
2799
- "tagName": "mui-grid",
2750
+ "tagName": "mui-form-section-footer",
2800
2751
  "customElement": true
2801
2752
  }
2802
2753
  ],
2803
2754
  "exports": [
2804
2755
  {
2805
2756
  "kind": "custom-element-definition",
2806
- "name": "mui-grid",
2757
+ "name": "mui-form-section-footer",
2807
2758
  "declaration": {
2808
- "name": "MuiGrid",
2809
- "module": "src/components/mui-grid/index.ts"
2759
+ "name": "MuiFormSectionFooter",
2760
+ "module": "src/components/mui-form-section-footer/index.ts"
2810
2761
  }
2811
2762
  }
2812
2763
  ]
2813
2764
  },
2814
2765
  {
2815
2766
  "kind": "javascript-module",
2816
- "path": "src/components/mui-form-section-footer/doc.ts",
2767
+ "path": "src/components/mui-grid/doc.ts",
2817
2768
  "declarations": [
2818
2769
  {
2819
2770
  "kind": "variable",
@@ -2821,7 +2772,7 @@
2821
2772
  "type": {
2822
2773
  "text": "MuiDocs"
2823
2774
  },
2824
- "default": "{ FormSectionFooter: { title: \"Form Section Footer\", description: \"Footer wrapper for Form Section actions and divider patterns.\", hero: [\"\"], figma: [\"\"], storybook: [\"https://stories.muibook.com\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-form-section-footer/index.ts\"], website: [\"https://muibook.com/#/form-section-footer\"], guides: [\"https://guides.muibook.com/form-section\"], usage: { list: [ \"Use in slot='footer' on mui-form-section for consistent footer spacing.\", \"Place mui-rule first when you need a visual separation before actions.\", \"Keep responsive action layouts inside the footer wrapper.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"Footer actions remain keyboard accessible based on slotted controls.\"], }, anatomy: { image: \"\", list: [\"Footer wrapper\", \"Optional divider (mui-rule)\", \"Action content\"], }, variants: { items: [{ key: \"\", title: \"\", description: \"\", image: \"\" }] }, compositions: { description: \"\", items: [] }, related: { items: [ { name: \"Form Section\", link: \"https://guides.muibook.com/form-section\" }, { name: \"Form Group\", link: \"https://guides.muibook.com/form-group\" }, ], }, rules: [{ heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }] }], behaviour: { list: [\"\"] }, writing: { list: [\"\"] }, }, }"
2775
+ "default": "{ Grid: { title: \"Grid\", description: \"A layout helper component that arranges its children into columns based on a defined structure. It is mainly intended for larger page layouts but can also be used for internal layouts or more condensed arrangements.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/5C5SvkEWzifnvzlV9nUjQ1/e3c8e9bce595cda87bc357d76b99bbb8/Grid_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=1059-12709&t=BwezUSymTClm00wJ-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/layout-grid--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-grid/index.ts\"], website: [\"https://muibook.com/#/grid\"], guides: [\"https://guides.muibook.com/grid\"], usage: { list: [ \"Use to organise content into multi-dimensional layouts with columns.\", \"Ideal for aligning items consistently across different screen sizes.\", \"Supports responsive design by adjusting column count, gaps, and alignment at breakpoints.\", \"Recognise it as a developer tool for layout control rather than a direct design asset.\", \"Use the space design token to maintain consistent gap spacing.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"], }, anatomy: { image: \"\", list: [\"\"], }, variants: { description: \"Although not a Figma component (designers should use Figma’s layout grids), understanding this pattern helps designers anticipate how engineers manage complex, responsive layouts.\", items: [ { key: \"two-column\", title: \"Two Column\", description: \"Example of using a two-column layout within the design system, primarily for horizontal use when content needs to be presented side by side.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/6VrpRKckpwss1Wp0AFDA2k/4478ad22d0bf1ced84bd2547e9f31ac3/grid-2.png\", }, { key: \"three-column\", title: \"Three Columns\", description: \"Example of using a three-column layout within the design system, optimized for horizontal use to distribute information evenly across three sections.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/4iRM4fbfFK5iwtp2jetD0v/b1f62c85f3e2575644cc18e0289cd766/grid-3.png\", }, { key: \"custom-column\", title: \"Custom Columns\", description: \"Example of a custom column layout with varied column sizes, demonstrating flexibility for different content arrangements while maintaining a horizontal orientation.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3aXaQVov9cAk0RyzNLNG3Y/ef1d443f1d23e7de08883213f0e805ac/grid-custom.png\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"guidelines-for-muibook\", name: \"Guidelines for Muibook\", description: \"This is an example of the Guidelines website for the Muibook Design System. It demonstrates the use of the <mui-grid> component for layout, along with actions, typography, links, and theme customisation. The page also showcases how components are combined to create consistent and responsive UI patterns across the system.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/5As4gsdVAyJHrbAMkIrlM/dd78a8bfe8a53a600be91b79c2f4e8eb/Guides-Grid-Composition.png\", }, ], }, related: { items: [ { name: \"Stack\", link: \"https://guides.muibook.com/stack\", }, { name: \"Responsive\", link: \"https://guides.muibook.com/responsive\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
2825
2776
  }
2826
2777
  ],
2827
2778
  "exports": [
@@ -2830,45 +2781,94 @@
2830
2781
  "name": "muiDocs",
2831
2782
  "declaration": {
2832
2783
  "name": "muiDocs",
2833
- "module": "src/components/mui-form-section-footer/doc.ts"
2784
+ "module": "src/components/mui-grid/doc.ts"
2834
2785
  }
2835
2786
  }
2836
2787
  ]
2837
2788
  },
2838
2789
  {
2839
2790
  "kind": "javascript-module",
2840
- "path": "src/components/mui-form-section-footer/index.ts",
2791
+ "path": "src/components/mui-grid/index.ts",
2841
2792
  "declarations": [
2842
2793
  {
2843
2794
  "kind": "class",
2844
2795
  "description": "",
2845
- "name": "MuiFormSectionFooter",
2796
+ "name": "MuiGrid",
2846
2797
  "members": [
2847
2798
  {
2848
2799
  "kind": "field",
2849
- "name": "onSlotChange",
2850
- "privacy": "private"
2800
+ "name": "col",
2801
+ "type": {
2802
+ "text": "string"
2803
+ },
2804
+ "privacy": "private",
2805
+ "default": "`1fr 1fr`"
2806
+ },
2807
+ {
2808
+ "kind": "field",
2809
+ "name": "space",
2810
+ "type": {
2811
+ "text": "string"
2812
+ },
2813
+ "privacy": "private",
2814
+ "default": "`var(--space-000)`"
2815
+ },
2816
+ {
2817
+ "kind": "field",
2818
+ "name": "alignX",
2819
+ "type": {
2820
+ "text": "string"
2821
+ },
2822
+ "privacy": "private",
2823
+ "default": "`normal`"
2824
+ },
2825
+ {
2826
+ "kind": "field",
2827
+ "name": "alignY",
2828
+ "type": {
2829
+ "text": "string"
2830
+ },
2831
+ "privacy": "private",
2832
+ "default": "`normal`"
2851
2833
  },
2852
2834
  {
2853
2835
  "kind": "method",
2854
- "name": "render",
2855
- "privacy": "private"
2836
+ "name": "waitForPartMap",
2837
+ "return": {
2838
+ "type": {
2839
+ "text": "Promise<void>"
2840
+ }
2841
+ }
2842
+ }
2843
+ ],
2844
+ "attributes": [
2845
+ {
2846
+ "name": "col"
2847
+ },
2848
+ {
2849
+ "name": "space"
2850
+ },
2851
+ {
2852
+ "name": "alignx"
2853
+ },
2854
+ {
2855
+ "name": "aligny"
2856
2856
  }
2857
2857
  ],
2858
2858
  "superclass": {
2859
2859
  "name": "HTMLElement"
2860
2860
  },
2861
- "tagName": "mui-form-section-footer",
2861
+ "tagName": "mui-grid",
2862
2862
  "customElement": true
2863
2863
  }
2864
2864
  ],
2865
2865
  "exports": [
2866
2866
  {
2867
2867
  "kind": "custom-element-definition",
2868
- "name": "mui-form-section-footer",
2868
+ "name": "mui-grid",
2869
2869
  "declaration": {
2870
- "name": "MuiFormSectionFooter",
2871
- "module": "src/components/mui-form-section-footer/index.ts"
2870
+ "name": "MuiGrid",
2871
+ "module": "src/components/mui-grid/index.ts"
2872
2872
  }
2873
2873
  }
2874
2874
  ]
@@ -5805,36 +5805,6 @@
5805
5805
  }
5806
5806
  ]
5807
5807
  },
5808
- {
5809
- "kind": "javascript-module",
5810
- "path": "src/components/mui-list/doc.ts",
5811
- "declarations": [
5812
- {
5813
- "kind": "variable",
5814
- "name": "muiDocs",
5815
- "type": {
5816
- "text": "MuiDocs"
5817
- },
5818
- "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: [\"\"], }, }, }"
5819
- }
5820
- ],
5821
- "exports": [
5822
- {
5823
- "kind": "js",
5824
- "name": "muiDocs",
5825
- "declaration": {
5826
- "name": "muiDocs",
5827
- "module": "src/components/mui-list/doc.ts"
5828
- }
5829
- }
5830
- ]
5831
- },
5832
- {
5833
- "kind": "javascript-module",
5834
- "path": "src/components/mui-list/index.ts",
5835
- "declarations": [],
5836
- "exports": []
5837
- },
5838
5808
  {
5839
5809
  "kind": "javascript-module",
5840
5810
  "path": "src/components/mui-loader/doc.ts",
@@ -5907,7 +5877,7 @@
5907
5877
  },
5908
5878
  {
5909
5879
  "kind": "javascript-module",
5910
- "path": "src/components/mui-media-player/doc.ts",
5880
+ "path": "src/components/mui-list/doc.ts",
5911
5881
  "declarations": [
5912
5882
  {
5913
5883
  "kind": "variable",
@@ -5915,7 +5885,7 @@
5915
5885
  "type": {
5916
5886
  "text": "MuiDocs"
5917
5887
  },
5918
- "default": "{ MediaPlayer: { title: \"Media Player\", description: \"Media Player renders native audio/video and provider embeds (YouTube, SoundCloud) from a single src input. This is a new exploration for the system and will iterate over time.\", hero: [\"\"], figma: [\"\"], storybook: [\"https://stories.muibook.com\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-media-player/index.ts\"], website: [\"https://muibook.com/#/media-player\"], guides: [\"https://guides.muibook.com/prompt\"], usage: { list: [ \"Use for pasted media links when you want consistent in-product preview behavior.\", \"Rely on auto-detection for YouTube, SoundCloud, mp4/webm, and mp3/wav links.\", \"Set type only when you need to force a specific renderer.\", \"Native media controls include a seek-time hover bubble and a clickable time mode toggle (elapsed/total and remaining/total).\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"Provide meaningful context around media purpose and avoid autoplay unless required.\"], }, anatomy: { image: \"\", list: [\"Media frame\", \"Native controls (video/audio)\", \"Progress/time row (native only)\"] }, variants: { items: [{ key: \"\", title: \"\", description: \"\", image: \"\" }] }, compositions: { description: \"\", items: [] }, related: { items: [ { name: \"Prompt\", link: \"https://guides.muibook.com/prompt\" }, { name: \"Prompt Preview\", link: \"https://guides.muibook.com/prompt-preview\" }, ], }, rules: [{ heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }] }], behaviour: { list: [\"\"] }, writing: { list: [\"\"] }, }, }"
5888
+ "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: [\"\"], }, }, }"
5919
5889
  }
5920
5890
  ],
5921
5891
  "exports": [
@@ -5924,50 +5894,108 @@
5924
5894
  "name": "muiDocs",
5925
5895
  "declaration": {
5926
5896
  "name": "muiDocs",
5927
- "module": "src/components/mui-media-player/doc.ts"
5897
+ "module": "src/components/mui-list/doc.ts"
5928
5898
  }
5929
5899
  }
5930
5900
  ]
5931
5901
  },
5932
5902
  {
5933
5903
  "kind": "javascript-module",
5934
- "path": "src/components/mui-media-player/index.ts",
5904
+ "path": "src/components/mui-list/index.ts",
5905
+ "declarations": [],
5906
+ "exports": []
5907
+ },
5908
+ {
5909
+ "kind": "javascript-module",
5910
+ "path": "src/components/mui-markdown/doc.ts",
5911
+ "declarations": [
5912
+ {
5913
+ "kind": "variable",
5914
+ "name": "muiDocs",
5915
+ "type": {
5916
+ "text": "MuiDocs"
5917
+ },
5918
+ "default": "{ Markdown: { title: \"Markdown\", description: \"Renders Markdown content using Muibook components so docs stay on-brand and framework-agnostic.\", hero: [\"\"], figma: [\"\"], storybook: [\"\"], github: [ \"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-markdown/index.ts\", ], website: [\"\"], guides: [\"\"], usage: { list: [ \"Use when Markdown content should render using Muibook components.\", \"Great for docs, release notes, and help content sourced from files or APIs.\", \"Supports GFM tables, code blocks, inline code, blockquotes, links, and images.\", \"Adds stable heading IDs for in-page navigation and TOC linking.\", \"Provides copy buttons for code blocks by default.\", \"Supports custom markers like grid, box, space, and rule.\", \"Use body-size and code-size to align typography with the surrounding UI.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"], }, anatomy: { image: \"\", list: [\"\"], }, variants: { items: [ { key: \"default\", title: \"Default\", description: \"Markdown rendered with Muibook components.\", image: \"\", }, ], }, compositions: { description: \"Markdown can be used to author content that will render into Muibook layout and typography components.\", items: [ { key: \"docs\", name: \"Docs\", description: \"Use for rich documentation pages that need headings, lists, tables, and code blocks.\", image: \"\", }, ], }, related: { items: [ { name: \"Code\", link: \"https://guides.muibook.com/code\" }, { name: \"Table\", link: \"https://guides.muibook.com/table\" }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [ \"Accepts markdown via the markdown attribute or inner text content.\", \"Re-renders when markdown, body-size, or code-size attributes change.\", \"Observes text content when markdown is not set, so live edits are reflected.\", \"Renders tables into mui-table with horizontal scroll and a minimum width.\", \"Code blocks render mui-code with a copy button that writes to clipboard.\", ], }, writing: { list: [ \"Keep headings short and scannable.\", \"Prefer lists and short paragraphs for readability.\", \"Use markers like -- space-400 -- or -- grid-col-1fr-1fr -- for layout spacing and grids.\", ], }, }, }"
5919
+ }
5920
+ ],
5921
+ "exports": [
5922
+ {
5923
+ "kind": "js",
5924
+ "name": "muiDocs",
5925
+ "declaration": {
5926
+ "name": "muiDocs",
5927
+ "module": "src/components/mui-markdown/doc.ts"
5928
+ }
5929
+ }
5930
+ ]
5931
+ },
5932
+ {
5933
+ "kind": "javascript-module",
5934
+ "path": "src/components/mui-markdown/index.ts",
5935
5935
  "declarations": [
5936
5936
  {
5937
5937
  "kind": "class",
5938
5938
  "description": "",
5939
- "name": "MuiMediaPlayer",
5939
+ "name": "MuiMarkdown",
5940
5940
  "members": [
5941
5941
  {
5942
5942
  "kind": "field",
5943
- "name": "countdownMode",
5943
+ "name": "observer",
5944
5944
  "type": {
5945
- "text": "boolean"
5945
+ "text": "MutationObserver | undefined"
5946
+ },
5947
+ "privacy": "private"
5948
+ },
5949
+ {
5950
+ "kind": "field",
5951
+ "name": "lightboxEl",
5952
+ "type": {
5953
+ "text": "HTMLDivElement | null"
5946
5954
  },
5947
5955
  "privacy": "private",
5948
- "default": "false"
5956
+ "default": "null"
5949
5957
  },
5950
5958
  {
5951
5959
  "kind": "method",
5952
- "name": "resolveType",
5960
+ "name": "getBodySize",
5961
+ "privacy": "private"
5962
+ },
5963
+ {
5964
+ "kind": "method",
5965
+ "name": "getCodeSize",
5966
+ "privacy": "private"
5967
+ },
5968
+ {
5969
+ "kind": "method",
5970
+ "name": "getMarkdown",
5971
+ "privacy": "private"
5972
+ },
5973
+ {
5974
+ "kind": "method",
5975
+ "name": "getRenderRoot",
5976
+ "privacy": "private"
5977
+ },
5978
+ {
5979
+ "kind": "method",
5980
+ "name": "isLightboxEnabled",
5981
+ "privacy": "private"
5982
+ },
5983
+ {
5984
+ "kind": "method",
5985
+ "name": "applyTableColumns",
5953
5986
  "privacy": "private",
5954
- "return": {
5955
- "type": {
5956
- "text": "ResolvedType"
5957
- }
5958
- },
5959
5987
  "parameters": [
5960
5988
  {
5961
- "name": "src",
5989
+ "name": "renderRoot",
5962
5990
  "type": {
5963
- "text": "string"
5991
+ "text": "ParentNode"
5964
5992
  }
5965
5993
  }
5966
5994
  ]
5967
5995
  },
5968
5996
  {
5969
5997
  "kind": "method",
5970
- "name": "getYouTubeEmbed",
5998
+ "name": "openLightbox",
5971
5999
  "privacy": "private",
5972
6000
  "parameters": [
5973
6001
  {
@@ -5975,89 +6003,98 @@
5975
6003
  "type": {
5976
6004
  "text": "string"
5977
6005
  }
6006
+ },
6007
+ {
6008
+ "name": "alt",
6009
+ "type": {
6010
+ "text": "string"
6011
+ }
6012
+ },
6013
+ {
6014
+ "name": "caption",
6015
+ "optional": true,
6016
+ "type": {
6017
+ "text": "string"
6018
+ }
5978
6019
  }
5979
6020
  ]
5980
6021
  },
5981
6022
  {
5982
6023
  "kind": "method",
5983
- "name": "getSoundcloudEmbed",
5984
- "privacy": "private",
5985
- "parameters": [
5986
- {
5987
- "name": "src",
5988
- "type": {
5989
- "text": "string"
5990
- }
5991
- }
5992
- ]
6024
+ "name": "closeLightbox",
6025
+ "privacy": "private"
5993
6026
  },
5994
6027
  {
5995
6028
  "kind": "method",
5996
- "name": "formatTime",
6029
+ "name": "bindHandlers",
5997
6030
  "privacy": "private",
5998
6031
  "parameters": [
5999
6032
  {
6000
- "name": "seconds",
6033
+ "name": "renderRoot",
6001
6034
  "type": {
6002
- "text": "number"
6035
+ "text": "ParentNode"
6003
6036
  }
6004
6037
  }
6005
6038
  ]
6006
6039
  },
6007
6040
  {
6008
6041
  "kind": "method",
6009
- "name": "bindControls",
6042
+ "name": "render",
6010
6043
  "privacy": "private"
6011
- },
6012
- {
6013
- "kind": "method",
6014
- "name": "render"
6015
6044
  }
6016
6045
  ],
6017
- "attributes": [
6046
+ "events": [
6018
6047
  {
6019
- "name": "src"
6048
+ "name": "mui-markdown-lightbox-change",
6049
+ "type": {
6050
+ "text": "CustomEvent"
6051
+ }
6020
6052
  },
6021
6053
  {
6022
- "name": "type"
6023
- },
6054
+ "name": "mui-markdown-image-click",
6055
+ "type": {
6056
+ "text": "CustomEvent"
6057
+ }
6058
+ }
6059
+ ],
6060
+ "attributes": [
6024
6061
  {
6025
- "name": "autoplay"
6062
+ "name": "markdown"
6026
6063
  },
6027
6064
  {
6028
- "name": "muted"
6065
+ "name": "body-size"
6029
6066
  },
6030
6067
  {
6031
- "name": "loop"
6068
+ "name": "code-size"
6032
6069
  },
6033
6070
  {
6034
- "name": "poster"
6071
+ "name": "render-mode"
6035
6072
  },
6036
6073
  {
6037
- "name": "prefer-native-controls"
6074
+ "name": "lightbox"
6038
6075
  }
6039
6076
  ],
6040
6077
  "superclass": {
6041
6078
  "name": "HTMLElement"
6042
6079
  },
6043
- "tagName": "mui-media-player",
6080
+ "tagName": "mui-markdown",
6044
6081
  "customElement": true
6045
6082
  }
6046
6083
  ],
6047
6084
  "exports": [
6048
6085
  {
6049
6086
  "kind": "custom-element-definition",
6050
- "name": "mui-media-player",
6087
+ "name": "mui-markdown",
6051
6088
  "declaration": {
6052
- "name": "MuiMediaPlayer",
6053
- "module": "src/components/mui-media-player/index.ts"
6089
+ "name": "MuiMarkdown",
6090
+ "module": "src/components/mui-markdown/index.ts"
6054
6091
  }
6055
6092
  }
6056
6093
  ]
6057
6094
  },
6058
6095
  {
6059
6096
  "kind": "javascript-module",
6060
- "path": "src/components/mui-markdown/doc.ts",
6097
+ "path": "src/components/mui-media-player/doc.ts",
6061
6098
  "declarations": [
6062
6099
  {
6063
6100
  "kind": "variable",
@@ -6065,7 +6102,7 @@
6065
6102
  "type": {
6066
6103
  "text": "MuiDocs"
6067
6104
  },
6068
- "default": "{ Markdown: { title: \"Markdown\", description: \"Renders Markdown content using Muibook components so docs stay on-brand and framework-agnostic.\", hero: [\"\"], figma: [\"\"], storybook: [\"\"], github: [ \"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-markdown/index.ts\", ], website: [\"\"], guides: [\"\"], usage: { list: [ \"Use when Markdown content should render using Muibook components.\", \"Great for docs, release notes, and help content sourced from files or APIs.\", \"Supports GFM tables, code blocks, inline code, blockquotes, links, and images.\", \"Adds stable heading IDs for in-page navigation and TOC linking.\", \"Provides copy buttons for code blocks by default.\", \"Supports custom markers like grid, box, space, and rule.\", \"Use body-size and code-size to align typography with the surrounding UI.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"], }, anatomy: { image: \"\", list: [\"\"], }, variants: { items: [ { key: \"default\", title: \"Default\", description: \"Markdown rendered with Muibook components.\", image: \"\", }, ], }, compositions: { description: \"Markdown can be used to author content that will render into Muibook layout and typography components.\", items: [ { key: \"docs\", name: \"Docs\", description: \"Use for rich documentation pages that need headings, lists, tables, and code blocks.\", image: \"\", }, ], }, related: { items: [ { name: \"Code\", link: \"https://guides.muibook.com/code\" }, { name: \"Table\", link: \"https://guides.muibook.com/table\" }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [ \"Accepts markdown via the markdown attribute or inner text content.\", \"Re-renders when markdown, body-size, or code-size attributes change.\", \"Observes text content when markdown is not set, so live edits are reflected.\", \"Renders tables into mui-table with horizontal scroll and a minimum width.\", \"Code blocks render mui-code with a copy button that writes to clipboard.\", ], }, writing: { list: [ \"Keep headings short and scannable.\", \"Prefer lists and short paragraphs for readability.\", \"Use markers like -- space-400 -- or -- grid-col-1fr-1fr -- for layout spacing and grids.\", ], }, }, }"
6105
+ "default": "{ MediaPlayer: { title: \"Media Player\", description: \"Media Player renders native audio/video and provider embeds (YouTube, SoundCloud) from a single src input. This is a new exploration for the system and will iterate over time.\", hero: [\"\"], figma: [\"\"], storybook: [\"https://stories.muibook.com\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-media-player/index.ts\"], website: [\"https://muibook.com/#/media-player\"], guides: [\"https://guides.muibook.com/prompt\"], usage: { list: [ \"Use for pasted media links when you want consistent in-product preview behavior.\", \"Rely on auto-detection for YouTube, SoundCloud, mp4/webm, and mp3/wav links.\", \"Set type only when you need to force a specific renderer.\", \"Native media controls include a seek-time hover bubble and a clickable time mode toggle (elapsed/total and remaining/total).\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"Provide meaningful context around media purpose and avoid autoplay unless required.\"], }, anatomy: { image: \"\", list: [\"Media frame\", \"Native controls (video/audio)\", \"Progress/time row (native only)\"] }, variants: { items: [{ key: \"\", title: \"\", description: \"\", image: \"\" }] }, compositions: { description: \"\", items: [] }, related: { items: [ { name: \"Prompt\", link: \"https://guides.muibook.com/prompt\" }, { name: \"Prompt Preview\", link: \"https://guides.muibook.com/prompt-preview\" }, ], }, rules: [{ heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }] }], behaviour: { list: [\"\"] }, writing: { list: [\"\"] }, }, }"
6069
6106
  }
6070
6107
  ],
6071
6108
  "exports": [
@@ -6074,78 +6111,50 @@
6074
6111
  "name": "muiDocs",
6075
6112
  "declaration": {
6076
6113
  "name": "muiDocs",
6077
- "module": "src/components/mui-markdown/doc.ts"
6114
+ "module": "src/components/mui-media-player/doc.ts"
6078
6115
  }
6079
6116
  }
6080
6117
  ]
6081
6118
  },
6082
6119
  {
6083
6120
  "kind": "javascript-module",
6084
- "path": "src/components/mui-markdown/index.ts",
6121
+ "path": "src/components/mui-media-player/index.ts",
6085
6122
  "declarations": [
6086
6123
  {
6087
6124
  "kind": "class",
6088
6125
  "description": "",
6089
- "name": "MuiMarkdown",
6126
+ "name": "MuiMediaPlayer",
6090
6127
  "members": [
6091
6128
  {
6092
6129
  "kind": "field",
6093
- "name": "observer",
6094
- "type": {
6095
- "text": "MutationObserver | undefined"
6096
- },
6097
- "privacy": "private"
6098
- },
6099
- {
6100
- "kind": "field",
6101
- "name": "lightboxEl",
6130
+ "name": "countdownMode",
6102
6131
  "type": {
6103
- "text": "HTMLDivElement | null"
6132
+ "text": "boolean"
6104
6133
  },
6105
6134
  "privacy": "private",
6106
- "default": "null"
6107
- },
6108
- {
6109
- "kind": "method",
6110
- "name": "getBodySize",
6111
- "privacy": "private"
6112
- },
6113
- {
6114
- "kind": "method",
6115
- "name": "getCodeSize",
6116
- "privacy": "private"
6117
- },
6118
- {
6119
- "kind": "method",
6120
- "name": "getMarkdown",
6121
- "privacy": "private"
6122
- },
6123
- {
6124
- "kind": "method",
6125
- "name": "getRenderRoot",
6126
- "privacy": "private"
6127
- },
6128
- {
6129
- "kind": "method",
6130
- "name": "isLightboxEnabled",
6131
- "privacy": "private"
6135
+ "default": "false"
6132
6136
  },
6133
6137
  {
6134
6138
  "kind": "method",
6135
- "name": "applyTableColumns",
6139
+ "name": "resolveType",
6136
6140
  "privacy": "private",
6141
+ "return": {
6142
+ "type": {
6143
+ "text": "ResolvedType"
6144
+ }
6145
+ },
6137
6146
  "parameters": [
6138
6147
  {
6139
- "name": "renderRoot",
6148
+ "name": "src",
6140
6149
  "type": {
6141
- "text": "ParentNode"
6150
+ "text": "string"
6142
6151
  }
6143
6152
  }
6144
6153
  ]
6145
6154
  },
6146
6155
  {
6147
6156
  "kind": "method",
6148
- "name": "openLightbox",
6157
+ "name": "getYouTubeEmbed",
6149
6158
  "privacy": "private",
6150
6159
  "parameters": [
6151
6160
  {
@@ -6153,16 +6162,16 @@
6153
6162
  "type": {
6154
6163
  "text": "string"
6155
6164
  }
6156
- },
6157
- {
6158
- "name": "alt",
6159
- "type": {
6160
- "text": "string"
6161
- }
6162
- },
6165
+ }
6166
+ ]
6167
+ },
6168
+ {
6169
+ "kind": "method",
6170
+ "name": "getSoundcloudEmbed",
6171
+ "privacy": "private",
6172
+ "parameters": [
6163
6173
  {
6164
- "name": "caption",
6165
- "optional": true,
6174
+ "name": "src",
6166
6175
  "type": {
6167
6176
  "text": "string"
6168
6177
  }
@@ -6171,73 +6180,64 @@
6171
6180
  },
6172
6181
  {
6173
6182
  "kind": "method",
6174
- "name": "closeLightbox",
6175
- "privacy": "private"
6176
- },
6177
- {
6178
- "kind": "method",
6179
- "name": "bindHandlers",
6183
+ "name": "formatTime",
6180
6184
  "privacy": "private",
6181
6185
  "parameters": [
6182
6186
  {
6183
- "name": "renderRoot",
6187
+ "name": "seconds",
6184
6188
  "type": {
6185
- "text": "ParentNode"
6189
+ "text": "number"
6186
6190
  }
6187
6191
  }
6188
6192
  ]
6189
6193
  },
6190
6194
  {
6191
6195
  "kind": "method",
6192
- "name": "render",
6196
+ "name": "bindControls",
6193
6197
  "privacy": "private"
6194
- }
6195
- ],
6196
- "events": [
6197
- {
6198
- "name": "mui-markdown-lightbox-change",
6199
- "type": {
6200
- "text": "CustomEvent"
6201
- }
6202
6198
  },
6203
6199
  {
6204
- "name": "mui-markdown-image-click",
6205
- "type": {
6206
- "text": "CustomEvent"
6207
- }
6200
+ "kind": "method",
6201
+ "name": "render"
6208
6202
  }
6209
6203
  ],
6210
6204
  "attributes": [
6211
6205
  {
6212
- "name": "markdown"
6206
+ "name": "src"
6213
6207
  },
6214
6208
  {
6215
- "name": "body-size"
6209
+ "name": "type"
6216
6210
  },
6217
6211
  {
6218
- "name": "code-size"
6212
+ "name": "autoplay"
6219
6213
  },
6220
6214
  {
6221
- "name": "render-mode"
6215
+ "name": "muted"
6222
6216
  },
6223
6217
  {
6224
- "name": "lightbox"
6218
+ "name": "loop"
6219
+ },
6220
+ {
6221
+ "name": "poster"
6222
+ },
6223
+ {
6224
+ "name": "prefer-native-controls"
6225
6225
  }
6226
6226
  ],
6227
6227
  "superclass": {
6228
6228
  "name": "HTMLElement"
6229
6229
  },
6230
- "tagName": "mui-markdown",
6230
+ "tagName": "mui-media-player",
6231
6231
  "customElement": true
6232
6232
  }
6233
6233
  ],
6234
6234
  "exports": [
6235
6235
  {
6236
6236
  "kind": "custom-element-definition",
6237
- "name": "mui-markdown",
6237
+ "name": "mui-media-player",
6238
6238
  "declaration": {
6239
- "name": "MuiMarkdown",
6240
- "module": "src/components/mui-markdown/index.ts"
6239
+ "name": "MuiMediaPlayer",
6240
+ "module": "src/components/mui-media-player/index.ts"
6241
6241
  }
6242
6242
  }
6243
6243
  ]
@@ -6363,70 +6363,6 @@
6363
6363
  }
6364
6364
  ]
6365
6365
  },
6366
- {
6367
- "kind": "javascript-module",
6368
- "path": "src/components/mui-progress/doc.ts",
6369
- "declarations": [
6370
- {
6371
- "kind": "variable",
6372
- "name": "muiDocs",
6373
- "type": {
6374
- "text": "MuiDocs"
6375
- },
6376
- "default": "{ Progress: { title: \"Progress\", description: \"A Progress Bar visually represents completion status by filling a bar based on a percentage value. It gives users a clear indication of progress for a given task or process.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/2NPcL7tA0zGUWFLShr66fS/23d0050dce8c8379afc6deb8e351d049/Progress_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=948-4161&t=0ytskb8cxriEmdz2-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/inputs-progress--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-progress/index.ts\"], website: [\"https://muibook.com/#/progress\"], guides: [\"https://guides.muibook.com/progress\"], usage: { list: [ \"Show task progress – Indicate how much of a task or process has been completed.\", \"Display loading states – Represent the progress of a background operation, such as file uploads.\", \"Track step completion – Show progress in multi-step workflows or onboarding processes.\", \"Tune visual density and motion with component tokens such as --progress-radius, --progress-syncing-width, and --progress-pending-stripe-size.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"], }, anatomy: { image: \"https://images.ctfassets.net/i5uwscj4pkk2/1iPll53Pmtgjh50qYwhsgY/908da9c51dd605895bd6306290fc6bd9/Progress_-_Anatomy.png\", list: [ \"Fill (Indicator) – The colored portion inside the track that represents the progress percentage.\", \"Track – The background of the progress bar, providing the visual boundary for progress.\", ], }, variants: { items: [ { key: \"\", title: \"\", description: \"\", image: \"\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"outcome-based-roadmap\", name: \"Outcome-Based Roadmap\", description: \"Example of an Outcome-Based Roadmap page showing objectives organised into Upcoming, Doing, and Finished columns. Progress bars indicate the completion status of each task, providing a clear view of overall progress.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3w5htPtfEz7QMCH9alVcwf/de35725fb4542b891bd695b900195291/Outcomes-Progress-Composition.png\", }, ], }, related: { items: [ { name: \"\", link: \"\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
6377
- }
6378
- ],
6379
- "exports": [
6380
- {
6381
- "kind": "js",
6382
- "name": "muiDocs",
6383
- "declaration": {
6384
- "name": "muiDocs",
6385
- "module": "src/components/mui-progress/doc.ts"
6386
- }
6387
- }
6388
- ]
6389
- },
6390
- {
6391
- "kind": "javascript-module",
6392
- "path": "src/components/mui-progress/index.ts",
6393
- "declarations": [
6394
- {
6395
- "kind": "class",
6396
- "description": "",
6397
- "name": "MuiProgress",
6398
- "members": [
6399
- {
6400
- "kind": "method",
6401
- "name": "render"
6402
- }
6403
- ],
6404
- "attributes": [
6405
- {
6406
- "name": "progress"
6407
- },
6408
- {
6409
- "name": "state"
6410
- }
6411
- ],
6412
- "superclass": {
6413
- "name": "HTMLElement"
6414
- },
6415
- "tagName": "mui-progress",
6416
- "customElement": true
6417
- }
6418
- ],
6419
- "exports": [
6420
- {
6421
- "kind": "custom-element-definition",
6422
- "name": "mui-progress",
6423
- "declaration": {
6424
- "name": "MuiProgress",
6425
- "module": "src/components/mui-progress/index.ts"
6426
- }
6427
- }
6428
- ]
6429
- },
6430
6366
  {
6431
6367
  "kind": "javascript-module",
6432
6368
  "path": "src/components/mui-prompt/doc.ts",
@@ -6437,7 +6373,7 @@
6437
6373
  "type": {
6438
6374
  "text": "MuiDocs"
6439
6375
  },
6440
- "default": "{ Prompt: { title: \"Prompt\", description: \"Prompt provides a reusable prompt surface with floating actions and Enter-to-submit behavior.\", hero: [\"\"], figma: [\"\"], storybook: [\"https://stories.muibook.com\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-prompt/index.ts\"], website: [\"https://muibook.com/#/prompt\"], guides: [\"https://guides.muibook.com/input\"], usage: { list: [ \"Use for AI/chat prompt entry surfaces with action controls.\", \"In Muibook stories, use the Interactive Prompt story at the top of the page as the primary end-to-end reference (paste/upload/context/submit).\", \"This component is extracted from composition patterns to standardize prompt behavior across experiences.\", \"Keep prompt as a controlled input in app state: write value via attribute/property and sync from input events.\", \"Use Enter submit for fast send flows; keep Shift+Enter for multiline authoring.\", \"Press Enter to submit and Shift+Enter to add a newline.\", \"Set enter-submit='false' to disable Enter submit behavior.\", \"Use slot='actions' for utility actions (attach, source, tools).\", \"Prompt includes a default submit control in actions-right; override by slotting your own actions-right control when needed.\", \"All utility actions are intended to be slotted so product teams can wire behavior from app state.\", \"A default fan trigger is included out-of-the-box; provide slot='actions-trigger' only when customizing.\", \"Use slot='actions-right' when you need a custom submit/toggle action instead of the default.\", \"Set loading to show built-in async feedback spinner beside actions-right while requests are in flight.\", \"Use loading-label to provide accessible status text for the spinner.\", \"Use actions-fan for fan-out behavior (closed by default), and add fan-open only when you want it open by default.\", \"fan-open normalizes fan behavior in composed trees by enabling fan mode when needed.\", \"Use context-mode='icon|chip' with slotted <mui-prompt-toggle> for app-driven context state.\", \"Fan spread, speed, and amplitude are fixed to system defaults; tune through component tokens/CSS where needed.\", \"Built-in preview dialog handling is enabled for prompt-preview-open events.\", \"Set preview-threshold-chars to control when pasted text is converted into preview attachments.\", \"Set preview-overflow-to-preview='false' to always paste text directly into the textarea.\", \"When internal preview dialog handling is enabled, slotted prompt previews are auto-clickable by default.\", \"Set preview-auto-clickable='false' to keep previews non-clickable unless explicitly configured.\", \"Set preview-loading to force slotted previews into loading state while async metadata resolves.\", \"Set preview-loading='auto' to mirror prompt loading state onto slotted previews.\", \"Use preview-loading-label to provide accessible loading text for preview spinners.\", \"Use error-message for direct prompt-level error feedback rendered below the input.\", \"Set debug to render built-in submit debug telemetry (status + JSON payload) below the prompt.\", \"Use slot='error' to render fully custom error content when product needs bespoke treatment.\", \"Use setError(message) and clearError() for app-driven validation and transport error handling.\", \"Use prompt-paste to ingest user clipboard payloads and convert them into prompt-preview items.\", \"Use prompt-preview-open to react to preview activation and update app-level analytics/state.\", \"For native media previews, use direct .mp4/.mp3 values so the built-in dialog opens with native media controls.\", \"Prefer system/semantic tokens for color-top-* values when theming prompt color surfaces.\", \"For React wrappers, map CustomEvent handlers to props (onSubmit, onPromptPaste, onPromptPreviewOpen, onEscape).\", \"Mark the trigger action with fan-trigger; if omitted, the first action is used.\", \"Prefer this component instead of ad hoc prompt wrappers when the same interaction model is needed.\", ], }, accessibility: { designerList: [ \"Provide clear prompt intent through nearby heading/body context; placeholder alone should not carry all instruction.\", \"Ensure action icons are understandable and consistently positioned (utility actions left, submit/state action right).\", \"Keep status text low-emphasis visually, but persistent enough to communicate send state changes.\", ], engineerList: [ \"Support keyboard parity: Enter submits, Shift+Enter adds newline.\", \"If showing send status, use an aria-live region so updates are announced to assistive tech.\", \"Do not trap focus; users must be able to tab into and out of the prompt and actions naturally.\", \"Ensure a clear placeholder or label context for prompt intent.\", \"Provide aria-label values for icon-only action buttons slotted into actions.\", \"When authoring themes, rely on public --prompt-* tokens and attributes rather than internal prompt CSS variables.\", ], }, anatomy: { image: \"\", list: [\"Prompt surface\", \"Input area\", \"Action slot\"] }, variants: { items: [{ key: \"\", title: \"\", description: \"\", image: \"\" }] }, compositions: { description: \"\", items: [] }, related: { items: [ { name: \"Input\", link: \"https://guides.muibook.com/input\" }, { name: \"Button\", link: \"https://guides.muibook.com/button\" }, ], }, rules: [ { heading: \"Pattern Rule\", description: \"Use Prompt as the shared prompt-surface primitive; keep product-specific flows in compositions.\", doContent: [ { description: \"Reuse this component when Enter submit + floating actions are expected.\", image: \"\" }, ], dontContent: [ { description: \"Do not rebuild the prompt shell in each composition with custom wrappers.\", image: \"\" }, ], }, ], behaviour: { list: [ \"Enter emits a submit event with current value.\", \"Shift+Enter inserts a newline.\", \"Pasting emits prompt-paste with detected payload metadata for consumers to store and render previews.\", \"Short text paste remains in the textarea; long text and binary paste can be converted to preview items based on threshold settings.\", \"Clicking a preview emits prompt-preview-open with normalized preview payload (badge, value, image metadata).\", \"Escape emits escape and closes fan actions when open.\", \"Error feedback supports dismiss and optional expand/collapse for long copy.\", \"Clicking content inside a slotted <mui-prompt-toggle> emits prompt-context-change and switches to context chip mode.\", \"Dismissing content marked with [context-chip] emits prompt-context-dismiss and returns to icon mode.\", \"Actions remain anchored at the prompt edge while text grows.\", \"Action behavior should be equivalent whether triggered by keyboard submit or click.\", \"When loading is set, prompt shows async spinner feedback near submit and blocks additional submits.\", ], }, writing: { list: [\"Use clear placeholder prompts that describe expected user input.\"], }, }, }"
6376
+ "default": "{ Prompt: { title: \"Prompt\", description: \"Prompt provides a reusable prompt surface with floating actions and Enter-to-submit behavior.\", hero: [\"\"], figma: [\"\"], storybook: [\"https://stories.muibook.com\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-prompt/index.ts\"], website: [\"https://muibook.com/#/prompt\"], guides: [\"https://guides.muibook.com/input\"], usage: { list: [ \"Use for AI/chat prompt entry surfaces with action controls.\", \"In Muibook stories, use the Interactive Prompt story at the top of the page as the primary end-to-end reference (paste/upload/context/submit).\", \"This component is extracted from composition patterns to standardize prompt behavior across experiences.\", \"Keep prompt as a controlled input in app state: write value via attribute/property and sync from input events.\", \"Use Enter submit for fast send flows; keep Shift+Enter for multiline authoring.\", \"Press Enter to submit and Shift+Enter to add a newline.\", \"Set enter-submit='false' to disable Enter submit behavior.\", \"Use slot='actions' for utility actions (attach, source, tools).\", \"Prompt includes a default submit control in actions-right; override by slotting your own actions-right control when needed.\", \"All utility actions are intended to be slotted so product teams can wire behavior from app state.\", \"A default fan trigger is included out-of-the-box; provide slot='actions-trigger' only when customizing.\", \"Use slot='actions-right' when you need a custom submit/toggle action instead of the default.\", \"Prompt no longer renders a built-in action divider; slot your own <mui-rule slot='actions'> when needed (for example with inline margin style).\", \"Set loading to show built-in async feedback spinner beside actions-right while requests are in flight.\", \"Use loading-label to provide accessible status text for the spinner.\", \"Fan behavior derives from slotted actions by default; use fan-open when you want the fan open by default.\", \"fan-open normalizes fan behavior in composed trees by enabling fan mode when needed.\", \"Use context-mode='icon|chip' with slotted <mui-prompt-toggle> for app-driven context state.\", \"Fan spread, speed, and amplitude are fixed to system defaults; tune through component tokens/CSS where needed.\", \"Built-in preview dialog handling is enabled for prompt-preview-open events.\", \"Set preview-threshold-chars to control when pasted text is converted into preview attachments.\", \"Set preview-overflow-to-preview='false' to always paste text directly into the textarea.\", \"When internal preview dialog handling is enabled, slotted prompt previews are auto-clickable by default.\", \"Set preview-auto-clickable='false' to keep previews non-clickable unless explicitly configured.\", \"Set preview-loading to force slotted previews into loading state while async metadata resolves.\", \"Set preview-loading='auto' to mirror prompt loading state onto slotted previews.\", \"Use preview-loading-label to provide accessible loading text for preview spinners.\", \"Use error-message for direct prompt-level error feedback rendered below the input.\", \"Set debug to render built-in submit debug telemetry (status + JSON payload) below the prompt.\", \"Use slot='error' to render fully custom error content when product needs bespoke treatment.\", \"Use setError(message) and clearError() for app-driven validation and transport error handling.\", \"Use prompt-paste to ingest user clipboard payloads and convert them into prompt-preview items.\", \"Use prompt-preview-open to react to preview activation and update app-level analytics/state.\", \"For native media previews, use direct .mp4/.mp3 values so the built-in dialog opens with native media controls.\", \"Prefer system/semantic tokens for color-top-* values when theming prompt color surfaces.\", \"For React wrappers, map CustomEvent handlers to props (onSubmit, onPromptPaste, onPromptPreviewOpen, onEscape).\", \"Mark the trigger action with fan-trigger; if omitted, the first action is used.\", \"Prefer this component instead of ad hoc prompt wrappers when the same interaction model is needed.\", ], }, accessibility: { designerList: [ \"Provide clear prompt intent through nearby heading/body context; placeholder alone should not carry all instruction.\", \"Ensure action icons are understandable and consistently positioned (utility actions left, submit/state action right).\", \"Keep status text low-emphasis visually, but persistent enough to communicate send state changes.\", ], engineerList: [ \"Support keyboard parity: Enter submits, Shift+Enter adds newline.\", \"If showing send status, use an aria-live region so updates are announced to assistive tech.\", \"Do not trap focus; users must be able to tab into and out of the prompt and actions naturally.\", \"Ensure a clear placeholder or label context for prompt intent.\", \"Provide aria-label values for icon-only action buttons slotted into actions.\", \"When authoring themes, rely on public --prompt-* tokens and attributes rather than internal prompt CSS variables.\", ], }, anatomy: { image: \"\", list: [\"Prompt surface\", \"Input area\", \"Action slot\"] }, variants: { items: [{ key: \"\", title: \"\", description: \"\", image: \"\" }] }, compositions: { description: \"\", items: [] }, related: { items: [ { name: \"Input\", link: \"https://guides.muibook.com/input\" }, { name: \"Button\", link: \"https://guides.muibook.com/button\" }, ], }, rules: [ { heading: \"Pattern Rule\", description: \"Use Prompt as the shared prompt-surface primitive; keep product-specific flows in compositions.\", doContent: [ { description: \"Reuse this component when Enter submit + floating actions are expected.\", image: \"\" }, ], dontContent: [ { description: \"Do not rebuild the prompt shell in each composition with custom wrappers.\", image: \"\" }, ], }, ], behaviour: { list: [ \"Enter emits a submit event with current value.\", \"Shift+Enter inserts a newline.\", \"Pasting emits prompt-paste with detected payload metadata for consumers to store and render previews.\", \"Short text paste remains in the textarea; long text and binary paste can be converted to preview items based on threshold settings.\", \"Clicking a preview emits prompt-preview-open with normalized preview payload (badge, value, image metadata).\", \"Escape emits escape and closes fan actions when open.\", \"Error feedback supports dismiss and optional expand/collapse for long copy.\", \"Clicking content inside a slotted <mui-prompt-toggle> emits prompt-context-change and switches to context chip mode.\", \"Dismissing content marked with [context-chip] emits prompt-context-dismiss and returns to icon mode.\", \"Actions remain anchored at the prompt edge while text grows.\", \"Action behavior should be equivalent whether triggered by keyboard submit or click.\", \"When loading is set, prompt shows async spinner feedback near submit and blocks additional submits.\", ], }, writing: { list: [\"Use clear placeholder prompts that describe expected user input.\"], }, }, }"
6441
6377
  }
6442
6378
  ],
6443
6379
  "exports": [
@@ -6529,6 +6465,21 @@
6529
6465
  "privacy": "private",
6530
6466
  "default": "'{\"event\":\"idle\"}'"
6531
6467
  },
6468
+ {
6469
+ "kind": "field",
6470
+ "name": "lightDomObserver",
6471
+ "type": {
6472
+ "text": "MutationObserver | null"
6473
+ },
6474
+ "privacy": "private",
6475
+ "default": "null"
6476
+ },
6477
+ {
6478
+ "kind": "field",
6479
+ "name": "onActionsSlotChange",
6480
+ "privacy": "private",
6481
+ "readonly": true
6482
+ },
6532
6483
  {
6533
6484
  "kind": "field",
6534
6485
  "name": "enforceActionVariants",
@@ -6661,6 +6612,29 @@
6661
6612
  "name": "onContextChipDismiss",
6662
6613
  "privacy": "private"
6663
6614
  },
6615
+ {
6616
+ "kind": "method",
6617
+ "name": "hasTruthyFlagAttribute",
6618
+ "privacy": "private",
6619
+ "parameters": [
6620
+ {
6621
+ "name": "name",
6622
+ "type": {
6623
+ "text": "string"
6624
+ }
6625
+ }
6626
+ ]
6627
+ },
6628
+ {
6629
+ "kind": "method",
6630
+ "name": "shouldUseFanModeByActions",
6631
+ "privacy": "private"
6632
+ },
6633
+ {
6634
+ "kind": "method",
6635
+ "name": "isFanModeEnabled",
6636
+ "privacy": "private"
6637
+ },
6664
6638
  {
6665
6639
  "kind": "method",
6666
6640
  "name": "ensureFanMode",
@@ -7064,29 +7038,197 @@
7064
7038
  "name": "error-message"
7065
7039
  },
7066
7040
  {
7067
- "name": "debug"
7041
+ "name": "debug"
7042
+ },
7043
+ {
7044
+ "name": "loading"
7045
+ },
7046
+ {
7047
+ "name": "loading-label"
7048
+ }
7049
+ ],
7050
+ "superclass": {
7051
+ "name": "HTMLElement"
7052
+ },
7053
+ "tagName": "mui-prompt",
7054
+ "customElement": true
7055
+ }
7056
+ ],
7057
+ "exports": [
7058
+ {
7059
+ "kind": "custom-element-definition",
7060
+ "name": "mui-prompt",
7061
+ "declaration": {
7062
+ "name": "MuiPrompt",
7063
+ "module": "src/components/mui-prompt/index.ts"
7064
+ }
7065
+ }
7066
+ ]
7067
+ },
7068
+ {
7069
+ "kind": "javascript-module",
7070
+ "path": "src/components/mui-progress/doc.ts",
7071
+ "declarations": [
7072
+ {
7073
+ "kind": "variable",
7074
+ "name": "muiDocs",
7075
+ "type": {
7076
+ "text": "MuiDocs"
7077
+ },
7078
+ "default": "{ Progress: { title: \"Progress\", description: \"A Progress Bar visually represents completion status by filling a bar based on a percentage value. It gives users a clear indication of progress for a given task or process.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/2NPcL7tA0zGUWFLShr66fS/23d0050dce8c8379afc6deb8e351d049/Progress_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=948-4161&t=0ytskb8cxriEmdz2-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/inputs-progress--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-progress/index.ts\"], website: [\"https://muibook.com/#/progress\"], guides: [\"https://guides.muibook.com/progress\"], usage: { list: [ \"Show task progress – Indicate how much of a task or process has been completed.\", \"Display loading states – Represent the progress of a background operation, such as file uploads.\", \"Track step completion – Show progress in multi-step workflows or onboarding processes.\", \"Tune visual density and motion with component tokens such as --progress-radius, --progress-syncing-width, and --progress-pending-stripe-size.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"], }, anatomy: { image: \"https://images.ctfassets.net/i5uwscj4pkk2/1iPll53Pmtgjh50qYwhsgY/908da9c51dd605895bd6306290fc6bd9/Progress_-_Anatomy.png\", list: [ \"Fill (Indicator) – The colored portion inside the track that represents the progress percentage.\", \"Track – The background of the progress bar, providing the visual boundary for progress.\", ], }, variants: { items: [ { key: \"\", title: \"\", description: \"\", image: \"\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"outcome-based-roadmap\", name: \"Outcome-Based Roadmap\", description: \"Example of an Outcome-Based Roadmap page showing objectives organised into Upcoming, Doing, and Finished columns. Progress bars indicate the completion status of each task, providing a clear view of overall progress.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3w5htPtfEz7QMCH9alVcwf/de35725fb4542b891bd695b900195291/Outcomes-Progress-Composition.png\", }, ], }, related: { items: [ { name: \"\", link: \"\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
7079
+ }
7080
+ ],
7081
+ "exports": [
7082
+ {
7083
+ "kind": "js",
7084
+ "name": "muiDocs",
7085
+ "declaration": {
7086
+ "name": "muiDocs",
7087
+ "module": "src/components/mui-progress/doc.ts"
7088
+ }
7089
+ }
7090
+ ]
7091
+ },
7092
+ {
7093
+ "kind": "javascript-module",
7094
+ "path": "src/components/mui-progress/index.ts",
7095
+ "declarations": [
7096
+ {
7097
+ "kind": "class",
7098
+ "description": "",
7099
+ "name": "MuiProgress",
7100
+ "members": [
7101
+ {
7102
+ "kind": "method",
7103
+ "name": "render"
7104
+ }
7105
+ ],
7106
+ "attributes": [
7107
+ {
7108
+ "name": "progress"
7109
+ },
7110
+ {
7111
+ "name": "state"
7112
+ }
7113
+ ],
7114
+ "superclass": {
7115
+ "name": "HTMLElement"
7116
+ },
7117
+ "tagName": "mui-progress",
7118
+ "customElement": true
7119
+ }
7120
+ ],
7121
+ "exports": [
7122
+ {
7123
+ "kind": "custom-element-definition",
7124
+ "name": "mui-progress",
7125
+ "declaration": {
7126
+ "name": "MuiProgress",
7127
+ "module": "src/components/mui-progress/index.ts"
7128
+ }
7129
+ }
7130
+ ]
7131
+ },
7132
+ {
7133
+ "kind": "javascript-module",
7134
+ "path": "src/components/mui-prompt-message/doc.ts",
7135
+ "declarations": [
7136
+ {
7137
+ "kind": "variable",
7138
+ "name": "muiDocs",
7139
+ "type": {
7140
+ "text": "MuiDocs"
7141
+ },
7142
+ "default": "{ PromptMessage: { title: \"Prompt Message\", description: \"Prompt Message provides a consistent conversation row shell with avatar and message content slots.\", hero: [\"\"], figma: [\"\"], storybook: [\"https://stories.muibook.com\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-prompt-message/index.ts\"], website: [\"https://muibook.com/#/prompt-message\"], guides: [\"https://guides.muibook.com/body\"], usage: { list: [ \"Use for chat-style reply rows in assistant and support interfaces.\", \"This component is extracted from composition patterns to keep conversation shells consistent.\", \"Slot avatar content into slot='avatar'.\", \"Use body/content components for message text.\", \"Use size='x-small|small|medium|large' to scale avatar/text rhythm across dense and spacious layouts.\", \"Use variant='ghost' when the message row should render without surface treatment.\", \"Use density='compact' when padding should be removed for tight compositions.\", \"Prefer this component over ad hoc grid wrappers when building threaded chat content.\", ], }, accessibility: { designerList: [ \"Maintain clear speaker distinction through avatar + message pairing.\", \"Keep contrast and typography readable in long conversation threads.\", ], engineerList: [ \"Provide meaningful avatar labels where identity context matters.\", \"Preserve DOM reading order (identity first, then message content).\", \"Avoid injecting decorative-only text into message content; keep semantics focused on conversation copy.\", ], }, anatomy: { image: \"\", list: [\"Bubble container\", \"Avatar slot\", \"Message content slot\"] }, variants: { items: [{ key: \"\", title: \"\", description: \"\", image: \"\" }] }, compositions: { description: \"\", items: [] }, related: { items: [ { name: \"Avatar\", link: \"https://guides.muibook.com/avatar\" }, { name: \"Body\", link: \"https://guides.muibook.com/body\" }, ], }, rules: [ { heading: \"Pattern Rule\", description: \"Use Prompt Message as the base conversation row primitive.\", doContent: [{ description: \"Compose identity + message content through avatar and body slots.\", image: \"\" }], dontContent: [{ description: \"Avoid custom one-off bubble containers per page.\", image: \"\" }], }, ], behaviour: { list: [ \"Avatar and message content align consistently across rows.\", ], }, writing: { list: [ \"Keep message copy concise and scannable in multi-row threads.\", ], }, }, }"
7143
+ }
7144
+ ],
7145
+ "exports": [
7146
+ {
7147
+ "kind": "js",
7148
+ "name": "muiDocs",
7149
+ "declaration": {
7150
+ "name": "muiDocs",
7151
+ "module": "src/components/mui-prompt-message/doc.ts"
7152
+ }
7153
+ }
7154
+ ]
7155
+ },
7156
+ {
7157
+ "kind": "javascript-module",
7158
+ "path": "src/components/mui-prompt-message/index.ts",
7159
+ "declarations": [
7160
+ {
7161
+ "kind": "class",
7162
+ "description": "",
7163
+ "name": "MuiPromptMessage",
7164
+ "members": [
7165
+ {
7166
+ "kind": "field",
7167
+ "name": "resizeObserver",
7168
+ "type": {
7169
+ "text": "ResizeObserver | null"
7170
+ },
7171
+ "privacy": "private",
7172
+ "default": "null"
7173
+ },
7174
+ {
7175
+ "kind": "field",
7176
+ "name": "avatarSlotEl",
7177
+ "type": {
7178
+ "text": "HTMLSlotElement | null"
7179
+ },
7180
+ "privacy": "private",
7181
+ "default": "null"
7182
+ },
7183
+ {
7184
+ "kind": "field",
7185
+ "name": "contentSlotEl",
7186
+ "type": {
7187
+ "text": "HTMLSlotElement | null"
7188
+ },
7189
+ "privacy": "private",
7190
+ "default": "null"
7191
+ },
7192
+ {
7193
+ "kind": "method",
7194
+ "name": "render"
7195
+ },
7196
+ {
7197
+ "kind": "method",
7198
+ "name": "bindSlotSync",
7199
+ "privacy": "private"
7200
+ },
7201
+ {
7202
+ "kind": "method",
7203
+ "name": "bindLayoutSync",
7204
+ "privacy": "private"
7205
+ }
7206
+ ],
7207
+ "attributes": [
7208
+ {
7209
+ "name": "size"
7068
7210
  },
7069
7211
  {
7070
- "name": "loading"
7212
+ "name": "variant"
7071
7213
  },
7072
7214
  {
7073
- "name": "loading-label"
7215
+ "name": "density"
7074
7216
  }
7075
7217
  ],
7076
7218
  "superclass": {
7077
7219
  "name": "HTMLElement"
7078
7220
  },
7079
- "tagName": "mui-prompt",
7221
+ "tagName": "mui-prompt-message",
7080
7222
  "customElement": true
7081
7223
  }
7082
7224
  ],
7083
7225
  "exports": [
7084
7226
  {
7085
7227
  "kind": "custom-element-definition",
7086
- "name": "mui-prompt",
7228
+ "name": "mui-prompt-message",
7087
7229
  "declaration": {
7088
- "name": "MuiPrompt",
7089
- "module": "src/components/mui-prompt/index.ts"
7230
+ "name": "MuiPromptMessage",
7231
+ "module": "src/components/mui-prompt-message/index.ts"
7090
7232
  }
7091
7233
  }
7092
7234
  ]
@@ -7309,110 +7451,6 @@
7309
7451
  }
7310
7452
  ]
7311
7453
  },
7312
- {
7313
- "kind": "javascript-module",
7314
- "path": "src/components/mui-prompt-message/doc.ts",
7315
- "declarations": [
7316
- {
7317
- "kind": "variable",
7318
- "name": "muiDocs",
7319
- "type": {
7320
- "text": "MuiDocs"
7321
- },
7322
- "default": "{ PromptMessage: { title: \"Prompt Message\", description: \"Prompt Message provides a consistent conversation row shell with avatar and message content slots.\", hero: [\"\"], figma: [\"\"], storybook: [\"https://stories.muibook.com\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-prompt-message/index.ts\"], website: [\"https://muibook.com/#/prompt-message\"], guides: [\"https://guides.muibook.com/body\"], usage: { list: [ \"Use for chat-style reply rows in assistant and support interfaces.\", \"This component is extracted from composition patterns to keep conversation shells consistent.\", \"Slot avatar content into slot='avatar'.\", \"Use body/content components for message text.\", \"Use size='x-small|small|medium|large' to scale avatar/text rhythm across dense and spacious layouts.\", \"Use variant='ghost' when the message row should render without surface treatment.\", \"Use density='compact' when padding should be removed for tight compositions.\", \"Prefer this component over ad hoc grid wrappers when building threaded chat content.\", ], }, accessibility: { designerList: [ \"Maintain clear speaker distinction through avatar + message pairing.\", \"Keep contrast and typography readable in long conversation threads.\", ], engineerList: [ \"Provide meaningful avatar labels where identity context matters.\", \"Preserve DOM reading order (identity first, then message content).\", \"Avoid injecting decorative-only text into message content; keep semantics focused on conversation copy.\", ], }, anatomy: { image: \"\", list: [\"Bubble container\", \"Avatar slot\", \"Message content slot\"] }, variants: { items: [{ key: \"\", title: \"\", description: \"\", image: \"\" }] }, compositions: { description: \"\", items: [] }, related: { items: [ { name: \"Avatar\", link: \"https://guides.muibook.com/avatar\" }, { name: \"Body\", link: \"https://guides.muibook.com/body\" }, ], }, rules: [ { heading: \"Pattern Rule\", description: \"Use Prompt Message as the base conversation row primitive.\", doContent: [{ description: \"Compose identity + message content through avatar and body slots.\", image: \"\" }], dontContent: [{ description: \"Avoid custom one-off bubble containers per page.\", image: \"\" }], }, ], behaviour: { list: [ \"Avatar and message content align consistently across rows.\", ], }, writing: { list: [ \"Keep message copy concise and scannable in multi-row threads.\", ], }, }, }"
7323
- }
7324
- ],
7325
- "exports": [
7326
- {
7327
- "kind": "js",
7328
- "name": "muiDocs",
7329
- "declaration": {
7330
- "name": "muiDocs",
7331
- "module": "src/components/mui-prompt-message/doc.ts"
7332
- }
7333
- }
7334
- ]
7335
- },
7336
- {
7337
- "kind": "javascript-module",
7338
- "path": "src/components/mui-prompt-message/index.ts",
7339
- "declarations": [
7340
- {
7341
- "kind": "class",
7342
- "description": "",
7343
- "name": "MuiPromptMessage",
7344
- "members": [
7345
- {
7346
- "kind": "field",
7347
- "name": "resizeObserver",
7348
- "type": {
7349
- "text": "ResizeObserver | null"
7350
- },
7351
- "privacy": "private",
7352
- "default": "null"
7353
- },
7354
- {
7355
- "kind": "field",
7356
- "name": "avatarSlotEl",
7357
- "type": {
7358
- "text": "HTMLSlotElement | null"
7359
- },
7360
- "privacy": "private",
7361
- "default": "null"
7362
- },
7363
- {
7364
- "kind": "field",
7365
- "name": "contentSlotEl",
7366
- "type": {
7367
- "text": "HTMLSlotElement | null"
7368
- },
7369
- "privacy": "private",
7370
- "default": "null"
7371
- },
7372
- {
7373
- "kind": "method",
7374
- "name": "render"
7375
- },
7376
- {
7377
- "kind": "method",
7378
- "name": "bindSlotSync",
7379
- "privacy": "private"
7380
- },
7381
- {
7382
- "kind": "method",
7383
- "name": "bindLayoutSync",
7384
- "privacy": "private"
7385
- }
7386
- ],
7387
- "attributes": [
7388
- {
7389
- "name": "size"
7390
- },
7391
- {
7392
- "name": "variant"
7393
- },
7394
- {
7395
- "name": "density"
7396
- }
7397
- ],
7398
- "superclass": {
7399
- "name": "HTMLElement"
7400
- },
7401
- "tagName": "mui-prompt-message",
7402
- "customElement": true
7403
- }
7404
- ],
7405
- "exports": [
7406
- {
7407
- "kind": "custom-element-definition",
7408
- "name": "mui-prompt-message",
7409
- "declaration": {
7410
- "name": "MuiPromptMessage",
7411
- "module": "src/components/mui-prompt-message/index.ts"
7412
- }
7413
- }
7414
- ]
7415
- },
7416
7454
  {
7417
7455
  "kind": "javascript-module",
7418
7456
  "path": "src/components/mui-prompt-toggle/index.ts",
@@ -7951,78 +7989,6 @@
7951
7989
  }
7952
7990
  ]
7953
7991
  },
7954
- {
7955
- "kind": "javascript-module",
7956
- "path": "src/components/mui-rule/doc.ts",
7957
- "declarations": [
7958
- {
7959
- "kind": "variable",
7960
- "name": "muiDocs",
7961
- "type": {
7962
- "text": "MuiDocs"
7963
- },
7964
- "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: [\"\"], }, }, }"
7965
- }
7966
- ],
7967
- "exports": [
7968
- {
7969
- "kind": "js",
7970
- "name": "muiDocs",
7971
- "declaration": {
7972
- "name": "muiDocs",
7973
- "module": "src/components/mui-rule/doc.ts"
7974
- }
7975
- }
7976
- ]
7977
- },
7978
- {
7979
- "kind": "javascript-module",
7980
- "path": "src/components/mui-rule/index.ts",
7981
- "declarations": [
7982
- {
7983
- "kind": "class",
7984
- "description": "",
7985
- "name": "MuiRule",
7986
- "members": [
7987
- {
7988
- "kind": "method",
7989
- "name": "syncContextAttributes",
7990
- "privacy": "private"
7991
- },
7992
- {
7993
- "kind": "method",
7994
- "name": "updateStyles"
7995
- }
7996
- ],
7997
- "attributes": [
7998
- {
7999
- "name": "length"
8000
- },
8001
- {
8002
- "name": "weight"
8003
- },
8004
- {
8005
- "name": "direction"
8006
- }
8007
- ],
8008
- "superclass": {
8009
- "name": "HTMLElement"
8010
- },
8011
- "tagName": "mui-rule",
8012
- "customElement": true
8013
- }
8014
- ],
8015
- "exports": [
8016
- {
8017
- "kind": "custom-element-definition",
8018
- "name": "mui-rule",
8019
- "declaration": {
8020
- "name": "MuiRule",
8021
- "module": "src/components/mui-rule/index.ts"
8022
- }
8023
- }
8024
- ]
8025
- },
8026
7992
  {
8027
7993
  "kind": "javascript-module",
8028
7994
  "path": "src/components/mui-select/doc.ts",
@@ -8127,32 +8093,104 @@
8127
8093
  "name": "disabled"
8128
8094
  },
8129
8095
  {
8130
- "name": "hide-label"
8096
+ "name": "hide-label"
8097
+ },
8098
+ {
8099
+ "name": "variant"
8100
+ },
8101
+ {
8102
+ "name": "optional"
8103
+ },
8104
+ {
8105
+ "name": "size"
8106
+ }
8107
+ ],
8108
+ "superclass": {
8109
+ "name": "HTMLElement"
8110
+ },
8111
+ "tagName": "mui-select",
8112
+ "customElement": true
8113
+ }
8114
+ ],
8115
+ "exports": [
8116
+ {
8117
+ "kind": "custom-element-definition",
8118
+ "name": "mui-select",
8119
+ "declaration": {
8120
+ "name": "MuiSelect",
8121
+ "module": "src/components/mui-select/index.ts"
8122
+ }
8123
+ }
8124
+ ]
8125
+ },
8126
+ {
8127
+ "kind": "javascript-module",
8128
+ "path": "src/components/mui-rule/doc.ts",
8129
+ "declarations": [
8130
+ {
8131
+ "kind": "variable",
8132
+ "name": "muiDocs",
8133
+ "type": {
8134
+ "text": "MuiDocs"
8135
+ },
8136
+ "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: [\"\"], }, }, }"
8137
+ }
8138
+ ],
8139
+ "exports": [
8140
+ {
8141
+ "kind": "js",
8142
+ "name": "muiDocs",
8143
+ "declaration": {
8144
+ "name": "muiDocs",
8145
+ "module": "src/components/mui-rule/doc.ts"
8146
+ }
8147
+ }
8148
+ ]
8149
+ },
8150
+ {
8151
+ "kind": "javascript-module",
8152
+ "path": "src/components/mui-rule/index.ts",
8153
+ "declarations": [
8154
+ {
8155
+ "kind": "class",
8156
+ "description": "",
8157
+ "name": "MuiRule",
8158
+ "members": [
8159
+ {
8160
+ "kind": "method",
8161
+ "name": "syncContextAttributes",
8162
+ "privacy": "private"
8131
8163
  },
8132
8164
  {
8133
- "name": "variant"
8165
+ "kind": "method",
8166
+ "name": "updateStyles"
8167
+ }
8168
+ ],
8169
+ "attributes": [
8170
+ {
8171
+ "name": "length"
8134
8172
  },
8135
8173
  {
8136
- "name": "optional"
8174
+ "name": "weight"
8137
8175
  },
8138
8176
  {
8139
- "name": "size"
8177
+ "name": "direction"
8140
8178
  }
8141
8179
  ],
8142
8180
  "superclass": {
8143
8181
  "name": "HTMLElement"
8144
8182
  },
8145
- "tagName": "mui-select",
8183
+ "tagName": "mui-rule",
8146
8184
  "customElement": true
8147
8185
  }
8148
8186
  ],
8149
8187
  "exports": [
8150
8188
  {
8151
8189
  "kind": "custom-element-definition",
8152
- "name": "mui-select",
8190
+ "name": "mui-rule",
8153
8191
  "declaration": {
8154
- "name": "MuiSelect",
8155
- "module": "src/components/mui-select/index.ts"
8192
+ "name": "MuiRule",
8193
+ "module": "src/components/mui-rule/index.ts"
8156
8194
  }
8157
8195
  }
8158
8196
  ]
@@ -9159,7 +9197,7 @@
9159
9197
  },
9160
9198
  {
9161
9199
  "kind": "javascript-module",
9162
- "path": "src/components/mui-table/doc.ts",
9200
+ "path": "src/components/mui-tabs/doc.ts",
9163
9201
  "declarations": [
9164
9202
  {
9165
9203
  "kind": "variable",
@@ -9167,7 +9205,7 @@
9167
9205
  "type": {
9168
9206
  "text": "MuiDocs"
9169
9207
  },
9170
- "default": "{ Table: { title: \"Table\", description: \"Displays data in a grid layout to support scanability and comparison across rows and columns. Best suited for structured, repeatable content.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/34Yd6uWrfM5Ihv4rdniHYy/9e1698ce2c23d6c74006bf3f2ae93066/Table_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=958-8696&t=0ytskb8cxriEmdz2-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/content-table--docs\"], github: [\"https://github.com/michaeltrilford/muibook/tree/main/src/components/mui-table\"], website: [\"https://muibook.com/#/table\"], guides: [\"https://guides.muibook.com/table\"], usage: { list: [ \"Use for structured content that benefits from a grid format.\", \"Ideal for comparing data across multiple rows and columns.\", \"Supports sorting, filtering, or action buttons if needed.\", \"Avoid for unstructured, visual, or narrative-based content.\", \"Tables should adapt for smaller viewports by switching to the Slat component.\", \"Prioritise key content and simplify structure when transitioning to mobile views.\", ], }, accessibility: { designerList: [ \"mui-table uses role='table'.\", \"mui-row-group uses role='rowgroup'.\", \"mui-row uses role='row'.\", \"mui-cell uses role='cell'.\", \"Follows table semantics for screen reader support.\", ], engineerList: [ \"mui-table uses role='table'.\", \"mui-row-group uses role='rowgroup'.\", \"mui-row uses role='row'.\", \"mui-cell uses role='cell'.\", \"Follows table semantics for screen reader support.\", ], }, anatomy: { image: \"https://images.ctfassets.net/i5uwscj4pkk2/2KHxAyGbYW7qwySwCLYrbo/0ffc98c3eef07098afaf64bebc6afd4a/Table_-_Anatomy.png\", list: [ \"Heading: The header row of the table accepts headings and other arrangements as needed.\", \"Data: The row contains standard data as well as other arrangements, such as grouped content.\", \"Actions: The main actions for each table row can be included in a dedicated column or slot.\", ], }, variants: { items: [ { key: \"\", title: \"\", description: \"\", image: \"\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"prop-types-table\", name: \"Prop Types Table\", description: \"Attached is a standard example demonstrating how to use the table to present general data for component prop types.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/1JeUHjbeqVNgTvlVZkeHjw/7f652efbea5cc6aa436449905e2ae48e/table_-_composition.png\", }, { key: \"simple-table-dropdown\", name: \"Simple Table w/ Dropdown\", description: \"Example of a simple table with a dropdown action positioned on the far right, following the content. Demonstrates the table used within a card layout, as it might appear on a page or settings view.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3IIRPg0pdQB66NJniCZvlo/2600a8bee4ad1c79a63dc48d3032ee34/table-composition-design-pricing.png\", }, { key: \"compliance-dashboard-table\", name: \"Compliance Dashboard Table\", description: \"This example shows a desktop view of a table used within an accounting compliance dashboard.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3vUKA5C5iJ3LvjLwf2WiO9/274ffe423dbe828244294f6809172ce1/table-composition-compliance-dashboard.png\", }, ], }, related: { items: [ { name: \"\", link: \"\", }, ], }, rules: [ { heading: \"Icon-Only Actions\", description: \"\", doContent: [ { description: \"Use a 'medium' size icon when using an icon-only medium sized action\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3syzrNBEXbBjp5hGEUvF4M/0471f4b16939d8ee54deaf48997ff455/action-icon-do.png\", }, ], dontContent: [ { description: \"Avoid 'x-small', 'medium' or 'large' size icons within an icon-only medium sized action\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/5V2TE85dY848jz1dP6Y0lC/b8e433c8abad5a4402ff1f86ddb8c848/action-icon-dont.png\", }, ], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
9208
+ "default": "{ Tabs: { title: \"Tabs\", description: \"Allows users to switch between views or content sections by selecting from a group of tabs. Tabs keep related content within a single surface, reducing the need for navigation and maintaining context.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/5EC8Uj4pMaQGe2UcNntYLX/040eb1feec8def04504dfa3729494b52/Tab_bar_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=126-560&t=ZfvVjZFxH7mQ72pi-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/navigation-tabbar--docs\"], github: [\"https://github.com/michaeltrilford/muibook/tree/main/src/components/mui-tabs\"], website: [\"https://muibook.com/#/tab-bar\"], guides: [\"https://guides.muibook.com/tab-bar\"], usage: { list: [ \"Use to organise related content or views at the same level of hierarchy.\", \"Ideal for toggling between sections without navigating away from the page.\", \"Use the size API (x-small, small, medium, large) to align tabs with adjacent buttons.\", \"Use named slots (before/after) to compose icons and badges in tab items.\", \"Use variant='dots' for compact pagination controls such as carousel navigation.\", \"Use variant='ghost' when you want only active-tab emphasis without outer tab bar chrome.\", \"Keep labels short, clear, and consistently styled.\", \"Avoid using when content is unrelated or exceeds a manageable number of tabs.\", ], }, accessibility: { designerList: [ \"Keyboard users can navigate across tabs using the left/right arrow keys, as well as Home and End keys to jump to the first or last tab.\", \"The active tab always shows a clear focus outline and can be navigated to using the keyboard.\", \"Tabs are grouped in a way that assistive technologies can understand, using standard roles and attributes.\", \"The system keeps track of which tab is active behind the scenes, so screen readers and keyboard users always stay in sync.\", ], engineerList: [ \"Left/Right arrows, Home and End keys let keyboard users navigate between tab-items.\", \"aria-selected and tabindex attributes are updated on each tab-item when it becomes active or inactive.\", \"Each active tab-item can receive focus and shows a focus-visible outline.\", \"tab-bar uses role=tablist to group related tab-items and each tab-item uses role=tab within the tab-bar.\", ], }, anatomy: { image: \"https://images.ctfassets.net/i5uwscj4pkk2/koeu63xbKYOWZgs8i0eev/983e09362714a2dcdcc7262889ba1236/Tabs_-_Anatomy.png\", list: [ \"Active: Indicates the currently selected tab.\", \"Inactive: Indicates a tab that is not selected and is waiting for user interaction.\", ], }, variants: { items: [ { key: \"\", title: \"\", description: \"\", image: \"\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"wallet\", name: \"Wallet\", description: \"This example shows a wallet view featuring a digital card, transaction and statement tabs. It demonstrates how foundational components like tabs, slats, and buttons can be composed to create flexible, real-world layouts.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/6RoGBcahh63o16PAcEsgyX/36f5c8d9bf0e8754a574955b32ee6eda/Tab_Bar_-_Composition.png\", }, { key: \"product-carousel\", name: \"Product Carousel\", description: \"Demonstrates how to add custom compositions and layouts within the carousel panels.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/4NRMfGil4AcMUh7FDhYyHz/7c4636822eba6d3ae15e684f50d10fdd/Carousel_-_Composition.png\", }, { key: \"carousel-showcase\", name: \"Carousel Showcase\", description: \"This example from the GuruSuite website demonstrates the carousel used to showcase two of the products on offer.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2TaRRm351HyujF9mT2w1wH/3958f69e939d20618751742130dc5f06/GuruSuite-Carousel-Composition.png\", }, ], }, related: { items: [ { name: \"Carousel\", link: \"https://guides.muibook.com/carousel\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
9171
9209
  }
9172
9210
  ],
9173
9211
  "exports": [
@@ -9176,20 +9214,20 @@
9176
9214
  "name": "muiDocs",
9177
9215
  "declaration": {
9178
9216
  "name": "muiDocs",
9179
- "module": "src/components/mui-table/doc.ts"
9217
+ "module": "src/components/mui-tabs/doc.ts"
9180
9218
  }
9181
9219
  }
9182
9220
  ]
9183
9221
  },
9184
9222
  {
9185
9223
  "kind": "javascript-module",
9186
- "path": "src/components/mui-table/index.ts",
9224
+ "path": "src/components/mui-tabs/index.ts",
9187
9225
  "declarations": [],
9188
9226
  "exports": []
9189
9227
  },
9190
9228
  {
9191
9229
  "kind": "javascript-module",
9192
- "path": "src/components/mui-tabs/doc.ts",
9230
+ "path": "src/components/mui-table/doc.ts",
9193
9231
  "declarations": [
9194
9232
  {
9195
9233
  "kind": "variable",
@@ -9197,7 +9235,7 @@
9197
9235
  "type": {
9198
9236
  "text": "MuiDocs"
9199
9237
  },
9200
- "default": "{ Tabs: { title: \"Tabs\", description: \"Allows users to switch between views or content sections by selecting from a group of tabs. Tabs keep related content within a single surface, reducing the need for navigation and maintaining context.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/5EC8Uj4pMaQGe2UcNntYLX/040eb1feec8def04504dfa3729494b52/Tab_bar_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=126-560&t=ZfvVjZFxH7mQ72pi-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/navigation-tabbar--docs\"], github: [\"https://github.com/michaeltrilford/muibook/tree/main/src/components/mui-tabs\"], website: [\"https://muibook.com/#/tab-bar\"], guides: [\"https://guides.muibook.com/tab-bar\"], usage: { list: [ \"Use to organise related content or views at the same level of hierarchy.\", \"Ideal for toggling between sections without navigating away from the page.\", \"Use the size API (x-small, small, medium, large) to align tabs with adjacent buttons.\", \"Use named slots (before/after) to compose icons and badges in tab items.\", \"Use variant='dots' for compact pagination controls such as carousel navigation.\", \"Use variant='ghost' when you want only active-tab emphasis without outer tab bar chrome.\", \"Keep labels short, clear, and consistently styled.\", \"Avoid using when content is unrelated or exceeds a manageable number of tabs.\", ], }, accessibility: { designerList: [ \"Keyboard users can navigate across tabs using the left/right arrow keys, as well as Home and End keys to jump to the first or last tab.\", \"The active tab always shows a clear focus outline and can be navigated to using the keyboard.\", \"Tabs are grouped in a way that assistive technologies can understand, using standard roles and attributes.\", \"The system keeps track of which tab is active behind the scenes, so screen readers and keyboard users always stay in sync.\", ], engineerList: [ \"Left/Right arrows, Home and End keys let keyboard users navigate between tab-items.\", \"aria-selected and tabindex attributes are updated on each tab-item when it becomes active or inactive.\", \"Each active tab-item can receive focus and shows a focus-visible outline.\", \"tab-bar uses role=tablist to group related tab-items and each tab-item uses role=tab within the tab-bar.\", ], }, anatomy: { image: \"https://images.ctfassets.net/i5uwscj4pkk2/koeu63xbKYOWZgs8i0eev/983e09362714a2dcdcc7262889ba1236/Tabs_-_Anatomy.png\", list: [ \"Active: Indicates the currently selected tab.\", \"Inactive: Indicates a tab that is not selected and is waiting for user interaction.\", ], }, variants: { items: [ { key: \"\", title: \"\", description: \"\", image: \"\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"wallet\", name: \"Wallet\", description: \"This example shows a wallet view featuring a digital card, transaction and statement tabs. It demonstrates how foundational components like tabs, slats, and buttons can be composed to create flexible, real-world layouts.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/6RoGBcahh63o16PAcEsgyX/36f5c8d9bf0e8754a574955b32ee6eda/Tab_Bar_-_Composition.png\", }, { key: \"product-carousel\", name: \"Product Carousel\", description: \"Demonstrates how to add custom compositions and layouts within the carousel panels.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/4NRMfGil4AcMUh7FDhYyHz/7c4636822eba6d3ae15e684f50d10fdd/Carousel_-_Composition.png\", }, { key: \"carousel-showcase\", name: \"Carousel Showcase\", description: \"This example from the GuruSuite website demonstrates the carousel used to showcase two of the products on offer.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2TaRRm351HyujF9mT2w1wH/3958f69e939d20618751742130dc5f06/GuruSuite-Carousel-Composition.png\", }, ], }, related: { items: [ { name: \"Carousel\", link: \"https://guides.muibook.com/carousel\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
9238
+ "default": "{ Table: { title: \"Table\", description: \"Displays data in a grid layout to support scanability and comparison across rows and columns. Best suited for structured, repeatable content.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/34Yd6uWrfM5Ihv4rdniHYy/9e1698ce2c23d6c74006bf3f2ae93066/Table_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=958-8696&t=0ytskb8cxriEmdz2-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/content-table--docs\"], github: [\"https://github.com/michaeltrilford/muibook/tree/main/src/components/mui-table\"], website: [\"https://muibook.com/#/table\"], guides: [\"https://guides.muibook.com/table\"], usage: { list: [ \"Use for structured content that benefits from a grid format.\", \"Ideal for comparing data across multiple rows and columns.\", \"Supports sorting, filtering, or action buttons if needed.\", \"Avoid for unstructured, visual, or narrative-based content.\", \"Tables should adapt for smaller viewports by switching to the Slat component.\", \"Prioritise key content and simplify structure when transitioning to mobile views.\", ], }, accessibility: { designerList: [ \"mui-table uses role='table'.\", \"mui-row-group uses role='rowgroup'.\", \"mui-row uses role='row'.\", \"mui-cell uses role='cell'.\", \"Follows table semantics for screen reader support.\", ], engineerList: [ \"mui-table uses role='table'.\", \"mui-row-group uses role='rowgroup'.\", \"mui-row uses role='row'.\", \"mui-cell uses role='cell'.\", \"Follows table semantics for screen reader support.\", ], }, anatomy: { image: \"https://images.ctfassets.net/i5uwscj4pkk2/2KHxAyGbYW7qwySwCLYrbo/0ffc98c3eef07098afaf64bebc6afd4a/Table_-_Anatomy.png\", list: [ \"Heading: The header row of the table accepts headings and other arrangements as needed.\", \"Data: The row contains standard data as well as other arrangements, such as grouped content.\", \"Actions: The main actions for each table row can be included in a dedicated column or slot.\", ], }, variants: { items: [ { key: \"\", title: \"\", description: \"\", image: \"\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"prop-types-table\", name: \"Prop Types Table\", description: \"Attached is a standard example demonstrating how to use the table to present general data for component prop types.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/1JeUHjbeqVNgTvlVZkeHjw/7f652efbea5cc6aa436449905e2ae48e/table_-_composition.png\", }, { key: \"simple-table-dropdown\", name: \"Simple Table w/ Dropdown\", description: \"Example of a simple table with a dropdown action positioned on the far right, following the content. Demonstrates the table used within a card layout, as it might appear on a page or settings view.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3IIRPg0pdQB66NJniCZvlo/2600a8bee4ad1c79a63dc48d3032ee34/table-composition-design-pricing.png\", }, { key: \"compliance-dashboard-table\", name: \"Compliance Dashboard Table\", description: \"This example shows a desktop view of a table used within an accounting compliance dashboard.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3vUKA5C5iJ3LvjLwf2WiO9/274ffe423dbe828244294f6809172ce1/table-composition-compliance-dashboard.png\", }, ], }, related: { items: [ { name: \"\", link: \"\", }, ], }, rules: [ { heading: \"Icon-Only Actions\", description: \"\", doContent: [ { description: \"Use a 'medium' size icon when using an icon-only medium sized action\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3syzrNBEXbBjp5hGEUvF4M/0471f4b16939d8ee54deaf48997ff455/action-icon-do.png\", }, ], dontContent: [ { description: \"Avoid 'x-small', 'medium' or 'large' size icons within an icon-only medium sized action\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/5V2TE85dY848jz1dP6Y0lC/b8e433c8abad5a4402ff1f86ddb8c848/action-icon-dont.png\", }, ], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
9201
9239
  }
9202
9240
  ],
9203
9241
  "exports": [
@@ -9206,17 +9244,119 @@
9206
9244
  "name": "muiDocs",
9207
9245
  "declaration": {
9208
9246
  "name": "muiDocs",
9209
- "module": "src/components/mui-tabs/doc.ts"
9247
+ "module": "src/components/mui-table/doc.ts"
9210
9248
  }
9211
9249
  }
9212
9250
  ]
9213
9251
  },
9214
9252
  {
9215
9253
  "kind": "javascript-module",
9216
- "path": "src/components/mui-tabs/index.ts",
9254
+ "path": "src/components/mui-table/index.ts",
9217
9255
  "declarations": [],
9218
9256
  "exports": []
9219
9257
  },
9258
+ {
9259
+ "kind": "javascript-module",
9260
+ "path": "src/components/mui-accordion/block/index.ts",
9261
+ "declarations": [
9262
+ {
9263
+ "kind": "class",
9264
+ "description": "",
9265
+ "name": "MuiAccordionBlock",
9266
+ "members": [
9267
+ {
9268
+ "kind": "field",
9269
+ "name": "summaryEl",
9270
+ "type": {
9271
+ "text": "HTMLElement | null"
9272
+ },
9273
+ "privacy": "private",
9274
+ "default": "null"
9275
+ },
9276
+ {
9277
+ "kind": "field",
9278
+ "name": "detailEl",
9279
+ "type": {
9280
+ "text": "HTMLElement | null"
9281
+ },
9282
+ "privacy": "private",
9283
+ "default": "null"
9284
+ },
9285
+ {
9286
+ "kind": "field",
9287
+ "name": "chevronEl",
9288
+ "type": {
9289
+ "text": "HTMLElement | null"
9290
+ },
9291
+ "privacy": "private",
9292
+ "default": "null"
9293
+ },
9294
+ {
9295
+ "kind": "field",
9296
+ "name": "accordionId",
9297
+ "type": {
9298
+ "text": "string"
9299
+ },
9300
+ "privacy": "private",
9301
+ "default": "`accordion-detail-${Math.random() .toString(36) .substring(2, 9)}`"
9302
+ },
9303
+ {
9304
+ "kind": "method",
9305
+ "name": "getDetailEl",
9306
+ "privacy": "private",
9307
+ "return": {
9308
+ "type": {
9309
+ "text": "HTMLElement | null"
9310
+ }
9311
+ }
9312
+ },
9313
+ {
9314
+ "kind": "method",
9315
+ "name": "toggleAccordion"
9316
+ },
9317
+ {
9318
+ "kind": "method",
9319
+ "name": "setOpen",
9320
+ "parameters": [
9321
+ {
9322
+ "name": "state",
9323
+ "type": {
9324
+ "text": "boolean"
9325
+ }
9326
+ }
9327
+ ]
9328
+ },
9329
+ {
9330
+ "kind": "method",
9331
+ "name": "closeAccordion"
9332
+ }
9333
+ ],
9334
+ "events": [
9335
+ {
9336
+ "name": "accordion-opened",
9337
+ "type": {
9338
+ "text": "CustomEvent"
9339
+ }
9340
+ }
9341
+ ],
9342
+ "superclass": {
9343
+ "name": "HTMLElement"
9344
+ },
9345
+ "tagName": "mui-accordion-block",
9346
+ "customElement": true
9347
+ }
9348
+ ],
9349
+ "exports": [
9350
+ {
9351
+ "kind": "custom-element-definition",
9352
+ "name": "mui-accordion-block",
9353
+ "declaration": {
9354
+ "name": "MuiAccordionBlock",
9355
+ "module": "src/components/mui-accordion/block/index.ts"
9356
+ }
9357
+ }
9358
+ ]
9359
+ },
9220
9360
  {
9221
9361
  "kind": "javascript-module",
9222
9362
  "path": "src/components/mui-textarea/doc.ts",
@@ -9347,102 +9487,37 @@
9347
9487
  },
9348
9488
  {
9349
9489
  "kind": "javascript-module",
9350
- "path": "src/components/mui-accordion/block/index.ts",
9490
+ "path": "src/components/mui-accordion/group/index.ts",
9351
9491
  "declarations": [
9352
9492
  {
9353
9493
  "kind": "class",
9354
9494
  "description": "",
9355
- "name": "MuiAccordionBlock",
9495
+ "name": "MuiAccordionGroup",
9356
9496
  "members": [
9357
9497
  {
9358
9498
  "kind": "field",
9359
- "name": "summaryEl",
9360
- "type": {
9361
- "text": "HTMLElement | null"
9362
- },
9363
- "privacy": "private",
9364
- "default": "null"
9365
- },
9366
- {
9367
- "kind": "field",
9368
- "name": "detailEl",
9369
- "type": {
9370
- "text": "HTMLElement | null"
9371
- },
9372
- "privacy": "private",
9373
- "default": "null"
9374
- },
9375
- {
9376
- "kind": "field",
9377
- "name": "chevronEl",
9378
- "type": {
9379
- "text": "HTMLElement | null"
9380
- },
9381
- "privacy": "private",
9382
- "default": "null"
9383
- },
9384
- {
9385
- "kind": "field",
9386
- "name": "accordionId",
9499
+ "name": "accordions",
9387
9500
  "type": {
9388
- "text": "string"
9501
+ "text": "AccordionBlockElement[]"
9389
9502
  },
9390
9503
  "privacy": "private",
9391
- "default": "`accordion-detail-${Math.random() .toString(36) .substring(2, 9)}`"
9392
- },
9393
- {
9394
- "kind": "method",
9395
- "name": "getDetailEl",
9396
- "privacy": "private",
9397
- "return": {
9398
- "type": {
9399
- "text": "HTMLElement | null"
9400
- }
9401
- }
9402
- },
9403
- {
9404
- "kind": "method",
9405
- "name": "toggleAccordion"
9406
- },
9407
- {
9408
- "kind": "method",
9409
- "name": "setOpen",
9410
- "parameters": [
9411
- {
9412
- "name": "state",
9413
- "type": {
9414
- "text": "boolean"
9415
- }
9416
- }
9417
- ]
9418
- },
9419
- {
9420
- "kind": "method",
9421
- "name": "closeAccordion"
9422
- }
9423
- ],
9424
- "events": [
9425
- {
9426
- "name": "accordion-opened",
9427
- "type": {
9428
- "text": "CustomEvent"
9429
- }
9504
+ "default": "[]"
9430
9505
  }
9431
9506
  ],
9432
9507
  "superclass": {
9433
9508
  "name": "HTMLElement"
9434
9509
  },
9435
- "tagName": "mui-accordion-block",
9510
+ "tagName": "mui-accordion-group",
9436
9511
  "customElement": true
9437
9512
  }
9438
9513
  ],
9439
9514
  "exports": [
9440
9515
  {
9441
9516
  "kind": "custom-element-definition",
9442
- "name": "mui-accordion-block",
9517
+ "name": "mui-accordion-group",
9443
9518
  "declaration": {
9444
- "name": "MuiAccordionBlock",
9445
- "module": "src/components/mui-accordion/block/index.ts"
9519
+ "name": "MuiAccordionGroup",
9520
+ "module": "src/components/mui-accordion/group/index.ts"
9446
9521
  }
9447
9522
  }
9448
9523
  ]
@@ -9530,37 +9605,46 @@
9530
9605
  },
9531
9606
  {
9532
9607
  "kind": "javascript-module",
9533
- "path": "src/components/mui-accordion/group/index.ts",
9608
+ "path": "src/components/mui-card/body/index.ts",
9534
9609
  "declarations": [
9535
9610
  {
9536
9611
  "kind": "class",
9537
9612
  "description": "",
9538
- "name": "MuiAccordionGroup",
9613
+ "name": "MuiCardBody",
9539
9614
  "members": [
9540
9615
  {
9541
- "kind": "field",
9542
- "name": "accordions",
9543
- "type": {
9544
- "text": "AccordionBlockElement[]"
9545
- },
9546
- "privacy": "private",
9547
- "default": "[]"
9616
+ "kind": "method",
9617
+ "name": "updateSlottedContent",
9618
+ "return": {
9619
+ "type": {
9620
+ "text": "void"
9621
+ }
9622
+ }
9623
+ },
9624
+ {
9625
+ "kind": "method",
9626
+ "name": "render"
9627
+ }
9628
+ ],
9629
+ "attributes": [
9630
+ {
9631
+ "name": "condensed"
9548
9632
  }
9549
9633
  ],
9550
9634
  "superclass": {
9551
9635
  "name": "HTMLElement"
9552
9636
  },
9553
- "tagName": "mui-accordion-group",
9637
+ "tagName": "mui-card-body",
9554
9638
  "customElement": true
9555
9639
  }
9556
9640
  ],
9557
9641
  "exports": [
9558
9642
  {
9559
9643
  "kind": "custom-element-definition",
9560
- "name": "mui-accordion-group",
9644
+ "name": "mui-card-body",
9561
9645
  "declaration": {
9562
- "name": "MuiAccordionGroup",
9563
- "module": "src/components/mui-accordion/group/index.ts"
9646
+ "name": "MuiCardBody",
9647
+ "module": "src/components/mui-card/body/index.ts"
9564
9648
  }
9565
9649
  }
9566
9650
  ]
@@ -9621,52 +9705,6 @@
9621
9705
  }
9622
9706
  ]
9623
9707
  },
9624
- {
9625
- "kind": "javascript-module",
9626
- "path": "src/components/mui-card/body/index.ts",
9627
- "declarations": [
9628
- {
9629
- "kind": "class",
9630
- "description": "",
9631
- "name": "MuiCardBody",
9632
- "members": [
9633
- {
9634
- "kind": "method",
9635
- "name": "updateSlottedContent",
9636
- "return": {
9637
- "type": {
9638
- "text": "void"
9639
- }
9640
- }
9641
- },
9642
- {
9643
- "kind": "method",
9644
- "name": "render"
9645
- }
9646
- ],
9647
- "attributes": [
9648
- {
9649
- "name": "condensed"
9650
- }
9651
- ],
9652
- "superclass": {
9653
- "name": "HTMLElement"
9654
- },
9655
- "tagName": "mui-card-body",
9656
- "customElement": true
9657
- }
9658
- ],
9659
- "exports": [
9660
- {
9661
- "kind": "custom-element-definition",
9662
- "name": "mui-card-body",
9663
- "declaration": {
9664
- "name": "MuiCardBody",
9665
- "module": "src/components/mui-card/body/index.ts"
9666
- }
9667
- }
9668
- ]
9669
- },
9670
9708
  {
9671
9709
  "kind": "javascript-module",
9672
9710
  "path": "src/components/mui-card/card/index.ts",
@@ -10065,153 +10103,153 @@
10065
10103
  },
10066
10104
  {
10067
10105
  "kind": "javascript-module",
10068
- "path": "src/components/mui-slat/slat/index.ts",
10106
+ "path": "src/components/mui-stack/hstack/index.ts",
10069
10107
  "declarations": [
10070
10108
  {
10071
10109
  "kind": "class",
10072
10110
  "description": "",
10073
- "name": "MuiSlat",
10111
+ "name": "MuiHStack",
10074
10112
  "members": [
10075
10113
  {
10076
10114
  "kind": "field",
10077
- "name": "variant",
10115
+ "name": "space",
10078
10116
  "type": {
10079
10117
  "text": "string"
10080
10118
  },
10081
10119
  "privacy": "private",
10082
- "default": "\"\""
10120
+ "default": "`var(--space-500)`"
10083
10121
  },
10084
10122
  {
10085
- "kind": "method",
10086
- "name": "enforceAvatarSizes"
10123
+ "kind": "field",
10124
+ "name": "alignX",
10125
+ "type": {
10126
+ "text": "string"
10127
+ },
10128
+ "privacy": "private",
10129
+ "default": "`flex-start`"
10087
10130
  },
10088
10131
  {
10089
- "kind": "method",
10090
- "name": "applyCellRoles"
10132
+ "kind": "field",
10133
+ "name": "alignY",
10134
+ "type": {
10135
+ "text": "string"
10136
+ },
10137
+ "privacy": "private",
10138
+ "default": "`flex-start`"
10139
+ },
10140
+ {
10141
+ "kind": "field",
10142
+ "name": "styles",
10143
+ "type": {
10144
+ "text": "string"
10145
+ },
10146
+ "privacy": "private",
10147
+ "default": "` :host { display: block; } slot { display: flex; gap: var(--space); align-items: var(--alignY); justify-content: var(--alignX); } `"
10091
10148
  },
10092
10149
  {
10093
10150
  "kind": "method",
10094
- "name": "hasAccessorySlot",
10151
+ "name": "waitForPartMap",
10095
10152
  "return": {
10096
10153
  "type": {
10097
- "text": "boolean"
10154
+ "text": "Promise<void>"
10098
10155
  }
10099
10156
  }
10100
- },
10101
- {
10102
- "kind": "method",
10103
- "name": "render"
10104
10157
  }
10105
10158
  ],
10106
10159
  "attributes": [
10107
10160
  {
10108
- "name": "variant"
10161
+ "name": "space"
10109
10162
  },
10110
10163
  {
10111
- "name": "col"
10164
+ "name": "aligny"
10112
10165
  },
10113
10166
  {
10114
- "name": "space"
10167
+ "name": "alignx"
10115
10168
  }
10116
10169
  ],
10117
10170
  "superclass": {
10118
10171
  "name": "HTMLElement"
10119
10172
  },
10120
- "tagName": "mui-slat",
10173
+ "tagName": "mui-h-stack",
10121
10174
  "customElement": true
10122
10175
  }
10123
10176
  ],
10124
10177
  "exports": [
10125
10178
  {
10126
10179
  "kind": "custom-element-definition",
10127
- "name": "mui-slat",
10180
+ "name": "mui-h-stack",
10128
10181
  "declaration": {
10129
- "name": "MuiSlat",
10130
- "module": "src/components/mui-slat/slat/index.ts"
10182
+ "name": "MuiHStack",
10183
+ "module": "src/components/mui-stack/hstack/index.ts"
10131
10184
  }
10132
10185
  }
10133
10186
  ]
10134
10187
  },
10135
10188
  {
10136
10189
  "kind": "javascript-module",
10137
- "path": "src/components/mui-stack/hstack/index.ts",
10190
+ "path": "src/components/mui-slat/slat/index.ts",
10138
10191
  "declarations": [
10139
10192
  {
10140
10193
  "kind": "class",
10141
10194
  "description": "",
10142
- "name": "MuiHStack",
10195
+ "name": "MuiSlat",
10143
10196
  "members": [
10144
10197
  {
10145
10198
  "kind": "field",
10146
- "name": "space",
10147
- "type": {
10148
- "text": "string"
10149
- },
10150
- "privacy": "private",
10151
- "default": "`var(--space-500)`"
10152
- },
10153
- {
10154
- "kind": "field",
10155
- "name": "alignX",
10199
+ "name": "variant",
10156
10200
  "type": {
10157
10201
  "text": "string"
10158
10202
  },
10159
10203
  "privacy": "private",
10160
- "default": "`flex-start`"
10204
+ "default": "\"\""
10161
10205
  },
10162
10206
  {
10163
- "kind": "field",
10164
- "name": "alignY",
10165
- "type": {
10166
- "text": "string"
10167
- },
10168
- "privacy": "private",
10169
- "default": "`flex-start`"
10207
+ "kind": "method",
10208
+ "name": "enforceAvatarSizes"
10170
10209
  },
10171
10210
  {
10172
- "kind": "field",
10173
- "name": "styles",
10174
- "type": {
10175
- "text": "string"
10176
- },
10177
- "privacy": "private",
10178
- "default": "` :host { display: block; } slot { display: flex; gap: var(--space); align-items: var(--alignY); justify-content: var(--alignX); } `"
10211
+ "kind": "method",
10212
+ "name": "applyCellRoles"
10179
10213
  },
10180
10214
  {
10181
10215
  "kind": "method",
10182
- "name": "waitForPartMap",
10216
+ "name": "hasAccessorySlot",
10183
10217
  "return": {
10184
10218
  "type": {
10185
- "text": "Promise<void>"
10219
+ "text": "boolean"
10186
10220
  }
10187
10221
  }
10222
+ },
10223
+ {
10224
+ "kind": "method",
10225
+ "name": "render"
10188
10226
  }
10189
10227
  ],
10190
10228
  "attributes": [
10191
10229
  {
10192
- "name": "space"
10230
+ "name": "variant"
10193
10231
  },
10194
10232
  {
10195
- "name": "aligny"
10233
+ "name": "col"
10196
10234
  },
10197
10235
  {
10198
- "name": "alignx"
10236
+ "name": "space"
10199
10237
  }
10200
10238
  ],
10201
10239
  "superclass": {
10202
10240
  "name": "HTMLElement"
10203
10241
  },
10204
- "tagName": "mui-h-stack",
10242
+ "tagName": "mui-slat",
10205
10243
  "customElement": true
10206
10244
  }
10207
10245
  ],
10208
10246
  "exports": [
10209
10247
  {
10210
10248
  "kind": "custom-element-definition",
10211
- "name": "mui-h-stack",
10249
+ "name": "mui-slat",
10212
10250
  "declaration": {
10213
- "name": "MuiHStack",
10214
- "module": "src/components/mui-stack/hstack/index.ts"
10251
+ "name": "MuiSlat",
10252
+ "module": "src/components/mui-slat/slat/index.ts"
10215
10253
  }
10216
10254
  }
10217
10255
  ]
@@ -10492,115 +10530,35 @@
10492
10530
  ],
10493
10531
  "attributes": [
10494
10532
  {
10495
- "name": "direction"
10496
- },
10497
- {
10498
- "name": "active-step"
10499
- },
10500
- {
10501
- "name": "linear"
10502
- },
10503
- {
10504
- "name": "interactive"
10505
- },
10506
- {
10507
- "name": "size"
10508
- }
10509
- ],
10510
- "superclass": {
10511
- "name": "HTMLElement"
10512
- },
10513
- "tagName": "mui-stepper",
10514
- "customElement": true
10515
- }
10516
- ],
10517
- "exports": [
10518
- {
10519
- "kind": "custom-element-definition",
10520
- "name": "mui-stepper",
10521
- "declaration": {
10522
- "name": "MuiStepper",
10523
- "module": "src/components/mui-stepper/stepper/index.ts"
10524
- }
10525
- }
10526
- ]
10527
- },
10528
- {
10529
- "kind": "javascript-module",
10530
- "path": "src/components/mui-table/cell/index.ts",
10531
- "declarations": [
10532
- {
10533
- "kind": "class",
10534
- "description": "",
10535
- "name": "MuiCell",
10536
- "members": [
10537
- {
10538
- "kind": "method",
10539
- "name": "render"
10540
- }
10541
- ],
10542
- "attributes": [
10543
- {
10544
- "name": "align-y"
10545
- }
10546
- ],
10547
- "superclass": {
10548
- "name": "HTMLElement"
10549
- },
10550
- "tagName": "mui-cell",
10551
- "customElement": true
10552
- }
10553
- ],
10554
- "exports": [
10555
- {
10556
- "kind": "custom-element-definition",
10557
- "name": "mui-cell",
10558
- "declaration": {
10559
- "name": "MuiCell",
10560
- "module": "src/components/mui-table/cell/index.ts"
10561
- }
10562
- }
10563
- ]
10564
- },
10565
- {
10566
- "kind": "javascript-module",
10567
- "path": "src/components/mui-table/row/index.ts",
10568
- "declarations": [
10569
- {
10570
- "kind": "class",
10571
- "description": "",
10572
- "name": "MuiRow",
10573
- "members": [
10574
- {
10575
- "kind": "method",
10576
- "name": "syncContextAttributes",
10577
- "privacy": "private"
10578
- },
10579
- {
10580
- "kind": "method",
10581
- "name": "render",
10582
- "privacy": "private"
10583
- }
10584
- ],
10585
- "attributes": [
10586
- {
10587
- "name": "columns"
10533
+ "name": "direction"
10534
+ },
10535
+ {
10536
+ "name": "active-step"
10537
+ },
10538
+ {
10539
+ "name": "linear"
10540
+ },
10541
+ {
10542
+ "name": "interactive"
10543
+ },
10544
+ {
10545
+ "name": "size"
10588
10546
  }
10589
10547
  ],
10590
10548
  "superclass": {
10591
10549
  "name": "HTMLElement"
10592
10550
  },
10593
- "tagName": "mui-row",
10551
+ "tagName": "mui-stepper",
10594
10552
  "customElement": true
10595
10553
  }
10596
10554
  ],
10597
10555
  "exports": [
10598
10556
  {
10599
10557
  "kind": "custom-element-definition",
10600
- "name": "mui-row",
10558
+ "name": "mui-stepper",
10601
10559
  "declaration": {
10602
- "name": "MuiRow",
10603
- "module": "src/components/mui-table/row/index.ts"
10560
+ "name": "MuiStepper",
10561
+ "module": "src/components/mui-stepper/stepper/index.ts"
10604
10562
  }
10605
10563
  }
10606
10564
  ]
@@ -10679,52 +10637,45 @@
10679
10637
  },
10680
10638
  {
10681
10639
  "kind": "javascript-module",
10682
- "path": "src/components/mui-table/table/index.ts",
10683
- "declarations": [
10684
- {
10685
- "kind": "class",
10686
- "description": "",
10687
- "name": "MuiTable",
10688
- "superclass": {
10689
- "name": "HTMLElement"
10690
- },
10691
- "tagName": "mui-table",
10692
- "customElement": true
10693
- }
10694
- ],
10695
- "exports": [
10696
- {
10697
- "kind": "custom-element-definition",
10698
- "name": "mui-table",
10699
- "declaration": {
10700
- "name": "MuiTable",
10701
- "module": "src/components/mui-table/table/index.ts"
10702
- }
10703
- }
10704
- ]
10705
- },
10706
- {
10707
- "kind": "javascript-module",
10708
- "path": "src/components/mui-table/row-group/index.ts",
10640
+ "path": "src/components/mui-tabs/panel/index.ts",
10709
10641
  "declarations": [
10710
10642
  {
10711
10643
  "kind": "class",
10712
10644
  "description": "",
10713
- "name": "MuiRowGroup",
10645
+ "name": "MuiTabPanel",
10646
+ "members": [
10647
+ {
10648
+ "kind": "field",
10649
+ "name": "item",
10650
+ "type": {
10651
+ "text": "string | null"
10652
+ }
10653
+ },
10654
+ {
10655
+ "kind": "field",
10656
+ "name": "innerHTML",
10657
+ "default": "` <style> :host { display: block; } :host([hidden]) { display: none !important; } .inner { padding: var(--tab-panel-padding, 0); } </style> <div class=\"inner\"> <slot></slot> </div> `"
10658
+ }
10659
+ ],
10660
+ "attributes": [
10661
+ {
10662
+ "name": "item"
10663
+ }
10664
+ ],
10714
10665
  "superclass": {
10715
10666
  "name": "HTMLElement"
10716
10667
  },
10717
- "tagName": "mui-row-group",
10668
+ "tagName": "mui-tab-panel",
10718
10669
  "customElement": true
10719
10670
  }
10720
10671
  ],
10721
10672
  "exports": [
10722
10673
  {
10723
10674
  "kind": "custom-element-definition",
10724
- "name": "mui-row-group",
10675
+ "name": "mui-tab-panel",
10725
10676
  "declaration": {
10726
- "name": "MuiRowGroup",
10727
- "module": "src/components/mui-table/row-group/index.ts"
10677
+ "name": "MuiTabPanel",
10678
+ "module": "src/components/mui-tabs/panel/index.ts"
10728
10679
  }
10729
10680
  }
10730
10681
  ]
@@ -10834,51 +10785,6 @@
10834
10785
  }
10835
10786
  ]
10836
10787
  },
10837
- {
10838
- "kind": "javascript-module",
10839
- "path": "src/components/mui-tabs/panel/index.ts",
10840
- "declarations": [
10841
- {
10842
- "kind": "class",
10843
- "description": "",
10844
- "name": "MuiTabPanel",
10845
- "members": [
10846
- {
10847
- "kind": "field",
10848
- "name": "item",
10849
- "type": {
10850
- "text": "string | null"
10851
- }
10852
- },
10853
- {
10854
- "kind": "field",
10855
- "name": "innerHTML",
10856
- "default": "` <style> :host { display: block; } :host([hidden]) { display: none !important; } .inner { padding: var(--tab-panel-padding, 0); } </style> <div class=\"inner\"> <slot></slot> </div> `"
10857
- }
10858
- ],
10859
- "attributes": [
10860
- {
10861
- "name": "item"
10862
- }
10863
- ],
10864
- "superclass": {
10865
- "name": "HTMLElement"
10866
- },
10867
- "tagName": "mui-tab-panel",
10868
- "customElement": true
10869
- }
10870
- ],
10871
- "exports": [
10872
- {
10873
- "kind": "custom-element-definition",
10874
- "name": "mui-tab-panel",
10875
- "declaration": {
10876
- "name": "MuiTabPanel",
10877
- "module": "src/components/mui-tabs/panel/index.ts"
10878
- }
10879
- }
10880
- ]
10881
- },
10882
10788
  {
10883
10789
  "kind": "javascript-module",
10884
10790
  "path": "src/components/mui-tabs/tab-bar/index.ts",
@@ -11038,6 +10944,138 @@
11038
10944
  }
11039
10945
  }
11040
10946
  ]
10947
+ },
10948
+ {
10949
+ "kind": "javascript-module",
10950
+ "path": "src/components/mui-table/cell/index.ts",
10951
+ "declarations": [
10952
+ {
10953
+ "kind": "class",
10954
+ "description": "",
10955
+ "name": "MuiCell",
10956
+ "members": [
10957
+ {
10958
+ "kind": "method",
10959
+ "name": "render"
10960
+ }
10961
+ ],
10962
+ "attributes": [
10963
+ {
10964
+ "name": "align-y"
10965
+ }
10966
+ ],
10967
+ "superclass": {
10968
+ "name": "HTMLElement"
10969
+ },
10970
+ "tagName": "mui-cell",
10971
+ "customElement": true
10972
+ }
10973
+ ],
10974
+ "exports": [
10975
+ {
10976
+ "kind": "custom-element-definition",
10977
+ "name": "mui-cell",
10978
+ "declaration": {
10979
+ "name": "MuiCell",
10980
+ "module": "src/components/mui-table/cell/index.ts"
10981
+ }
10982
+ }
10983
+ ]
10984
+ },
10985
+ {
10986
+ "kind": "javascript-module",
10987
+ "path": "src/components/mui-table/row-group/index.ts",
10988
+ "declarations": [
10989
+ {
10990
+ "kind": "class",
10991
+ "description": "",
10992
+ "name": "MuiRowGroup",
10993
+ "superclass": {
10994
+ "name": "HTMLElement"
10995
+ },
10996
+ "tagName": "mui-row-group",
10997
+ "customElement": true
10998
+ }
10999
+ ],
11000
+ "exports": [
11001
+ {
11002
+ "kind": "custom-element-definition",
11003
+ "name": "mui-row-group",
11004
+ "declaration": {
11005
+ "name": "MuiRowGroup",
11006
+ "module": "src/components/mui-table/row-group/index.ts"
11007
+ }
11008
+ }
11009
+ ]
11010
+ },
11011
+ {
11012
+ "kind": "javascript-module",
11013
+ "path": "src/components/mui-table/table/index.ts",
11014
+ "declarations": [
11015
+ {
11016
+ "kind": "class",
11017
+ "description": "",
11018
+ "name": "MuiTable",
11019
+ "superclass": {
11020
+ "name": "HTMLElement"
11021
+ },
11022
+ "tagName": "mui-table",
11023
+ "customElement": true
11024
+ }
11025
+ ],
11026
+ "exports": [
11027
+ {
11028
+ "kind": "custom-element-definition",
11029
+ "name": "mui-table",
11030
+ "declaration": {
11031
+ "name": "MuiTable",
11032
+ "module": "src/components/mui-table/table/index.ts"
11033
+ }
11034
+ }
11035
+ ]
11036
+ },
11037
+ {
11038
+ "kind": "javascript-module",
11039
+ "path": "src/components/mui-table/row/index.ts",
11040
+ "declarations": [
11041
+ {
11042
+ "kind": "class",
11043
+ "description": "",
11044
+ "name": "MuiRow",
11045
+ "members": [
11046
+ {
11047
+ "kind": "method",
11048
+ "name": "syncContextAttributes",
11049
+ "privacy": "private"
11050
+ },
11051
+ {
11052
+ "kind": "method",
11053
+ "name": "render",
11054
+ "privacy": "private"
11055
+ }
11056
+ ],
11057
+ "attributes": [
11058
+ {
11059
+ "name": "columns"
11060
+ }
11061
+ ],
11062
+ "superclass": {
11063
+ "name": "HTMLElement"
11064
+ },
11065
+ "tagName": "mui-row",
11066
+ "customElement": true
11067
+ }
11068
+ ],
11069
+ "exports": [
11070
+ {
11071
+ "kind": "custom-element-definition",
11072
+ "name": "mui-row",
11073
+ "declaration": {
11074
+ "name": "MuiRow",
11075
+ "module": "src/components/mui-table/row/index.ts"
11076
+ }
11077
+ }
11078
+ ]
11041
11079
  }
11042
11080
  ]
11043
11081
  }