@muibook/components 1.0.0

package/dist/muibook/assets/index-B4Lbi-ZX.js

@@ -0,0 +1,82 @@
+class i extends HTMLElement{constructor(){super();const t=this.attachShadow({mode:"open"}),e=`
+      :host { display: block; }
+    `;t.innerHTML=`
+      <style>${e}</style>
+
+      <story-template 
+        title="Badge"
+        description="Badges are non-interactive and indicate counts or statuses."
+        github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-badge/index.ts"
+      >
+
+      <mui-v-stack space="var(--space-700)">
+
+        <story-card title="Default">
+          <div slot="body">
+            <mui-badge>New</mui-badge>
+          </div>
+          <mui-code slot="footer">
+            &lt;mui-badge&gt;
+            <br />
+            &nbsp;&nbsp;...
+            <br />
+            &lt;/mui-badge&gt;
+          </mui-code>
+        </story-card>
+
+        <story-card title="Neutral">
+          <div slot="body">
+            <mui-badge variant="neutral">Offline</mui-badge>
+          </div>
+          <mui-code slot="footer">
+            &lt;mui-badge variant="neutral"&gt;
+            <br />
+            &nbsp;&nbsp;...
+            <br />
+            &lt;/mui-badge&gt;
+          </mui-code>
+        </story-card>
+
+        <story-card title="Positive">
+          <div slot="body">
+            <mui-badge variant="positive">Paid</mui-badge>
+          </div>
+          <mui-code slot="footer">
+            &lt;mui-badge variant="positive"&gt;
+            <br />
+            &nbsp;&nbsp;...
+            <br />
+            &lt;/mui-badge&gt;
+          </mui-code>
+        </story-card>
+
+        <story-card title="Warning">
+          <div slot="body">
+            <mui-badge variant="warning">Busy</mui-badge>
+          </div>
+          <mui-code slot="footer">
+            &lt;mui-badge variant="warning"&gt;
+            <br />
+            &nbsp;&nbsp;...
+            <br />
+            &lt;/mui-badge&gt;
+          </mui-code>
+        </story-card>
+
+        <story-card title="Attention">
+          <div slot="body">
+            <mui-badge variant="attention">Urgent</mui-badge>
+          </div>
+          <mui-code slot="footer">
+            &lt;mui-badge variant="attention"&gt;
+            <br />
+            &nbsp;&nbsp;...
+            <br />
+            &lt;/mui-badge&gt;
+          </mui-code>
+        </story-card>
+
+      </mui-v-stack>
+
+      </story-template>
+    `}}customElements.define("story-badge",i);

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

