@muibook/components 1.0.2 → 1.0.4

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 (171) hide show
  1. package/dist/esm/{mui-body → components/mui-body}/index.js +1 -1
  2. package/dist/esm/{mui-button → components/mui-button}/index.js +1 -1
  3. package/dist/esm/{mui-grid → components/mui-grid}/index.js +1 -1
  4. package/dist/esm/{mui-link → components/mui-link}/index.js +1 -1
  5. package/dist/esm/{mui-select → components/mui-select}/index.js +1 -1
  6. package/dist/esm/{mui-stack → components/mui-stack}/hstack/index.js +1 -1
  7. package/dist/esm/{mui-stack → components/mui-stack}/vstack/index.js +1 -1
  8. package/package.json +5 -3
  9. package/readme.md +12 -0
  10. package/dist/create-mui-app/assets/index-DfcB3F-s.js +0 -597
  11. package/dist/create-mui-app/create-mui-app.css +0 -1
  12. package/dist/create-mui-app/index.html +0 -21
  13. package/dist/esm/_redirects +0 -1
  14. package/dist/esm/favicon.ico +0 -0
  15. package/dist/esm/index/index.js +0 -71
  16. package/dist/esm/logo192.png +0 -0
  17. package/dist/muibook/_redirects +0 -1
  18. package/dist/muibook/assets/base-B4dO4n0A.js +0 -198
  19. package/dist/muibook/assets/components-YZ3tjmIt.js +0 -122
  20. package/dist/muibook/assets/contextual-D648xs_u.js +0 -59
  21. package/dist/muibook/assets/image-1080-Bg-8LoSs.js +0 -1
  22. package/dist/muibook/assets/index-0bBJZTXh.js +0 -135
  23. package/dist/muibook/assets/index-B4Lbi-ZX.js +0 -82
  24. package/dist/muibook/assets/index-BJJtzLti.js +0 -144
  25. package/dist/muibook/assets/index-BN6UEWFf.js +0 -439
  26. package/dist/muibook/assets/index-Bc68V_xw.js +0 -140
  27. package/dist/muibook/assets/index-BnpaoEYs.js +0 -386
  28. package/dist/muibook/assets/index-BrZBJGo2.js +0 -4276
  29. package/dist/muibook/assets/index-Bx-SU7T2.js +0 -98
  30. package/dist/muibook/assets/index-C10sNeH-.js +0 -64
  31. package/dist/muibook/assets/index-C4ZnvuXX.js +0 -333
  32. package/dist/muibook/assets/index-C7Tqc5BR.js +0 -325
  33. package/dist/muibook/assets/index-CAkZAmud.js +0 -514
  34. package/dist/muibook/assets/index-CCegrD2J.js +0 -130
  35. package/dist/muibook/assets/index-CHZJlumm.js +0 -95
  36. package/dist/muibook/assets/index-CPZ8jubJ.js +0 -308
  37. package/dist/muibook/assets/index-CSLqxg9p.js +0 -73
  38. package/dist/muibook/assets/index-CT3BsW8R.js +0 -177
  39. package/dist/muibook/assets/index-CYYG9dAN.js +0 -270
  40. package/dist/muibook/assets/index-CdghbWW3.js +0 -42
  41. package/dist/muibook/assets/index-CfD1WQYQ.js +0 -106
  42. package/dist/muibook/assets/index-Ch40uilB.js +0 -52
  43. package/dist/muibook/assets/index-CwAai54c.js +0 -263
  44. package/dist/muibook/assets/index-CyWt9f96.js +0 -336
  45. package/dist/muibook/assets/index-D8hXO6aa.js +0 -131
  46. package/dist/muibook/assets/index-DBkw7VLa.js +0 -431
  47. package/dist/muibook/assets/index-DI0vNTNv.js +0 -56
  48. package/dist/muibook/assets/index-DNImaJPY.js +0 -96
  49. package/dist/muibook/assets/index-DP6CCnt0.js +0 -257
  50. package/dist/muibook/assets/index-DR5X8zCc.js +0 -67
  51. package/dist/muibook/assets/index-DZQ8pS6y.js +0 -133
  52. package/dist/muibook/assets/index-DlZ1b9ZK.js +0 -233
  53. package/dist/muibook/assets/index-DwnvCJk0.js +0 -177
  54. package/dist/muibook/assets/index-_4AZFkzS.js +0 -328
  55. package/dist/muibook/assets/index-dkW0Vbeg.js +0 -429
  56. package/dist/muibook/assets/index-ehE10GAP.js +0 -40
  57. package/dist/muibook/assets/index-icuV1guL.js +0 -69
  58. package/dist/muibook/assets/index-qOE8f0sK.js +0 -72
  59. package/dist/muibook/assets/layout-BT0xIYa9.js +0 -184
  60. package/dist/muibook/assets/mui-D6S1tQ24.js +0 -1
  61. package/dist/muibook/assets/mui-logo-mobile-DuEMz_jq.js +0 -31
  62. package/dist/muibook/assets/semantic-cbNjeY5p.js +0 -111
  63. package/dist/muibook/assets/spacing-DY3cAXq0.js +0 -82
  64. package/dist/muibook/assets/surface-CMaW9FgJ.js +0 -148
  65. package/dist/muibook/assets/text-TVCTYde0.js +0 -130
  66. package/dist/muibook/assets/visual-B_21dq90.js +0 -96
  67. package/dist/muibook/buttercup.png +0 -0
  68. package/dist/muibook/create-mui-app.jpg +0 -0
  69. package/dist/muibook/crystal.png +0 -0
  70. package/dist/muibook/diamond.png +0 -0
  71. package/dist/muibook/emerald.svg +0 -13
  72. package/dist/muibook/favicon.ico +0 -0
  73. package/dist/muibook/hero-guides.png +0 -0
  74. package/dist/muibook/hero-outcomes.png +0 -0
  75. package/dist/muibook/image-1080.png +0 -0
  76. package/dist/muibook/image-220.png +0 -0
  77. package/dist/muibook/image-395.png +0 -0
  78. package/dist/muibook/index.html +0 -38
  79. package/dist/muibook/logo192.png +0 -0
  80. package/dist/muibook/mui-tokens.jpg +0 -0
  81. package/dist/muibook/muibook.css +0 -1
  82. package/dist/muibook/premier.png +0 -0
  83. package/dist/muibook/ruby.svg +0 -13
  84. package/dist/muibook/sapphire.png +0 -0
  85. package/dist/muibook/sapphire.svg +0 -13
  86. package/dist/muibook/snowy-mint.png +0 -0
  87. package/dist/types/components/mui-accordion/mui-accordion-block/index.d.ts +0 -2
  88. package/dist/types/components/mui-accordion/mui-accordion-group/index.d.ts +0 -1
  89. package/dist/types/components/mui-accordion/mui-accordion-inline/index.d.ts +0 -2
  90. package/dist/types/components/mui-icons/chevron.d.ts +0 -1
  91. package/dist/types/components/mui-icons/mui-icon-add.d.ts +0 -1
  92. package/dist/types/components/mui-icons/mui-icon-down-chevron.d.ts +0 -1
  93. package/dist/types/components/mui-icons/mui-icon-moon.d.ts +0 -1
  94. package/dist/types/components/mui-icons/mui-icon-right-chevron.d.ts +0 -1
  95. package/dist/types/components/mui-icons/mui-icon-sun.d.ts +0 -1
  96. package/dist/types/components/mui-stack/mui-hstack/index.d.ts +0 -1
  97. package/dist/types/components/mui-stack/mui-vstack/index.d.ts +0 -1
  98. package/dist/types/components/mui-table/row/row.d.ts +0 -1
  99. package/dist/types/create-app/index.d.ts +0 -15
  100. package/dist/types/create-mui-app/index.d.ts +0 -15
  101. package/dist/types/index.d.ts +0 -68
  102. package/dist/types/muibook/index.d.ts +0 -93
  103. /package/dist/esm/{mui-accordion → components/mui-accordion}/block/index.js +0 -0
  104. /package/dist/esm/{mui-accordion → components/mui-accordion}/group/index.js +0 -0
  105. /package/dist/esm/{mui-accordion → components/mui-accordion}/index.js +0 -0
  106. /package/dist/esm/{mui-accordion → components/mui-accordion}/inline/index.js +0 -0
  107. /package/dist/esm/{mui-addon → components/mui-addon}/index.js +0 -0
  108. /package/dist/esm/{mui-alert → components/mui-alert}/index.js +0 -0
  109. /package/dist/esm/{mui-badge → components/mui-badge}/index.js +0 -0
  110. /package/dist/esm/{mui-button-group → components/mui-button-group}/index.js +0 -0
  111. /package/dist/esm/{mui-card → components/mui-card}/body/index.js +0 -0
  112. /package/dist/esm/{mui-card → components/mui-card}/card/index.js +0 -0
  113. /package/dist/esm/{mui-card → components/mui-card}/footer/index.js +0 -0
  114. /package/dist/esm/{mui-card → components/mui-card}/header/index.js +0 -0
  115. /package/dist/esm/{mui-card → components/mui-card}/index.js +0 -0
  116. /package/dist/esm/{mui-carousel → components/mui-carousel}/controller/index.js +0 -0
  117. /package/dist/esm/{mui-carousel → components/mui-carousel}/index.js +0 -0
  118. /package/dist/esm/{mui-carousel → components/mui-carousel}/panel/index.js +0 -0
  119. /package/dist/esm/{mui-code → components/mui-code}/index.js +0 -0
  120. /package/dist/esm/{mui-container → components/mui-container}/index.js +0 -0
  121. /package/dist/esm/{mui-field → components/mui-field}/index.js +0 -0
  122. /package/dist/esm/{mui-file-upload → components/mui-file-upload}/index.js +0 -0
  123. /package/dist/esm/{mui-heading → components/mui-heading}/index.js +0 -0
  124. /package/dist/esm/{mui-icons → components/mui-icons}/accessibility/index.js +0 -0
  125. /package/dist/esm/{mui-icons → components/mui-icons}/add/index.js +0 -0
  126. /package/dist/esm/{mui-icons → components/mui-icons}/attention/index.js +0 -0
  127. /package/dist/esm/{mui-icons → components/mui-icons}/check/index.js +0 -0
  128. /package/dist/esm/{mui-icons → components/mui-icons}/close/index.js +0 -0
  129. /package/dist/esm/{mui-icons → components/mui-icons}/down-chevron/index.js +0 -0
  130. /package/dist/esm/{mui-icons → components/mui-icons}/globe/index.js +0 -0
  131. /package/dist/esm/{mui-icons → components/mui-icons}/grid/index.js +0 -0
  132. /package/dist/esm/{mui-icons → components/mui-icons}/index.js +0 -0
  133. /package/dist/esm/{mui-icons → components/mui-icons}/info/index.js +0 -0
  134. /package/dist/esm/{mui-icons → components/mui-icons}/left-arrow/index.js +0 -0
  135. /package/dist/esm/{mui-icons → components/mui-icons}/left-chevron/index.js +0 -0
  136. /package/dist/esm/{mui-icons → components/mui-icons}/menu/index.js +0 -0
  137. /package/dist/esm/{mui-icons → components/mui-icons}/message/index.js +0 -0
  138. /package/dist/esm/{mui-icons → components/mui-icons}/moon/index.js +0 -0
  139. /package/dist/esm/{mui-icons → components/mui-icons}/notification/index.js +0 -0
  140. /package/dist/esm/{mui-icons → components/mui-icons}/right-chevron/index.js +0 -0
  141. /package/dist/esm/{mui-icons → components/mui-icons}/stop/index.js +0 -0
  142. /package/dist/esm/{mui-icons → components/mui-icons}/subtract/index.js +0 -0
  143. /package/dist/esm/{mui-icons → components/mui-icons}/sun/index.js +0 -0
  144. /package/dist/esm/{mui-icons → components/mui-icons}/toggle/index.js +0 -0
  145. /package/dist/esm/{mui-icons → components/mui-icons}/up-arrow/index.js +0 -0
  146. /package/dist/esm/{mui-icons → components/mui-icons}/up-chevron/index.js +0 -0
  147. /package/dist/esm/{mui-icons → components/mui-icons}/warning/index.js +0 -0
  148. /package/dist/esm/{mui-image → components/mui-image}/index.js +0 -0
  149. /package/dist/esm/{mui-input → components/mui-input}/index.js +0 -0
  150. /package/dist/esm/{mui-list → components/mui-list}/index.js +0 -0
  151. /package/dist/esm/{mui-list → components/mui-list}/item/index.js +0 -0
  152. /package/dist/esm/{mui-list → components/mui-list}/list/index.js +0 -0
  153. /package/dist/esm/{mui-message → components/mui-message}/index.js +0 -0
  154. /package/dist/esm/{mui-quote → components/mui-quote}/index.js +0 -0
  155. /package/dist/esm/{mui-responsive → components/mui-responsive}/index.js +0 -0
  156. /package/dist/esm/{mui-rule → components/mui-rule}/index.js +0 -0
  157. /package/dist/esm/{mui-slat → components/mui-slat}/index.js +0 -0
  158. /package/dist/esm/{mui-smart-card → components/mui-smart-card}/index.js +0 -0
  159. /package/dist/esm/{mui-stack → components/mui-stack}/index.js +0 -0
  160. /package/dist/esm/{mui-switch → components/mui-switch}/index.js +0 -0
  161. /package/dist/esm/{mui-table → components/mui-table}/cell/index.js +0 -0
  162. /package/dist/esm/{mui-table → components/mui-table}/index.js +0 -0
  163. /package/dist/esm/{mui-table → components/mui-table}/row/index.js +0 -0
  164. /package/dist/esm/{mui-table → components/mui-table}/row-group/index.js +0 -0
  165. /package/dist/esm/{mui-table → components/mui-table}/table/index.js +0 -0
  166. /package/dist/esm/{mui-tabs → components/mui-tabs}/controller/index.js +0 -0
  167. /package/dist/esm/{mui-tabs → components/mui-tabs}/index.js +0 -0
  168. /package/dist/esm/{mui-tabs → components/mui-tabs}/item/index.js +0 -0
  169. /package/dist/esm/{mui-tabs → components/mui-tabs}/panel/index.js +0 -0
  170. /package/dist/esm/{mui-tabs → components/mui-tabs}/tab-bar/index.js +0 -0
  171. /package/dist/esm/{mui-utils → utils}/part-map/index.js +0 -0
