@muibook/components 8.0.0 → 8.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.
Files changed (4) hide show
  1. package/README.md +16 -0
  2. package/dist/esm/css/mui-tokens.css +1 -1
  3. package/dist/esm/custom-elements.json +473 -473
  4. package/package.json +1 -1
package/dist/esm/custom-elements.json CHANGED
@@ -34,7 +34,7 @@
34
34
  },
35
35
  {
36
36
  "kind": "javascript-module",
37
- "path": "src/components/mui-addon/doc.ts",
37
+ "path": "src/components/mui-avatar/doc.ts",
38
38
  "declarations": [
39
39
  {
40
40
  "kind": "variable",
@@ -42,7 +42,7 @@
42
42
  "type": {
43
43
  "text": "MuiDocs"
44
44
  },
45
- "default": "{ AddOn: { title: \"Add on\", description: \"Enhances form inputs by displaying supplementary information such as units, prefixes, or suffixes adjacent to the input field. Add Ons improve clarity by providing context without adding clutter to the input area.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/3GH67kZLZAjADf3kTIoSV3/82a1ab87bc13b25e6dc1e81c81f69532/AddOn_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=948-4065&t=rIU93UcpsUxOVNN9-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/inputs-addon--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-addon/index.ts\"], website: [\"https://muibook.com/#/addon\"], guides: [\"https://guides.muibook.com/add-on\"], usage: { list: [ \"Use to display units (e.g. %, $, kg) or fixed prefixes/suffixes alongside inputs.\", \"Ideal for improving data entry accuracy and user understanding.\", \"Ensure Add Ons are visually distinct but do not overpower the main input content.\", \"Avoid overcrowding inputs with multiple Add Ons to maintain clarity.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"], }, anatomy: { list: [ \"Add-on placed before the Input Field\", \"Add-on placed after the Input Field\", \"Short text, an icon, or both to support input context.\", ], image: \"https://images.ctfassets.net/i5uwscj4pkk2/13NH06kdHIzm8hDGNBgihx/f5715279e5ab5e2ce6bfd5d38f5f2d1d/Add_on_-_Anatomy.png\", }, variants: { items: [ { key: \"text\", title: \"Text\", description: \"Use for units, currency, or short static labels.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/VfAoQuP8u7icg5s6Shwd6/f5f838a3ffda0d0839ef062af308fc97/text-variant.png\", }, { key: \"icon\", title: \"Icon\", description: \"Use for symbolic cues or clarification of the input’s intent.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/1LY5GdVijhp7bpfRs3WyFc/6d1708bd25496d7f33acba796b8b2aa6/icon-variant.png\", }, ], }, related: { items: [ { name: \"Field\", link: \"https://guides.muibook.com/field\" }, { name: \"Input\", link: \"https://guides.muibook.com/input\" }, { name: \"Select\", link: \"https://guides.muibook.com/select\" }, { name: \"File Upload\", link: \"https://guides.muibook.com/file-upload\" }, { name: \"Icons\", link: \"https://guides.muibook.com/icons\" }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [ { description: \"\", image: \"\" }, { description: \"\", image: \"\" }, ], dontContent: [{ description: \"\" }, { description: \"\" }], }, ], compositions: { description: \"\", items: [ { key: \"\", name: \"\", description: \"\", image: \"\", }, ], }, behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
45
+ "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: [\"\"], }, }, }"
46
46
  }
47
47
  ],
48
48
  "exports": [
@@ -51,20 +51,48 @@
51
51
  "name": "muiDocs",
52
52
  "declaration": {
53
53
  "name": "muiDocs",
54
- "module": "src/components/mui-addon/doc.ts"
54
+ "module": "src/components/mui-avatar/doc.ts"
55
55
  }
56
56
  }
57
57
  ]
58
58
  },
