@muibook/components 10.0.0 → 10.0.1

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.
package/README.md CHANGED
@@ -183,19 +183,15 @@ npm publish
183
183
 
184
184
  - npm run token-build
185
185
 
186
- ---
187
-
188
186
  ## NPM Token REFRESH
189
187
 
190
- Refreshing Your npm Access Token (90-Day Expiry)
191
-
192
- ### Description:
188
+ I have to login everytime it seems.
193
189
 
194
- npm login tokens expire every 90 days. When they do, you must log in again before publishing packages. No other setup needs to be repeated.
190
+ npm login tokens expire every 90 days When they do, you must log in again before publishing packages. No other setup needs to be repeated.
195
191
 
196
192
  ### Steps:
197
193
 
198
- 1. Run npm login to refresh your token.
194
+ 1. Run `npm login` to refresh your token.
199
195
  2. Publish normally with `npm publish --access public`
200
196
  3. Repeat npm login every 90 days when prompted.
201
197
 
@@ -12,7 +12,7 @@ class l extends HTMLElement {
12
12
  (e === "size" || e === "color") && t !== c && this.render();
13
13
  }
14
14
  render() {
15
- const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), s = t && {
15
+ const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), o = t && {
16
16
  default: "var(--icon-color-default)",
17
17
  inverted: "var(--icon-color-inverted)"
18
18
  }[t] || t || "var(--icon-color-default)", i = {
@@ -20,17 +20,17 @@ class l extends HTMLElement {
20
20
  small: "2.1rem",
21
21
  medium: "2.4rem",
22
22
  large: "2.8rem"
23
- }, o = i[e] ?? i.small;
23
+ }, s = i[e] ?? i.small;
24
24
  this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
25
25
  `
26
26
  <style>
27
27
  :host {
28
- width: ${o};
29
- height: ${o};
28
+ width: ${s};
29
+ height: ${s};
30
30
  display: inline-flex;
31
31
  align-items: center;
32
32
  justify-content: center;
33
- fill: ${s};
33
+ fill: ${o};
34
34
  }
35
35
  svg {
36
36
  width: 100%;
@@ -43,15 +43,9 @@ class l extends HTMLElement {
43
43
  xmlns="http://www.w3.org/2000/svg"
44
44
  viewBox="0 0 36 36"
45
45
  >
46
- <path
47
- d="M27.122 16.88a.643.643 0 0 1-.638-.566c-.651-4.316-1.154-5.034-5.44-5.6a.664.664 0 0 1-.6-.667c0-.327.245-.604.6-.642 4.163-.553 4.728-1.245 5.44-5.6.049-.34.307-.59.638-.59.32 0 .577.238.626.59.614 4.317 1.203 5.022 5.451 5.6.344.038.59.315.59.642 0 .34-.246.617-.59.667-4.137.692-4.714 1.22-5.45 5.6-.062.327-.308.566-.627.566m-24.324-.403c-1.117 0-1.903-.805-1.903-1.963v-1.573c0-2.995 1.67-4.693 4.592-4.693H19.08c-.43.44-.736 1.07-.736 1.8 0 .88.417 1.648 1.019 2.1H6.003c-.86 0-1.302.403-1.302 1.347v1.02c0 1.157-.786 1.962-1.903 1.962m29.826 2.857a.457.457 0 0 1-.455-.415c-.331-2.14-.282-2.152-2.529-2.567a.48.48 0 0 1-.393-.466c0-.24.16-.44.393-.478 2.235-.327 2.21-.365 2.53-2.542.024-.252.208-.44.454-.44.245 0 .417.176.454.44.307 2.101.282 2.127 2.517 2.542.245.05.405.239.405.478 0 .252-.16.415-.442.466-2.185.352-2.16.402-2.48 2.541-.037.252-.209.44-.454.44M8.408 26.032c-1.044 0-1.646-.604-1.646-1.623 0-.265.074-.642.234-1.158l2.185-6.62c.479-1.522 1.338-2.214 2.701-2.214 1.412 0 2.308.705 2.775 2.215l2.198 6.619c.16.516.22.893.22 1.157 0 1.02-.601 1.624-1.632 1.624-.884 0-1.437-.503-1.658-1.56l-.307-1.032h-3.106l-.307 1.031c-.233 1.058-.773 1.56-1.657 1.56m2.541-5.071h1.94l-.909-3.524h-.122zm-8.151 1.783c-1.252 0-2.284-1.057-2.284-2.34 0-1.284 1.032-2.341 2.284-2.341s2.283 1.057 2.283 2.34c0 1.284-1.03 2.341-2.283 2.341m2.689 10.042c-2.922 0-4.592-1.7-4.592-4.694V26.33c0-1.157.786-1.963 1.903-1.963S4.7 25.173 4.7 26.33v1.22c0 .945.442 1.347 1.301 1.347h17.903c.86 0 1.302-.402 1.302-1.346v-7.588c0-.512.153-.955.421-1.29 0 0 .23.522 1.482.522 1.251 0 1.481-.522 1.481-.522.268.335.422.778.422 1.29v8.129c0 2.995-1.658 4.694-4.592 4.694z"
48
- ></path>
49
- <path
50
- d="M19.194 16.084c0-.92.728-1.667 1.626-1.667.899 0 1.627.747 1.627 1.667l.011 8.28c0 .921-.728 1.668-1.626 1.668-.899 0-1.627-.747-1.627-1.667z"
51
- ></path>
46
+ <path d="M29.61 14.63a.616.616 0 0 1-.613-.543c-.624-4.138-1.106-4.825-5.214-5.368a.636.636 0 0 1-.577-.64c0-.313.236-.578.577-.615 3.99-.53 4.531-1.194 5.214-5.368.047-.325.294-.567.612-.567.306 0 .553.23.6.567.589 4.138 1.154 4.813 5.226 5.368A.62.62 0 0 1 36 8.08a.644.644 0 0 1-.565.639c-3.966.663-4.52 1.17-5.226 5.368-.058.314-.294.543-.6.543m-23.32-.386c-1.07 0-1.823-.772-1.823-1.882v-1.508c0-2.87 1.6-4.5 4.401-4.5H21.9a2.47 2.47 0 0 0-.706 1.726c0 .844.4 1.58.977 2.014H9.363c-.824 0-1.248.386-1.248 1.29v.978c0 1.11-.753 1.882-1.824 1.882m5.379 9.16c-1 0-1.577-.58-1.577-1.557 0-.253.07-.615.223-1.11l2.095-6.345c.46-1.46 1.283-2.123 2.59-2.123 1.353 0 2.212.675 2.66 2.123l2.106 6.345c.153.495.212.857.212 1.11 0 .977-.577 1.556-1.565 1.556-.848 0-1.377-.482-1.59-1.496l-.294-.989h-2.977l-.294.99c-.224 1.013-.742 1.495-1.59 1.495m2.436-4.862h1.86l-.871-3.378h-.118zm-7.814 1.71c-1.2 0-2.19-1.014-2.19-2.244s.99-2.244 2.19-2.244 2.19 1.013 2.19 2.244c0 1.23-.99 2.243-2.19 2.243m2.577 9.626c-2.8 0-4.401-1.629-4.401-4.5V23.69c0-1.11.753-1.882 1.824-1.882s1.824.773 1.824 1.882v1.17c0 .905.424 1.291 1.248 1.291h17.163c.823 0 1.247-.386 1.247-1.29v-7.275c0-.49.147-.915.404-1.236 0 0 .22.5 1.42.5s1.42-.5 1.42-.5c.258.321.405.746.405 1.236v7.793c0 2.871-1.59 4.5-4.402 4.5H8.868"></path>
47
+ <path d="M22.009 13.867c0-.883.698-1.598 1.559-1.598s1.56.715 1.56 1.598l.01 7.938c0 .883-.698 1.598-1.56 1.598-.86 0-1.558-.715-1.558-1.598z"></path>
52
48
  </svg>
53
-
54
-
55
49
  `);
