@muibook/components 1.0.0

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

@@ -0,0 +1,514 @@
+import{H as v}from"./index-BrZBJGo2.js";const f="/hero-outcomes.png";class $ extends HTMLElement{constructor(){super();const l=this.attachShadow({mode:"open"}),c=`
+      :host { display: block; }
+
+      /* Customised Carousel */ 
+      .grid {
+        display: grid;
+        grid-template-columns: 1fr;
+      }
+
+      .hero {
+        display: flex;
+        background: var(--surface-recessed-100);
+        padding: var(--space-400);
+        padding-bottom: var(--space-000);
+      }
+      .content {
+        padding: var(--space-500);
+        padding-bottom: var(--space-400);
+        margin-bottom: var(--carousel-tab-offset);
+      }
+
+      @media (min-width: 600px) {
+        .content {
+          padding: var(--space-600);
+        }
+      }
+
+      @media (min-width: 1100px) {
+        .grid  {
+          align-content: end;
+          grid-template-columns: 300px 1fr;
+          gap: var(--space-600);
+          padding: var(--space-400);
+          padding-bottom: var(--space-000);
+        }
+        .hero {
+          background: var(--black-opacity-0);
+          padding: var(--space-000);
+        }
+        .content {
+          padding: var(--space-000);
+          max-width: 45ch;
+        }
+      }
+      @media (min-width: 1300px) {
+        .grid  {
+          justify-self: center;
+          grid-template-columns: 400px 1fr;
+          gap: var(--space-800);
+          padding: var(--space-600);
+          padding-bottom: var(--space-000);
+        }
+        .hero {
+          background: var(--black-opacity-0);
+        }
+        .content {
+          padding: var(--space-000);
+        }
+      }
+      @media (min-width: 1800px) {
+        .grid  {
+          grid-template-columns: 500px 1fr;
+          padding: var(--space-800);
+          padding-bottom: var(--space-000);
+        }
+      }
+
+    `,e=[{name:"slot",required:!0,type:"HTML attribute",options:"mui-tab-bar, mui-carousel-panel",default:"",description:"Assigns the element to a named slot in the Carousel Controller. Required for light DOM content like tabs and panels."}],d=e.map(s=>`
+      <story-type-row
+        ${s.required?"required":""}
+        name="${s.name}"
+        type="${s.type}" 
+        options="${s.options||""}"
+        default="${s.default||""}"
+        description="${s.description}">
+      </story-type-row>
+    `).join(""),u=e.map((s,t)=>{const n=t===e.length-1?"last-child":"";return`
+      <mui-accordion-block 
+        size="medium" 
+        heading=${s.name.charAt(0).toUpperCase()+s.name.slice(1)} 
+        ${n}>
+        <story-type-slat
+          slot="detail"
+          ${s.required?"required":""}
+          name="${s.name}"
+          type="${s.type}" 
+          options="${s.options||""}"
+          default="${s.default||""}"
+          description="${s.description}">
+        </story-type-slat>
+      </mui-accordion-block>
+    `}).join(""),b=[{name:"slot",required:!0,type:"HTML attribute",options:"slot=&#8220;controls&#8221;",default:"",description:"Used when placing mui-tab-bar inside carousel-controller. Required to inject this element into the controls slot."},{name:"controlsPosition",type:"string",options:"top, right, bottom, left, top-right, top-left, bottom-right, bottom-left",default:"bottom",description:"Define the position of the controls for the Carousel"}],m=b.map(s=>`
+          <story-type-row
+            ${s.required?"required":""}
+            name="${s.name}"
+            type="${s.type}" 
+            options="${s.options||""}"
+            default="${s.default||""}"
+            description="${s.description}">
+          </story-type-row>
+        `).join(""),g=b.map((s,t)=>{const n=t===b.length-1?"last-child":"";return`
+          <mui-accordion-block 
+            size="medium" 
+            heading=${s.name.charAt(0).toUpperCase()+s.name.slice(1)} 
+            ${n}>
+            <story-type-slat
+              slot="detail"
+              ${s.required?"required":""}
+              name="${s.name}"
+              type="${s.type}" 
+              options="${s.options||""}"
+              default="${s.default||""}"
+              description="${s.description}">
+            </story-type-slat>
+          </mui-accordion-block>
+        `}).join(""),o=[{name:"slot",required:!0,type:"HTML attribute",options:"slot=&#8220;item&#8221;",default:"",description:"Places the individual panel in the correct slot within the Carousel"},{name:"item",type:"string",options:"any",default:"",description:"Maps to the corresponding id of a tab-item in the tab bar. Controls which panel is shown based on the selected tab."}],h=o.map(s=>`
+            <story-type-row
+              ${s.required?"required":""}
+              name="${s.name}"
+              type="${s.type}" 
+              options="${s.options||""}"
+              default="${s.default||""}"
+              description="${s.description}">
+            </story-type-row>
+          `).join(""),y=o.map((s,t)=>{const n=t===o.length-1?"last-child":"";return`
+          <mui-accordion-block 
+            size="medium" 
+            heading=${s.name.charAt(0).toUpperCase()+s.name.slice(1)} 
+            ${n}>
+            <story-type-slat
+              slot="detail"
+              ${s.required?"required":""}
+              name="${s.name}"
+              type="${s.type}" 
+              options="${s.options||""}"
+              default="${s.default||""}"
+              description="${s.description}">
+            </story-type-slat>
+          </mui-accordion-block>
+        `}).join(""),a=[{id:"one",label:"1",active:!0,heading:"Guides",description:"A Figma plugin that delivers UX guidelines and customisable content, seamlessly integrating design system guides into Figma workflows.",image:`${v}`},{id:"two",label:"2",heading:"Outcomes",description:"Track objectives and key results in an outcome-based roadmap. Organise tasks into Upcoming, Doing, and Finished columns to drive meaningful progress.",image:`${f}`}],r=a.map(({id:s,label:t,icon:n,active:i})=>`<mui-tab-item id="${s}" icon="${n}"${i?" active":""}>${t}</mui-tab-item>`).join(""),p=a.map(({id:s,heading:t,description:n,image:i})=>`
+        <mui-carousel-panel slot="item" item="${s}">
+          <div class="grid">
+            <div class="hero">
+              <img style="width: 100%; height: auto;" width="400" height="376" src="${i}" alt="${t}" />
+            </div>
+            <mui-v-stack class="content">
+              <mui-heading size="2" level="3">${t}</mui-heading>
+              <mui-body>${n}</mui-body>
+            </mui-v-stack>
+          </div>
+        </mui-carousel-panel>
+        `).join("");l.innerHTML=`
+      <style>${c}</style>
+
+      <story-template
+        title="Carousel"
+        description="A carousel component with tab-based navigation, enabling users to switch between views or content sections with ease."
+        github="https://github.com/michaeltrilford/muibook/tree/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-carousel"
+        figma=""
+        accessibility="
+          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.
+        "
+
+      >
+
+      <mui-v-stack space="var(--space-700)">
+
+        <spec-card title="Props: Carousel Controller" description="The carousel-controller handles layout and transitions. Slotted children like tab-bar and carousel-panel must include the correct slot attributes to integrate properly.">
+          <mui-responsive breakpoint="767" slot="body">
+            <story-type-table slot="showAbove">
+              ${d}
+            </story-type-table>
+            <mui-accordion-group exclusive slot="showBelow">
+              ${u}
+            </mui-accordion-group>
+          </mui-responsive>
+        </spec-card>
+
+        <spec-card title="Props: Tab Bar" description="When used inside carousel-controller, mui-tab-bar can accept additional props to control placement and integration within the carousel layout.">
+          <mui-responsive breakpoint="767" slot="body">
+            <story-type-table slot="showAbove">
+              ${m}
+            </story-type-table>
+            <mui-accordion-group exclusive slot="showBelow">
+              ${g}
+            </mui-accordion-group>
+          </mui-responsive>
+        </spec-card>
+
+        <spec-card title="Props: Carousel Panel " description="Used to display the content for each carousel item. This component is typically slotted into a mui-carousel-controller and responds to tab selection based on the item mapping.">
+          <mui-responsive breakpoint="767" slot="body">
+            <story-type-table slot="showAbove">
+              ${h}
+            </story-type-table>
+            <mui-accordion-group exclusive slot="showBelow">
+              ${y}
+            </mui-accordion-group>
+          </mui-responsive>
+        </spec-card>
+
+        <story-card 
+          title="Default"
+          description="A flexible, composable carousel that gives you full control over the content and internal layout."
+          github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/muibook/story/components/mui-carousel/index.js"
+          usage="
+            Carousel controls are set to bottom-center by default.;
+            Internal padding is required.;
+            The var(--carousel-tab-offset) is available to help with control spacing - though, not required.;
+            You will need knowledge of CSS to add your specific custom content.
+          "  
+        >
+          <mui-carousel-controller slot="body">
+            <mui-tab-bar slot="controls">
+              <mui-tab-item active id="one">1</mui-tab-item>
+              <mui-tab-item id="two">2</mui-tab-item>
+            </mui-tab-bar>
+            <mui-carousel-panel slot="item" item="one" >
+              <mui-grid col="1fr" style="padding-bottom: var(--carousel-tab-offset);">
+                <mui-v-stack style="padding: var(--space-500) var(--space-600);">
+                  <mui-heading level="3" size="2">Item 1</mui-heading>
+                  <mui-body>The default carousel is a flexible canvas. Your content defines the layout and spacing.</mui-body>
+                  <mui-code>
+                  &lt;mui-grid col="1fr" style="padding-bottom: var(--carousel-tab-offset);"&gt;
+                  <br />
+                  &nbsp;&nbsp;&lt;mui-v-stack style="padding: var(--space-600);"&gt;
+                  <br />
+                  &nbsp;&nbsp;&nbsp;&nbsp;...
+                  <br />
+                  &nbsp;&nbsp;&lt;/mui-v-stack
+                  <br />
+                  &lt;/mui-grid&gt;
+                  </mui-code>
+                </mui-v-stack>
+              </mui-grid>  
+            </mui-carousel-panel>
+            <mui-carousel-panel slot="item" item="two" >
+              <mui-grid col="1fr" style="padding-bottom: var(--carousel-tab-offset);">
+                <mui-v-stack style="padding: var(--space-500) var(--space-600);">
+                  <mui-heading level="3" size="2">Item 2</mui-heading>
+                  <mui-body>The default carousel is a flexible canvas. Your content defines the layout and spacing.</mui-body>
+                  <mui-code>
+                  &lt;mui-grid col="1fr" style="padding-bottom: var(--carousel-tab-offset);"&gt;
+                  <br />
+                  &nbsp;&nbsp;&lt;mui-v-stack style="padding: var(--space-600);"&gt;
+                  <br />
+                  &nbsp;&nbsp;&nbsp;&nbsp;...
+                  <br />
+                  &nbsp;&nbsp;&lt;/mui-v-stack
+                  <br />
+                  &lt;/mui-grid&gt;
+                  </mui-code>
+                </mui-v-stack>
+              </mui-grid>  
+            </mui-carousel-panel>
+          </mui-carousel-controller>
+
+          <mui-code slot="footer">
+            &lt;mui-carousel-controller&gt;<br />
+            &nbsp;&nbsp;&lt;mui-tab-bar slot="controls"&gt;<br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-tab-item active id="one"&gt;1&lt;/mui-tab-item&gt;
+            <br />
+            &nbsp;&nbsp;&nbsp;&nbsp;... Add other tabs ...
+            <br />
+            &nbsp;&nbsp;&lt;/mui-tab-bar&gt;
+            <br />
+            <br />
+            &nbsp;&nbsp;&lt;mui-carousel-panel slot="item" item="one"&gt;
+            <br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-grid col="1fr" style="padding-bottom: var(--carousel-tab-offset);"&gt;<br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-v-stack style="padding: var(--space-500) var(--space-600);"&gt;<br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-heading level="3" size="2"&gt;Item 1&lt;/mui-heading&gt;<br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-body&gt;Content...&lt;/mui-body&gt;<br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-v-stack&gt;<br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-grid&gt;
+            <br />
+            &nbsp;&nbsp;&lt;/mui-carousel-panel&gt;
+            <br />
+            <br />
+            &nbsp;&nbsp;... Add other panels ...
+            <br />
+            <br />
+            &lt;/mui-carousel-controller&gt;
+          </mui-code>
+        </story-card>
+
+        <story-card 
+          title="Custom Layout" 
+          description="Demonstrates how to add custom compositions and layouts within the carousel panels."
+          github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/muibook/story/components/mui-carousel/index.js"  
+        >
+          <mui-carousel-controller slot="body">
+            <mui-tab-bar slot="controls" controlsPosition="bottom-right">
+              ${r}
+            </mui-tab-bar>
+            ${p}
+          </mui-carousel-controller>
+          <mui-code slot="footer">
+            /* === Author Styles ================= */
+            <br />
+            <br />
+            .grid {<br />
+            &nbsp;&nbsp;display: grid;<br />
+            &nbsp;&nbsp;grid-template-columns: 1fr;<br />
+            }<br /><br />
+            .hero {<br />
+            &nbsp;&nbsp;display: flex;<br />
+            &nbsp;&nbsp;background: var(--black-opacity-40);<br />
+            &nbsp;&nbsp;padding: var(--space-400);<br />
+            &nbsp;&nbsp;padding-bottom: var(--space-000);<br />
+            }<br /><br />
+            .content {<br />
+            &nbsp;&nbsp;padding: var(--space-600);<br />
+            &nbsp;&nbsp;padding-bottom: var(--space-400);<br />
+            &nbsp;&nbsp;margin-bottom: var(--carousel-tab-offset);<br />
+            }<br /><br />
+            @media (min-width: 1100px) {<br />
+            &nbsp;&nbsp;.grid { ... }<br />
+            &nbsp;&nbsp;.hero { ... }<br />
+            &nbsp;&nbsp;.content { ... }<br />
+            }
+            <br />
+            <br />
+            <br />
+            
+            /* === Component Usage =============== */
+            <br />
+            <br />
+            &lt;mui-carousel-controller&gt;<br />
+            &nbsp;&nbsp;&lt;mui-tab-bar slot="controls" controlsPosition="bottom-right"&gt;<br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-tab-item active id="one"&gt;1&lt;/mui-tab-item&gt;
+            <br />
+            &nbsp;&nbsp;&nbsp;&nbsp;...
+            <br />
+            &nbsp;&nbsp;&lt;/mui-tab-bar&gt;
+            <br />
+            <br />
+            &nbsp;&nbsp;&lt;mui-carousel-panel slot="item" item="one"&gt;
+            <br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="grid"&gt;
+            <br />
+            <br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="hero"&gt;
+            <br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img
+            <br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style="width: 100%; height: auto;"
+            <br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width="400"
+            <br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height="376"
+            <br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;src="./images/guides.png"
+            <br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/&gt;
+            <br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+            <br />
+            <br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-v-stack class="content"&gt;<br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-heading level="3" size="2"&gt;Guides&lt;/mui-heading&gt;
+            <br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-body&gt;
+            <br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;A Figma plugin that delivers UX...
+            <br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-body&gt;
+            <br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-v-stack&gt;
+            <br />
+            <br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br />
+            &nbsp;&nbsp;&lt;/mui-carousel-panel&gt;<br />
+            <br />
+            &nbsp;&nbsp;...
+            <br />
+            <br />
+            &lt;/mui-carousel-controller&gt;
+          </mui-code>
+        </story-card>
+
+        <story-card 
+          title="Map Data" 
+          description="Map dynamic data to generate carousel tabs and panels."
+          github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/muibook/story/components/mui-carousel/index.js"  
+        >
+          <mui-carousel-controller slot="body">
+            <mui-tab-bar slot="controls" controlsPosition="bottom-right">
+              ${r}
+            </mui-tab-bar>
+            ${p}
+          </mui-carousel-controller>
+          <mui-code slot="footer">
+            /* === Carousel Data =================== */
+            <br />
+            <br />
+            const carouselData = [
+            <br />
+            &nbsp;&nbsp;{
+              <br />
+              &nbsp;&nbsp;&nbsp;&nbsp;id: 'one',
+              <br />
+              &nbsp;&nbsp;&nbsp;&nbsp;label: '1',
+              <br />
+              &nbsp;&nbsp;&nbsp;&nbsp;active: true
+              <br />
+              &nbsp;&nbsp;&nbsp;&nbsp;heading: 'Guides',
+              <br />
+              &nbsp;&nbsp;&nbsp;&nbsp;description: 'A Figma plugin that...',
+              <br />
+              &nbsp;&nbsp;&nbsp;&nbsp;image: './images/guru/hero-guides.png',
+              <br />
+            &nbsp;&nbsp;},
+            <br />
+            &nbsp;&nbsp;{
+              <br />
+              &nbsp;&nbsp;&nbsp;&nbsp;id: 'two',
+              <br />
+              &nbsp;&nbsp;&nbsp;&nbsp;label: '2',
+              <br />
+              &nbsp;&nbsp;&nbsp;&nbsp;heading: 'Outcomes',
+              <br />
+              &nbsp;&nbsp;&nbsp;&nbsp;description: 'Track objectives and key...',
+              <br />
+              &nbsp;&nbsp;&nbsp;&nbsp;image: './images/guru/hero-outcomes.png',
+              <br />
+            &nbsp;&nbsp;},
+            <br />
+            ];
+            <br />
+            <br />
+            /* === Carousel Tabs Items ============== */
+            <br />
+            <br />
+            const carouselTabItems = carouselData
+            <br />
+            &nbsp;&nbsp;.map(({ label, icon, active }) => {
+              <br />
+            &nbsp;&nbsp;const activeAttr = active ? ' active' : '';
+            <br />
+            &nbsp;&nbsp;return &#96;
+            <br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-tab-item 
+            <br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id="&#36;{id}" 
+            <br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;icon="&#36;{icon}" 
+            <br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#36;{activeAttr}
+            <br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&gt;
+            <br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#36;{label}
+            <br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-tab-item&gt;
+            <br />
+            &nbsp;&nbsp;&#96;;
+            <br />
+            })
+            <br />
+            .join('');
+            <br />
+            <br />
+            /* === Carousel Panels =============== */
+            <br />
+            <br />
+            const carouselItems = carouselData
+            <br />
+            &nbsp;&nbsp;.map(({ heading, description, image }) => {
+            <br />
+            &nbsp;&nbsp;return &#96;
+            <br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-carousel-panel 
+            <br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;slot="item" 
+            <br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;item="&#36;{id}" 
+            <br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&gt;
+            <br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
+            <br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-carousel-panel&gt;
+            <br />
+            &nbsp;&nbsp;&#96;;
+            <br />
+            })
+            <br />
+            .join('');
+            <br />
+            <br />
+            /* === Component Usage =============== */
+            <br />
+            <br />
+            &lt;mui-carousel-controller&gt;
+            <br />
+            &nbsp;&nbsp;&lt;mui-tab-bar slot="controls"&gt;
+            <br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&#36;{carouselTabItems}
+            <br />
+            &nbsp;&nbsp;&lt;/mui-tab-bar&gt;
+            <br />
+            &nbsp;&nbsp;&#36;{carouselItems}
+            <br />
+            &lt;/mui-carousel-controller&gt;
+          </mui-code>
+        </story-card>
+  
+      </mui-v-stack>
+
+      </story-template>
+    `}}customElements.define("story-carousel",$);

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

