@muibook/components 1.0.1 → 1.0.3

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

@@ -1,270 +0,0 @@
-class l extends HTMLElement{constructor(){super();const s=this.attachShadow({mode:"open"}),i=`
-      :host { display: block; }
-
-    `,t=[{name:"heading",required:!0,type:"string",options:"{text}",default:"Heading...",description:"Main header for message"},{name:"slot",required:!0,type:"HTML attribute",options:"mui-body, mui-list, elements",default:"Body content...",description:"Slot in body, list or custom elements"},{name:"icon",type:"string",options:"mui-icon-[name]",default:"message",description:"Choose an alternative mui-icon"},{name:"variant",type:"string",options:"neutral, positive, info, warning, attention",default:"neutral",description:"Describe the intent or mood of a message"},{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."}],n=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(""),o=t.map((e,a)=>{const r=a===t.length-1?"last-child":"";return`
-          <mui-accordion-block 
-            size="medium" 
-            heading=${e.name.charAt(0).toUpperCase()+e.name.slice(1)} 
-            ${r}>
-            <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="Messages"
-        description="The message component provides persistent, non-dismissible notifications that remain visible until the system determines they should be suspended."
-        figma="https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=9-1053&t=ZA9uH4LK37tSuk6r-1"
-        guides
-        github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-message/index.ts"
-        accessibility="
-            ARIA-live is built in, using POLITE + ASSERTIVE for screen readers.;
-            Neutral, Postive, Info support the role of STATUS for screen reader feedback.;
-            Warning, Attention support the role of ALERT for screen reader feedback.
-          "
-
-      >
-
-      <mui-v-stack space="var(--space-700)">
-      
-        <spec-card title="Props">
-          <mui-responsive breakpoint="767" slot="body">
-            <story-type-table slot="showAbove">
-              ${n}
-            </story-type-table>
-            <mui-accordion-group exclusive slot="showBelow">
-              ${o}
-            </mui-accordion-group>
-          </mui-responsive>
-        </spec-card>
-
-        <story-card
-          title="Default" 
-          description="The default uses the neutral state offers a subtle, neutral tone, ideal for conveying general information without drawing undue attention."
-          accessibility="ARIA-live of POLITE is set on this variant.; Role of STATUS is set on this variant."
-        >
-          <mui-message slot="body"></mui-message>
-          <mui-code slot="footer">
-            &lt;mui-message&gt;...&lt;/mui-message&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card 
-          title="Slot: Body text" 
-          description="Content is customised via the Slot, which accepts the Body component or any valid child elements."
-        >
-          <mui-message heading="Message heading" slot="body">
-            <mui-body>This is an informational message about updates.</mui-body>
-          </mui-message>
-          <mui-code slot="footer">
-            &lt;mui-message heading="Message heading"&gt;
-            <br />
-            &nbsp;&nbsp;&lt;mui-body&gt;...&lt;/mui-body&gt;
-            <br />
-            &lt;/mui-message&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card 
-          title="Slot: List" 
-          description="Content is customised via the Slot, which accepts the List component or any valid child elements."
-        >
-
-          <mui-message heading="Message heading" slot="body">
-            <mui-list as="ul">
-              <mui-list-item size="small">Item 1</mui-list-item>
-              <mui-list-item size="small">Item 2</mui-list-item>
-            </mui-list>
-          </mui-message>
-
-          <mui-code slot="footer">
-            &lt;mui-message heading="Message heading"&gt;
-            <br />
-            <br />
-            &nbsp;&nbsp;&lt;mui-list as="ul"&gt;
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-list-item size="small"&gt;
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Item 1
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-list-item&gt;
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-list-item size="small"&gt;
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Item 2
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-list-item&gt;
-            <br />
-            &nbsp;&nbsp;&lt;/mui-list&gt;
-            <br />
-            <br />
-            &lt;/mui-message&gt;
-          </mui-code>
-
-        </story-card>
-
-        <story-card 
-          title="Slot: Icon" 
-          description="Icon is customised via the icon property, which accepts any mui-icon-[name] from the mui icon-set."
-        >
-          <mui-message slot="body" icon="mui-icon-accessibility"></mui-message>
-          <mui-code slot="footer">
-            &lt;mui-message icon="mui-icon-accessibility"&gt;...&lt;/mui-message&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card 
-          title="Variant: Neutral" 
-          description="A calm, balanced tone for non-critical, persistent messages." 
-          usage="Use on settings or system pages to display non-urgent information.; Suitable for background status like sync confirmation or feature explanations."
-          accessibility="ARIA-live of POLITE is set on this variant.; Role of STATUS is set on this variant."
-        >
-          <mui-message heading="Sync Settings" slot="body" variant="neutral">
-              <mui-body size="small">Your preferences are backed up and synced across devices.</mui-body>
-          </mui-message>
-          <mui-code slot="footer">
-            &lt;mui-message
-            <br />
-            &nbsp;&nbsp;heading="Sync Settings" 
-            <br />
-            &nbsp;&nbsp;variant="neutral"
-            <br />
-            &gt;
-            <br />
-            <br />
-            &nbsp;&nbsp;&lt;mui-body&gt;...&lt;/mui-body&gt;
-            <br />
-            <br />
-            &lt;/mui-message&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card 
-          title="Variant: Positive" 
-          description="The Positive state conveys successful actions, achievements, or confirmations, fostering a sense of accomplishment and satisfaction." 
-          usage="Indicate successful form submissions or completed tasks.; Acknowledge user achievements or milestones."
-          accessibility="ARIA-live of POLITE is set on this variant.; Role of STATUS is set on this variant."
-        >
-          <mui-message heading="Report Ready for Download" slot="body" variant="positive">
-            <mui-body>The report has been generated and is ready for download.</mui-body>
-            <mui-link>Download Your Report</mui-link>
-          </mui-message>
-          <mui-code slot="footer">
-            &lt;mui-message 
-            <br />
-            &nbsp;&nbsp;heading="Message heading" 
-            <br />
-            &nbsp;&nbsp;variant="positive"
-            <br />
-            &gt;
-            <br />
-            &nbsp;&nbsp;&lt;mui-body&gt;The report has been...&lt;/mui-body&gt;
-            <br />
-            &nbsp;&nbsp;&lt;mui-link&gt;Download Your Report&lt;/mui-link&gt;
-            <br />
-            &lt;/mui-message&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card 
-          title="Variant: Info" 
-          description="The Info state provides informative messages that help users understand system status or feature updates, guiding them without urgency." 
-          usage="Use to announce new features | enhancements | system changes.; Appropriate for onboarding tips or contextual help."
-          accessibility="ARIA-live of POLITE is set on this variant.; Role of STATUS is set on this variant."
-        >
-          <mui-message heading="New Feature Available" slot="body" variant="info">
-            <mui-body>A new dashboard layout is now available. Explore the enhanced features.</mui-body>
-            <mui-link>Try the New Layout</mui-link>
-          </mui-message>
-          <mui-code slot="footer">
-            &lt;mui-message 
-            <br />
-            &nbsp;&nbsp;heading="Message heading" 
-            <br />
-            &nbsp;&nbsp;variant="info"
-            <br />
-            &gt;
-            <br />
-            &nbsp;&nbsp;&lt;mui-body&gt;A new dashboard layout...&lt;/mui-body&gt;
-            <br />
-            &nbsp;&nbsp;&lt;mui-link&gt;Try the New Layout&lt;/mui-link&gt;
-            <br />
-            &lt;/mui-message&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card
-          title="Variant: Warning"
-          description="The Warning state alerts users to potential issues that may require attention, helping prevent errors or misunderstandings." 
-          usage="Notify users of actions that could lead to undesirable outcomes; like unsaved changes.; Warn about system limitations or upcoming expirations."
-          accessibility="ARIA-live of ASSERTIVE is set on this variant.; Role of ALERT is set on this variant."
-        >
-          <mui-message heading="Password Expiry Warning" slot="body" variant="warning">
-            <mui-body>Your password will expire in 3 days. Please update it to maintain account security.</mui-body>
-            <mui-link>Update Your Password</mui-link>
-          </mui-message>
-          <mui-code slot="footer">
-            &lt;mui-message 
-            <br />
-            &nbsp;&nbsp;heading="Message heading" 
-            <br />
-            &nbsp;&nbsp;variant="warning"
-            <br />
-            &gt;
-            <br />
-            &nbsp;&nbsp;&lt;mui-body&gt;Your password will expire...&lt;/mui-body&gt;
-            <br />
-            &nbsp;&nbsp;&lt;mui-link&gt;Update Your Password&lt;/mui-link&gt;
-            <br />
-            &lt;/mui-message&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card
-          title="Variant: Attention"
-          description="The Attention state demands immediate user focus, highlighting critical issues that require prompt action." 
-          usage='Alert users to urgent problems; such as system errors or security breaches.; Use for time-sensitive notifications that impact user experience.'
-          accessibility="ARIA-live of ASSERTIVE is set on this variant.; Role of ALERT is set on this variant."
-        >
-          <mui-message heading="Scheduled Maintenance" slot="body" variant="attention">
-            <mui-body>Our website will be undergoing maintenance on [Date] from [Time] to [Time]. Some features may be unavailable during this period.</mui-body>
-            <mui-link>View Maintenance Schedule</mui-link>
-          </mui-message>
-          <mui-code slot="footer">
-            &lt;mui-message 
-            <br />
-            &nbsp;&nbsp;heading="Message heading" 
-            <br />
-            &nbsp;&nbsp;variant="attention"
-            <br />
-            &gt;
-            <br />
-            &nbsp;&nbsp;&lt;mui-body&gt;Our website will be undergoing...&lt;/mui-body&gt;
-            <br />
-            &nbsp;&nbsp;&lt;mui-link&gt;View Maintenance Schedule&lt;/mui-link&gt;
-            <br />
-            &lt;/mui-message&gt;
-          </mui-code>
-        </story-card>
-
-      </mui-v-stack>
-
-      </story-template>
-    `}}customElements.define("story-message",l);

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

@@ -1,42 +0,0 @@
-class e extends HTMLElement{constructor(){super();const t=this.attachShadow({mode:"open"}),s=`
-      :host { display: block; }
-    `;t.innerHTML=`
-      <style>${s}</style>
-
-      <story-template 
-        title="Slat"
-        description="Slat is a composable component designed to display table data on mobile devices. It provides flexible start and end slots, enabling consumers to tailor how data is presented in a mobile-friendly, stacked format. Slat is ideal for adapting complex table layouts into a clearer, more accessible experience on smaller screens."
-        github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-slat/index.ts"
-      >
-
-      <mui-v-stack space="var(--space-700)">
-
-        <story-card title="Slat">
-
-          <mui-slat slot="body">
-            <mui-heading slot="start" size="5">Heading</mui-heading>
-            <mui-h-stack slot="end" space="var(--space-400)" alignX="flex-end">
-              <mui-body width="20px">Body</mui-body>
-            </mui-h-stack>
-          </mui-slat>
-          
-          <mui-code slot="footer">
-            &lt;mui-slat&gt;
-            <br />
-            &nbsp;&nbsp;&lt;mui-heading slot="start" size="5"&gt;...&lt;/mui-heading&gt;
-            <br />
-            &nbsp;&nbsp;&lt;mui-h-stack slot="end"&gt;
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-body&gt;...&lt;/mui-body&gt;
-            <br />
-            &nbsp;&nbsp;&lt;/mui-h-stack&gt;
-            <br />
-            &lt;/mui-slat&gt;
-          </mui-code>
-
-        </story-card>
-
-      </mui-v-stack>
-
-      </story-template>
-    `}}customElements.define("story-slat",e);

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

@@ -1,106 +0,0 @@
-class t extends HTMLElement{constructor(){super();const l=this.attachShadow({mode:"open"}),e=`
-      :host { display: block; }
-    `,i="1fr 1fr";l.innerHTML=`
-      <style>${e}</style>
-
-      <story-template 
-        title="Rule"
-        description="A horizontal rule to divide a page"
-        github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-rule/index.ts"
-      >
-
-      <mui-v-stack space="var(--space-700)">
-
-        <story-card title="Horizontal">
-          <div slot="body">
-            <mui-rule direction="horizontal" length="100%" style="margin: var(--space-700) 0;"></mui-rule>
-          </div>
-          <mui-code slot="footer">
-            &lt;mui-rule
-            <br />
-            &nbsp;&nbsp;direction="horizontal"
-            <br />
-            &nbsp;&nbsp;length="100%"&gt;
-            <br />
-            &lt;/mui-rule&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card title="Vertical">
-          <div slot="body">
-            <mui-rule direction="vertical" length="100px"></mui-rule>
-          </div>
-          <mui-code slot="footer">
-            &lt;mui-rule
-            <br />
-            &nbsp;&nbsp;direction="vertical"
-            <br />
-            &nbsp;&nbsp;length="100px"&gt;
-            <br />
-            &lt;/mui-rule&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card title="Horizontal">
-          <div slot="body">
-            <mui-rule direction="horizontal" length="100%" weight="2px" style="margin: var(--space-700) 0;"></mui-rule>
-          </div>
-          <mui-code slot="footer">
-            &lt;mui-rule
-            <br />
-            &nbsp;&nbsp;direction="horizontal"
-            <br />
-            &nbsp;&nbsp;length="100%"&gt;
-            <br />
-            &nbsp;&nbsp;weight="2px"&gt;
-            <br />
-            &lt;/mui-rule&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card title="Vertical">
-          <div slot="body">
-            <mui-rule direction="vertical" length="100px" weight="2px"></mui-rule>
-          </div>
-          <mui-code slot="footer">
-            &lt;mui-rule
-            <br />
-            &nbsp;&nbsp;direction="vertical"
-            <br />
-            &nbsp;&nbsp;length="100px"&gt;
-            <br />
-            &nbsp;&nbsp;weight="2px"&gt;
-            <br />
-            &lt;/mui-rule&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card title="Props">
-          <mui-table slot="body"> 
-            <mui-row-group heading> 
-              <mui-row columns="${i}"> 
-                <mui-cell heading>Prop</mui-cell> 
-                <mui-cell heading>Default</mui-cell> 
-              </mui-row> 
-            </mui-row-group> 
-            <mui-row-group> 
-              <mui-row columns="${i}"> 
-                <mui-cell align-y="center"><mui-body size="small">direction</mui-body></mui-cell> 
-                <mui-cell align-y="center"><mui-body size="small">"horizontal"</mui-body></mui-cell> 
-              </mui-row> 
-              <mui-row columns="${i}"> 
-                <mui-cell align-y="center"><mui-body size="small">length</mui-body></mui-cell> 
-                <mui-cell align-y="center"><mui-body size="small">"100%"</mui-body></mui-cell> 
-              </mui-row> 
-              <mui-row columns="${i}"> 
-                <mui-cell align-y="center"><mui-body size="small">weight</mui-body></mui-cell> 
-                <mui-cell align-y="center"><mui-body size="small">"1px"</mui-body></mui-cell> 
-              </mui-row> 
-            </mui-row-group> 
-          </mui-table>
-        </story-card>
-
-      </mui-v-stack>
-
-      </story-template>
-    `}}customElements.define("story-rule",t);

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

@@ -1,52 +0,0 @@
-import{I as t}from"./image-1080-Bg-8LoSs.js";class a extends HTMLElement{constructor(){super();const i=this.attachShadow({mode:"open"}),e=`
-      :host { display: block; }
-    `;i.innerHTML=`
-      <style>${e}</style>
-
-
-      <story-template 
-        title="Image"
-        description="Defines a image."
-        github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-image/index.ts"
-      >
-
-        <mui-v-stack space="var(--space-700)">
-
-          <story-card title="Single image">
-            <div slot="body">
-              <mui-image>
-                <img slot="image" src="${t}" alt="image-1080" />
-              </mui-image>
-            </div>
-            <mui-code slot="footer">
-              &lt;mui-image&gt;
-              <br />
-              &nbsp;&nbsp;&lt;img slot="image" src="..." alt="image-1080" /&gt;
-              <br />
-              &lt;/mui-image&gt;
-            </mui-code>
-          </story-card>
-
-          <story-card title="Image with caption">
-            <div slot="body">
-              <mui-image>
-                <img slot="image" src="${t}" alt="image-1080" />
-                <figcaption slot="caption">Example image</figcaption>
-              </mui-image>
-            </div>
-            <mui-code slot="footer">
-              &lt;mui-image&gt;
-              <br />
-              &nbsp;&nbsp;&lt;img slot="image" src="..." alt="image-1080" /&gt;
-              <br />
-              &nbsp;&nbsp;&lt;figcaption slot="caption">...&lt;/figcaption&gt;
-              <br />
-              &lt;/mui-image&gt;
-            </mui-code>
-          </story-card>
-
-        </mui-v-stack>
-
-      </story-template>
-
-    `}}customElements.define("story-image",a);