56
50
  }
57
51
  }
@@ -1,6 +1,6 @@
1
1
 
2
2
  /* ================================================================================================== */
3
- /* Don't edit directly • Generated on Wed, 04 Feb 2026 04:53:47 GMT • muibook.com */
3
+ /* Don't edit directly • Generated on Wed, 04 Feb 2026 05:20:37 GMT • muibook.com */
4
4
  /* ================================================================================================== */
5
5
 
6
6
  /* ================================================================================================== */
@@ -2,67 +2,6 @@
2
2
  "schemaVersion": "1.0.0",
3
3
  "readme": "",
4
4
  "modules": [
5
- {
6
- "kind": "javascript-module",
7
- "path": "src/components/mui-addon/doc.ts",
8
- "declarations": [
9
- {
10
- "kind": "variable",
11
- "name": "muiDocs",
12
- "type": {
13
- "text": "MuiDocs"
14
- },
15
- "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: [\"\"], }, }, }"
16
- }
17
- ],
18
- "exports": [
19
- {
20
- "kind": "js",
21
- "name": "muiDocs",
22
- "declaration": {
23
- "name": "muiDocs",
24
- "module": "src/components/mui-addon/doc.ts"
25
- }
26
- }
27
- ]
28
- },
29
- {
30
- "kind": "javascript-module",
31
- "path": "src/components/mui-addon/index.ts",
32
- "declarations": [
33
- {
34
- "kind": "class",
35
- "description": "",
36
- "name": "MuiAddon",
37
- "members": [
38
- {
39
- "kind": "method",
40
- "name": "render"
41
- }
42
- ],
43
- "attributes": [
44
- {
45
- "name": "slot"
46
- }
47
- ],
48
- "superclass": {
49
- "name": "HTMLElement"
50
- },
51
- "tagName": "mui-addon",
52
- "customElement": true
53
- }
54
- ],
55
- "exports": [
56
- {
57
- "kind": "custom-element-definition",
58
- "name": "mui-addon",
59
- "declaration": {
60
- "name": "MuiAddon",
61
- "module": "src/components/mui-addon/index.ts"
62
- }
63
- }
64
- ]
65
- },
66
5
  {
67
6
  "kind": "javascript-module",
68
7
  "path": "src/components/mui-accordion/doc.ts",
@@ -169,7 +108,7 @@
169
108
  },
170
109
  {
171
110
  "kind": "javascript-module",
172
- "path": "src/components/mui-avatar/doc.ts",
111
+ "path": "src/components/mui-addon/doc.ts",
173
112
  "declarations": [
174
113
  {
175
114
  "kind": "variable",
@@ -177,7 +116,7 @@
177
116
  "type": {
178
117
  "text": "MuiDocs"
179
118
  },
180
- "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: [\"\"], }, }, }"
119
+ "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: [\"\"], }, }, }"
181
120
  }
182
121
  ],
183
122
  "exports": [
@@ -186,48 +125,20 @@
186
125
  "name": "muiDocs",
187
126
  "declaration": {
188
127
  "name": "muiDocs",
189
- "module": "src/components/mui-avatar/doc.ts"
128
+ "module": "src/components/mui-addon/doc.ts"
190
129
  }
191
130
  }
192
131
  ]
193
132
  },