59
59
  {
60
60
  "kind": "javascript-module",
61
- "path": "src/components/mui-addon/index.ts",
61
+ "path": "src/components/mui-avatar/index.ts",
62
62
  "declarations": [
63
63
  {
64
64
  "kind": "class",
65
65
  "description": "",
66
- "name": "MuiAddon",
66
+ "name": "MuiAvatar",
67
67
  "members": [
68
+ {
69
+ "kind": "field",
70
+ "name": "_imageFailed",
71
+ "type": {
72
+ "text": "boolean | undefined"
73
+ },
74
+ "privacy": "private"
75
+ },
76
+ {
77
+ "kind": "method",
78
+ "name": "hasSlottedContent"
79
+ },
80
+ {
81
+ "kind": "method",
82
+ "name": "getInitials",
83
+ "parameters": [
84
+ {
85
+ "name": "label",
86
+ "type": {
87
+ "text": "string | null"
88
+ }
89
+ }
90
+ ]
91
+ },
92
+ {
93
+ "kind": "method",
94
+ "name": "getBackgroundCSS"
95
+ },
68
96
  {
69
97
  "kind": "method",
70
98
  "name": "render"
@@ -72,30 +100,42 @@
72
100
  ],
73
101
  "attributes": [
74
102
  {
75
- "name": "slot"
103
+ "name": "label"
104
+ },
105
+ {
106
+ "name": "image"
107
+ },
108
+ {
109
+ "name": "size"
110
+ },
111
+ {
112
+ "name": "background"
113
+ },
114
+ {
115
+ "name": "background-color"
76
116
  }
77
117
  ],
78
118
  "superclass": {
79
119
  "name": "HTMLElement"
80
120
  },
81
- "tagName": "mui-addon",
121
+ "tagName": "mui-avatar",
82
122
  "customElement": true
83
123
  }
84
124
  ],
85
125
  "exports": [
86
126
  {
87
127
  "kind": "custom-element-definition",
88
- "name": "mui-addon",
128
+ "name": "mui-avatar",
89
129
  "declaration": {
90
- "name": "MuiAddon",
91
- "module": "src/components/mui-addon/index.ts"
130
+ "name": "MuiAvatar",
131
+ "module": "src/components/mui-avatar/index.ts"
92
132
  }
93
133
  }
94
134
  ]
95
135
  },
96
136
  {
97
137
  "kind": "javascript-module",
98
- "path": "src/components/mui-alert/doc.ts",
138
+ "path": "src/components/mui-addon/doc.ts",
99
139
  "declarations": [
100
140
  {
101
141
  "kind": "variable",
@@ -103,7 +143,7 @@
103
143
  "type": {
104
144
  "text": "MuiDocs"
105
145
  },
106
- "default": "{ Alert: { title: \"Alert\", description: \"Alerts surface meaningful system messages related to the users' current task or action.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/7GnGBCbpMF3wyjCDC06hX7/24739b86a907d15400fe8e9e240a9619/Alert_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=3-4444&t=ZA9uH4LK37tSuk6r-1\", ], guides: [\"https://guides.muibook.com/alert\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-alert/index.ts\"], storybook: [\"https://stories.muibook.com/?path=/docs/feedback-alert--docs\"], website: [\"https://muibook.com/#/alert\"], usage: { list: [ \"Success: Confirm completed actions such as form submissions, data saves, or task completion.\", \"Info: For sharing new features, updates, contextual tips, or non-urgent system statuses.\", \"Warning: Alert users to unsaved changes, deprecated features, or risky actions.\", \"Error: Alert users of form validation issues, system failures, or tasks that need attention.\", ], }, accessibility: { designerList: [ \"ARIA-live is built in, using POLITE + ASSERTIVE for screen readers.\", \"The role is set to ALERT for immediate screen reader feedback.\", ], engineerList: [ \"ARIA-live is built in, using POLITE + ASSERTIVE for screen readers.\", \"The role is set to ALERT for immediate screen reader feedback.\", ], }, anatomy: { list: [ \"Preset icon: Communicates the type of alert visually. E.g. info, success, warning, error.\", \"Preset title: Provides a clear, predefined heading that reflects the alert’s purpose.\", \"Customisable text: Allows for specific details or guidance relevant to the situation.\", ], image: \"https://images.ctfassets.net/i5uwscj4pkk2/17j3DxAFlne6rvMi6QUXqZ/aedab2c349c8f8b0a8414b41132cda51/Alert_-_Anatomy.png\", }, variants: { items: [ { key: \"success\", title: \"Success\", description: \"Indicates that an operation or action has been completed successfully. Use this variant for scenarios such as form submissions processed without errors, successful data updates or saves, and confirmations of completed tasks or actions. For accessibility, this variant uses an aria-live value of polite.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2EbJsP3GZ98WPOiF4PbGh2/bc3e020b37b73f949be745e4e26b6e5a/alert-success.png\", }, { key: \"info\", title: \"Info\", description: \"Provides general information or updates that are helpful but not critical. This variant is used for announcing new features or updates, offering contextual information or tips, and informing users about non-urgent system statuses. For accessibility, it uses an aria-live value of polite.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/1SDh1JVNouysPHylu9lTUj/6793dd8aa854d08045c2159b450b762c/alert-info.png\", }, { key: \"warning\", title: \"Warning\", description: \"Alerts users to potential issues or situations that require caution. Common use cases include notifying about unsaved changes, indicating deprecated features or upcoming changes, and highlighting actions that may have unintended consequences. For accessibility, this variant uses an aria-live value of assertive.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2zympGRb3wlU5P36FsKWsL/dd9bde33646345e65d5bff505d512e22/alert-warning.png\", }, { key: \"error\", title: \"Error\", description: \"Indicates that an error has occurred, requiring user attention or action. This variant is typically used for form validation errors, system failures or exceptions, and failed operations or transactions. For accessibility, it uses an aria-live value of assertive.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/zOH2Xinum4ZjIv3qp6LJM/180a2306dd624b6bc2fa55c0ad81ea0e/alert-error.png\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"ai-playground-error-1\", name: \"AI Playground (Error)\", description: \"Demonstrates the Muiplay AI Playground showing a floating error positioned close to the field where a prompt is required to generate a task.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/40RfRPVAN9dvWO7UFuIiUC/52de3cffd69a5bcc2e457f8de03bb9cf/Play-Alert-Composition.png\", }, { key: \"ai-playground-error-2\", name: \"AI Playground (Error)\", description: \"Demonstrates the Muiplay AI Playground showing a floating error positioned close to the field where a prompt is required to generate a task.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/40RfRPVAN9dvWO7UFuIiUC/52de3cffd69a5bcc2e457f8de03bb9cf/Play-Alert-Composition.png\", }, ], }, related: { items: [ { name: \"Message\", link: \"https://guides.muibook.com/message\" }, { name: \"Link\", link: \"https://guides.muibook.com/link\" }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [ { description: \"\", image: \"\" }, { description: \"\", image: \"\" }, ], dontContent: [{ description: \"\" }, { description: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
146
+ "default": "{ AddOn: { title: \"Add on\", description: \"Enhances form inputs by displaying supplementary information such as units, prefixes, or suffixes adjacent to the input field. Add Ons improve clarity by providing context without adding clutter to the input area.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/3GH67kZLZAjADf3kTIoSV3/82a1ab87bc13b25e6dc1e81c81f69532/AddOn_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=948-4065&t=rIU93UcpsUxOVNN9-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/inputs-addon--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-addon/index.ts\"], website: [\"https://muibook.com/#/addon\"], guides: [\"https://guides.muibook.com/add-on\"], usage: { list: [ \"Use to display units (e.g. %, $, kg) or fixed prefixes/suffixes alongside inputs.\", \"Ideal for improving data entry accuracy and user understanding.\", \"Ensure Add Ons are visually distinct but do not overpower the main input content.\", \"Avoid overcrowding inputs with multiple Add Ons to maintain clarity.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"], }, anatomy: { list: [ \"Add-on placed before the Input Field\", \"Add-on placed after the Input Field\", \"Short text, an icon, or both to support input context.\", ], image: \"https://images.ctfassets.net/i5uwscj4pkk2/13NH06kdHIzm8hDGNBgihx/f5715279e5ab5e2ce6bfd5d38f5f2d1d/Add_on_-_Anatomy.png\", }, variants: { items: [ { key: \"text\", title: \"Text\", description: \"Use for units, currency, or short static labels.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/VfAoQuP8u7icg5s6Shwd6/f5f838a3ffda0d0839ef062af308fc97/text-variant.png\", }, { key: \"icon\", title: \"Icon\", description: \"Use for symbolic cues or clarification of the input’s intent.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/1LY5GdVijhp7bpfRs3WyFc/6d1708bd25496d7f33acba796b8b2aa6/icon-variant.png\", }, ], }, related: { items: [ { name: \"Field\", link: \"https://guides.muibook.com/field\" }, { name: \"Input\", link: \"https://guides.muibook.com/input\" }, { name: \"Select\", link: \"https://guides.muibook.com/select\" }, { name: \"File Upload\", link: \"https://guides.muibook.com/file-upload\" }, { name: \"Icons\", link: \"https://guides.muibook.com/icons\" }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [ { description: \"\", image: \"\" }, { description: \"\", image: \"\" }, ], dontContent: [{ description: \"\" }, { description: \"\" }], }, ], compositions: { description: \"\", items: [ { key: \"\", name: \"\", description: \"\", image: \"\", }, ], }, behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
107
147
  }
108
148
  ],
109
149
  "exports": [
@@ -112,45 +152,51 @@
112
152
  "name": "muiDocs",
113
153
  "declaration": {
114
154
  "name": "muiDocs",
115
- "module": "src/components/mui-alert/doc.ts"
155
+ "module": "src/components/mui-addon/doc.ts"
116
156
  }
117
157
  }
118
158
  ]
119
159
  },
120
160
  {
121
161
  "kind": "javascript-module",
122
- "path": "src/components/mui-alert/index.ts",
162
+ "path": "src/components/mui-addon/index.ts",
123
163
  "declarations": [
124
164
  {
125
165
  "kind": "class",
126
166
  "description": "",
127
- "name": "MuiAlert",
167
+ "name": "MuiAddon",
168
+ "members": [
169
+ {
170
+ "kind": "method",
171
+ "name": "render"
172
+ }
173
+ ],
128
174
  "attributes": [
129
175
  {
130
- "name": "variant"
176
+ "name": "slot"
131
177
  }
132
178
  ],
133
179
  "superclass": {
134
180
  "name": "HTMLElement"
135
181
  },
136
- "tagName": "mui-alert",
182
+ "tagName": "mui-addon",
137
183
  "customElement": true
138
184
  }
139
185
  ],
140
186
  "exports": [
141
187
  {
142
188
  "kind": "custom-element-definition",
143
- "name": "mui-alert",
189
+ "name": "mui-addon",
144
190
  "declaration": {
145
- "name": "MuiAlert",
146
- "module": "src/components/mui-alert/index.ts"
191
+ "name": "MuiAddon",
192
+ "module": "src/components/mui-addon/index.ts"
147
193
  }
148
194
  }
149
195
  ]
150
196
  },