@@ -0,0 +1,130 @@
+import{V as n,M as p}from"./mui-D6S1tQ24.js";const t="/snowy-mint.png";class a extends HTMLElement{constructor(){super();const s=this.attachShadow({mode:"open"}),b=`
+      :host { 
+        display: block;
+      }
+    `;s.innerHTML=`
+      <style>${b}</style>
+
+      <story-template 
+        title="Wallet"
+        description=""
+      >
+
+      <mui-v-stack space="var(--space-700)">
+
+        <story-card title="Transactions">
+
+          <mui-v-stack alignX="stretch" slot="body" style="max-width: 365px; margin: 0 auto; padding-top: var(--space-700); padding-bottom: var(--space-700)">
+            <mui-smart-card
+              variant="animated"
+              partner="${n}"
+              type="Debit"
+              number="1234"
+              logo="${p}"
+              logo-height="100"
+              bg-image="${t}"
+            >
+            </mui-smart-card>
+
+            <mui-slat style="padding-left: var(--space-400); padding-right: var(--space-400);">
+              <mui-v-stack slot="start" space="0" slot="end">
+                <mui-body size="small" weight="bold">Espresso Bar</mui-body>
+                <mui-body size="x-small">Food & Drink</mui-body>
+              </mui-v-stack>
+              <mui-v-stack space="0" slot="end" alignX="end">
+                <mui-body size="x-small">Pending</mui-body>
+                <mui-body size="small">-$8.12</mui-body>
+              </mui-v-stack>
+            </mui-slat>
+
+            <mui-slat style="padding-left: var(--space-400); padding-right: var(--space-400);">
+              <mui-v-stack slot="start" space="0" slot="end">
+                <mui-body size="small" weight="bold">Apple App Store</mui-body>
+                <mui-body size="x-small">Entertainment</mui-body>
+              </mui-v-stack>
+              <mui-v-stack space="0" slot="end" alignX="end">
+                <mui-body size="x-small">Pending</mui-body>
+                <mui-body size="small">-$4.99</mui-body>
+              </mui-v-stack>
+            </mui-slat>
+
+            <mui-slat style="padding-left: var(--space-400); padding-right: var(--space-400);">
+              <mui-v-stack slot="start" space="0" slot="end">
+                <mui-body size="small" weight="bold">IGA South Yarra</mui-body>
+                <mui-body size="x-small">Groceries</mui-body>
+              </mui-v-stack>
+              <mui-v-stack space="0" slot="end" alignX="end">
+                <mui-body size="x-small">Pending</mui-body>
+                <mui-body size="small">-$26.89</mui-body>
+              </mui-v-stack>
+            </mui-slat>
+
+          </mui-v-stack>
+
+          <mui-code slot="footer">
+          &lt;mui-v-stack<br>
+          &nbsp;&nbsp;alignX="stretch"<br>
+          &nbsp;&nbsp;style="<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;max-width: 365px;<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;margin: 0 auto;<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;padding-top: var(--space-700);<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;padding-bottom: var(--space-700)<br>
+          &nbsp;&nbsp;"<br>
+          &gt;<br><br>
+
+          &nbsp;&nbsp;&lt;mui-smart-card<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;variant="virtual"<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;provider="visa"<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;type="Debit"<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;number="1234"<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;logo="./images/mui-card-black.svg"<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;logo-height="100"<br>
+          &nbsp;&nbsp;&gt;&lt;/mui-smart-card&gt;<br><br>
+
+          &nbsp;&nbsp;&lt;mui-slat<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;style="padding-left: var(--space-400);<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding-right: var(--space-400);"&gt;<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-v-stack slot="start" space="0"&gt;<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-body size="small" weight="bold"&gt;Espresso Bar&lt;/mui-body&gt;<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-body size="x-small"&gt;Food &amp; Drink&lt;/mui-body&gt;<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-v-stack&gt;<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-v-stack slot="end" space="0" alignX="end"&gt;<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-body size="x-small"&gt;Pending&lt;/mui-body&gt;<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-body size="small"&gt;-$8.12&lt;/mui-body&gt;<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-v-stack&gt;<br>
+          &nbsp;&nbsp;&lt;/mui-slat&gt;<br><br>
+
+          &nbsp;&nbsp;&lt;mui-slat<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;style="padding-left: var(--space-400);<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding-right: var(--space-400);"&gt;<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-v-stack slot="start" space="0"&gt;<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-body size="small" weight="bold"&gt;Apple App Store&lt;/mui-body&gt;<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-body size="x-small"&gt;Entertainment&lt;/mui-body&gt;<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-v-stack&gt;<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-v-stack slot="end" space="0" alignX="end"&gt;<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-body size="x-small"&gt;Pending&lt;/mui-body&gt;<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-body size="small"&gt;-$4.99&lt;/mui-body&gt;<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-v-stack&gt;<br>
+          &nbsp;&nbsp;&lt;/mui-slat&gt;<br><br>
+
+          &nbsp;&nbsp;&lt;mui-slat<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;style="padding-left: var(--space-400);<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding-right: var(--space-400);"&gt;<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-v-stack slot="start" space="0"&gt;<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-body size="small" weight="bold"&gt;IGA South Yarra&lt;/mui-body&gt;<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-body size="x-small"&gt;Groceries&lt;/mui-body&gt;<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-v-stack&gt;<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-v-stack slot="end" space="0" alignX="end"&gt;<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-body size="x-small"&gt;Pending&lt;/mui-body&gt;<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-body size="small"&gt;-$26.89&lt;/mui-body&gt;<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-v-stack&gt;<br>
+          &nbsp;&nbsp;&lt;/mui-slat&gt;<br><br>
+
+          &lt;/mui-v-stack&gt;
+          </mui-code>
+        </story-card>
+
+      </mui-v-stack>
+
+      </story-template>
+    `}}customElements.define("comp-wallet",a);