194
133
  {
195
134
  "kind": "javascript-module",
196
- "path": "src/components/mui-avatar/index.ts",
135
+ "path": "src/components/mui-addon/index.ts",
197
136
  "declarations": [
198
137
  {
199
138
  "kind": "class",
200
139
  "description": "",
201
- "name": "MuiAvatar",
140
+ "name": "MuiAddon",
202
141
  "members": [
203
- {
204
- "kind": "field",
205
- "name": "_imageFailed",
206
- "type": {
207
- "text": "boolean | undefined"
208
- },
209
- "privacy": "private"
210
- },
211
- {
212
- "kind": "method",
213
- "name": "hasSlottedContent"
214
- },
215
- {
216
- "kind": "method",
217
- "name": "getInitials",
218
- "parameters": [
219
- {
220
- "name": "label",
221
- "type": {
222
- "text": "string | null"
223
- }
224
- }
225
- ]
226
- },
227
- {
228
- "kind": "method",
229
- "name": "getBackgroundCSS"
230
- },
231
142
  {
232
143
  "kind": "method",
233
144
  "name": "render"
@@ -235,42 +146,30 @@
235
146
  ],
236
147
  "attributes": [
237
148
  {
238
- "name": "label"
239
- },
240
- {
241
- "name": "image"
242
- },
243
- {
244
- "name": "size"
245
- },
246
- {
247
- "name": "background"
248
- },
249
- {
250
- "name": "background-color"
149
+ "name": "slot"
251
150
  }
252
151
  ],
253
152
  "superclass": {
254
153
  "name": "HTMLElement"
255
154
  },
256
- "tagName": "mui-avatar",
155
+ "tagName": "mui-addon",
257
156
  "customElement": true
258
157
  }
259
158
  ],
260
159
  "exports": [
261
160
  {
262
161
  "kind": "custom-element-definition",
263
- "name": "mui-avatar",
162
+ "name": "mui-addon",
264
163
  "declaration": {
265
- "name": "MuiAvatar",
266
- "module": "src/components/mui-avatar/index.ts"
164
+ "name": "MuiAddon",
165
+ "module": "src/components/mui-addon/index.ts"
267
166
  }
268
167
  }
269
168
  ]
270
169
  },
271
170
  {
272
171
  "kind": "javascript-module",
273
- "path": "src/components/mui-badge/doc.ts",
172
+ "path": "src/components/mui-avatar/doc.ts",
274
173
  "declarations": [
275
174
  {
276
175
  "kind": "variable",
@@ -278,7 +177,7 @@
278
177
  "type": {
279
178
  "text": "MuiDocs"
280
179
  },
281
- "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: [\"\"], }, }, }"
180
+ "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: [\"\"], }, }, }"
282
181
  }
283
182
  ],
284
183
  "exports": [
@@ -287,120 +186,84 @@
287
186
  "name": "muiDocs",
288
187
  "declaration": {
289
188
  "name": "muiDocs",
290
- "module": "src/components/mui-badge/doc.ts"
189
+ "module": "src/components/mui-avatar/doc.ts"
291
190
  }
292
191
  }
293
192
  ]
294
193
  },