151
197
  {
152
198
  "kind": "javascript-module",
153
- "path": "src/components/mui-badge/doc.ts",
199
+ "path": "src/components/mui-alert/doc.ts",
154
200
  "declarations": [
155
201
  {
156
202
  "kind": "variable",
@@ -158,7 +204,7 @@
158
204
  "type": {
159
205
  "text": "MuiDocs"
160
206
  },
161
- "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\", ], }, 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\", }, ], }, 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: \"\", link: \"\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
207
+ "default": "{ Alert: { title: \"Alert\", description: \"Alerts surface meaningful system messages related to the users' current task or action.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/7GnGBCbpMF3wyjCDC06hX7/24739b86a907d15400fe8e9e240a9619/Alert_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=3-4444&t=ZA9uH4LK37tSuk6r-1\", ], guides: [\"https://guides.muibook.com/alert\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-alert/index.ts\"], storybook: [\"https://stories.muibook.com/?path=/docs/feedback-alert--docs\"], website: [\"https://muibook.com/#/alert\"], usage: { list: [ \"Success: Confirm completed actions such as form submissions, data saves, or task completion.\", \"Info: For sharing new features, updates, contextual tips, or non-urgent system statuses.\", \"Warning: Alert users to unsaved changes, deprecated features, or risky actions.\", \"Error: Alert users of form validation issues, system failures, or tasks that need attention.\", ], }, accessibility: { designerList: [ \"ARIA-live is built in, using POLITE + ASSERTIVE for screen readers.\", \"The role is set to ALERT for immediate screen reader feedback.\", ], engineerList: [ \"ARIA-live is built in, using POLITE + ASSERTIVE for screen readers.\", \"The role is set to ALERT for immediate screen reader feedback.\", ], }, anatomy: { list: [ \"Preset icon: Communicates the type of alert visually. E.g. info, success, warning, error.\", \"Preset title: Provides a clear, predefined heading that reflects the alert’s purpose.\", \"Customisable text: Allows for specific details or guidance relevant to the situation.\", ], image: \"https://images.ctfassets.net/i5uwscj4pkk2/17j3DxAFlne6rvMi6QUXqZ/aedab2c349c8f8b0a8414b41132cda51/Alert_-_Anatomy.png\", }, variants: { items: [ { key: \"success\", title: \"Success\", description: \"Indicates that an operation or action has been completed successfully. Use this variant for scenarios such as form submissions processed without errors, successful data updates or saves, and confirmations of completed tasks or actions. For accessibility, this variant uses an aria-live value of polite.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2EbJsP3GZ98WPOiF4PbGh2/bc3e020b37b73f949be745e4e26b6e5a/alert-success.png\", }, { key: \"info\", title: \"Info\", description: \"Provides general information or updates that are helpful but not critical. This variant is used for announcing new features or updates, offering contextual information or tips, and informing users about non-urgent system statuses. For accessibility, it uses an aria-live value of polite.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/1SDh1JVNouysPHylu9lTUj/6793dd8aa854d08045c2159b450b762c/alert-info.png\", }, { key: \"warning\", title: \"Warning\", description: \"Alerts users to potential issues or situations that require caution. Common use cases include notifying about unsaved changes, indicating deprecated features or upcoming changes, and highlighting actions that may have unintended consequences. For accessibility, this variant uses an aria-live value of assertive.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2zympGRb3wlU5P36FsKWsL/dd9bde33646345e65d5bff505d512e22/alert-warning.png\", }, { key: \"error\", title: \"Error\", description: \"Indicates that an error has occurred, requiring user attention or action. This variant is typically used for form validation errors, system failures or exceptions, and failed operations or transactions. For accessibility, it uses an aria-live value of assertive.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/zOH2Xinum4ZjIv3qp6LJM/180a2306dd624b6bc2fa55c0ad81ea0e/alert-error.png\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"ai-playground-error-1\", name: \"AI Playground (Error)\", description: \"Demonstrates the Muiplay AI Playground showing a floating error positioned close to the field where a prompt is required to generate a task.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/40RfRPVAN9dvWO7UFuIiUC/52de3cffd69a5bcc2e457f8de03bb9cf/Play-Alert-Composition.png\", }, { key: \"ai-playground-error-2\", name: \"AI Playground (Error)\", description: \"Demonstrates the Muiplay AI Playground showing a floating error positioned close to the field where a prompt is required to generate a task.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/40RfRPVAN9dvWO7UFuIiUC/52de3cffd69a5bcc2e457f8de03bb9cf/Play-Alert-Composition.png\", }, ], }, related: { items: [ { name: \"Message\", link: \"https://guides.muibook.com/message\" }, { name: \"Link\", link: \"https://guides.muibook.com/link\" }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [ { description: \"\", image: \"\" }, { description: \"\", image: \"\" }, ], dontContent: [{ description: \"\" }, { description: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
162
208
  }
163
209
  ],
164
210
  "exports": [
@@ -167,25 +213,19 @@
167
213
  "name": "muiDocs",
168
214
  "declaration": {
169
215
  "name": "muiDocs",
170
- "module": "src/components/mui-badge/doc.ts"
216
+ "module": "src/components/mui-alert/doc.ts"
171
217
  }
172
218
  }
173
219
  ]
174
220
  },
175
221
  {
176
222
  "kind": "javascript-module",
177
- "path": "src/components/mui-badge/index.ts",
223
+ "path": "src/components/mui-alert/index.ts",
178
224
  "declarations": [
179
225
  {
180
226
  "kind": "class",
181
227
  "description": "",
182
- "name": "MuiBadge",
183
- "members": [
184
- {
185
- "kind": "method",
186
- "name": "render"
187
- }
188
- ],
228
+ "name": "MuiAlert",
189
229
  "attributes": [
190
230
  {
191
231
  "name": "variant"
@@ -194,17 +234,17 @@
194
234
  "superclass": {
195
235
  "name": "HTMLElement"
196
236
  },
197
- "tagName": "mui-badge",
237
+ "tagName": "mui-alert",
198
238
  "customElement": true
199
239
  }
200
240
  ],
201
241
  "exports": [
202
242
  {
203
243
  "kind": "custom-element-definition",
204
- "name": "mui-badge",
244
+ "name": "mui-alert",
205
245
  "declaration": {
206
- "name": "MuiBadge",
207
- "module": "src/components/mui-badge/index.ts"
246
+ "name": "MuiAlert",
247
+ "module": "src/components/mui-alert/index.ts"
208
248
  }
209
249
  }
210
250
  ]
@@ -285,56 +325,6 @@
285
325
  }
286
326
  ]
287
327
  },
288
- {
289
- "kind": "javascript-module",
290
- "path": "src/components/mui-button-group/doc.ts",
291
- "declarations": [
292
- {
293
- "kind": "variable",
294
- "name": "muiDocs",
295
- "type": {
296
- "text": "MuiDocs"
297
- },
298
- "default": "{ ButtonGroup: { title: \"Button Group\", description: \"Example of actions that are present at the top of a page or card footer use.\", hero: [\"\"], figma: [\"\"], storybook: [\"\"], github: [\"\"], website: [\"\"], guides: [\"\"], usage: { list: [ \"Use small (default) size icon when paired with text-based action is used in a button group.\", \"Use medium size icon when the icon-only action appears on its own. E.g. Menu.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"], }, anatomy: { image: \"\", list: [\"\"], }, variants: { items: [ { key: \"\", title: \"\", description: \"\", image: \"\", }, ], }, compositions: { description: \"\", items: [ { key: \"\", name: \"\", description: \"\", image: \"\", }, ], }, related: { items: [ { name: \"\", link: \"\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
299
- }
300
- ],
301
- "exports": [
302
- {
303
- "kind": "js",
304
- "name": "muiDocs",
305
- "declaration": {
306
- "name": "muiDocs",
307
- "module": "src/components/mui-button-group/doc.ts"
308
- }
309
- }
310
- ]
311
- },
312
- {
313
- "kind": "javascript-module",
314
- "path": "src/components/mui-button-group/index.ts",
315
- "declarations": [
316
- {
317
- "kind": "class",
318
- "description": "",
319
- "name": "MuiButtonGroup",
320
- "superclass": {
321
- "name": "HTMLElement"
322
- },
323
- "tagName": "mui-button-group",
324
- "customElement": true
325
- }
326
- ],
327
- "exports": [
328
- {
329
- "kind": "custom-element-definition",
330
- "name": "mui-button-group",
331
- "declaration": {
332
- "name": "MuiButtonGroup",
333
- "module": "src/components/mui-button-group/index.ts"
334
- }
335
- }
336
- ]
337
- },
338
328
  {
339
329
  "kind": "javascript-module",
340
330
  "path": "src/components/mui-button/doc.ts",
@@ -461,7 +451,7 @@
461
451
  },
462
452
  {
463
453
  "kind": "javascript-module",
464
- "path": "src/components/mui-avatar/doc.ts",
454
+ "path": "src/components/mui-button-group/doc.ts",
465
455
  "declarations": [
466
456
  {
467
457
  "kind": "variable",
@@ -469,7 +459,7 @@
469
459
  "type": {
470
460
  "text": "MuiDocs"
471
461
  },
472
- "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: [\"\"], }, }, }"
462
+ "default": "{ ButtonGroup: { title: \"Button Group\", description: \"Example of actions that are present at the top of a page or card footer use.\", hero: [\"\"], figma: [\"\"], storybook: [\"\"], github: [\"\"], website: [\"\"], guides: [\"\"], usage: { list: [ \"Use small (default) size icon when paired with text-based action is used in a button group.\", \"Use medium size icon when the icon-only action appears on its own. E.g. Menu.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"], }, anatomy: { image: \"\", list: [\"\"], }, variants: { items: [ { key: \"\", title: \"\", description: \"\", image: \"\", }, ], }, compositions: { description: \"\", items: [ { key: \"\", name: \"\", description: \"\", image: \"\", }, ], }, related: { items: [ { name: \"\", link: \"\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
473
463
  }
474
464
  ],
475
465
  "exports": [
@@ -478,91 +468,40 @@
478
468
  "name": "muiDocs",
479
469
  "declaration": {
480
470
  "name": "muiDocs",
481
- "module": "src/components/mui-avatar/doc.ts"
471
+ "module": "src/components/mui-button-group/doc.ts"
482
472
  }
483
473
  }
