npm - @aurodesignsystem/auro-formkit - Versions diffs - 2.0.0-beta.5 → 2.0.0-beta.51 - Mend

@aurodesignsystem/auro-formkit 2.0.0-beta.5 → 2.0.0-beta.51

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (857) hide show

package/components/input/demo/index.html ADDED Viewed

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Auro Web Component Generator | auro-input custom element</title>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
+    />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/tokens/CSSCustomProperties.css">
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
+  </head>
+  <body class="auro-markdown">
+    <main></main>
+    <script type="module">
+      import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
+      import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
+      fetch('./index.md')
+        .then((response) => response.text())
+        .then((text) => {
+          const rawHtml = marked.parse(text);
+          document.querySelector('main').innerHTML = rawHtml;
+          Prism.highlightAll();
+        });
+    </script>
+    <script type="module" data-demo-script="true">
+      import { initExamples } from "./index.min.js";
+      initExamples();
+    </script>
+    <!-- If additional elements are needed for the demo, add them here. -->
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-radio@latest/dist/auro-radio__bundled.js" type="module"></script>
+  </body>
+</html>

package/components/input/demo/index.md CHANGED Viewed

@@ -1,21 +1,3 @@
-<style>
-  .exampleWrapper--flex * {
-    margin-bottom: 1rem;
-  }
-  @media screen and (min-width: 660px) {
-    .exampleWrapper--flex {
-      display: flex;
-      justify-content: space-between;
-    }
-    .exampleWrapper--flex * {
-      width: 45%;
-      margin-bottom: unset;
-    }
-  }
-</style>
 # Input
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
@@ -37,10 +19,9 @@ The `<auro-input>` element should be used in situations where users may:
 The default component supports the basic input `type="text"` structure. The `(optional)` label is provided to instruct the user that their input is not required. Use the `bordered` attribute for a bordered `<auro-input>`.
-<div class="exampleWrapper exampleWrapper--flex">
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
   <!-- The below content is automatically added from ./../apiExamples/basic.html -->
-  <auro-input></auro-input>
   <auro-input bordered></auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -50,7 +31,6 @@ The default component supports the basic input `type="text"` structure. The `(op
 <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
 ```html
-<auro-input></auro-input>
 <auro-input bordered></auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -60,13 +40,10 @@ The default component supports the basic input `type="text"` structure. The `(op
 Use the `placeholder` attribute to add a custom placeholder message within the element.
-<div class="exampleWrapper exampleWrapper--flex">
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/placeholder.html) -->
   <!-- The below content is automatically added from ./../apiExamples/placeholder.html -->
-  <auro-input required placeholder="John Doe">
-    <span slot="label">Full name</span>
-  </auro-input>
-  <auro-input required bordered placeholder="John Doe">
+  <auro-input placeholder="John Doe" bordered required>
     <span slot="label">Full name</span>
     <span slot="helptext">Please enter your full name.</span>
   </auro-input>
@@ -78,10 +55,7 @@ Use the `placeholder` attribute to add a custom placeholder message within the e
 <!-- The below code snippet is automatically added from ./../apiExamples/placeholder.html -->
 ```html
-<auro-input required placeholder="John Doe">
-  <span slot="label">Full name</span>
-</auro-input>
-<auro-input required bordered placeholder="John Doe">
+<auro-input placeholder="John Doe" bordered required>
   <span slot="label">Full name</span>
   <span slot="helptext">Please enter your full name.</span>
 </auro-input>
@@ -93,13 +67,10 @@ Use the `placeholder` attribute to add a custom placeholder message within the e
 Use the `disabled` attribute to prevent the user from interacting with the input.
-<div class="exampleWrapper exampleWrapper--flex">
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
   <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
-  <auro-input disabled type="month-day-year" required>
-    <slot slot="label">Departure date</slot>
-  </auro-input>
-  <auro-input disabled bordered type="month-day-year">
+  <auro-input disabled bordered type="date">
     <slot slot="label">Arrival date</slot>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
@@ -110,10 +81,7 @@ Use the `disabled` attribute to prevent the user from interacting with the input
 <!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
 ```html
-<auro-input disabled type="month-day-year" required>
-  <slot slot="label">Departure date</slot>
-</auro-input>
-<auro-input disabled bordered type="month-day-year">
+<auro-input disabled bordered type="date">
   <slot slot="label">Arrival date</slot>
 </auro-input>
 ```
@@ -127,10 +95,6 @@ Example use cases for auro-input support the `activeLabel` attribute. If set, th
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/activeLabel.html) -->
   <!-- The below content is automatically added from ./../apiExamples/activeLabel.html -->
-  <auro-input activeLabel>
-    <slot slot="label">Address</slot>
-    <slot slot="helptext">Please enter your home address.</slot>
-  </auro-input>
   <auro-input activeLabel bordered>
     <slot slot="label">Address</slot>
     <slot slot="helptext">Please enter your home address.</slot>
@@ -143,10 +107,6 @@ Example use cases for auro-input support the `activeLabel` attribute. If set, th
 <!-- The below code snippet is automatically added from ./../apiExamples/activeLabel.html -->
 ```html
-<auro-input activeLabel>
-  <slot slot="label">Address</slot>
-  <slot slot="helptext">Please enter your home address.</slot>
-</auro-input>
 <auro-input activeLabel bordered>
   <slot slot="label">Address</slot>
   <slot slot="helptext">Please enter your home address.</slot>
@@ -188,14 +148,10 @@ Use the `pattern` attribute to set custom input validation. This example also us
 The `<auro-input>` component supports setting a custom validity message specific to the pattern validation by using the `setCustomValidityPatternMismatch` attribute.
-<div class="exampleWrapper exampleWrapper--flex">
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/pattern.html) -->
   <!-- The below content is automatically added from ./../apiExamples/pattern.html -->
-  <auro-input pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityPatternMismatch="Only contain lowercase letters w/no spaces">
-    <span slot="label">Username</span>
-    <span slot="helptext">Please enter a username.</span>
-  </auro-input>
-  <auro-input bordered pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityPatternMismatch="Only contain lowercase letters w/no spaces">
+  <auro-input pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityPatternMismatch="Only contain lowercase letters w/no spaces" bordered>
     <span slot="label">Username</span>
     <span slot="helptext">Please enter a username.</span>
   </auro-input>
@@ -207,11 +163,7 @@ The `<auro-input>` component supports setting a custom validity message specific
 <!-- The below code snippet is automatically added from ./../apiExamples/pattern.html -->
 ```html
-<auro-input pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityPatternMismatch="Only contain lowercase letters w/no spaces">
-  <span slot="label">Username</span>
-  <span slot="helptext">Please enter a username.</span>
-</auro-input>
-<auro-input bordered pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityPatternMismatch="Only contain lowercase letters w/no spaces">
+<auro-input pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityPatternMismatch="Only contain lowercase letters w/no spaces" bordered>
   <span slot="label">Username</span>
   <span slot="helptext">Please enter a username.</span>
 </auro-input>
@@ -233,10 +185,9 @@ AuroInput.register('custom-input');
 This will create a new custom element that you can use in your HTML that will function identically to the `<auro-input>` element.
-<div class="exampleWrapper exampleWrapper--flex">
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/custom.html) -->
   <!-- The below content is automatically added from ./../apiExamples/custom.html -->
-  <custom-input></custom-input>
   <custom-input bordered></custom-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -246,7 +197,6 @@ This will create a new custom element that you can use in your HTML that will fu
 <!-- The below code snippet is automatically added from ./../apiExamples/custom.html -->
 ```html
-<custom-input></custom-input>
 <custom-input bordered></custom-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->