295
194
  {
296
195
  "kind": "javascript-module",
297
- "path": "src/components/mui-badge/index.ts",
196
+ "path": "src/components/mui-avatar/index.ts",
298
197
  "declarations": [
299
198
  {
300
199
  "kind": "class",
301
200
  "description": "",
302
- "name": "MuiBadge",
201
+ "name": "MuiAvatar",
303
202
  "members": [
203
+ {
204
+ "kind": "field",
205
+ "name": "_imageFailed",
206
+ "type": {
207
+ "text": "boolean | undefined"
208
+ },
209
+ "privacy": "private"
210
+ },
304
211
  {
305
212
  "kind": "method",
306
- "name": "render"
307
- }
308
- ],
309
- "attributes": [
213
+ "name": "hasSlottedContent"
214
+ },
310
215
  {
311
- "name": "variant"
312
- }
313
- ],
314
- "superclass": {
315
- "name": "HTMLElement"
316
- },
317
- "tagName": "mui-badge",
318
- "customElement": true
319
- }
320
- ],
321
- "exports": [
322
- {
323
- "kind": "custom-element-definition",
324
- "name": "mui-badge",
325
- "declaration": {
326
- "name": "MuiBadge",
327
- "module": "src/components/mui-badge/index.ts"
328
- }
329
- }
330
- ]
331
- },
332
- {
333
- "kind": "javascript-module",
334
- "path": "src/components/mui-body/doc.ts",
335
- "declarations": [
336
- {
337
- "kind": "variable",
338
- "name": "muiDocs",
339
- "type": {
340
- "text": "MuiDocs"
341
- },
342
- "default": "{ Body: { title: \"Body\", description: \"Use the Body component for clear and readable paragraph text across the UI. It’s ideal for longer-form content such as descriptions, explanations, or supporting information. Variant styles are also available for status messages and other contextual needs.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/GGmtyOnGHBMGMrvkPTWSL/2c6ff12702d76c1393b2315b19728aa3/Body_-_Home_Image.png\", ], figma: [\"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=3-892&t=fSFYVey9aCoE5oQa-1\"], storybook: [\"https://stories.muibook.com/?path=/docs/content-body--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-body/index.ts\"], website: [\"https://muibook.com/#/button\"], guides: [\"https://guides.muibook.com/body\"], usage: { list: [ \"Use for supporting content or descriptions.\", \"Use states like Default, Success, Warning and Error to align with feedback or messaging contexts.\", \"Match the body size to the layout’s overall design and readability.\", \"Adjust the size by selecting x-small, small, medium or large.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"], }, anatomy: { image: \"\", list: [\"\"], }, variants: { items: [ { key: \"default\", title: \"Default\", description: \"Standard body text with x-small, small, medium and large for tailored readability. In addition to the size, font weight of regular and bold is available.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2NAalFsBAkeBz69hO093eb/b9390132c50df11749aaa47dafdb2b93/default.png\", }, { key: \"optional\", title: \"Optional\", description: \"Optional text is visually lighter, providing subtle contrast to Standard body text. It comes in four sizes—x-small, small, medium, and large—for tailored readability. Font weights of regular and bold are also available, giving flexibility for emphasis or hierarchy.\", image: \"\", }, { key: \"success\", title: \"Success\", description: \"Indicates positive feedback with the option of x-small, small, medium and large for tailored readability. In addition to the size, font weight of regular and bold is available.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/8RChklU9yHSY7PTJH0JLD/c72f630006f2be4e7f1d850d7510c92f/success.png\", }, { key: \"warning\", title: \"Warning\", description: \"Highlights warning messages with the option of x-small, small, medium, and large for tailored readability. In addition to the size, font weight of regular and bold is available.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2UJaVEXU2fbKPi3L7afjt/e82b06ef54e92cf2d6f6e984d8a27079/warning.png\", }, { key: \"error\", title: \"Error\", description: \"Highlights error messages with the option of x-small, small, medium, and large for tailored readability. In addition to the size, font weight of regular and bold is available.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/egb4l4ubM0A6T44xAxDgz/5d94fa59f0069b689da537710650e22b/error.png\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"muibook-resource\", name: \"Muibook Resource\", description: \"The Muibook documentation site uses MUI components to compose its layout, including headings, text, lists, buttons, icons, and image components.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3LVvuYDZWRnMhxNy6GMLNd/c5074a05eacb2c22c50ea172b3567c48/Muibook-List-Composition.png\", }, { key: \"outcomes-roadmap-dashboard\", name: \"Outcomes Roadmap Dashboard\", description: \"Example of the responsive component in the Outcomes Roadmap Dashboard, demonstrating layout, title, and padding adjustments across breakpoints.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3FsXandRr1Z9BAKv33twxT/b0d0e4a8b6237bf7d38660111bceb8ab/responsive-composition.gif\", }, { key: \"outcome-based-roadmap\", name: \"Outcome-Based Roadmap\", description: \"Example of an Outcome-Based Roadmap page showing objectives organised into Upcoming, Doing, and Finished columns. Progress bars indicate the completion status of each task, providing a clear view of overall progress.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3w5htPtfEz7QMCH9alVcwf/de35725fb4542b891bd695b900195291/Outcomes-Progress-Composition.png\", }, ], }, related: { items: [ { name: \"Heading\", link: \"https://guides.muibook.com/heading\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
343
- }
344
- ],
345
- "exports": [
346
- {
347
- "kind": "js",
348
- "name": "muiDocs",
349
- "declaration": {
350
- "name": "muiDocs",
351
- "module": "src/components/mui-body/doc.ts"
352
- }
353
- }
354
- ]
355
- },
356
- {
357
- "kind": "javascript-module",
358
- "path": "src/components/mui-body/index.ts",
359
- "declarations": [
360
- {
361
- "kind": "class",
362
- "description": "",
363
- "name": "MuiBody",
364
- "members": [
216
+ "kind": "method",
217
+ "name": "getInitials",
218
+ "parameters": [
219
+ {
220
+ "name": "label",
221
+ "type": {
222
+ "text": "string | null"
223
+ }
224
+ }
225
+ ]
226
+ },
365
227
  {
366
228
  "kind": "method",
367
- "name": "render"
229
+ "name": "getBackgroundCSS"
368
230
  },
369
231
  {
370
232
  "kind": "method",
371
- "name": "waitForPartMap",
372
- "return": {
373
- "type": {
374
- "text": "Promise<void>"
375
- }
376
- }
233
+ "name": "render"
377
234
  }
378
235
  ],
379
236
  "attributes": [
237
+ {
238
+ "name": "label"
239
+ },
240
+ {
241
+ "name": "image"
242
+ },
380
243
  {
381
244
  "name": "size"
382
245
  },
383
246
  {
384
- "name": "weight"
247
+ "name": "background"
385
248
  },
386
249
  {
387
- "name": "variant"
250
+ "name": "background-color"
388
251
  }
389
252
  ],
390
253
  "superclass": {
391
254
  "name": "HTMLElement"
392
255
  },
393
- "tagName": "mui-body",
256
+ "tagName": "mui-avatar",
394
257
  "customElement": true
395
258
  }
396
259
  ],
397
260
  "exports": [
398
261
  {
399
262
  "kind": "custom-element-definition",
400
- "name": "mui-body",
263
+ "name": "mui-avatar",
401
264
  "declaration": {
402
- "name": "MuiBody",
403
- "module": "src/components/mui-body/index.ts"
265
+ "name": "MuiAvatar",
266
+ "module": "src/components/mui-avatar/index.ts"
404
267
  }
405
268
  }
406
269
  ]
@@ -581,7 +444,7 @@
581
444
  },