484
474
  ]
485
475
  },
486
476
  {
487
477
  "kind": "javascript-module",
488
- "path": "src/components/mui-avatar/index.ts",
478
+ "path": "src/components/mui-button-group/index.ts",
489
479
  "declarations": [
490
480
  {
491
481
  "kind": "class",
492
482
  "description": "",
493
- "name": "MuiAvatar",
494
- "members": [
495
- {
496
- "kind": "field",
497
- "name": "_imageFailed",
498
- "type": {
499
- "text": "boolean | undefined"
500
- },
501
- "privacy": "private"
502
- },
503
- {
504
- "kind": "method",
505
- "name": "hasSlottedContent"
506
- },
507
- {
508
- "kind": "method",
509
- "name": "getInitials",
510
- "parameters": [
511
- {
512
- "name": "label",
513
- "type": {
514
- "text": "string | null"
515
- }
516
- }
517
- ]
518
- },
519
- {
520
- "kind": "method",
521
- "name": "getBackgroundCSS"
522
- },
523
- {
524
- "kind": "method",
525
- "name": "render"
526
- }
527
- ],
528
- "attributes": [
529
- {
530
- "name": "label"
531
- },
532
- {
533
- "name": "image"
534
- },
535
- {
536
- "name": "size"
537
- },
538
- {
539
- "name": "background"
540
- },
541
- {
542
- "name": "background-color"
543
- }
544
- ],
483
+ "name": "MuiButtonGroup",
545
484
  "superclass": {
546
485
  "name": "HTMLElement"
547
486
  },
548
- "tagName": "mui-avatar",
487
+ "tagName": "mui-button-group",
549
488
  "customElement": true
550
489
  }
551
490
  ],
552
491
  "exports": [
553
492
  {
554
493
  "kind": "custom-element-definition",
555
- "name": "mui-avatar",
494
+ "name": "mui-button-group",
556
495
  "declaration": {
557
- "name": "MuiAvatar",
558
- "module": "src/components/mui-avatar/index.ts"
496
+ "name": "MuiButtonGroup",
497
+ "module": "src/components/mui-button-group/index.ts"
559
498
  }
560
499
  }
561
500
  ]
562
501
  },
563
502
  {
564
503
  "kind": "javascript-module",
565
- "path": "src/components/mui-card/doc.ts",
504
+ "path": "src/components/mui-badge/doc.ts",
566
505
  "declarations": [
567
506
  {
568
507
  "kind": "variable",
@@ -570,7 +509,7 @@
570
509
  "type": {
571
510
  "text": "MuiDocs"
572
511
  },
573
- "default": "{ Card: { title: \"Card\", description: \"The Card provides the ability to group items or components.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/4OGlOuYuQxCTFMuIpxKK6q/e78445c43ea2f0c9934d277a2e0932a5/Card_-_Home_Image.png\", ], figma: [\"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=3-861&t=fSFYVey9aCoE5oQa-1\"], storybook: [\"https://stories.muibook.com/?path=/docs/layout-card--docs\"], github: [\"https://github.com/michaeltrilford/muibook/tree/main/src/components/mui-card\"], website: [\"https://muibook.com/#/card\"], guides: [\"https://guides.muibook.com/card\"], usage: { list: [ \"Use cards to visually group related content, actions, or components in a structured block.\", \"Use the header for titles or key actions, the body for primary content, and the footer for secondary actions or metadata.\", \"Avoid overloading cards with too much content — keep them focused and scannable.\", \"Maintain consistent spacing and alignment between multiple cards to support visual rhythm.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"], }, anatomy: { image: \"https://images.ctfassets.net/i5uwscj4pkk2/4EryBp3RZrsXmWloz4qX6m/d2a5dc1b34d7c65aeb62c9b0bf8cce52/Card_-_Anatomy.png\", list: [ \"Header: Use the card header to include a title and, if needed, additional elements such as icons, actions, or helper text.\", \"Body: Add the main content of the card. It can include suitable MUI components or other relevant elements that support the card’s purpose.\", \"Footer: The footer should include actions or other relevant interactive elements.\", ], }, variants: { items: [ { key: \"\", title: \"\", description: \"\", image: \"\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { 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\", }, { key: \"account-activity\", name: \"Account Activity (Card)\", description: \"\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3XVnAUZ0RyAoZmUQ8lIniT/58fdc83a27eb294908e55476b4646374/account_activity_-_card_-_composition.png\", }, ], }, related: { items: [ { name: \"Slat\", link: \"https://guides.muibook.com/slat\", }, { name: \"Accordion\", link: \"https://guides.muibook.com/accordion\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
512
+ "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\", ], }, 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\", }, ], }, 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: \"\", link: \"\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
574
513
  }
575
514
  ],
576
515
  "exports": [
@@ -579,35 +518,96 @@
579
518
  "name": "muiDocs",
580
519
  "declaration": {
581
520
  "name": "muiDocs",
582
- "module": "src/components/mui-card/doc.ts"
521
+ "module": "src/components/mui-badge/doc.ts"
583
522
  }
584
523
  }
585
524
  ]
586
525
  },