@@ -0,0 +1,144 @@
+class s extends HTMLElement{constructor(){super();const i=this.attachShadow({mode:"open"}),t=`
+      :host { display: block; }
+    `;i.innerHTML=`
+      <style>${t}</style>
+
+      <story-template 
+        title="List"
+        description="The component defines an ordered or unordered list."
+        github="https://github.com/michaeltrilford/muibook/tree/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-list"
+      >
+
+      <mui-v-stack space="var(--space-700)">
+
+        <story-card title="Sizes">
+
+            <div slot="body">
+              <mui-v-stack space="var(--space-500)">
+                <div>
+                  <mui-heading size="4" >X-Small</mui-heading>
+
+                  <mui-list as="ol">
+                    <mui-list-item size="x-small">Coffee</mui-list-item>
+                    <mui-list-item size="x-small">Tea</mui-list-item>
+                    <mui-list-item size="x-small">Milk</mui-list-item>
+                  </mui-list>
+
+                </div>
+                <div>
+                  <mui-heading size="4" >Small</mui-heading>
+
+                  <mui-list as="ol">
+                    <mui-list-item size="small">Coffee</mui-list-item>
+                    <mui-list-item size="small">Tea</mui-list-item>
+                    <mui-list-item size="small">Milk</mui-list-item>
+                  </mui-list>
+
+                </div>
+                <div>
+                  <mui-heading size="4" >Medium</mui-heading>
+
+                  <mui-list as="ol">
+                    <mui-list-item size="medium">Coffee</mui-list-item>
+                    <mui-list-item size="medium">Tea</mui-list-item>
+                    <mui-list-item size="medium">Milk</mui-list-item>
+                  </mui-list>
+
+                </div>
+                <div>
+                  <mui-heading size="4" >Large</mui-heading>
+
+                  <mui-list as="ol">
+                    <mui-list-item size="large">Coffee</mui-list-item>
+                    <mui-list-item size="large">Tea</mui-list-item>
+                    <mui-list-item size="large">Milk</mui-list-item>
+                  </mui-list>
+
+                </div>
+              </mui-v-stack>
+            </div>
+
+            <mui-code slot="footer">
+              &lt;mui-list-item size="x-small"&gt;
+              <br />
+              &nbsp;&nbsp;List item text
+              <br />
+              &lt;/mui-list-item&gt;
+              <br />
+              <br />
+              &lt;mui-list-item size="small"&gt;
+              <br />
+              &nbsp;&nbsp;List item text
+              <br />
+              &lt;/mui-list-item&gt;
+              <br />
+              <br />
+              &lt;mui-list-item size="medium"&gt;
+              <br />
+              &nbsp;&nbsp;List item text
+              <br />
+              &lt;/mui-list-item&gt;
+              <br />
+              <br />
+              &lt;mui-list-item size="large"&gt;
+              <br />
+              &nbsp;&nbsp;List item text
+              <br />
+              &lt;/mui-list-item&gt;
+            </mui-code>
+
+        </story-card>
+
+
+        <story-card title="Unordered">
+
+          <div slot="body">
+          <mui-list as="ol">
+            <mui-list-item>Coffee</mui-list-item>
+            <mui-list-item>Tea</mui-list-item>
+            <mui-list-item>Milk</mui-list-item>
+          </mui-list>
+          </div>
+
+          <mui-code slot="footer">
+            &lt;mui-list as="li"&gt;
+            <br />
+            &nbsp;&nbsp;&lt;mui-list-item&gt;...&lt;/mui-list-item&gt;
+            <br />
+            &nbsp;&nbsp;&lt;mui-list-item&gt;...&lt;/mui-list-item&gt;
+            <br />
+            &nbsp;&nbsp;&lt;mui-list-item&gt;...&lt;/mui-list-item&gt;
+            <br />
+            &lt;/mui-list&gt;
+          </mui-code>
+
+        </story-card>
+
+        <story-card title="Ordered">
+
+          <div slot="body">
+            <mui-list as="ul">
+              <mui-list-item>Coffee</mui-list-item>
+              <mui-list-item>Tea</mui-list-item>
+              <mui-list-item>Milk</mui-list-item>
+            </mui-list>
+          </div>
+
+          <mui-code slot="footer">
+            &lt;mui-list as="ul"&gt;
+            <br />
+            &nbsp;&nbsp;&lt;mui-list-item&gt;...&lt;/mui-list-item&gt;
+            <br />
+            &nbsp;&nbsp;&lt;mui-list-item&gt;...&lt;/mui-list-item&gt;
+            <br />
+            &nbsp;&nbsp;&lt;mui-list-item&gt;...&lt;/mui-list-item&gt;
+            <br />
+            &lt;/mui-list&gt;
+          </mui-code>
+          
+        </story-card>
+
+      </mui-v-stack>
+
+      </story-template>
+    `}}customElements.define("story-list",s);

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