582
445
  {
583
446
  "kind": "javascript-module",
584
- "path": "src/components/mui-card/doc.ts",
447
+ "path": "src/components/mui-body/doc.ts",
585
448
  "declarations": [
586
449
  {
587
450
  "kind": "variable",
@@ -589,7 +452,7 @@
589
452
  "type": {
590
453
  "text": "MuiDocs"
591
454
  },
592
- "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: [\"\"], }, }, }"
455
+ "default": "{ Body: { title: \"Body\", description: \"Use the Body component for clear and readable paragraph text across the UI. It’s ideal for longer-form content such as descriptions, explanations, or supporting information. Variant styles are also available for status messages and other contextual needs.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/GGmtyOnGHBMGMrvkPTWSL/2c6ff12702d76c1393b2315b19728aa3/Body_-_Home_Image.png\", ], figma: [\"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=3-892&t=fSFYVey9aCoE5oQa-1\"], storybook: [\"https://stories.muibook.com/?path=/docs/content-body--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-body/index.ts\"], website: [\"https://muibook.com/#/button\"], guides: [\"https://guides.muibook.com/body\"], usage: { list: [ \"Use for supporting content or descriptions.\", \"Use states like Default, Success, Warning and Error to align with feedback or messaging contexts.\", \"Match the body size to the layout’s overall design and readability.\", \"Adjust the size by selecting x-small, small, medium or large.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"], }, anatomy: { image: \"\", list: [\"\"], }, variants: { items: [ { key: \"default\", title: \"Default\", description: \"Standard body text with x-small, small, medium and large for tailored readability. In addition to the size, font weight of regular and bold is available.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2NAalFsBAkeBz69hO093eb/b9390132c50df11749aaa47dafdb2b93/default.png\", }, { key: \"optional\", title: \"Optional\", description: \"Optional text is visually lighter, providing subtle contrast to Standard body text. It comes in four sizes—x-small, small, medium, and large—for tailored readability. Font weights of regular and bold are also available, giving flexibility for emphasis or hierarchy.\", image: \"\", }, { key: \"success\", title: \"Success\", description: \"Indicates positive feedback with the option of x-small, small, medium and large for tailored readability. In addition to the size, font weight of regular and bold is available.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/8RChklU9yHSY7PTJH0JLD/c72f630006f2be4e7f1d850d7510c92f/success.png\", }, { key: \"warning\", title: \"Warning\", description: \"Highlights warning messages with the option of x-small, small, medium, and large for tailored readability. In addition to the size, font weight of regular and bold is available.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2UJaVEXU2fbKPi3L7afjt/e82b06ef54e92cf2d6f6e984d8a27079/warning.png\", }, { key: \"error\", title: \"Error\", description: \"Highlights error messages with the option of x-small, small, medium, and large for tailored readability. In addition to the size, font weight of regular and bold is available.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/egb4l4ubM0A6T44xAxDgz/5d94fa59f0069b689da537710650e22b/error.png\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"muibook-resource\", name: \"Muibook Resource\", description: \"The Muibook documentation site uses MUI components to compose its layout, including headings, text, lists, buttons, icons, and image components.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3LVvuYDZWRnMhxNy6GMLNd/c5074a05eacb2c22c50ea172b3567c48/Muibook-List-Composition.png\", }, { key: \"outcomes-roadmap-dashboard\", name: \"Outcomes Roadmap Dashboard\", description: \"Example of the responsive component in the Outcomes Roadmap Dashboard, demonstrating layout, title, and padding adjustments across breakpoints.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3FsXandRr1Z9BAKv33twxT/b0d0e4a8b6237bf7d38660111bceb8ab/responsive-composition.gif\", }, { key: \"outcome-based-roadmap\", name: \"Outcome-Based Roadmap\", description: \"Example of an Outcome-Based Roadmap page showing objectives organised into Upcoming, Doing, and Finished columns. Progress bars indicate the completion status of each task, providing a clear view of overall progress.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3w5htPtfEz7QMCH9alVcwf/de35725fb4542b891bd695b900195291/Outcomes-Progress-Composition.png\", }, ], }, related: { items: [ { name: \"Heading\", link: \"https://guides.muibook.com/heading\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
593
456
  }
594
457
  ],
595
458
  "exports": [
@@ -598,27 +461,164 @@
598
461
  "name": "muiDocs",
599
462
  "declaration": {
600
463
  "name": "muiDocs",
601
- "module": "src/components/mui-card/doc.ts"
464
+ "module": "src/components/mui-body/doc.ts"
602
465
  }
603
466
  }
604
467
  ]
605
468
  },
606
469
  {
607
470
  "kind": "javascript-module",
608
- "path": "src/components/mui-card/index.ts",
609
- "declarations": [],
610
- "exports": []
611
- },
612
- {
613
- "kind": "javascript-module",
614
- "path": "src/components/mui-carousel/doc.ts",
471
+ "path": "src/components/mui-body/index.ts",
615
472
  "declarations": [
616
473
  {
617
- "kind": "variable",
618
- "name": "muiDocs",
619
- "type": {
620
- "text": "MuiDocs"
621
- },
474
+ "kind": "class",
475
+ "description": "",
476
+ "name": "MuiBody",
477
+ "members": [
478
+ {
479
+ "kind": "method",
480
+ "name": "render"
481
+ },
482
+ {
483
+ "kind": "method",
484
+ "name": "waitForPartMap",
485
+ "return": {
486
+ "type": {
487
+ "text": "Promise<void>"
488
+ }
489
+ }
490
+ }
491
+ ],
492
+ "attributes": [
493
+ {
494
+ "name": "size"
495
+ },
496
+ {
497
+ "name": "weight"
498
+ },
499
+ {
500
+ "name": "variant"
501
+ }
502
+ ],
503
+ "superclass": {
504
+ "name": "HTMLElement"
505
+ },
506
+ "tagName": "mui-body",
507
+ "customElement": true
508
+ }
509
+ ],
510
+ "exports": [
511
+ {
512
+ "kind": "custom-element-definition",
513
+ "name": "mui-body",
514
+ "declaration": {
515
+ "name": "MuiBody",
516
+ "module": "src/components/mui-body/index.ts"
517
+ }
518
+ }
519
+ ]
520
+ },
521
+ {
522
+ "kind": "javascript-module",
523
+ "path": "src/components/mui-badge/doc.ts",
524
+ "declarations": [
525
+ {
526
+ "kind": "variable",
527
+ "name": "muiDocs",
528
+ "type": {
529
+ "text": "MuiDocs"
530
+ },
531
+ "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: [\"\"], }, }, }"
532
+ }
533
+ ],
534
+ "exports": [
535
+ {
536
+ "kind": "js",
537
+ "name": "muiDocs",
538
+ "declaration": {
539
+ "name": "muiDocs",
540
+ "module": "src/components/mui-badge/doc.ts"
541
+ }
542
+ }
543
+ ]
544
+ },
545
+ {
546
+ "kind": "javascript-module",
547
+ "path": "src/components/mui-badge/index.ts",
548
+ "declarations": [
549
+ {
550
+ "kind": "class",
551
+ "description": "",
552
+ "name": "MuiBadge",
553
+ "members": [
554
+ {
555
+ "kind": "method",
556
+ "name": "render"
557
+ }
558
+ ],
559
+ "attributes": [
560
+ {
561
+ "name": "variant"
562
+ }
563
+ ],
564
+ "superclass": {
565
+ "name": "HTMLElement"
566
+ },
567
+ "tagName": "mui-badge",
568
+ "customElement": true
569
+ }
570
+ ],
571
+ "exports": [
572
+ {
573
+ "kind": "custom-element-definition",
574
+ "name": "mui-badge",
575
+ "declaration": {
576
+ "name": "MuiBadge",
577
+ "module": "src/components/mui-badge/index.ts"
578
+ }
579
+ }
580
+ ]
581
+ },
582
+ {
583
+ "kind": "javascript-module",
584
+ "path": "src/components/mui-card/doc.ts",
585
+ "declarations": [
586
+ {
587
+ "kind": "variable",
588
+ "name": "muiDocs",
589
+ "type": {
590
+ "text": "MuiDocs"
591
+ },
592
+ "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: [\"\"], }, }, }"
593
+ }
594
+ ],
595
+ "exports": [
596
+ {
597
+ "kind": "js",
598
+ "name": "muiDocs",
599
+ "declaration": {
600
+ "name": "muiDocs",
601
+ "module": "src/components/mui-card/doc.ts"
602
+ }
603
+ }
604
+ ]
605
+ },
606
+ {
607
+ "kind": "javascript-module",
608
+ "path": "src/components/mui-card/index.ts",
609
+ "declarations": [],
610
+ "exports": []
611
+ },
612
+ {
613
+ "kind": "javascript-module",
614
+ "path": "src/components/mui-carousel/doc.ts",
615
+ "declarations": [
616
+ {
617
+ "kind": "variable",
618
+ "name": "muiDocs",
619
+ "type": {
620
+ "text": "MuiDocs"
621
+ },
622
622
  "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: [\"\"], }, }, }"
623
623
  }
624
624
  ],
@@ -6050,90 +6050,6 @@
6050
6050
  }