587
526
  {
588
527
  "kind": "javascript-module",
589
- "path": "src/components/mui-card/index.ts",
590
- "declarations": [],
591
- "exports": []
592
- },
593
- {
594
- "kind": "javascript-module",
595
- "path": "src/components/mui-carousel/doc.ts",
528
+ "path": "src/components/mui-badge/index.ts",
596
529
  "declarations": [
597
530
  {
598
- "kind": "variable",
599
- "name": "muiDocs",
600
- "type": {
601
- "text": "MuiDocs"
602
- },
603
- "default": "{ Carousel: { title: \"Carousel\", description: \"A carousel component with tab-based navigation, enabling users to switch between views or content sections with ease.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/55yS6ecrFIoh0pA08R98VB/07a93872e746c5723b7b4b21f0a9d56a/Carousel_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=958-8697&t=0ytskb8cxriEmdz2-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/navigation-carousel--docs\"], github: [\"https://github.com/michaeltrilford/muibook/tree/main/src/components/mui-carousel\"], website: [\"https://muibook.com/#/carousel\"], guides: [\"https://guides.muibook.com/carousel\"], usage: { list: [ \"Use to present grouped content that benefits from both tabbed access and horizontal transitions.\", \"Ideal for feature highlights, onboarding steps, or content previews.\", \"Ensure tab labels are short and clearly indicate the content behind each panel.\", \"Avoid using for unrelated content or when vertical scrolling is more appropriate.\", \"When adding custom content, account for the placement of carousel controls and maintain sufficient whitespace for readability and alignment.\", \"Swap out default controls when a different interaction pattern better suits the content or context.\", ], }, accessibility: { designerList: [ \"Users can navigate between carousel items using the left/right arrow keys, as well as Home and End keys.\", \"The active tab is always keyboard-focusable and shows a visible focus outline for clarity.\", \"Tabs are marked up using semantic roles (like tablist and tab) to help assistive technologies understand the structure.\", \"Behind the scenes, attributes like aria-selected and tabindex update automatically to reflect which tab is active.\", ], engineerList: [ \"Left/Right arrows, Home and End keys let keyboard users navigate between carousel 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/7lrQyuy00XTDGTww5lWXsH/427804b3af03935cc06e8a691a5006a0/Carousel_-_Anatomy.png\", list: [ \"The outer wrapper that defines the structure, sliding behaviour, and background styling of the carousel.\", \"A flexible area where custom content is added. Designers are responsible for setting internal spacing, layout, and composition.\", \"Navigation elements such as tabs, dots, or arrows that float above the content. These controls can be customized or replaced based on the use case.\", ], }, variants: { items: [ { key: \"position\", title: \"Position\", description: \"Carousel controls can be positioned at any side or corner of the container, including top center, right middle, bottom center, left middle, top left, top right, bottom left, and bottom right.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/Yc6eg8YWdiiSiiPzR588D/bdfbad0967d9cc059310bd1406c656c5/position-bottom.png\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { 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: \"Tab Bar\", link: \"https://guides.muibook.com/tab-bar\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
604
- }
605
- ],
606
- "exports": [
607
- {
608
- "kind": "js",
609
- "name": "muiDocs",
610
- "declaration": {
531
+ "kind": "class",
532
+ "description": "",
533
+ "name": "MuiBadge",
534
+ "members": [
535
+ {
536
+ "kind": "method",
537
+ "name": "render"
538
+ }
539
+ ],
540
+ "attributes": [
541
+ {
542
+ "name": "variant"
543
+ }
544
+ ],
545
+ "superclass": {
546
+ "name": "HTMLElement"
547
+ },
548
+ "tagName": "mui-badge",
549
+ "customElement": true
550
+ }
551
+ ],
552
+ "exports": [
553
+ {
554
+ "kind": "custom-element-definition",
555
+ "name": "mui-badge",
556
+ "declaration": {
557
+ "name": "MuiBadge",
558
+ "module": "src/components/mui-badge/index.ts"
559
+ }
560
+ }
561
+ ]
562
+ },
563
+ {
564
+ "kind": "javascript-module",
565
+ "path": "src/components/mui-card/doc.ts",
566
+ "declarations": [
567
+ {
568
+ "kind": "variable",
569
+ "name": "muiDocs",
570
+ "type": {
571
+ "text": "MuiDocs"
572
+ },
573
+ "default": "{ Card: { title: \"Card\", description: \"The Card provides the ability to group items or components.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/4OGlOuYuQxCTFMuIpxKK6q/e78445c43ea2f0c9934d277a2e0932a5/Card_-_Home_Image.png\", ], figma: [\"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=3-861&t=fSFYVey9aCoE5oQa-1\"], storybook: [\"https://stories.muibook.com/?path=/docs/layout-card--docs\"], github: [\"https://github.com/michaeltrilford/muibook/tree/main/src/components/mui-card\"], website: [\"https://muibook.com/#/card\"], guides: [\"https://guides.muibook.com/card\"], usage: { list: [ \"Use cards to visually group related content, actions, or components in a structured block.\", \"Use the header for titles or key actions, the body for primary content, and the footer for secondary actions or metadata.\", \"Avoid overloading cards with too much content — keep them focused and scannable.\", \"Maintain consistent spacing and alignment between multiple cards to support visual rhythm.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"], }, anatomy: { image: \"https://images.ctfassets.net/i5uwscj4pkk2/4EryBp3RZrsXmWloz4qX6m/d2a5dc1b34d7c65aeb62c9b0bf8cce52/Card_-_Anatomy.png\", list: [ \"Header: Use the card header to include a title and, if needed, additional elements such as icons, actions, or helper text.\", \"Body: Add the main content of the card. It can include suitable MUI components or other relevant elements that support the card’s purpose.\", \"Footer: The footer should include actions or other relevant interactive elements.\", ], }, variants: { items: [ { key: \"\", title: \"\", description: \"\", image: \"\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { 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\", }, { key: \"account-activity\", name: \"Account Activity (Card)\", description: \"\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3XVnAUZ0RyAoZmUQ8lIniT/58fdc83a27eb294908e55476b4646374/account_activity_-_card_-_composition.png\", }, ], }, related: { items: [ { name: \"Slat\", link: \"https://guides.muibook.com/slat\", }, { name: \"Accordion\", link: \"https://guides.muibook.com/accordion\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
574
+ }
575
+ ],
576
+ "exports": [
577
+ {
578
+ "kind": "js",
579
+ "name": "muiDocs",
580
+ "declaration": {
581
+ "name": "muiDocs",
582
+ "module": "src/components/mui-card/doc.ts"
583
+ }
584
+ }
585
+ ]
586
+ },
587
+ {
588
+ "kind": "javascript-module",
589
+ "path": "src/components/mui-card/index.ts",
590
+ "declarations": [],
591
+ "exports": []
592
+ },
593
+ {
594
+ "kind": "javascript-module",
595
+ "path": "src/components/mui-carousel/doc.ts",
596
+ "declarations": [
597
+ {
598
+ "kind": "variable",
599
+ "name": "muiDocs",
600
+ "type": {
601
+ "text": "MuiDocs"
602
+ },
603
+ "default": "{ Carousel: { title: \"Carousel\", description: \"A carousel component with tab-based navigation, enabling users to switch between views or content sections with ease.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/55yS6ecrFIoh0pA08R98VB/07a93872e746c5723b7b4b21f0a9d56a/Carousel_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=958-8697&t=0ytskb8cxriEmdz2-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/navigation-carousel--docs\"], github: [\"https://github.com/michaeltrilford/muibook/tree/main/src/components/mui-carousel\"], website: [\"https://muibook.com/#/carousel\"], guides: [\"https://guides.muibook.com/carousel\"], usage: { list: [ \"Use to present grouped content that benefits from both tabbed access and horizontal transitions.\", \"Ideal for feature highlights, onboarding steps, or content previews.\", \"Ensure tab labels are short and clearly indicate the content behind each panel.\", \"Avoid using for unrelated content or when vertical scrolling is more appropriate.\", \"When adding custom content, account for the placement of carousel controls and maintain sufficient whitespace for readability and alignment.\", \"Swap out default controls when a different interaction pattern better suits the content or context.\", ], }, accessibility: { designerList: [ \"Users can navigate between carousel items using the left/right arrow keys, as well as Home and End keys.\", \"The active tab is always keyboard-focusable and shows a visible focus outline for clarity.\", \"Tabs are marked up using semantic roles (like tablist and tab) to help assistive technologies understand the structure.\", \"Behind the scenes, attributes like aria-selected and tabindex update automatically to reflect which tab is active.\", ], engineerList: [ \"Left/Right arrows, Home and End keys let keyboard users navigate between carousel 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/7lrQyuy00XTDGTww5lWXsH/427804b3af03935cc06e8a691a5006a0/Carousel_-_Anatomy.png\", list: [ \"The outer wrapper that defines the structure, sliding behaviour, and background styling of the carousel.\", \"A flexible area where custom content is added. Designers are responsible for setting internal spacing, layout, and composition.\", \"Navigation elements such as tabs, dots, or arrows that float above the content. These controls can be customized or replaced based on the use case.\", ], }, variants: { items: [ { key: \"position\", title: \"Position\", description: \"Carousel controls can be positioned at any side or corner of the container, including top center, right middle, bottom center, left middle, top left, top right, bottom left, and bottom right.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/Yc6eg8YWdiiSiiPzR588D/bdfbad0967d9cc059310bd1406c656c5/position-bottom.png\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { 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: \"Tab Bar\", link: \"https://guides.muibook.com/tab-bar\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
604
+ }
605
+ ],
606
+ "exports": [
607
+ {
608
+ "kind": "js",
609
+ "name": "muiDocs",
610
+ "declaration": {
611
611
  "name": "muiDocs",
612
612
  "module": "src/components/mui-carousel/doc.ts"
613
613
  }
@@ -4776,6 +4776,66 @@
4776
4776
  }
4777
4777
  ]
4778
4778
  },
4779
+ {
4780
+ "kind": "javascript-module",
4781
+ "path": "src/components/mui-table/doc.ts",
4782
+ "declarations": [
4783
+ {
4784
+ "kind": "variable",
4785
+ "name": "muiDocs",
4786
+ "type": {
4787
+ "text": "MuiDocs"
4788
+ },
4789
+ "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: [\"\"], }, }, }"
4790
+ }
4791
+ ],
4792
+ "exports": [
4793
+ {
4794
+ "kind": "js",
4795
+ "name": "muiDocs",
4796
+ "declaration": {
4797
+ "name": "muiDocs",
4798
+ "module": "src/components/mui-table/doc.ts"
4799
+ }
4800
+ }
4801
+ ]
4802
+ },
4803
+ {
4804
+ "kind": "javascript-module",
4805
+ "path": "src/components/mui-table/index.ts",
4806
+ "declarations": [],
4807
+ "exports": []
4808
+ },
4809
+ {
4810
+ "kind": "javascript-module",
4811
+ "path": "src/components/mui-tabs/doc.ts",
4812
+ "declarations": [
4813
+ {
4814
+ "kind": "variable",
4815
+ "name": "muiDocs",
4816
+ "type": {
4817
+ "text": "MuiDocs"
4818
+ },
4819
+ "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.\", \"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: [\"\"], }, }, }"
4820
+ }
4821
+ ],
4822
+ "exports": [
4823
+ {
4824
+ "kind": "js",
4825
+ "name": "muiDocs",
4826
+ "declaration": {
4827
+ "name": "muiDocs",
4828
+ "module": "src/components/mui-tabs/doc.ts"
4829
+ }
4830
+ }
4831
+ ]
4832
+ },
4833
+ {
4834
+ "kind": "javascript-module",
4835
+ "path": "src/components/mui-tabs/index.ts",
4836
+ "declarations": [],
4837
+ "exports": []
4838
+ },
4779
4839
  {
4780
4840
  "kind": "javascript-module",
4781
4841
  "path": "src/components/mui-accordion/block/index.ts",
@@ -4878,103 +4938,6 @@
4878
4938
  }