@@ -0,0 +1,439 @@
+class p extends HTMLElement{constructor(){super();const i=this.attachShadow({mode:"open"}),n=`
+      :host { display: block; }
+    `,t=[{name:"variant",type:"string",options:"default, success, warning, error",default:"default",description:""},{name:"types",type:"string",options:"text, password, email, number, search, tel, url, date, time",default:"text",description:"Define the data context that the input supports"},{name:"id",type:"string",options:"{text}",default:"",description:"Identifier to group the label and input to allow user to focus on the input by clicking the label."},{name:"label",required:!0,type:"string",options:"{text}",default:"",description:"Provide the input with a unique label.  If without, a console warning will remind you to add label."},{name:"hide-label",type:"boolean",options:"hide-label",default:"",description:"Hides the label but it is still present for screen readers"},{name:"disabled",type:"boolean",options:"disabled",default:"",description:"Disable the input"},{name:"name",type:"string",options:"{text}",default:"",description:"The name attribute is used when submitting forms."},{name:"value",type:"string",options:"{text}",default:"",description:"Sets the current value of the input field."},{name:"placeholder",type:"string",options:"{text}",default:"",description:"You want the input to start with pre-filled content."}],s=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(""),l=t.map((e,o)=>{const b=o===t.length-1?"last-child":"";return`
+            <mui-accordion-block
+              style="position: relative; z-index: 1;" 
+              size="medium" 
+              heading=${e.name.charAt(0).toUpperCase()+e.name.slice(1)} 
+              ${b}>
+              <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("");i.innerHTML=`
+      <style>${n}</style>
+
+      <story-template 
+        title="Input"
+        description="An input component for capturing user text, styled for consistency across your UI."
+        github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-input/index.ts"
+        figma="https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=3-795&t=GMqx21isUVAMpLJp-1"
+        accessibility="
+          A label is required for screen reader support to describe the input’s purpose.;
+          If hide-label is used, the label is visually hidden but accessible via aria-label.;
+          The label and input are linked via for and id. If no id is provided, one is generated.;
+          Clear focus styles are shown for keyboard users.;
+          The native disabled attribute is fully supported by assistive tech.;
+          Logs a console warning if no label is provided.
+        "
+      >
+
+      <mui-v-stack space="var(--space-700)">
+
+        <spec-card title="Props">
+          <mui-responsive breakpoint="767" slot="body">
+            <story-type-table slot="showAbove">
+              ${s}
+            </story-type-table>
+            <mui-accordion-group exclusive slot="showBelow">
+              ${l}
+            </mui-accordion-group>
+          </mui-responsive>
+        </spec-card>
+
+
+        <story-card title="Default" description="The label is required, if not set there will be a console warning.">
+          <div slot="body">
+            <mui-input label="Default"></mui-input>
+          </div>
+          <mui-code slot="footer">
+            &lt;mui-input label="Default"&gt;&lt;mui-input&gt;
+            <br />
+          </mui-code>
+        </story-card>
+
+        <story-card title="Variant: Success" description="The label is required, if not set there will be a console warning.">
+          <div slot="body">
+            <mui-input variant="success"  value="value" type="password" label="Password"></mui-input>
+          </div>
+          <mui-code slot="footer">
+            &lt;mui-input variant="success" value="value" type="password" label="Password"&gt;&lt;mui-input&gt;
+            <br />
+          </mui-code>
+        </story-card>
+
+        <story-card title="Variant: Warning" description="The label is required, if not set there will be a console warning.">
+          <div slot="body">
+            <mui-input variant="warning" value="michael.mui.com" label="Email"></mui-input>
+          </div>
+          <mui-code slot="footer">
+            &lt;mui-input variant="warning" value="michael.mui.com" label="Email"&gt;&lt;mui-input&gt;
+            <br />
+          </mui-code>
+        </story-card>
+
+        <story-card title="Variant: Error" description="The label is required, if not set there will be a console warning.">
+          <div slot="body">
+            <mui-input variant="error" value="michael.mui.com" label="Email"></mui-input>
+          </div>
+          <mui-code slot="footer">
+            &lt;mui-input variant="error" value="michael.mui.com" label="Email"&gt;&lt;mui-input&gt;
+            <br />
+          </mui-code>
+        </story-card>
+
+        <story-card title="Hide Label" description="The visible label is hidden and an aria-label is generated from the label to maintain screen reader support.">
+          <div slot="body">
+            <mui-input label="Hide Label" hide-label></mui-input>
+          </div>
+          <mui-code slot="footer">
+            &lt;mui-input label="Hide Label" hide-label&gt;&lt;mui-input&gt;
+            <br />
+          </mui-code>
+        </story-card>
+
+        <story-card title="Disabled">
+          <div slot="body">
+            <mui-input label="Disabled" disabled></mui-input>
+          </div>
+          <mui-code slot="footer">
+            &lt;mui-input label="Disabled" disabled&gt;&lt;mui-input&gt;
+            <br />
+          </mui-code>
+        </story-card>
+
+        <story-card title="Before: Add On">
+          <div slot="body">
+            <mui-input label="Enter amount">
+              <mui-addon slot="before"><mui-body>USD</mui-body></mui-addon>
+          </div>
+          <mui-code slot="footer">
+            &lt;mui-input label="Enter amount"&gt;
+            <br />
+
+            &nbsp;&nbsp;&lt;mui-addon slot="before"&gt;
+            <br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-body&gt;USD&lt;mui-body&gt;
+            <br />
+            &nbsp;&nbsp;&lt;mui-addon&gt;
+            <br />            
+
+            &lt;mui-input&gt;
+            <br />
+          </mui-code>
+        </story-card>
+
+        <story-card title="After: Add On">
+          <div slot="body">
+            <mui-input label="Enter amount">
+              <mui-addon slot="after"><mui-body>USD</mui-body></mui-input></mui-addon>
+          </div>
+          <mui-code slot="footer">
+            &lt;mui-input label="Enter amount"&gt;
+            <br />
+
+            &nbsp;&nbsp;&lt;mui-addon slot="after"&gt;
+            <br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-body&gt;USD&lt;mui-body&gt;
+            <br />
+            &nbsp;&nbsp;&lt;mui-addon&gt;
+            <br />            
+
+            &lt;mui-input&gt;
+            <br />
+          </mui-code>
+        </story-card>
+
+        <story-card title="Before: Select">
+          <div slot="body">
+            <mui-input type="search" label="Search">
+              <mui-select
+                style="width: 120px;"
+                slot="before"
+                label="Filter"
+                hide-label
+                  options='[
+                  {"value": "all", "label": "All"},
+                  {"value": "images", "label": "Images"},
+                  {"value": "video", "label": "Video"}
+                ]'>
+              </mui-select>
+          </div>
+          <mui-code slot="footer">
+            &lt;mui-input type="search" label="Search"&gt;<br>
+            &nbsp;&nbsp;&lt;mui-select<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;slot="before"<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;label="Filter"<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;hide-label<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;style="width: 120px;"<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;options='[<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ "value": "all", "label": "All" },<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ "value": "images", "label": "Images" },<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ "value": "video", "label": "Video" }<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;]'&gt;<br>
+            &nbsp;&nbsp;&lt;/mui-select&gt;<br>
+            &lt;/mui-input&gt;
+          </<mui-code>
+        </story-card>
+
+        <story-card title="After: Select">
+          <div slot="body">
+            <mui-input type="number" label="Amount to transfer">
+              <mui-select
+                style="width: 100px;"
+                slot="after"
+                label="Currency"
+                hide-label
+                  options='[
+                  {"value": "jpy", "label": "JPY"},
+                  {"value": "usd", "label": "USD"}
+                ]'>
+              </mui-select>
+          </div>
+          <mui-code slot="footer">
+            &lt;mui-input type="number" label="Amount to transfer"&gt;<br>
+            &nbsp;&nbsp;&lt;mui-select<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;slot="after"<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;label="Currency"<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;hide-label<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;style="width: 100px;"<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;options='[<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ "value": "jpy", "label": "JPY" },<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ "value": "usd", "label": "USD" }<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;]'&gt;<br>
+            &nbsp;&nbsp;&lt;/mui-select&gt;<br>
+            &lt;/mui-input&gt;
+          </<mui-code>
+        </story-card>
+
+        <story-card title="After: Button">
+          <div slot="body">
+            <mui-input type="email" label="Email" value="mui-web-components@proton.me">
+              <mui-button slot="after">Copy</mui-button>
+            </mui-input>
+          </div>
+          <mui-code slot="footer">
+            &lt;mui-input 
+            <br />
+            &nbsp;&nbsp;type="email" 
+            <br />
+            &nbsp;&nbsp;label="Email" 
+            <br />
+            &nbsp;&nbsp;value="mui-web-components@proton.me"
+            <br />
+            &gt;
+            <br>
+            &nbsp;&nbsp;&lt;mui-button slot="after"&gt;Copy&lt;/mui-button&gt;<br>
+            &lt;/mui-input&gt;
+          </<mui-code>
+        </story-card>
+
+        <story-card title="Type: Text" description="The default input type for plain text.">
+          <div slot="body">
+            <mui-input label="Name" type="text" id="name-input" name="name" value="John Doe"></mui-input>
+          </div>
+          <mui-code slot="footer">
+            &lt;mui-input 
+            <br />
+            &nbsp;&nbsp;label="Name"
+            <br />
+            &nbsp;&nbsp;type="text" 
+            <br />
+            &nbsp;&nbsp;id="name-input" 
+            <br />
+            &nbsp;&nbsp;name="name"
+            <br />
+            &nbsp;&nbsp;value="John Doe"
+            <br />
+            &gt;&lt;/mui-input&gt;
+          </mui-code>
+        </story-card>
+
+        <story-card title="Type: Email" description="Ensures the entered value follows email format.">
+          <div slot="body">
+            <mui-input label="Email" type="email" id="email-input" name="email" value="user@example.com"></mui-input>
+          </div>
+          <mui-code slot="footer">
+            &lt;mui-input 
+            <br />
+            &nbsp;&nbsp;label="Email"
+            <br />
+            &nbsp;&nbsp;type="email" 
+            <br />
+            &nbsp;&nbsp;id="email-input" 
+            <br />
+            &nbsp;&nbsp;name="email"
+            <br />
+            &nbsp;&nbsp;value="user@example.com"
+            <br />
+            &gt;&lt;/mui-input&gt;
+          </mui-code>
+        </story-card>
+
+        <story-card title="Type: Password" description="Using type password masks the user-filled content.">
+          <div slot="body">
+            <mui-input label="Password" type="password" id="password-input" name="password" value="abcde1234"></mui-input>
+          </div>
+          <mui-code slot="footer">
+            &lt;mui-input 
+            <br />
+            &nbsp;&nbsp;label="Password"
+            <br />
+            &nbsp;&nbsp;type="password" 
+            <br />
+            &nbsp;&nbsp;id="password-input" 
+            <br />
+            &nbsp;&nbsp;name="password"
+            <br />
+            &nbsp;&nbsp;value="abcde1234"
+            <br />
+            &gt;&lt;mui-input&gt;
+            <br />
+          </mui-code>
+        </story-card>
+
+        <story-card title="Type: Number" description="Restricts input to numeric values.">
+          <div slot="body">
+            <mui-input label="Age" type="number" id="age-input" name="age" value="30"></mui-input>
+          </div>
+          <mui-code slot="footer">
+            &lt;mui-input 
+            <br />
+            &nbsp;&nbsp;label="Age"
+            <br />
+            &nbsp;&nbsp;type="number" 
+            <br />
+            &nbsp;&nbsp;id="age-input" 
+            <br />
+            &nbsp;&nbsp;name="age"
+            <br />
+            &nbsp;&nbsp;value="30"
+            <br />
+            &gt;&lt;/mui-input&gt;
+          </mui-code>
+        </story-card>
+
+        <story-card title="Type: URL" description="Validates URL format.">
+          <div slot="body">
+            <mui-input label="Website" type="url" id="url-input" name="website" value="https://example.com"></mui-input>
+          </div>
+          <mui-code slot="footer">
+            &lt;mui-input 
+            <br />
+            &nbsp;&nbsp;label="Website"
+            <br />
+            &nbsp;&nbsp;type="url" 
+            <br />
+            &nbsp;&nbsp;id="url-input" 
+            <br />
+            &nbsp;&nbsp;name="website"
+            <br />
+            &nbsp;&nbsp;value="https://example.com"
+            <br />
+            &gt;&lt;/mui-input&gt;
+          </mui-code>
+        </story-card>
+
+        <story-card title="Type: Tel" description="Input for telephone numbers, no formatting enforced.">
+          <div slot="body">
+            <mui-input label="Phone" type="tel" id="phone-input" name="phone" value="+1234567890"></mui-input>
+          </div>
+          <mui-code slot="footer">
+            &lt;mui-input 
+            <br />
+            &nbsp;&nbsp;label="Phone"
+            <br />
+            &nbsp;&nbsp;type="tel" 
+            <br />
+            &nbsp;&nbsp;id="phone-input" 
+            <br />
+            &nbsp;&nbsp;name="phone"
+            <br />
+            &nbsp;&nbsp;value="+1234567890"
+            <br />
+            &gt;&lt;/mui-input&gt;
+          </mui-code>
+        </story-card>
+
+        <story-card title="Type: Search" description="Styled and optimized for search fields.">
+          <div slot="body">
+            <mui-input label="Search" type="search" id="search-input" name="search" value="Query"></mui-input>
+          </div>
+          <mui-code slot="footer">
+            &lt;mui-input 
+            <br />
+            &nbsp;&nbsp;label="Search"
+            <br />
+            &nbsp;&nbsp;type="search" 
+            <br />
+            &nbsp;&nbsp;id="search-input" 
+            <br />
+            &nbsp;&nbsp;name="search"
+            <br />
+            &nbsp;&nbsp;value="Query"
+            <br />
+            &gt;&lt;/mui-input&gt;
+          </mui-code>
+        </story-card>
+
+        <story-card title="Type: Date" description="Allows the user to pick a calendar date.">
+          <div slot="body">
+            <mui-input label="Birthdate" type="date" id="birthdate-input" name="birthdate" value="1990-01-01"></mui-input>
+          </div>
+          <mui-code slot="footer">
+            &lt;mui-input 
+            <br />
+            &nbsp;&nbsp;label="Birthdate"
+            <br />
+            &nbsp;&nbsp;type="date" 
+            <br />
+            &nbsp;&nbsp;id="birthdate-input" 
+            <br />
+            &nbsp;&nbsp;name="birthdate"
+            <br />
+            &nbsp;&nbsp;value="1990-01-01"
+            <br />
+            &gt;&lt;/mui-input&gt;
+          </mui-code>
+        </story-card>
+
+        <story-card title="Type: Time" description="Provides a time picker for hour and minute selection.">
+          <div slot="body">
+            <mui-input label="Meeting Time" type="time" id="meeting-time-input" name="meetingTime" value="14:30"></mui-input>
+          </div>
+          <mui-code slot="footer">
+            &lt;mui-input 
+            <br />
+            &nbsp;&nbsp;label="Meeting Time"
+            <br />
+            &nbsp;&nbsp;type="time" 
+            <br />
+            &nbsp;&nbsp;id="meeting-time-input" 
+            <br />
+            &nbsp;&nbsp;name="meetingTime"
+            <br />
+            &nbsp;&nbsp;value="14:30"
+            <br />
+            &gt;&lt;/mui-input&gt;
+          </mui-code>
+        </story-card>
+
+      </mui-v-stack>
+
+      </story-template>
+    `}}customElements.define("story-input",p);