6051
6051
  ]
6052
6052
  },
6053
- {
6054
- "kind": "javascript-module",
6055
- "path": "src/components/mui-stack/hstack/index.ts",
6056
- "declarations": [
6057
- {
6058
- "kind": "class",
6059
- "description": "",
6060
- "name": "MuiHStack",
6061
- "members": [
6062
- {
6063
- "kind": "field",
6064
- "name": "space",
6065
- "type": {
6066
- "text": "string"
6067
- },
6068
- "privacy": "private",
6069
- "default": "`var(--space-500)`"
6070
- },
6071
- {
6072
- "kind": "field",
6073
- "name": "alignX",
6074
- "type": {
6075
- "text": "string"
6076
- },
6077
- "privacy": "private",
6078
- "default": "`flex-start`"
6079
- },
6080
- {
6081
- "kind": "field",
6082
- "name": "alignY",
6083
- "type": {
6084
- "text": "string"
6085
- },
6086
- "privacy": "private",
6087
- "default": "`flex-start`"
6088
- },
6089
- {
6090
- "kind": "field",
6091
- "name": "styles",
6092
- "type": {
6093
- "text": "string"
6094
- },
6095
- "privacy": "private",
6096
- "default": "` :host { display: block; } slot { display: flex; gap: var(--space); align-items: var(--alignY); justify-content: var(--alignX); } `"
6097
- },
6098
- {
6099
- "kind": "method",
6100
- "name": "waitForPartMap",
6101
- "return": {
6102
- "type": {
6103
- "text": "Promise<void>"
6104
- }
6105
- }
6106
- }
6107
- ],
6108
- "attributes": [
6109
- {
6110
- "name": "space"
6111
- },
6112
- {
6113
- "name": "aligny"
6114
- },
6115
- {
6116
- "name": "alignx"
6117
- }
6118
- ],
6119
- "superclass": {
6120
- "name": "HTMLElement"
6121
- },
6122
- "tagName": "mui-h-stack",
6123
- "customElement": true
6124
- }
6125
- ],
6126
- "exports": [
6127
- {
6128
- "kind": "custom-element-definition",
6129
- "name": "mui-h-stack",
6130
- "declaration": {
6131
- "name": "MuiHStack",
6132
- "module": "src/components/mui-stack/hstack/index.ts"
6133
- }
6134
- }
6135
- ]
6136
- },
6137
6053
  {
6138
6054
  "kind": "javascript-module",
6139
6055
  "path": "src/components/mui-slat/slat/index.ts",
@@ -6205,43 +6121,84 @@
6205
6121
  },
6206
6122
  {
6207
6123
  "kind": "javascript-module",
6208
- "path": "src/components/mui-stepper/step/index.ts",
6124
+ "path": "src/components/mui-stack/hstack/index.ts",
6209
6125
  "declarations": [
6210
6126
  {
6211
6127
  "kind": "class",
6212
6128
  "description": "",
6213
- "name": "MuiStep",
6129
+ "name": "MuiHStack",
6214
6130
  "members": [
6131
+ {
6132
+ "kind": "field",
6133
+ "name": "space",
6134
+ "type": {
6135
+ "text": "string"
6136
+ },
6137
+ "privacy": "private",
6138
+ "default": "`var(--space-500)`"
6139
+ },
6140
+ {
6141
+ "kind": "field",
6142
+ "name": "alignX",
6143
+ "type": {
6144
+ "text": "string"
6145
+ },
6146
+ "privacy": "private",
6147
+ "default": "`flex-start`"
6148
+ },
6149
+ {
6150
+ "kind": "field",
6151
+ "name": "alignY",
6152
+ "type": {
6153
+ "text": "string"
6154
+ },
6155
+ "privacy": "private",
6156
+ "default": "`flex-start`"
6157
+ },
6158
+ {
6159
+ "kind": "field",
6160
+ "name": "styles",
6161
+ "type": {
6162
+ "text": "string"
6163
+ },
6164
+ "privacy": "private",
6165
+ "default": "` :host { display: block; } slot { display: flex; gap: var(--space); align-items: var(--alignY); justify-content: var(--alignX); } `"
6166
+ },
6215
6167
  {
6216
6168
  "kind": "method",
6217
- "name": "render"
6169
+ "name": "waitForPartMap",
6170
+ "return": {
6171
+ "type": {
6172
+ "text": "Promise<void>"
6173
+ }
6174
+ }
6218
6175
  }
6219
6176
  ],
6220
6177
  "attributes": [
6221
6178
  {
6222
- "name": "state"
6179
+ "name": "space"
6223
6180
  },
6224
6181
  {
6225
- "name": "title"
6182
+ "name": "aligny"
6226
6183
  },
6227
6184
  {
6228
- "name": "direction"
6185
+ "name": "alignx"
6229
6186
  }
6230
6187
  ],
6231
6188
  "superclass": {
6232
6189
  "name": "HTMLElement"
6233
6190
  },
6234
- "tagName": "mui-step",
6191
+ "tagName": "mui-h-stack",
6235
6192
  "customElement": true
6236
6193
  }
6237
6194
  ],
6238
6195
  "exports": [
6239
6196
  {
6240
6197
  "kind": "custom-element-definition",
6241
- "name": "mui-step",
6198
+ "name": "mui-h-stack",
6242
6199
  "declaration": {
6243
- "name": "MuiStep",
6244
- "module": "src/components/mui-stepper/step/index.ts"
6200
+ "name": "MuiHStack",
6201
+ "module": "src/components/mui-stack/hstack/index.ts"
6245
6202
  }
6246
6203
  }
6247
6204
  ]
@@ -6332,18 +6289,13 @@
6332
6289
  },
