@muibook/components 1.0.0

package/dist/muibook/assets/index-D8hXO6aa.js

@@ -0,0 +1,131 @@
+class l extends HTMLElement{constructor(){super();const s=this.attachShadow({mode:"open"}),i=`
+      :host { display: block; }
+    `,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=>`
+          <story-type-row
+            ${e.required?"required":""}
+            name="${e.name}"
+            type="${e.type}" 
+            options="${e.options||""}"
+            default="${e.default||""}"
+            description="${e.description}">
+          </story-type-row>
+        `).join(""),a=t.map((e,r)=>{const n=r===t.length-1?"last-child":"";return`
+          <mui-accordion-block 
+            size="medium" 
+            heading=${e.name.charAt(0).toUpperCase()+e.name.slice(1)} 
+            ${n}>
+            <story-type-slat
+              slot="detail"
+              ${e.required?"required":""}
+              name="${e.name}"
+              type="${e.type}" 
+              options="${e.options||""}"
+              default="${e.default||""}"
+              description="${e.description}">
+            </story-type-slat>
+          </mui-accordion-block>
+        `}).join("");s.innerHTML=`
+      <style>${i}</style>
+
+      <story-template
+        title="Alerts"
+        description="Alerts are to surface meaningful system messages related to the users' current task or action."
+        figma="https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=3-4444&t=ZA9uH4LK37tSuk6r-1"
+        guides
+        github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-alert/index.ts"
+
+        accessibility="
+          ARIA-live is built in, using POLITE + ASSERTIVE for screen readers.; 
+          The role is set to ALERT for immediate screen reader feedback.
+        "
+      >
+
+        <mui-v-stack space="var(--space-700)">
+
+          <spec-card title="Props">
+            <mui-responsive breakpoint="768" slot="body">
+              <story-type-table slot="showAbove">
+                ${o}
+              </story-type-table>
+              <mui-accordion-group exclusive slot="showBelow">
+                ${a}
+              </mui-accordion-group>
+            </mui-responsive>
+          </spec-card>
+
+          <story-card 
+            title="Success" 
+            description="Indicates that an operation or action has been completed successfully." 
+            usage="Form submissions that have been processed without errors.;Successful data updates or saves.;Confirmation of completed tasks or actions."
+            accessibility="ARIA-live of POLITE is set on this variant."
+          >
+            <div slot="body">
+              <mui-alert variant="success">Your message has been sent successfully.</mui-alert>
+            </div>
+            <mui-code slot="footer">
+              &lt;mui-alert variant="success"&gt;
+              <br />
+              &nbsp;&nbsp;...
+              <br />
+              &lt;/mui-alert&gt;
+            </mui-code>
+          </story-card>
+
+          <story-card
+            title="Info"
+            description="Provides general information or updates that are helpful but not critical."
+            usage="Announcing new features or updates.; Providing contextual information or tips.; Informing users about non-urgent system statuses."
+            accessibility="ARIA-live of POLITE is set on this variant."
+          >
+            <div slot="body">
+              <mui-alert variant="info">Please read the comments carefully.</mui-alert>
+            </div>
+            <mui-code slot="footer">
+            &lt;mui-alert variant="info"&gt;
+            <br />
+            &nbsp;&nbsp;...
+            <br />
+            &lt;/mui-alert&gt;
+          </mui-code>
+          </story-card>
+
+          <story-card
+            title="Warning"
+            description="Alerts users to potential issues or situations that require caution."
+            usage="Notifying about unsaved changes.; Indicating deprecated features or upcoming changes.; Highlighting actions that may have unintended consequences."
+            accessibility="ARIA-live of ASSERTIVE is set on this variant."
+          >
+            <div slot="body">
+              <mui-alert variant="warning">There was a problem with your network connection. <mui-link href="#">Learn more</mui-link></mui-alert>
+            </div>
+            <mui-code slot="footer">
+            &lt;mui-alert variant="warning"&gt;
+            <br />
+            &nbsp;&nbsp;...
+            <br />
+            &lt;/mui-alert&gt;
+          </mui-code>
+          </story-card>
+
+          <story-card
+            title="Error"
+            description="Indicates that an error has occurred, requiring user attention or action."
+            usage="Form validation errors.; System failures or exceptions.; Failed operations or transactions."
+            accessibility="ARIA-live of ASSERTIVE is set on this variant."
+          >
+            <div slot="body">
+              <mui-alert variant="error">Please read the comments carefully. <mui-link href="#">Learn more</mui-link></mui-alert>
+            </div>
+            <mui-code slot="footer">
+            &lt;mui-alert variant="error"&gt;
+            <br />
+            &nbsp;&nbsp;...
+            <br />
+            &lt;/mui-alert&gt;
+          </mui-code>
+          </story-card>
+
+        </mui-v-stack>
+
+      </story-template>
+    `}}customElements.define("story-alert",l);