4879
4939
  ]
4880
4940
  },
4881
- {
4882
- "kind": "javascript-module",
4883
- "path": "src/components/mui-tabs/doc.ts",
4884
- "declarations": [
4885
- {
4886
- "kind": "variable",
4887
- "name": "muiDocs",
4888
- "type": {
4889
- "text": "MuiDocs"
4890
- },
4891
- "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.\", \"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: [\"\"], }, }, }"
4892
- }
4893
- ],
4894
- "exports": [
4895
- {
4896
- "kind": "js",
4897
- "name": "muiDocs",
4898
- "declaration": {
4899
- "name": "muiDocs",
4900
- "module": "src/components/mui-tabs/doc.ts"
4901
- }
4902
- }
4903
- ]
4904
- },
4905
- {
4906
- "kind": "javascript-module",
4907
- "path": "src/components/mui-tabs/index.ts",
4908
- "declarations": [],
4909
- "exports": []
4910
- },
4911
- {
4912
- "kind": "javascript-module",
4913
- "path": "src/components/mui-table/doc.ts",
4914
- "declarations": [
4915
- {
4916
- "kind": "variable",
4917
- "name": "muiDocs",
4918
- "type": {
4919
- "text": "MuiDocs"
4920
- },
4921
- "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: [\"\"], }, }, }"
4922
- }
4923
- ],
4924
- "exports": [
4925
- {
4926
- "kind": "js",
4927
- "name": "muiDocs",
4928
- "declaration": {
4929
- "name": "muiDocs",
4930
- "module": "src/components/mui-table/doc.ts"
4931
- }
4932
- }
4933
- ]
4934
- },
4935
- {
4936
- "kind": "javascript-module",
4937
- "path": "src/components/mui-table/index.ts",
4938
- "declarations": [],
4939
- "exports": []
4940
- },
4941
- {
4942
- "kind": "javascript-module",
4943
- "path": "src/components/mui-accordion/group/index.ts",
4944
- "declarations": [
4945
- {
4946
- "kind": "class",
4947
- "description": "",
4948
- "name": "MuiAccordionGroup",
4949
- "members": [
4950
- {
4951
- "kind": "field",
4952
- "name": "accordions",
4953
- "type": {
4954
- "text": "AccordionBlockElement[]"
4955
- },
4956
- "privacy": "private",
4957
- "default": "[]"
4958
- }
4959
- ],
4960
- "superclass": {
4961
- "name": "HTMLElement"
4962
- },
4963
- "tagName": "mui-accordion-group",
4964
- "customElement": true
4965
- }
4966
- ],
4967
- "exports": [
4968
- {
4969
- "kind": "custom-element-definition",
4970
- "name": "mui-accordion-group",
4971
- "declaration": {
4972
- "name": "MuiAccordionGroup",
4973
- "module": "src/components/mui-accordion/group/index.ts"
4974
- }
4975
- }
4976
- ]
4977
- },
4978
4941
  {
4979
4942
  "kind": "javascript-module",
4980
4943
  "path": "src/components/mui-accordion/core/index.ts",
@@ -5058,30 +5021,67 @@
5058
5021
  },