6333
6290
  {
6334
6291
  "kind": "javascript-module",
6335
- "path": "src/components/mui-stepper/stepper/index.ts",
6292
+ "path": "src/components/mui-stepper/step/index.ts",
6336
6293
  "declarations": [
6337
6294
  {
6338
6295
  "kind": "class",
6339
6296
  "description": "",
6340
- "name": "MuiStepper",
6297
+ "name": "MuiStep",
6341
6298
  "members": [
6342
- {
6343
- "kind": "field",
6344
- "name": "steps",
6345
- "readonly": true
6346
- },
6347
6299
  {
6348
6300
  "kind": "method",
6349
6301
  "name": "render"
@@ -6351,39 +6303,47 @@
6351
6303
  ],
6352
6304
  "attributes": [
6353
6305
  {
6354
- "name": "direction"
6306
+ "name": "state"
6355
6307
  },
6356
6308
  {
6357
- "name": "active-step"
6309
+ "name": "title"
6310
+ },
6311
+ {
6312
+ "name": "direction"
6358
6313
  }
6359
6314
  ],
6360
6315
  "superclass": {
6361
6316
  "name": "HTMLElement"
6362
6317
  },
6363
- "tagName": "mui-stepper",
6318
+ "tagName": "mui-step",
6364
6319
  "customElement": true
6365
6320
  }
6366
6321
  ],
6367
6322
  "exports": [
6368
6323
  {
6369
6324
  "kind": "custom-element-definition",
6370
- "name": "mui-stepper",
6325
+ "name": "mui-step",
6371
6326
  "declaration": {
6372
- "name": "MuiStepper",
6373
- "module": "src/components/mui-stepper/stepper/index.ts"
6327
+ "name": "MuiStep",
6328
+ "module": "src/components/mui-stepper/step/index.ts"
6374
6329
  }
6375
6330
  }
6376
6331
  ]
6377
6332
  },
6378
6333
  {
6379
6334
  "kind": "javascript-module",
6380
- "path": "src/components/mui-table/cell/index.ts",
6335
+ "path": "src/components/mui-stepper/stepper/index.ts",
6381
6336
  "declarations": [
6382
6337
  {
6383
6338
  "kind": "class",
6384
6339
  "description": "",
6385
- "name": "MuiCell",
6340
+ "name": "MuiStepper",
6386
6341
  "members": [
6342
+ {
6343
+ "kind": "field",
6344
+ "name": "steps",
6345
+ "readonly": true
6346
+ },
6387
6347
  {
6388
6348
  "kind": "method",
6389
6349
  "name": "render"
@@ -6391,142 +6351,120 @@
6391
6351
  ],
6392
6352
  "attributes": [
6393
6353
  {
6394
- "name": "align-y"
6354
+ "name": "direction"
6355
+ },
6356
+ {
6357
+ "name": "active-step"
6395
6358
  }
6396
6359
  ],
6397
6360
  "superclass": {
6398
6361
  "name": "HTMLElement"
6399
6362
  },
6400
- "tagName": "mui-cell",
6363
+ "tagName": "mui-stepper",
6401
6364
  "customElement": true
6402
6365
  }
6403
6366
  ],
6404
6367
  "exports": [
6405
6368
  {
6406
6369
  "kind": "custom-element-definition",
6407
- "name": "mui-cell",
6370
+ "name": "mui-stepper",
6408
6371
  "declaration": {
6409
- "name": "MuiCell",
6410
- "module": "src/components/mui-table/cell/index.ts"
6372
+ "name": "MuiStepper",
6373
+ "module": "src/components/mui-stepper/stepper/index.ts"
6411
6374
  }
6412
6375
  }
6413
6376
  ]
6414
6377
  },
6415
6378
  {
6416
6379
  "kind": "javascript-module",
6417
- "path": "src/components/mui-table/row/index.ts",
6380
+ "path": "src/components/mui-table/row-group/index.ts",
6418
6381
  "declarations": [
6419
6382
  {
6420
6383
  "kind": "class",
6421
6384
  "description": "",
6422
- "name": "MuiRow",
6423
- "attributes": [
6424
- {
6425
- "name": "columns"
6426
- }
6427
- ],
6385
+ "name": "MuiRowGroup",
6428
6386
  "superclass": {
6429
6387
  "name": "HTMLElement"
6430
6388
  },
6431
- "tagName": "mui-row",
6389
+ "tagName": "mui-row-group",
6432
6390
  "customElement": true
6433
6391
  }
6434
6392
  ],
6435
6393
  "exports": [
6436
6394
  {
6437
6395
  "kind": "custom-element-definition",
6438
- "name": "mui-row",
6396
+ "name": "mui-row-group",
6439
6397
  "declaration": {
6440
- "name": "MuiRow",
6441
- "module": "src/components/mui-table/row/index.ts"
6398
+ "name": "MuiRowGroup",
6399
+ "module": "src/components/mui-table/row-group/index.ts"
6442
6400
  }
6443
6401
  }
6444
6402
  ]
6445
6403
  },
6446
6404
  {
6447
6405
  "kind": "javascript-module",
6448
- "path": "src/components/mui-table/row-group/index.ts",
6406
+ "path": "src/components/mui-table/row/index.ts",
6449
6407
  "declarations": [
6450
6408
  {
6451
6409
  "kind": "class",
6452
6410
  "description": "",
6453
- "name": "MuiRowGroup",
6411
+ "name": "MuiRow",
6412
+ "attributes": [
6413
+ {
6414
+ "name": "columns"
6415
+ }
6416
+ ],
6454
6417
  "superclass": {
6455
6418
  "name": "HTMLElement"
6456
6419
  },
6457
- "tagName": "mui-row-group",
6420
+ "tagName": "mui-row",
6458
6421
  "customElement": true
6459
6422
  }
6460
6423
  ],
6461
6424
  "exports": [
6462
6425
  {
6463
6426
  "kind": "custom-element-definition",
6464
- "name": "mui-row-group",
6427
+ "name": "mui-row",
6465
6428
  "declaration": {
6466
- "name": "MuiRowGroup",
6467
- "module": "src/components/mui-table/row-group/index.ts"
6429
+ "name": "MuiRow",
6430
+ "module": "src/components/mui-table/row/index.ts"
6468
6431
  }
6469
6432
  }
6470
6433
  ]
6471
6434
  },
6472
6435
  {
6473
6436
  "kind": "javascript-module",
6474
- "path": "src/components/mui-tabs/controller/index.ts",
6437
+ "path": "src/components/mui-table/cell/index.ts",
6475
6438
  "declarations": [
6476
6439
  {
6477
6440
  "kind": "class",
6478
6441
  "description": "",
6479
- "name": "MuiTabController",
6442
+ "name": "MuiCell",
6480
6443
  "members": [
6481
6444
  {
6482
6445
  "kind": "method",
6483
- "name": "handleTabChange",
6484
- "return": {
6485
- "type": {
6486
- "text": "void"
6487
- }
6488
- },
6489
- "parameters": [
6490
- {
6491
- "name": "event",
6492
- "type": {
6493
- "text": "Event"
6494
- }
6495
- }
6496
- ]
6497
- },
6446
+ "name": "render"
6447
+ }
6448
+ ],
6449
+ "attributes": [
6498
6450
  {
6499
- "kind": "method",
6500
- "name": "updatePanels",
6501
- "return": {
6502
- "type": {
6503
- "text": "void"
6504
- }
6505
- },
6506
- "parameters": [
6507
- {
6508
- "name": "activeId",
6509
- "type": {
6510
- "text": "string"
6511
- }
6512
- }
6513
- ]
6451
+ "name": "align-y"
6514
6452
  }
6515
6453
  ],
6516
6454
  "superclass": {
6517
6455
  "name": "HTMLElement"
6518
6456
  },
6519
- "tagName": "mui-tab-controller",
6457
+ "tagName": "mui-cell",
6520
6458
  "customElement": true
6521
6459
  }
6522
6460
  ],
6523
6461
  "exports": [
6524
6462
  {
6525
6463
  "kind": "custom-element-definition",
6526
- "name": "mui-tab-controller",
6464
+ "name": "mui-cell",
6527
6465
  "declaration": {
6528
- "name": "MuiTabController",
6529
- "module": "src/components/mui-tabs/controller/index.ts"
6466
+ "name": "MuiCell",
6467
+ "module": "src/components/mui-table/cell/index.ts"
6530
6468
  }
6531
6469
  }
6532
6470
  ]
@@ -6618,6 +6556,68 @@
6618
6556
  }
6619
6557
  ]