package/dist/muibook/assets/index-DBkw7VLa.js

@@ -0,0 +1,431 @@
+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=`
+      :host { display: block; }
+    `,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=>`
+          <story-type-row
+            ${t.required?"required":""}
+            name="${t.name}"
+            type="${t.type}" 
+            options="${t.options||""}"
+            default="${t.default||""}"
+            description="${t.description}">
+          </story-type-row>
+        `).join(""),v=i.map((t,h)=>{const f=h===i.length-1?"last-child":"";return`
+          <mui-accordion-block 
+            size="medium" 
+            heading=${t.name.charAt(0).toUpperCase()+t.name.slice(1)} 
+            ${f}>
+            <story-type-slat
+              slot="detail"
+              ${t.required?"required":""}
+              name="${t.name}"
+              type="${t.type}" 
+              options="${t.options||""}"
+              default="${t.default||""}"
+              description="${t.description}">
+            </story-type-slat>
+          </mui-accordion-block>
+        `}).join("");g.innerHTML=`
+      <style>${u}</style>
+
+      <story-template title="Smart Card" 
+        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."
+        figma="" 
+        github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-smart-card/index.ts"
+      >
+
+      <mui-v-stack space="var(--space-700)">
+
+
+        <spec-card title="Props">
+          <mui-responsive breakpoint="767" slot="body">
+            <story-type-table slot="showAbove">
+              ${y}
+            </story-type-table>
+            <mui-accordion-group exclusive slot="showBelow">
+              ${v}
+            </mui-accordion-group>
+          </mui-responsive>
+        </spec-card>
+
+        <story-card title="Plain">
+          <mui-v-stack alignX="center" slot="body" style="padding-top: var(--space-400); padding-bottom: var(--space-400);">
+          <mui-smart-card
+            type="Debit"
+            number="1234"
+            partner="${r}"
+            logo="${o}"
+            variant="plain"
+          >
+          </mui-smart-card>
+          </mui-v-stack>
+          <mui-code slot="footer">
+            &lt;mui-smart-card<br>
+            &nbsp;&nbsp;number="1234"<br>
+            &nbsp;&nbsp;type="Debit"<br>
+            &nbsp;&nbsp;logo="./images/card/image-220.png"<br>
+            &nbsp;&nbsp;partner="./images/networks/visa-black.svg"<br>
+            &nbsp;&nbsp;variant="plain"<br>
+            &gt;<br>
+            &lt;/mui-smart-card&gt;
+          </mui-code>
+        </story-card>
+
+        <story-card title="Plain / Inverted">
+          <mui-v-stack alignX="center" slot="body" style="padding-top: var(--space-400); padding-bottom: var(--space-400);">
+          <mui-smart-card
+            inverted
+            type="Debit"
+            number="1234"
+            partner="${C}"
+            logo="${o}"
+            variant="plain"
+          >
+          </mui-smart-card>
+          </mui-v-stack>
+          <mui-code slot="footer">
+            &lt;mui-smart-card<br>
+            &nbsp;&nbsp;inverted<br>
+            &nbsp;&nbsp;number="1234"<br>
+            &nbsp;&nbsp;type="Debit"<br>
+            &nbsp;&nbsp;logo="./images/card/image-220.png"<br>
+            &nbsp;&nbsp;partner="./images/card/visa-white.svg"<br>
+            &nbsp;&nbsp;variant="plain"<br>
+            &gt;<br>
+            &lt;/mui-smart-card&gt;
+          </mui-code>
+        </story-card>
+
+        <story-card title="Animated">
+          <mui-v-stack alignX="center" slot="body" style="padding-top: var(--space-400); padding-bottom: var(--space-400);">
+          <mui-smart-card
+            variant="animated"
+            number="1234"
+            type="Debit"
+            bg-image="${p}"
+            logo="${o}"
+            partner="${r}"
+          >
+          </mui-smart-card>
+          </mui-v-stack>
+          <mui-code slot="footer">
+            &lt;mui-smart-card<br>
+            &nbsp;&nbsp;number="1234"<br>
+            &nbsp;&nbsp;type="Debit"<br>
+            &nbsp;&nbsp;bg-image="./images/mesh/buttercup.png"<br>
+            &nbsp;&nbsp;logo="./images/card/image-220.png"<br>
+            &nbsp;&nbsp;partner="./images/networks/visa-black.svg"<br>
+            &nbsp;&nbsp;variant="animated"<br>
+            &gt;<br>
+            &lt;/mui-smart-card&gt;
+          </mui-code>
+        </story-card>
+
+        <story-card 
+          title="Logo" 
+          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." 
+          usage="
+            Import the logo using the logo property; 
+            Set the logo-height to an appropriate size no larger than 126px; 
+            If your SVG is at intended height, then logo-height isn't required; 
+            When using a 2x/3x PNGs and resize with logo-height
+          ">
+          <mui-v-stack alignX="center" slot="body" style="padding-top: var(--space-400); padding-bottom: var(--space-400);">
+            <mui-smart-card
+              variant="plain"
+              partner="${r}"
+              type="Debit"
+              number="1234"
+              logo="${e}"
+              logo-height="80"
+            >
+            </mui-smart-card>
+            <mui-smart-card
+              variant="animated"
+              partner="${r}"
+              type="Debit"
+              number="1234"
+              logo="${e}"
+              logo-height="80"
+              bg-image="${p}"
+            >
+            </mui-smart-card>
+          </mui-v-stack>
+            <mui-code slot="footer">
+              /* Max-Height: 126px */<br>
+              <br>
+              &lt;mui-smart-card<br>
+              &nbsp;&nbsp;logo="./images/guru/guides.svg"<br>
+              &nbsp;&nbsp;logo-height="80"<br>
+              &nbsp;&nbsp;...<br>
+              &gt;&lt;/mui-smart-card&gt;
+            </mui-code>
+        </story-card>
+
+        <story-card title="Frozen">
+          <mui-v-stack alignX="center" slot="body" style="padding-top: var(--space-400); padding-bottom: var(--space-400);">
+            <mui-smart-card
+              partner="${r}"
+              number="1234"
+              type="Debit"
+              logo="${$}"
+              logo-height="100"
+              state="frozen"
+            >
+            </mui-smart-card>
+          </mui-v-stack>
+          <mui-code slot="footer">
+            &lt;mui-smart-card<br>
+            &nbsp;&nbsp;state="frozen"<br>
+            &nbsp;&nbsp;...<br>
+            &gt;<br>
+            &lt;/mui-smart-card&gt;
+          </mui-code>
+        </story-card>
+
+
+        <story-card title="Background-Image" description="Add a unique background image or an alternative to logo placement">
+          <mui-v-stack alignX="center" slot="body" style="padding-top: var(--space-400); padding-bottom: var(--space-400);">
+            <mui-smart-card
+              variant="plain"
+              partner="${r}"
+              type="Debit"
+              number="1234"
+              bg-image="${l}"
+            >
+            </mui-smart-card>
+            <mui-smart-card
+              variant="animated"
+              partner="${r}"
+              type="Debit"
+              number="1234"
+              bg-image="${l}"
+            >
+            </mui-smart-card>
+          </mui-v-stack>
+          <mui-code slot="footer">
+            /* Plain */<br>
+            /* ======================== */<br>
+            <br>
+            &lt;mui-smart-card<br>
+            &nbsp;&nbsp;variant="plain"<br>
+            &nbsp;&nbsp;bg-image="./images/card/image-395.png"<br>
+            &nbsp;&nbsp;...<br>
+            &gt;<br>
+            &lt;/mui-smart-card&gt;
+            <br>
+            <br>
+            <br>
+            /* Animated */<br>
+            /* ======================== */<br>
+            <br>
+            &lt;mui-smart-card<br>
+            &nbsp;&nbsp;variant="animated"<br>
+            &nbsp;&nbsp;bg-image="./images/card/image-395.png"<br>
+            &nbsp;&nbsp;...<br>
+            &gt;<br>
+            &lt;/mui-smart-card&gt;
+          </mui-code>
+        </story-card>
+
+        <story-card title="Background-Color">
+          <mui-v-stack alignX="center" slot="body" style="padding-top: var(--space-400); padding-bottom: var(--space-400);">
+            <mui-smart-card
+              variant="plain"
+              partner="${r}"
+              type="Debit"
+              number="1234"
+              logo="${e}"
+              logo-height="80"
+              bg-color="#a4fc67"
+            >
+            </mui-smart-card>
+            <mui-smart-card
+              variant="animated"
+              partner="${r}"
+              type="Debit"
+              number="1234"
+              logo="${e}"
+              logo-height="80"
+              bg-color="#a4fc67"
+            >
+            </mui-smart-card>
+          </mui-v-stack>
+          <mui-code slot="footer">
+            /* Plain */<br>
+            /* ======================== */<br>
+            <br>
+            &lt;mui-smart-card<br>
+            &nbsp;&nbsp;variant="plain"<br>
+            &nbsp;&nbsp;bg-color="#a4fc67"<br>
+            &nbsp;&nbsp;...<br>
+            &gt;<br>
+            &lt;/mui-smart-card&gt;
+            <br>
+            <br>
+            <br>
+            /* Animated */<br>
+            /* ======================== */<br>
+            <br>
+            &lt;mui-smart-card<br>
+            &nbsp;&nbsp;variant="animated"<br>
+            &nbsp;&nbsp;bg-color="#a4fc67"<br>
+            &nbsp;&nbsp;...<br>
+            &gt;<br>
+            &lt;/mui-smart-card&gt;
+          </mui-code>
+        </story-card>
+
+        <story-card title="Payment Networks" description="Use the partner prop to slot in other payment networks">
+          <mui-v-stack alignX="center" slot="body" style="padding-top: var(--space-400); padding-bottom: var(--space-400);">
+            <mui-smart-card
+              variant="plain"
+              type="Debit"
+              number="1234"
+              logo="${e}"
+              logo-height="80"
+              bg-color="#a4fc67"
+              partner="${k}"
+            >
+            </mui-smart-card>
+          </mui-v-stack>
+          <mui-code slot="footer">
+            &lt;mui-smart-card<br>
+            &nbsp;&nbsp;partner="./images/networks/mastercard.svg"<br>
+            &nbsp;&nbsp;...<br>
+            &gt;<br>
+            &lt;/mui-smart-card&gt;
+            <br>
+          </mui-code>
+
+        </story-card>
+
+
+        <story-card title="Reward Cards" description="Utilising the provided props to create bespoke digital cards.">
+          <mui-v-stack alignX="center" slot="body" style="padding-top: var(--space-400); padding-bottom: var(--space-400);">
+          <mui-smart-card
+            inverted
+            variant="animated"
+            partner="${a}"
+            type="Diamond"
+            number="1234"
+            bg-image="${b}"
+          >
+          </mui-smart-card>
+          <mui-smart-card
+            variant="animated"
+            partner="${a}"
+            type="Premier"
+            number="1234"
+            bg-image="${d}"
+          >
+          </mui-smart-card>
+          <mui-smart-card
+            variant="animated"
+            partner="${n}"
+            type="Sapphire"
+            number="1234"
+            bg-image="${c}"
+          >
+          </mui-smart-card>
+          <mui-smart-card
+            variant="animated"
+            partner="${s}"
+            type="Crystal"
+            number="1234"
+            bg-image="${m}"
+          >
+          </mui-smart-card>
+          <mui-smart-card
+            inverted
+            variant="plain"
+            partner="${a}"
+            type="Diamond"
+            number="1234"
+            bg-image="${b}"
+          >
+          </mui-smart-card>
+          <mui-smart-card
+            variant="plain"
+            partner="${a}"
+            type="Premier"
+            number="1234"
+            bg-image="${d}"
+          >
+          </mui-smart-card>
+          <mui-smart-card
+            variant="plain"
+            partner="${n}"
+            type="Sapphire"
+            number="1234"
+            bg-image="${c}"
+          >
+          </mui-smart-card>
+          <mui-smart-card
+            variant="plain"
+            partner="${s}"
+            type="Crystal"
+            number="1234"
+            bg-image="${m}"
+          >
+          </mui-smart-card>
+          </mui-v-stack>
+          <mui-code slot="footer">
+            /* Diamond */<br>
+            /* ======================== */<br>
+            <br>
+            &lt;mui-smart-card<br>
+            &nbsp;&nbsp;inverted<br>
+            &nbsp;&nbsp;type="Diamond"<br>
+            &nbsp;&nbsp;partner="${a}"<br>
+            &nbsp;&nbsp;bg-image="./images/jal/diamond.png"<br>
+            &nbsp;&nbsp;...<br>
+            &gt;
+            <br>
+            &lt;/mui-smart-card&gt;
+            <br>
+            <br>
+            <br>
+            /* Premier */<br>
+            /* ======================== */<br>
+            <br>
+            &lt;mui-smart-card<br>
+            &nbsp;&nbsp;type="Premier"<br>
+            &nbsp;&nbsp;partner="${a}"<br>
+            &nbsp;&nbsp;bg-image="./images/jal/premier.png"<br>
+            &nbsp;&nbsp;...<br>
+            &gt;<br>
+            &lt;/mui-smart-card&gt;
+            <br>
+            <br>
+            <br>
+            /* Sapphire */<br>
+            /* ======================== */<br>
+            <br>
+            &lt;mui-smart-card<br>
+            &nbsp;&nbsp;type="Sapphire"<br>
+            &nbsp;&nbsp;partner="${n}"<br>
+            &nbsp;&nbsp;bg-image="./images/jal/sapphire.png"<br>
+            &nbsp;&nbsp;...<br>
+            &gt;
+            <br>
+            &lt;/mui-smart-card&gt;
+            <br>
+            <br>
+            <br>
+            /* Crystal */<br>
+            /* ======================== */<br>
+            <br>
+            &lt;mui-smart-card<br>
+            &nbsp;&nbsp;type="Crystal"<br>
+            &nbsp;&nbsp;partner="${s}"<br>
+            &nbsp;&nbsp;bg-image="./images/jal/crystal.png"<br>
+            &nbsp;&nbsp;...<br>
+            &gt;<br>
+            &lt;/mui-smart-card&gt;
+          </mui-code>
+        </story-card>
+
+      </mui-v-stack>
+
+      </story-template>
+    `}}customElements.define("story-smart-card",w);