@@ -1,131 +0,0 @@
1
- class l extends HTMLElement{constructor(){super();const s=this.attachShadow({mode:"open"}),i=`
2
- :host { display: block; }
3
- `,t=[{name:"variant",type:"string",options:"success, info, warning, error",default:"success",description:"Describe the intent or mood of a alert"},{name:"slot",required:!0,type:"HTML attribute",options:"{text}, mui-links",default:"",description:"Content placed inside the component. Can include mui-links and text nodes, or both."},{name:"style",type:"string",options:"Valid CSS",default:"",description:"You are able to use styles to add layout based CSS to the host element."},{name:"class",type:"string",options:"Valid CSS",default:"",description:"You are able to use add a classname to add layout based CSS to the host element."}],o=t.map(e=>`
4
- <story-type-row
5
- ${e.required?"required":""}
6
- name="${e.name}"
7
- type="${e.type}"
8
- options="${e.options||""}"
9
- default="${e.default||""}"
10
- description="${e.description}">
11
- </story-type-row>
12
- `).join(""),a=t.map((e,r)=>{const n=r===t.length-1?"last-child":"";return`
13
- <mui-accordion-block
14
- size="medium"
15
- heading=${e.name.charAt(0).toUpperCase()+e.name.slice(1)}
16
- ${n}>
17
- <story-type-slat
18
- slot="detail"
19
- ${e.required?"required":""}
20
- name="${e.name}"
21
- type="${e.type}"
22
- options="${e.options||""}"
23
- default="${e.default||""}"
24
- description="${e.description}">
25
- </story-type-slat>
26
- </mui-accordion-block>
27
- `}).join("");s.innerHTML=`
28
- <style>${i}</style>
29
-
30
- <story-template
31
- title="Alerts"
32
- description="Alerts are to surface meaningful system messages related to the users' current task or action."
33
- figma="https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=3-4444&t=ZA9uH4LK37tSuk6r-1"
34
- guides
35
- github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-alert/index.ts"
36
-
37
- accessibility="
38
- ARIA-live is built in, using POLITE + ASSERTIVE for screen readers.;
39
- The role is set to ALERT for immediate screen reader feedback.
40
- "
41
- >
42
-
43
- <mui-v-stack space="var(--space-700)">
44
-
45
- <spec-card title="Props">
46
- <mui-responsive breakpoint="768" slot="body">
47
- <story-type-table slot="showAbove">
48
- ${o}
49
- </story-type-table>
50
- <mui-accordion-group exclusive slot="showBelow">
51
- ${a}
52
- </mui-accordion-group>
53
- </mui-responsive>
54
- </spec-card>
55
-
56
- <story-card
57
- title="Success"
58
- description="Indicates that an operation or action has been completed successfully."
59
- usage="Form submissions that have been processed without errors.;Successful data updates or saves.;Confirmation of completed tasks or actions."
60
- accessibility="ARIA-live of POLITE is set on this variant."
61
- >
62
- <div slot="body">
63
- <mui-alert variant="success">Your message has been sent successfully.</mui-alert>
64
- </div>
65
- <mui-code slot="footer">
66
- &lt;mui-alert variant="success"&gt;
67
- <br />
68
- &nbsp;&nbsp;...
69
- <br />
70
- &lt;/mui-alert&gt;
71
- </mui-code>
72
- </story-card>
73
-
74
- <story-card
75
- title="Info"
76
- description="Provides general information or updates that are helpful but not critical."
77
- usage="Announcing new features or updates.; Providing contextual information or tips.; Informing users about non-urgent system statuses."
78
- accessibility="ARIA-live of POLITE is set on this variant."
79
- >
80
- <div slot="body">
81
- <mui-alert variant="info">Please read the comments carefully.</mui-alert>
82
- </div>
83
- <mui-code slot="footer">
84
- &lt;mui-alert variant="info"&gt;
85
- <br />
86
- &nbsp;&nbsp;...
87
- <br />
88
- &lt;/mui-alert&gt;
89
- </mui-code>
90
- </story-card>
91
-
92
- <story-card
93
- title="Warning"
94
- description="Alerts users to potential issues or situations that require caution."
95
- usage="Notifying about unsaved changes.; Indicating deprecated features or upcoming changes.; Highlighting actions that may have unintended consequences."
96
- accessibility="ARIA-live of ASSERTIVE is set on this variant."
97
- >
98
- <div slot="body">
99
- <mui-alert variant="warning">There was a problem with your network connection. <mui-link href="#">Learn more</mui-link></mui-alert>
100
- </div>
101
- <mui-code slot="footer">
102
- &lt;mui-alert variant="warning"&gt;
103
- <br />
104
- &nbsp;&nbsp;...
105
- <br />
106
- &lt;/mui-alert&gt;
107
- </mui-code>
108
- </story-card>
109
-
110
- <story-card
111
- title="Error"
112
- description="Indicates that an error has occurred, requiring user attention or action."
113
- usage="Form validation errors.; System failures or exceptions.; Failed operations or transactions."
114
- accessibility="ARIA-live of ASSERTIVE is set on this variant."
115
- >
116
- <div slot="body">
117
- <mui-alert variant="error">Please read the comments carefully. <mui-link href="#">Learn more</mui-link></mui-alert>
118
- </div>
119
- <mui-code slot="footer">
120
- &lt;mui-alert variant="error"&gt;
121
- <br />
122
- &nbsp;&nbsp;...
123
- <br />
124
- &lt;/mui-alert&gt;
125
- </mui-code>
126
- </story-card>
127
-
128
- </mui-v-stack>
129
-
130
- </story-template>
131
- `}}customElements.define("story-alert",l);
@@ -1,431 +0,0 @@
1
- import{V as r,M as $}from"./mui-D6S1tQ24.js";const C="data:image/svg+xml,%3csvg%20width='91'%20height='30'%20viewBox='0%200%2091%2030'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M45.066%200.739648L39.1121%2029.339H31.9107L37.8651%200.739648H45.066ZM75.3627%2019.2071L79.1538%208.46656L81.3345%2019.2071H75.3627ZM83.401%2029.339H90.0599L84.2422%200.739648H78.0995C76.7151%200.739648%2075.5488%201.56447%2075.0322%202.83617L64.2262%2029.339H71.789L73.2908%2025.0681H82.5284L83.401%2029.339ZM64.6011%2020.0019C64.633%2012.4545%2054.4465%2012.036%2054.5141%208.66387C54.5363%207.63895%2055.4873%206.54733%2057.5674%206.26832C58.599%206.13159%2061.444%206.02154%2064.6698%207.54835L65.9314%201.4811C64.1986%200.837471%2061.9693%200.217185%2059.1957%200.217185C52.0765%200.217185%2047.0682%204.10231%2047.0281%209.67045C46.9827%2013.7879%2050.6056%2016.0834%2053.3294%2017.4546C56.1381%2018.8564%2057.0794%2019.7557%2057.0659%2021.0079C57.0464%2022.9266%2054.8257%2023.7759%2052.7592%2023.8081C49.1358%2023.8659%2047.0368%2022.8021%2045.363%2022.0006L44.056%2028.2702C45.7412%2029.0628%2048.8464%2029.7525%2052.0619%2029.7881C59.6301%2029.7881%2064.5789%2025.948%2064.6011%2020.0019ZM34.7762%200.739648L23.1079%2029.339H15.4964L9.75402%206.51454C9.40617%205.11112%209.10269%204.59532%208.044%204.00227C6.31235%203.03571%203.4533%202.13196%200.939941%201.56948L1.10981%200.739648H13.3639C14.9246%200.739648%2016.329%201.80681%2016.686%203.65377L19.7193%2020.2048L27.2107%200.739648H34.7762Z'%20fill='white'/%3e%3c/svg%3e",k="data:image/svg+xml,%3csvg%20width='85'%20height='53'%20viewBox='0%200%2085%2053'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M53.8565%206.10938H31.144V46.8211H53.8565V6.10938Z'%20fill='%23FF5F00'/%3e%3cpath%20d='M32.5858%2026.4652C32.5858%2018.1934%2036.4794%2010.8566%2042.4639%206.10932C38.0657%202.65674%2032.5137%200.570801%2026.4571%200.570801C12.1086%200.570801%200.5%2012.1513%200.5%2026.4652C0.5%2040.779%2012.1086%2052.3596%2026.4571%2052.3596C32.5137%2052.3596%2038.0657%2050.2736%2042.4639%2046.8211C36.4794%2042.1457%2032.5858%2034.737%2032.5858%2026.4652Z'%20fill='%23EB001B'/%3e%3cpath%20d='M84.5001%2026.4652C84.5001%2040.779%2072.8915%2052.3596%2058.543%2052.3596C52.4863%2052.3596%2046.9344%2050.2736%2042.5361%2046.8211C48.5928%2042.0737%2052.4142%2034.737%2052.4142%2026.4652C52.4142%2018.1934%2048.5207%2010.8566%2042.5361%206.10932C46.9344%202.65674%2052.4863%200.570801%2058.543%200.570801C72.8915%200.570801%2084.5001%2012.2233%2084.5001%2026.4652Z'%20fill='%23F79E1B'/%3e%3c/svg%3e",e="data:image/svg+xml,%3csvg%20width='38'%20height='38'%20viewBox='0%200%2038%2038'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M25.2274%209.26582C25.2274%2012.8944%2018.6573%2018.4995%2018.6573%2018.4995C18.6573%2018.4995%2012.0872%2012.8944%2012.0872%209.26582C12.0872%205.63725%2015.0287%202.69572%2018.6573%202.69572C22.2857%202.69572%2025.2274%205.63725%2025.2274%209.26582Z'%20fill='black'/%3e%3cpath%20d='M9.45397%2015.4856C7.78967%2013.8213%205.09133%2013.8213%203.42704%2015.4856C1.76275%2017.1499%201.76275%2019.8483%203.42704%2021.5126L15.9831%2034.0687C17.6474%2035.733%2020.3458%2035.733%2022.0101%2034.0687C23.6744%2032.4044%2023.6744%2029.706%2022.0101%2028.0417L9.45397%2015.4856Z'%20fill='black'%20fill-opacity='0.55'/%3e%3cpath%20d='M28.5355%2015.4856C30.1998%2013.8213%2032.8982%2013.8213%2034.5625%2015.4856C36.2268%2017.1499%2036.2268%2019.8483%2034.5625%2021.5126L22.0063%2034.0687C20.3421%2035.733%2017.6437%2035.733%2015.9794%2034.0687C14.3151%2032.4044%2014.3151%2029.706%2015.9794%2028.0417L28.5355%2015.4856Z'%20fill='black'%20fill-opacity='0.55'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M18.9993%2025.0276L22.0124%2028.0409C23.6768%2029.7051%2023.6768%2032.4034%2022.0124%2034.0678C21.1803%2034.8999%2020.0899%2035.316%2018.9993%2035.316C17.9087%2035.316%2016.8181%2034.8999%2015.986%2034.0678C14.3217%2032.4034%2014.3217%2029.7051%2015.986%2028.0409L18.9993%2025.0276Z'%20fill='black'/%3e%3c/svg%3e",p="/buttercup.png",m="/crystal.png",b="/diamond.png",d="/premier.png",c="/sapphire.png",a="/emerald.svg",s="/ruby.svg",n="/sapphire.svg",o="/image-220.png",l="/image-395.png";class w extends HTMLElement{constructor(){super();const g=this.attachShadow({mode:"open"}),u=`
2
- :host { display: block; }
3
- `,i=[{name:"number",required:!0,type:"number",options:"",default:"",description:"Only the last 4 digits are shown (no full card number for security)"},{name:"state",type:"string",options:"frozen",default:"",description:""},{name:"logo",type:"string",options:"./path/to/image.png",default:"",description:"Add a logo to the card"},{name:"logo-height",type:"number",options:"0-126",default:"auto",description:"Define the height of the logo without a unit of measure"},{name:"variant",type:"string",options:"plain, animated",default:"",description:""},{name:"partner",type:"string",options:"logo.svg",default:"",description:"Partner logo"},{name:"type",type:"string",options:"Debit, Credit, etc",default:"",description:"Used to visually or semantically describe the card’s usage."},{name:"bg-color",type:"CSS",options:"",default:"",description:"Add a logo to the card"},{name:"bg-image",type:"string",options:"./path/to/image.png",default:"",description:"Add a logo to the card"},{name:"inverted",type:"boolean",options:"",default:"",description:"Toggle the text colour for darker backgrounds"}],y=i.map(t=>`
4
- <story-type-row
5
- ${t.required?"required":""}
6
- name="${t.name}"
7
- type="${t.type}"
8
- options="${t.options||""}"
9
- default="${t.default||""}"
10
- description="${t.description}">
11
- </story-type-row>
12
- `).join(""),v=i.map((t,h)=>{const f=h===i.length-1?"last-child":"";return`
13
- <mui-accordion-block
14
- size="medium"
15
- heading=${t.name.charAt(0).toUpperCase()+t.name.slice(1)}
16
- ${f}>
17
- <story-type-slat
18
- slot="detail"
19
- ${t.required?"required":""}
20
- name="${t.name}"
21
- type="${t.type}"
22
- options="${t.options||""}"
23
- default="${t.default||""}"
24
- description="${t.description}">
25
- </story-type-slat>
26
- </mui-accordion-block>
27
- `}).join("");g.innerHTML=`
28
- <style>${u}</style>
29
-
30
- <story-template title="Smart Card"
31
- description="A dynamic card component for wallets, dashboards, spend tools, or reward programs—designed to represent digital or physical cards in modern, digital-first experiences."
32
- figma=""
33
- github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-smart-card/index.ts"
34
- >
35
-
36
- <mui-v-stack space="var(--space-700)">
37
-
38
-
39
- <spec-card title="Props">
40
- <mui-responsive breakpoint="767" slot="body">
41
- <story-type-table slot="showAbove">
42
- ${y}
43
- </story-type-table>
44
- <mui-accordion-group exclusive slot="showBelow">
45
- ${v}
46
- </mui-accordion-group>
47
- </mui-responsive>
48
- </spec-card>
49
-
50
- <story-card title="Plain">
51
- <mui-v-stack alignX="center" slot="body" style="padding-top: var(--space-400); padding-bottom: var(--space-400);">
52
- <mui-smart-card
53
- type="Debit"
54
- number="1234"
55
- partner="${r}"
56
- logo="${o}"
57
- variant="plain"
58
- >
59
- </mui-smart-card>
60
- </mui-v-stack>
61
- <mui-code slot="footer">
62
- &lt;mui-smart-card<br>
63
- &nbsp;&nbsp;number="1234"<br>
64
- &nbsp;&nbsp;type="Debit"<br>
65
- &nbsp;&nbsp;logo="./images/card/image-220.png"<br>
66
- &nbsp;&nbsp;partner="./images/networks/visa-black.svg"<br>
67
- &nbsp;&nbsp;variant="plain"<br>
68
- &gt;<br>
69
- &lt;/mui-smart-card&gt;
70
- </mui-code>
71
- </story-card>
72
-
73
- <story-card title="Plain / Inverted">
74
- <mui-v-stack alignX="center" slot="body" style="padding-top: var(--space-400); padding-bottom: var(--space-400);">
75
- <mui-smart-card
76
- inverted
77
- type="Debit"
78
- number="1234"
79
- partner="${C}"
80
- logo="${o}"
81
- variant="plain"
82
- >
83
- </mui-smart-card>
84
- </mui-v-stack>
85
- <mui-code slot="footer">
86
- &lt;mui-smart-card<br>
87
- &nbsp;&nbsp;inverted<br>
88
- &nbsp;&nbsp;number="1234"<br>
89
- &nbsp;&nbsp;type="Debit"<br>
90
- &nbsp;&nbsp;logo="./images/card/image-220.png"<br>
91
- &nbsp;&nbsp;partner="./images/card/visa-white.svg"<br>
92
- &nbsp;&nbsp;variant="plain"<br>
93
- &gt;<br>
94
- &lt;/mui-smart-card&gt;
95
- </mui-code>
96
- </story-card>
97
-
98
- <story-card title="Animated">
99
- <mui-v-stack alignX="center" slot="body" style="padding-top: var(--space-400); padding-bottom: var(--space-400);">
100
- <mui-smart-card
101
- variant="animated"
102
- number="1234"
103
- type="Debit"
104
- bg-image="${p}"
105
- logo="${o}"
106
- partner="${r}"
107
- >
108
- </mui-smart-card>
109
- </mui-v-stack>
110
- <mui-code slot="footer">
111
- &lt;mui-smart-card<br>
112
- &nbsp;&nbsp;number="1234"<br>
113
- &nbsp;&nbsp;type="Debit"<br>
114
- &nbsp;&nbsp;bg-image="./images/mesh/buttercup.png"<br>
115
- &nbsp;&nbsp;logo="./images/card/image-220.png"<br>
116
- &nbsp;&nbsp;partner="./images/networks/visa-black.svg"<br>
117
- &nbsp;&nbsp;variant="animated"<br>
118
- &gt;<br>
119
- &lt;/mui-smart-card&gt;
120
- </mui-code>
121
- </story-card>
122
-
123
- <story-card
124
- title="Logo"
125
- description="The logo area, positioned at the top-right of the card, has a maximum size of 220×126px and scales down responsively on smaller devices."
126
- usage="
127
- Import the logo using the logo property;
128
- Set the logo-height to an appropriate size no larger than 126px;
129
- If your SVG is at intended height, then logo-height isn't required;
130
- When using a 2x/3x PNGs and resize with logo-height
131
- ">
132
- <mui-v-stack alignX="center" slot="body" style="padding-top: var(--space-400); padding-bottom: var(--space-400);">
133
- <mui-smart-card
134
- variant="plain"
135
- partner="${r}"
136
- type="Debit"
137
- number="1234"
138
- logo="${e}"
139
- logo-height="80"
140
- >
141
- </mui-smart-card>
142
- <mui-smart-card
143
- variant="animated"
144
- partner="${r}"
145
- type="Debit"
146
- number="1234"
147
- logo="${e}"
148
- logo-height="80"
149
- bg-image="${p}"
150
- >
151
- </mui-smart-card>
152
- </mui-v-stack>
153
- <mui-code slot="footer">
154
- /* Max-Height: 126px */<br>
155
- <br>
156
- &lt;mui-smart-card<br>
157
- &nbsp;&nbsp;logo="./images/guru/guides.svg"<br>
158
- &nbsp;&nbsp;logo-height="80"<br>
159
- &nbsp;&nbsp;...<br>
160
- &gt;&lt;/mui-smart-card&gt;
161
- </mui-code>
162
- </story-card>
163
-
164
- <story-card title="Frozen">
165
- <mui-v-stack alignX="center" slot="body" style="padding-top: var(--space-400); padding-bottom: var(--space-400);">
166
- <mui-smart-card
167
- partner="${r}"
168
- number="1234"
169
- type="Debit"
170
- logo="${$}"
171
- logo-height="100"
172
- state="frozen"
173
- >
174
- </mui-smart-card>
175
- </mui-v-stack>
176
- <mui-code slot="footer">
177
- &lt;mui-smart-card<br>
178
- &nbsp;&nbsp;state="frozen"<br>
179
- &nbsp;&nbsp;...<br>
180
- &gt;<br>
181
- &lt;/mui-smart-card&gt;
182
- </mui-code>
183
- </story-card>
184
-
185
-
186
- <story-card title="Background-Image" description="Add a unique background image or an alternative to logo placement">
187
- <mui-v-stack alignX="center" slot="body" style="padding-top: var(--space-400); padding-bottom: var(--space-400);">
188
- <mui-smart-card
189
- variant="plain"
190
- partner="${r}"
191
- type="Debit"
192
- number="1234"
193
- bg-image="${l}"
194
- >
195
- </mui-smart-card>
196
- <mui-smart-card
197
- variant="animated"
198
- partner="${r}"
199
- type="Debit"
200
- number="1234"
201
- bg-image="${l}"
202
- >
203
- </mui-smart-card>
204
- </mui-v-stack>
205
- <mui-code slot="footer">
206
- /* Plain */<br>
207
- /* ======================== */<br>
208
- <br>
209
- &lt;mui-smart-card<br>
210
- &nbsp;&nbsp;variant="plain"<br>
211
- &nbsp;&nbsp;bg-image="./images/card/image-395.png"<br>
212
- &nbsp;&nbsp;...<br>
213
- &gt;<br>
214
- &lt;/mui-smart-card&gt;
215
- <br>
216
- <br>
217
- <br>
218
- /* Animated */<br>
219
- /* ======================== */<br>
220
- <br>
221
- &lt;mui-smart-card<br>
222
- &nbsp;&nbsp;variant="animated"<br>
223
- &nbsp;&nbsp;bg-image="./images/card/image-395.png"<br>
224
- &nbsp;&nbsp;...<br>
225
- &gt;<br>
226
- &lt;/mui-smart-card&gt;
227
- </mui-code>
228
- </story-card>
229
-
230
- <story-card title="Background-Color">
231
- <mui-v-stack alignX="center" slot="body" style="padding-top: var(--space-400); padding-bottom: var(--space-400);">
232
- <mui-smart-card
233
- variant="plain"
234
- partner="${r}"
235
- type="Debit"
236
- number="1234"
237
- logo="${e}"
238
- logo-height="80"
239
- bg-color="#a4fc67"
240
- >
241
- </mui-smart-card>
242
- <mui-smart-card
243
- variant="animated"
244
- partner="${r}"
245
- type="Debit"
246
- number="1234"
247
- logo="${e}"
248
- logo-height="80"
249
- bg-color="#a4fc67"
250
- >
251
- </mui-smart-card>
252
- </mui-v-stack>
253
- <mui-code slot="footer">
254
- /* Plain */<br>
255
- /* ======================== */<br>
256
- <br>
257
- &lt;mui-smart-card<br>
258
- &nbsp;&nbsp;variant="plain"<br>
259
- &nbsp;&nbsp;bg-color="#a4fc67"<br>
260
- &nbsp;&nbsp;...<br>
261
- &gt;<br>
262
- &lt;/mui-smart-card&gt;
263
- <br>
264
- <br>
265
- <br>
266
- /* Animated */<br>
267
- /* ======================== */<br>
268
- <br>
269
- &lt;mui-smart-card<br>
270
- &nbsp;&nbsp;variant="animated"<br>
271
- &nbsp;&nbsp;bg-color="#a4fc67"<br>
272
- &nbsp;&nbsp;...<br>
273
- &gt;<br>
274
- &lt;/mui-smart-card&gt;
275
- </mui-code>
276
- </story-card>
277
-
278
- <story-card title="Payment Networks" description="Use the partner prop to slot in other payment networks">
279
- <mui-v-stack alignX="center" slot="body" style="padding-top: var(--space-400); padding-bottom: var(--space-400);">
280
- <mui-smart-card
281
- variant="plain"
282
- type="Debit"
283
- number="1234"
284
- logo="${e}"
285
- logo-height="80"
286
- bg-color="#a4fc67"
287
- partner="${k}"
288
- >
289
- </mui-smart-card>
290
- </mui-v-stack>
291
- <mui-code slot="footer">
292
- &lt;mui-smart-card<br>
293
- &nbsp;&nbsp;partner="./images/networks/mastercard.svg"<br>
294
- &nbsp;&nbsp;...<br>
295
- &gt;<br>
296
- &lt;/mui-smart-card&gt;
297
- <br>
298
- </mui-code>
299
-
300
- </story-card>
301
-
302
-
303
- <story-card title="Reward Cards" description="Utilising the provided props to create bespoke digital cards.">
304
- <mui-v-stack alignX="center" slot="body" style="padding-top: var(--space-400); padding-bottom: var(--space-400);">
305
- <mui-smart-card
306
- inverted
307
- variant="animated"
308
- partner="${a}"
309
- type="Diamond"
310
- number="1234"
311
- bg-image="${b}"
312
- >
313
- </mui-smart-card>
314
- <mui-smart-card
315
- variant="animated"
316
- partner="${a}"
317
- type="Premier"
318
- number="1234"
319
- bg-image="${d}"
320
- >
321
- </mui-smart-card>
322
- <mui-smart-card
323
- variant="animated"
324
- partner="${n}"
325
- type="Sapphire"
326
- number="1234"
327
- bg-image="${c}"
328
- >
329
- </mui-smart-card>
330
- <mui-smart-card
331
- variant="animated"
332
- partner="${s}"
333
- type="Crystal"
334
- number="1234"
335
- bg-image="${m}"
336
- >
337
- </mui-smart-card>
338
- <mui-smart-card
339
- inverted
340
- variant="plain"
341
- partner="${a}"
342
- type="Diamond"
343
- number="1234"
344
- bg-image="${b}"
345
- >
346
- </mui-smart-card>
347
- <mui-smart-card
348
- variant="plain"
349
- partner="${a}"
350
- type="Premier"
351
- number="1234"
352
- bg-image="${d}"
353
- >
354
- </mui-smart-card>
355
- <mui-smart-card
356
- variant="plain"
357
- partner="${n}"
358
- type="Sapphire"
359
- number="1234"
360
- bg-image="${c}"
361
- >
362
- </mui-smart-card>
363
- <mui-smart-card
364
- variant="plain"
365
- partner="${s}"
366
- type="Crystal"
367
- number="1234"
368
- bg-image="${m}"
369
- >
370
- </mui-smart-card>
371
- </mui-v-stack>
372
- <mui-code slot="footer">
373
- /* Diamond */<br>
374
- /* ======================== */<br>
375
- <br>
376
- &lt;mui-smart-card<br>
377
- &nbsp;&nbsp;inverted<br>
378
- &nbsp;&nbsp;type="Diamond"<br>
379
- &nbsp;&nbsp;partner="${a}"<br>
380
- &nbsp;&nbsp;bg-image="./images/jal/diamond.png"<br>
381
- &nbsp;&nbsp;...<br>
382
- &gt;
383
- <br>
384
- &lt;/mui-smart-card&gt;
385
- <br>
386
- <br>
387
- <br>
388
- /* Premier */<br>
389
- /* ======================== */<br>
390
- <br>
391
- &lt;mui-smart-card<br>
392
- &nbsp;&nbsp;type="Premier"<br>
393
- &nbsp;&nbsp;partner="${a}"<br>
394
- &nbsp;&nbsp;bg-image="./images/jal/premier.png"<br>
395
- &nbsp;&nbsp;...<br>
396
- &gt;<br>
397
- &lt;/mui-smart-card&gt;
398
- <br>
399
- <br>
400
- <br>
401
- /* Sapphire */<br>
402
- /* ======================== */<br>
403
- <br>
404
- &lt;mui-smart-card<br>
405
- &nbsp;&nbsp;type="Sapphire"<br>
406
- &nbsp;&nbsp;partner="${n}"<br>
407
- &nbsp;&nbsp;bg-image="./images/jal/sapphire.png"<br>
408
- &nbsp;&nbsp;...<br>
409
- &gt;
410
- <br>
411
- &lt;/mui-smart-card&gt;
412
- <br>
413
- <br>
414
- <br>
415
- /* Crystal */<br>
416
- /* ======================== */<br>
417
- <br>
418
- &lt;mui-smart-card<br>
419
- &nbsp;&nbsp;type="Crystal"<br>
420
- &nbsp;&nbsp;partner="${s}"<br>
421
- &nbsp;&nbsp;bg-image="./images/jal/crystal.png"<br>
422
- &nbsp;&nbsp;...<br>
423
- &gt;<br>
424
- &lt;/mui-smart-card&gt;
425
- </mui-code>
426
- </story-card>
427
-
428
- </mui-v-stack>
429
-
430
- </story-template>
431
- `}}customElements.define("story-smart-card",w);
@@ -1,56 +0,0 @@
1
- class i extends HTMLElement{constructor(){super();const r=this.attachShadow({mode:"open"}),s=":host { display: block; }",t=`
2
- <mui-card>
3
- <mui-card-body>.</mui-card-body>
4
- </mui-card>
5
- `;r.innerHTML=`
6
- <style>${s}</style>
7
-
8
- <story-template
9
- title="Grid"
10
- description="Layout component to enable grid layouts"
11
- github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-grid/index.ts"
12
- >
13
-
14
- <mui-v-stack space="var(--space-700)">
15
-
16
- <story-card title="Default">
17
-
18
- <mui-grid slot="body" space="var(--space-200)">
19
- ${t}
20
- ${t}
21
- </mui-grid>
22
-
23
- <mui-code slot="footer">
24
- &lt;mui-grid col="1fr 1fr" space="var(--space-200)"&gt;
25
- <br />
26
- &nbsp;&nbsp;&lt;mui-card&gt;...&lt;/mui-card&gt;
27
- <br />
28
- &nbsp;&nbsp;&lt;mui-card&gt;...&lt;/mui-card&gt;
29
- <br />
30
- &lt;/mui-grid&gt;
31
- </mui-code>
32
- </story-card>
33
-
34
- <story-card title="Three Column">
35
- <mui-grid col="1fr 1fr 1fr" slot="body" space="var(--space-200)">
36
- ${t}
37
- ${t}
38
- ${t}
39
- </mui-grid>
40
- <mui-code slot="footer">
41
- &lt;mui-grid col="1fr 1fr 1fr" space="var(--space-200)"&gt;
42
- <br />
43
- &nbsp;&nbsp;&lt;mui-card&gt;...&lt;/mui-card&gt;
44
- <br />
45
- &nbsp;&nbsp;&lt;mui-card&gt;...&lt;/mui-card&gt;
46
- <br />
47
- &nbsp;&nbsp;&lt;mui-card&gt;...&lt;/mui-card&gt;
48
- <br />
49
- &lt;/mui-grid&gt;
50
- </mui-code>
51
- </story-card>
52
-
53
- </mui-v-stack>
54
-
55
- </story-template>
56
- `}}customElements.define("story-grid",i);