5059
5022
  {
5060
5023
  "kind": "javascript-module",
5061
- "path": "src/components/mui-accordion/inline/index.ts",
5024
+ "path": "src/components/mui-accordion/group/index.ts",
5062
5025
  "declarations": [
5063
5026
  {
5064
5027
  "kind": "class",
5065
5028
  "description": "",
5066
- "name": "MuiAccordionInline",
5029
+ "name": "MuiAccordionGroup",
5067
5030
  "members": [
5068
5031
  {
5069
5032
  "kind": "field",
5070
- "name": "summaryEl",
5071
- "type": {
5072
- "text": "HTMLElement | null"
5073
- },
5074
- "privacy": "private"
5075
- },
5076
- {
5077
- "kind": "field",
5078
- "name": "detailEl",
5033
+ "name": "accordions",
5079
5034
  "type": {
5080
- "text": "HTMLElement | null"
5035
+ "text": "AccordionBlockElement[]"
5081
5036
  },
5082
- "privacy": "private"
5083
- },
5084
- {
5037
+ "privacy": "private",
5038
+ "default": "[]"
5039
+ }
5040
+ ],
5041
+ "superclass": {
5042
+ "name": "HTMLElement"
5043
+ },
5044
+ "tagName": "mui-accordion-group",
5045
+ "customElement": true
5046
+ }
5047
+ ],
5048
+ "exports": [
5049
+ {
5050
+ "kind": "custom-element-definition",
5051
+ "name": "mui-accordion-group",
5052
+ "declaration": {
5053
+ "name": "MuiAccordionGroup",
5054
+ "module": "src/components/mui-accordion/group/index.ts"
5055
+ }
5056
+ }
5057
+ ]
5058
+ },
5059
+ {
5060
+ "kind": "javascript-module",
5061
+ "path": "src/components/mui-accordion/inline/index.ts",
5062
+ "declarations": [
5063
+ {
5064
+ "kind": "class",
5065
+ "description": "",
5066
+ "name": "MuiAccordionInline",
5067
+ "members": [
5068
+ {
5069
+ "kind": "field",
5070
+ "name": "summaryEl",
5071
+ "type": {
5072
+ "text": "HTMLElement | null"
5073
+ },
5074
+ "privacy": "private"
5075
+ },
5076
+ {
5077
+ "kind": "field",
5078
+ "name": "detailEl",
5079
+ "type": {
5080
+ "text": "HTMLElement | null"
5081
+ },
5082
+ "privacy": "private"
5083
+ },
5084
+ {
5085
5085
  "kind": "field",
5086
5086
  "name": "chevronEl",
5087
5087
  "type": {
@@ -5171,52 +5171,52 @@
5171
5171
  },
5172
5172
  {
5173
5173
  "kind": "javascript-module",
5174
- "path": "src/components/mui-card/header/index.ts",
5174
+ "path": "src/components/mui-card/footer/index.ts",
5175
5175
  "declarations": [
5176
5176
  {
5177
5177
  "kind": "class",
5178
5178
  "description": "",
5179
- "name": "MuiCardHeader",
5179
+ "name": "MuiCardFooter",
5180
5180
  "superclass": {
5181
5181
  "name": "HTMLElement"
5182
5182
  },
5183
- "tagName": "mui-card-header",
5183
+ "tagName": "mui-card-footer",
5184
5184
  "customElement": true
5185
5185
  }
5186
5186
  ],
5187
5187
  "exports": [
5188
5188
  {
5189
5189
  "kind": "custom-element-definition",
5190
- "name": "mui-card-header",
5190
+ "name": "mui-card-footer",
5191
5191
  "declaration": {
5192
- "name": "MuiCardHeader",
5193
- "module": "src/components/mui-card/header/index.ts"
5192
+ "name": "MuiCardFooter",
5193
+ "module": "src/components/mui-card/footer/index.ts"
5194
5194
  }
5195
5195
  }
5196
5196
  ]
5197
5197
  },
5198
5198
  {
5199
5199
  "kind": "javascript-module",
5200
- "path": "src/components/mui-card/footer/index.ts",
5200
+ "path": "src/components/mui-card/header/index.ts",
5201
5201
  "declarations": [
5202
5202
  {
5203
5203
  "kind": "class",
5204
5204
  "description": "",
5205
- "name": "MuiCardFooter",
5205
+ "name": "MuiCardHeader",
5206
5206
  "superclass": {
5207
5207
  "name": "HTMLElement"
5208
5208
  },
5209
- "tagName": "mui-card-footer",
5209
+ "tagName": "mui-card-header",
5210
5210
  "customElement": true
5211
5211
  }
5212
5212
  ],
5213
5213
  "exports": [
5214
5214
  {
5215
5215
  "kind": "custom-element-definition",
5216
- "name": "mui-card-footer",
5216
+ "name": "mui-card-header",
5217
5217
  "declaration": {
5218
- "name": "MuiCardFooter",
5219
- "module": "src/components/mui-card/footer/index.ts"
5218
+ "name": "MuiCardHeader",
5219
+ "module": "src/components/mui-card/header/index.ts"
5220
5220
  }
5221
5221
  }
5222
5222
  ]
@@ -5287,85 +5287,85 @@
5287
5287
  },
5288
5288
  {
5289
5289
  "kind": "javascript-module",
5290
- "path": "src/components/mui-list/item/index.ts",
5290
+ "path": "src/components/mui-carousel/panel/index.ts",
5291
5291
  "declarations": [
5292
5292
  {
5293
5293
  "kind": "class",
5294
5294
  "description": "",
5295
- "name": "MuiListItem",
5295
+ "name": "MuiCarouselPanel",
5296
5296
  "members": [
5297
5297
  {
5298
- "kind": "method",
5299
- "name": "render"
5298
+ "kind": "field",
5299
+ "name": "item"
5300
+ },
5301
+ {
5302
+ "kind": "field",
5303
+ "name": "innerHTML",
5304
+ "default": "` <style> :host { display: block; box-sizing: border-box; overflow: hidden; } </style> <slot></slot> `"
5300
5305
  }
5301
5306
  ],
5302
5307
  "attributes": [
5303
5308
  {
5304
- "name": "variant"
5305
- },
5306
- {
5307
- "name": "size"
5308
- },
5309
- {
5310
- "name": "weight"
5309
+ "name": "item"
5311
5310
  }
5312
5311
  ],
5313
5312
  "superclass": {
5314
5313
  "name": "HTMLElement"
5315
5314
  },
5316
- "tagName": "mui-list-item",
5315
+ "tagName": "mui-carousel-panel",
5317
5316
  "customElement": true
5318
5317
  }
5319
5318
  ],
5320
5319
  "exports": [
5321
5320
  {
5322
5321
  "kind": "custom-element-definition",
5323
- "name": "mui-list-item",
5322
+ "name": "mui-carousel-panel",
5324
5323
  "declaration": {
5325
- "name": "MuiListItem",
5326
- "module": "src/components/mui-list/item/index.ts"
5324
+ "name": "MuiCarouselPanel",
5325
+ "module": "src/components/mui-carousel/panel/index.ts"
5327
5326
  }
5328
5327
  }
5329
5328
  ]
5330
5329
  },
5331
5330
  {
5332
5331
  "kind": "javascript-module",
5333
- "path": "src/components/mui-carousel/panel/index.ts",
5332
+ "path": "src/components/mui-list/item/index.ts",
5334
5333
  "declarations": [
5335
5334
  {
5336
5335
  "kind": "class",
5337
5336
  "description": "",
5338
- "name": "MuiCarouselPanel",
5337
+ "name": "MuiListItem",
5339
5338
  "members": [
5340
5339
  {
5341
- "kind": "field",
5342
- "name": "item"
5343
- },
5344
- {
5345
- "kind": "field",
5346
- "name": "innerHTML",
5347
- "default": "` <style> :host { display: block; box-sizing: border-box; overflow: hidden; } </style> <slot></slot> `"
5340
+ "kind": "method",
5341
+ "name": "render"
5348
5342
  }
5349
5343
  ],
5350
5344
  "attributes": [
5351
5345
  {
5352
- "name": "item"
5346
+ "name": "variant"
5347
+ },
5348
+ {
5349
+ "name": "size"
5350
+ },
5351
+ {
5352
+ "name": "weight"
5353
5353
  }
5354
5354
  ],
5355
5355
  "superclass": {
5356
5356
  "name": "HTMLElement"
5357
5357
  },
5358
- "tagName": "mui-carousel-panel",
5358
+ "tagName": "mui-list-item",
5359
5359
  "customElement": true
5360
5360
  }
5361
5361
  ],
5362
5362
  "exports": [
5363
5363
  {
5364
5364
  "kind": "custom-element-definition",
5365
- "name": "mui-carousel-panel",
5365
+ "name": "mui-list-item",
5366
5366
  "declaration": {
5367
- "name": "MuiCarouselPanel",
5368
- "module": "src/components/mui-carousel/panel/index.ts"
5367
+ "name": "MuiListItem",
5368
+ "module": "src/components/mui-list/item/index.ts"
5369
5369
  }
5370
5370
  }
5371
5371
  ]
@@ -5614,49 +5614,6 @@
5614
5614
  }
5615
5615
  ]
5616
5616
  },
5617
- {
5618
- "kind": "javascript-module",
5619
- "path": "src/components/mui-stepper/step/index.ts",
5620
- "declarations": [
5621
- {
5622
- "kind": "class",
5623
- "description": "",
5624
- "name": "MuiStep",
5625
- "members": [
5626
- {
5627
- "kind": "method",
5628
- "name": "render"
5629
- }
5630
- ],
5631
- "attributes": [
5632
- {
5633
- "name": "state"
5634
- },
5635
- {
5636
- "name": "title"
5637
- },
5638
- {
5639
- "name": "direction"
5640
- }
5641
- ],
5642
- "superclass": {
5643
- "name": "HTMLElement"
5644
- },
5645
- "tagName": "mui-step",
5646
- "customElement": true
5647
- }
5648
- ],
5649
- "exports": [
5650
- {
5651
- "kind": "custom-element-definition",
5652
- "name": "mui-step",
5653
- "declaration": {
5654
- "name": "MuiStep",
5655
- "module": "src/components/mui-stepper/step/index.ts"
5656
- }
5657
- }
5658
- ]
5659
- },
5660
5617
  {
5661
5618
  "kind": "javascript-module",
5662
5619
  "path": "src/components/mui-stack/vstack/index.ts",
@@ -5741,6 +5698,49 @@
5741
5698
  }
5742
5699
  ]
5743
5700
  },
5701
+ {
5702
+ "kind": "javascript-module",
5703
+ "path": "src/components/mui-stepper/step/index.ts",
5704
+ "declarations": [
5705
+ {
5706
+ "kind": "class",
5707
+ "description": "",
5708
+ "name": "MuiStep",
5709
+ "members": [
5710
+ {
5711
+ "kind": "method",
5712
+ "name": "render"
5713
+ }
5714
+ ],
5715
+ "attributes": [
5716
+ {
5717
+ "name": "state"
5718
+ },
5719
+ {
5720
+ "name": "title"
5721
+ },
5722
+ {
5723
+ "name": "direction"
5724
+ }
5725
+ ],
5726
+ "superclass": {
5727
+ "name": "HTMLElement"
5728
+ },
5729
+ "tagName": "mui-step",
5730
+ "customElement": true
5731
+ }
5732
+ ],
5733
+ "exports": [
5734
+ {
5735
+ "kind": "custom-element-definition",
5736
+ "name": "mui-step",
5737
+ "declaration": {
5738
+ "name": "MuiStep",
5739
+ "module": "src/components/mui-stepper/step/index.ts"
5740
+ }
5741
+ }
5742
+ ]
5743
+ },
5744
5744
  {
5745
5745
  "kind": "javascript-module",
5746
5746
  "path": "src/components/mui-stepper/stepper/index.ts",
@@ -5786,6 +5786,89 @@
5786
5786
  }
5787
5787
  ]
5788
5788
  },
5789
+ {
5790
+ "kind": "javascript-module",
5791
+ "path": "src/components/mui-table/row/index.ts",
5792
+ "declarations": [
5793
+ {
5794
+ "kind": "class",
5795
+ "description": "",
5796
+ "name": "MuiRow",
5797
+ "attributes": [
5798
+ {
5799
+ "name": "columns"
5800
+ }
5801
+ ],
5802
+ "superclass": {
5803
+ "name": "HTMLElement"
5804
+ },
5805
+ "tagName": "mui-row",
5806
+ "customElement": true
5807
+ }
5808
+ ],
5809
+ "exports": [
5810
+ {
5811
+ "kind": "custom-element-definition",
5812
+ "name": "mui-row",
5813
+ "declaration": {
5814
+ "name": "MuiRow",
5815
+ "module": "src/components/mui-table/row/index.ts"
5816
+ }
5817
+ }
5818
+ ]
5819
+ },
5820
+ {
5821
+ "kind": "javascript-module",
5822
+ "path": "src/components/mui-table/row-group/index.ts",
5823
+ "declarations": [
5824
+ {
5825
+ "kind": "class",
5826
+ "description": "",
5827
+ "name": "MuiRowGroup",
5828
+ "superclass": {
5829
+ "name": "HTMLElement"
5830
+ },
5831
+ "tagName": "mui-row-group",
5832
+ "customElement": true
5833
+ }
5834
+ ],
5835
+ "exports": [
5836
+ {
5837
+ "kind": "custom-element-definition",
5838
+ "name": "mui-row-group",
5839
+ "declaration": {
5840
+ "name": "MuiRowGroup",
5841
+ "module": "src/components/mui-table/row-group/index.ts"
5842
+ }
5843
+ }
5844
+ ]
5845
+ },
5846
+ {
5847
+ "kind": "javascript-module",
5848
+ "path": "src/components/mui-table/table/index.ts",
5849
+ "declarations": [
5850
+ {
5851
+ "kind": "class",
5852
+ "description": "",
5853
+ "name": "MuiTable",
5854
+ "superclass": {
5855
+ "name": "HTMLElement"
5856
+ },
5857
+ "tagName": "mui-table",
5858
+ "customElement": true
5859
+ }
5860
+ ],
5861
+ "exports": [
5862
+ {
5863
+ "kind": "custom-element-definition",
5864
+ "name": "mui-table",
5865
+ "declaration": {
5866
+ "name": "MuiTable",
5867
+ "module": "src/components/mui-table/table/index.ts"
5868
+ }
5869
+ }
5870
+ ]
5871
+ },
5789
5872
  {
5790
5873
  "kind": "javascript-module",
5791
5874
  "path": "src/components/mui-tabs/controller/index.ts",
@@ -5850,90 +5933,90 @@
5850
5933
  },