package/dist/muibook/assets/index-DI0vNTNv.js

@@ -0,0 +1,56 @@
+class i extends HTMLElement{constructor(){super();const r=this.attachShadow({mode:"open"}),s=":host { display: block; }",t=`
+      <mui-card>
+        <mui-card-body>.</mui-card-body>
+      </mui-card>
+    `;r.innerHTML=`
+      <style>${s}</style>
+
+      <story-template 
+        title="Grid"
+        description="Layout component to enable grid layouts"
+        github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-grid/index.ts"
+      >
+
+      <mui-v-stack space="var(--space-700)">
+      
+        <story-card title="Default">
+        
+          <mui-grid slot="body" space="var(--space-200)">
+            ${t}
+            ${t}
+          </mui-grid>
+          
+          <mui-code slot="footer">
+            &lt;mui-grid col="1fr 1fr" space="var(--space-200)"&gt;
+            <br />
+            &nbsp;&nbsp;&lt;mui-card&gt;...&lt;/mui-card&gt;
+            <br />
+            &nbsp;&nbsp;&lt;mui-card&gt;...&lt;/mui-card&gt;
+            <br />
+            &lt;/mui-grid&gt;
+          </mui-code>
+        </story-card>
+
+        <story-card title="Three Column">
+          <mui-grid col="1fr 1fr 1fr" slot="body" space="var(--space-200)">
+            ${t}
+            ${t}
+            ${t}
+          </mui-grid>
+          <mui-code slot="footer">
+            &lt;mui-grid col="1fr 1fr 1fr" space="var(--space-200)"&gt;
+            <br />
+            &nbsp;&nbsp;&lt;mui-card&gt;...&lt;/mui-card&gt;
+            <br />
+            &nbsp;&nbsp;&lt;mui-card&gt;...&lt;/mui-card&gt;
+            <br />
+            &nbsp;&nbsp;&lt;mui-card&gt;...&lt;/mui-card&gt;
+            <br />
+            &lt;/mui-grid&gt;
+          </mui-code>
+        </story-card>
+
+      </mui-v-stack>
+
+      </story-template>
+    `}}customElements.define("story-grid",i);