@aurodesignsystem/auro-formkit 2.2.1 → 3.0.0

package/components/input/demo/api.md

@@ -34,6 +34,7 @@ Generate unique names for dependency components.
 | [minLength](#minLength)                       | `minLength`                       | `number`  | "undefined" | The minimum number of characters the user can enter into the text input. This must be a non-negative integer value smaller than or equal to the value specified by `maxlength`. |
 | [name](#name)                            | `name`                            | `string`  |             | Populates the `name` attribute on the input.     |
 | [noValidate](#noValidate)                      | `noValidate`                      | `boolean` | false       | If set, disables auto-validation on blur.        |
+| [onDark](#onDark)                          | `onDark`                          | `boolean` | false       | Sets onDark styles on input.                     |
 | [pattern](#pattern)                         | `pattern`                         | `string`  |             | Specifies a regular expression the form control's value should match. |
 | [placeholder](#placeholder)                     | `placeholder`                     | `string`  |             | Define custom placeholder text, only supported by date input formats. |
 | [readonly](#readonly)                        | `readonly`                        | `boolean` |             | Makes the input read-only, but can be set programmatically. |
@@ -103,20 +104,33 @@ The `auro-input` element supports the localization of all content managed within
 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">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basic.html) -->
-  <!-- The below content is automatically added from ../apiExamples/basic.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
   <auro-input bordered></auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
+<div class="exampleWrapper--ondark" aria-hidden>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDark.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/onDark.html -->
+  <auro-input onDark bordered></auro-input>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/basic.html) -->
-<!-- The below code snippet is automatically added from ../apiExamples/basic.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
 
 ```html
 <auro-input bordered></auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/onDark.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/onDark.html -->
+
+```html
+<auro-input onDark bordered></auro-input>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
 ## Attribute Examples
@@ -125,17 +139,25 @@ The default component supports the basic input `type="text"` structure. The `(op
 Use the `disable` attribute to prevent the user from interacting with the input.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/disabled.html) -->
-  <!-- The below content is automatically added from ../apiExamples/disabled.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
   <auro-input disabled bordered type="date">
     <span slot="label">Arrival date</span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
+<div class="exampleWrapper--ondark" aria-hidden>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkDisabled.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/onDarkDisabled.html -->
+  <auro-input onDark disabled bordered type="date">
+    <span slot="label">Arrival date</span>
+  </auro-input>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/disabled.html) -->
-<!-- The below code snippet is automatically added from ../apiExamples/disabled.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
 
 ```html
 <auro-input disabled bordered type="date">
@@ -143,6 +165,15 @@ Use the `disable` attribute to prevent the user from interacting with the input.
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/onDarkDisabled.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/onDarkDisabled.html -->
+
+```html
+<auro-input onDark disabled bordered type="date">
+  <span slot="label">Arrival date</span>
+</auro-input>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
 ### Placeholder <a name="placeholder"></a>
@@ -708,6 +739,55 @@ export function customError() {
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+#### onDark Variation
+
+<div class="exampleWrapper--ondark" aria-hidden>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/onDarkError.html) -->
+  <!-- The below content is automatically added from ../apiExamples/onDarkError.html -->
+  <auro-button onDark id="setCustomErrorBtnOnDark">Set Custom Error</auro-button>
+  <auro-button onDark id="setCustomErrorClearBtnOnDark">Clear Custom Error</auro-button>
+  <br /><br />
+  <auro-input onDark id="setCustomErrorExampleOnDark" error="Initial error attribute value" bordered>
+    <span slot="label">Name</span>
+    <span slot="helptext">Please enter your full name.</span>
+  </auro-input>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/onDarkError.html) -->
+<!-- The below code snippet is automatically added from ../apiExamples/onDarkError.html -->
+
+```html
+<auro-button onDark id="setCustomErrorBtnOnDark">Set Custom Error</auro-button>
+<auro-button onDark id="setCustomErrorClearBtnOnDark">Clear Custom Error</auro-button>
+<br /><br />
+<auro-input onDark id="setCustomErrorExampleOnDark" error="Initial error attribute value" bordered>
+  <span slot="label">Name</span>
+  <span slot="helptext">Please enter your full name.</span>
+</auro-input>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/onDarkError.js) -->
+<!-- The below code snippet is automatically added from ../apiExamples/onDarkError.js -->
+
+```js
+export function customErrorOnDark() {
+  const elem = document.querySelector('#setCustomErrorExampleOnDark');
+  // set custom error
+  document.querySelector('#setCustomErrorBtnOnDark').addEventListener('click', () => {
+    elem.error = "Custom Error Message";
+  });
+
+  // remove custom error
+  document.querySelector('#setCustomErrorClearBtnOnDark').addEventListener('click', () => {
+    elem.removeAttribute('error');
+  });
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ## Types
 
 ### Password
@@ -725,13 +805,22 @@ Default help text will be added to the input `type="password"` if custom help te
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
+<div class="exampleWrapper--ondark" aria-hidden>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/onDarkPassword.html) -->
+  <!-- The below content is automatically added from ../apiExamples/onDarkPassword.html -->
+  <auro-input onDark type="password" required bordered>
+    <span slot="label">Password</span>
+    <span slot="helptext">Please enter a secure password.</span>
+  </auro-input>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/password.html) -->
-<!-- The below code snippet is automatically added from ../apiExamples/password.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/onDarkPassword.html) -->
+<!-- The below code snippet is automatically added from ../apiExamples/onDarkPassword.html -->
 
 ```html
-<auro-input type="password" required bordered>
+<auro-input onDark type="password" required bordered>
   <span slot="label">Password</span>
   <span slot="helptext">Please enter a secure password.</span>
 </auro-input>
@@ -1121,15 +1210,16 @@ The component may be restyled using the following code sample and changing the v
 <!-- The below code snippet is automatically added from ../src/styles/tokens.scss -->
 
 ```scss
-@import '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+@import "@aurodesignsystem/design-tokens/dist/alaska/SCSSVariables--alaska";
 
 :host {
-  --ds-auro-input-border-color: var(--ds-color-border-secondary-default, #{$ds-color-border-secondary-default});
-  --ds-auro-input-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default});
-  --ds-auro-input-caret-color: var(--ds-color-text-ui-focus-default, #{$ds-color-text-ui-focus-default});
-  --ds-auro-input-label-text-color: var(--ds-color-text-tertiary-default, #{$ds-color-text-tertiary-default});
-  --ds-auro-input-placeholder-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
-  --ds-auro-input-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
+  --ds-auro-input-border-color: var(--ds-basic-color-border-bold, #{$ds-basic-color-border-bold});
+  --ds-auro-input-container-color: var(--ds-basic-color-surface-default, #{$ds-basic-color-surface-default});
+  --ds-auro-input-caret-color: var(--ds-advanced-color-state-focused, #{$ds-advanced-color-state-focused});
+  --ds-auro-input-label-text-color: var(--ds-basic-color-texticon-muted, #{$ds-basic-color-texticon-muted});
+  --ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-default, #{$ds-basic-color-texticon-default});
+  --ds-auro-input-text-color: var(--ds-basic-color-texticon-default, #{$ds-basic-color-texticon-default});
+  --ds-auro-input-error-icon-color: var(--ds-basic-color-status-error, #{$ds-basic-color-status-error});
 }
 ```
 <!-- AURO-GENERATED-CONTENT:END -->