6620
6558
  },
6559
+ {
6560
+ "kind": "javascript-module",
6561
+ "path": "src/components/mui-tabs/controller/index.ts",
6562
+ "declarations": [
6563
+ {
6564
+ "kind": "class",
6565
+ "description": "",
6566
+ "name": "MuiTabController",
6567
+ "members": [
6568
+ {
6569
+ "kind": "method",
6570
+ "name": "handleTabChange",
6571
+ "return": {
6572
+ "type": {
6573
+ "text": "void"
6574
+ }
6575
+ },
6576
+ "parameters": [
6577
+ {
6578
+ "name": "event",
6579
+ "type": {
6580
+ "text": "Event"
6581
+ }
6582
+ }
6583
+ ]
6584
+ },
6585
+ {
6586
+ "kind": "method",
6587
+ "name": "updatePanels",
6588
+ "return": {
6589
+ "type": {
6590
+ "text": "void"
6591
+ }
6592
+ },
6593
+ "parameters": [
6594
+ {
6595
+ "name": "activeId",
6596
+ "type": {
6597
+ "text": "string"
6598
+ }
6599
+ }
6600
+ ]
6601
+ }
6602
+ ],
6603
+ "superclass": {
6604
+ "name": "HTMLElement"
6605
+ },
6606
+ "tagName": "mui-tab-controller",
6607
+ "customElement": true
6608
+ }
6609
+ ],
6610
+ "exports": [
6611
+ {
6612
+ "kind": "custom-element-definition",
6613
+ "name": "mui-tab-controller",
6614
+ "declaration": {
6615
+ "name": "MuiTabController",
6616
+ "module": "src/components/mui-tabs/controller/index.ts"
6617
+ }
6618
+ }
6619
+ ]
6620
+ },
6621
6621
  {
6622
6622
  "kind": "javascript-module",
6623
6623
  "path": "src/components/mui-tabs/panel/index.ts",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@muibook/components",
3
- "version": "10.0.0",
3
+ "version": "10.0.1",
4
4
  "type": "module",
5
5
  "description": "A library of MUI-based design system components.",
6
6
  "author": "Michael Trilford",