5851
5934
  {
5852
5935
  "kind": "javascript-module",
5853
- "path": "src/components/mui-tabs/item/index.ts",
5936
+ "path": "src/components/mui-tabs/panel/index.ts",
5854
5937
  "declarations": [
5855
5938
  {
5856
5939
  "kind": "class",
5857
5940
  "description": "",
5858
- "name": "MuiTabItem",
5941
+ "name": "MuiTabPanel",
5859
5942
  "members": [
5860
5943
  {
5861
5944
  "kind": "field",
5862
- "name": "iconEl",
5945
+ "name": "item",
5863
5946
  "type": {
5864
- "text": "HTMLElement | undefined"
5865
- },
5866
- "privacy": "private"
5947
+ "text": "string | null"
5948
+ }
5867
5949
  },
5868
5950
  {
5869
- "kind": "method",
5870
- "name": "updateActiveState"
5951
+ "kind": "field",
5952
+ "name": "innerHTML",
5953
+ "default": "` <style> :host { display: block; } .inner { padding: var(--tab-panel-padding, 0); } </style> <div class=\"inner\"> <slot></slot> </div> `"
5871
5954
  }
5872
5955
  ],
5873
5956
  "attributes": [
5874
5957
  {
5875
- "name": "active"
5958
+ "name": "item"
5876
5959
  }
5877
5960
  ],
5878
5961
  "superclass": {
5879
5962
  "name": "HTMLElement"
5880
5963
  },
5881
- "tagName": "mui-tab-item",
5964
+ "tagName": "mui-tab-panel",
5882
5965
  "customElement": true
5883
5966
  }
5884
5967
  ],
5885
5968
  "exports": [
5886
5969
  {
5887
5970
  "kind": "custom-element-definition",
5888
- "name": "mui-tab-item",
5971
+ "name": "mui-tab-panel",
5889
5972
  "declaration": {
5890
- "name": "MuiTabItem",
5891
- "module": "src/components/mui-tabs/item/index.ts"
5973
+ "name": "MuiTabPanel",
5974
+ "module": "src/components/mui-tabs/panel/index.ts"
5892
5975
  }
5893
5976
  }
5894
5977
  ]
5895
5978
  },
5896
5979
  {
5897
5980
  "kind": "javascript-module",
5898
- "path": "src/components/mui-tabs/panel/index.ts",
5981
+ "path": "src/components/mui-tabs/item/index.ts",
5899
5982
  "declarations": [
5900
5983
  {
5901
5984
  "kind": "class",
5902
5985
  "description": "",
5903
- "name": "MuiTabPanel",
5986
+ "name": "MuiTabItem",
5904
5987
  "members": [
5905
5988
  {
5906
5989
  "kind": "field",
5907
- "name": "item",
5990
+ "name": "iconEl",
5908
5991
  "type": {
5909
- "text": "string | null"
5910
- }
5992
+ "text": "HTMLElement | undefined"
5993
+ },
5994
+ "privacy": "private"
5911
5995
  },
5912
5996
  {
5913
- "kind": "field",
5914
- "name": "innerHTML",
5915
- "default": "` <style> :host { display: block; } .inner { padding: var(--tab-panel-padding, 0); } </style> <div class=\"inner\"> <slot></slot> </div> `"
5997
+ "kind": "method",
5998
+ "name": "updateActiveState"
5916
5999
  }
5917
6000
  ],
5918
6001
  "attributes": [
5919
6002
  {
5920
- "name": "item"
6003
+ "name": "active"
5921
6004
  }
5922
6005
  ],
5923
6006
  "superclass": {
5924
6007
  "name": "HTMLElement"
5925
6008
  },
5926
- "tagName": "mui-tab-panel",
6009
+ "tagName": "mui-tab-item",
5927
6010
  "customElement": true
5928
6011
  }
5929
6012
  ],
5930
6013
  "exports": [
5931
6014
  {
5932
6015
  "kind": "custom-element-definition",
5933
- "name": "mui-tab-panel",
6016
+ "name": "mui-tab-item",
5934
6017
  "declaration": {
5935
- "name": "MuiTabPanel",
5936
- "module": "src/components/mui-tabs/panel/index.ts"
6018
+ "name": "MuiTabItem",
6019
+ "module": "src/components/mui-tabs/item/index.ts"
5937
6020
  }
5938
6021
  }
5939
6022
  ]
@@ -5975,32 +6058,6 @@
5975
6058
  }
5976
6059
  ]
5977
6060
  },
5978
- {
5979
- "kind": "javascript-module",
5980
- "path": "src/components/mui-table/row-group/index.ts",
5981
- "declarations": [
5982
- {
5983
- "kind": "class",
5984
- "description": "",
5985
- "name": "MuiRowGroup",
5986
- "superclass": {
5987
- "name": "HTMLElement"
5988
- },
5989
- "tagName": "mui-row-group",
5990
- "customElement": true
5991
- }
5992
- ],
5993
- "exports": [
5994
- {
5995
- "kind": "custom-element-definition",
5996
- "name": "mui-row-group",
5997
- "declaration": {
5998
- "name": "MuiRowGroup",
5999
- "module": "src/components/mui-table/row-group/index.ts"
6000
- }
6001
- }
6002
- ]
6003
- },
6004
6061
  {
6005
6062
  "kind": "javascript-module",
6006
6063
  "path": "src/components/mui-tabs/tab-bar/index.ts",
@@ -6124,63 +6181,6 @@
6124
6181
  }
6125
6182
  }
6126
6183
  ]
6127
- },
6128
- {
6129
- "kind": "javascript-module",
6130
- "path": "src/components/mui-table/row/index.ts",
6131
- "declarations": [
6132
- {
6133
- "kind": "class",
6134
- "description": "",
6135
- "name": "MuiRow",
6136
- "attributes": [
6137
- {
6138
- "name": "columns"
6139
- }
6140
- ],
6141
- "superclass": {
6142
- "name": "HTMLElement"
6143
- },
6144
- "tagName": "mui-row",
6145
- "customElement": true
6146
- }
6147
- ],
6148
- "exports": [
6149
- {
6150
- "kind": "custom-element-definition",
6151
- "name": "mui-row",
6152
- "declaration": {
6153
- "name": "MuiRow",
6154
- "module": "src/components/mui-table/row/index.ts"
6155
- }
6156
- }
6157
- ]
6158
- },
6159
- {
6160
- "kind": "javascript-module",
6161
- "path": "src/components/mui-table/table/index.ts",
6162
- "declarations": [
6163
- {
6164
- "kind": "class",
6165
- "description": "",
6166
- "name": "MuiTable",
6167
- "superclass": {
6168
- "name": "HTMLElement"
6169
- },
6170
- "tagName": "mui-table",
6171
- "customElement": true
6172
- }
6173
- ],
6174
- "exports": [
6175
- {
6176
- "kind": "custom-element-definition",
6177
- "name": "mui-table",
6178
- "declaration": {
6179
- "name": "MuiTable",
6180
- "module": "src/components/mui-table/table/index.ts"
6181
- }
6182
- }
6183
- ]
6184
6184
  }
6185
6185
  ]
6186
6186
  }