@aurodesignsystem/auro-formkit 4.0.2 → 5.0.0

package/components/input/dist/styles/classic/color-css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/components/input/dist/styles/classic/style-css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/components/input/dist/styles/default/borders-css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/components/input/dist/styles/default/color-css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/components/input/dist/styles/default/mixins-css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/components/input/dist/styles/default/notificationIcons-css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/components/input/dist/styles/default/style-css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/components/input/dist/styles/emphasized/color-css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/components/input/dist/styles/emphasized/style-css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/components/input/dist/styles/shapeSize-css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/components/input/dist/styles/snowflake/style-css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/components/layoutElement/dist/auroElement.d.ts

@@ -0,0 +1,34 @@
+export class AuroElement extends LitElement {
+    static get properties(): {
+        /**
+         * Defines the language of an element.
+         * @default {'default'}
+         */
+        layout: {
+            type: StringConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        shape: {
+            type: StringConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        size: {
+            type: StringConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        onDark: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+    };
+    resetShapeClasses(): void;
+    resetLayoutClasses(): void;
+    updateComponentArchitecture(): void;
+    updated(changedProperties: any): void;
+    render(): any;
+}
+import { LitElement } from "lit";

package/components/layoutElement/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { AuroElement };
+import { AuroElement } from "./auroElement.js";

package/components/layoutElement/dist/index.js

@@ -0,0 +1,98 @@
+import { LitElement } from 'lit';
+
+class AuroElement extends LitElement {
+  static get properties() {
+    return {
+
+      /**
+       * Defines the language of an element.
+       * @default {'default'}
+       */
+      layout: {
+        type: String,
+        attribute: "layout",
+        reflect: true
+      },
+
+      shape: {
+        type: String,
+        attribute: "shape",
+        reflect: true
+      },
+
+      size: {
+        type: String,
+        attribute: "size",
+        reflect: true
+      },
+
+      onDark: {
+        type: Boolean,
+        attribute: "ondark",
+        reflect: true
+      }
+    };
+  }
+
+  resetShapeClasses() {
+    const wrapper = this.shadowRoot.querySelector('.wrapper');
+
+    if (wrapper) {
+      wrapper.classList.forEach((className) => {
+        if (className.startsWith('shape-')) {
+          wrapper.classList.remove(className);
+        }
+      });
+
+      if (this.shape && this.size) {
+        wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`);
+      } else {
+        wrapper.classList.add('shape-none');
+      }
+    }
+
+  }
+
+  resetLayoutClasses() {
+    if (this.layout) {
+      const wrapper = this.shadowRoot.querySelector('.wrapper');
+
+      if (wrapper) {
+        wrapper.classList.forEach((className) => {
+          if (className.startsWith('layout-')) {
+            wrapper.classList.remove(className);
+          }
+        });
+
+        wrapper.classList.add(`layout-${this.layout.toLowerCase()}`);
+      }
+    }
+  }
+
+  updateComponentArchitecture() {
+    this.resetLayoutClasses();
+    this.resetShapeClasses();
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('layout') || changedProperties.has('shape') || changedProperties.has('size')) {
+      this.updateComponentArchitecture();
+    }
+  }
+
+  // Try to render the defined `this.layout` layout. If that fails, fall back to the default layout.
+  // This will catch if an invalid layout value is passed in and render the default layout if so.
+  render() {
+    try {
+      return this.renderLayout();
+    } catch (error) {
+      // failed to get the defined layout
+      console.error('Failed to get the defined layout - using the default layout', error); // eslint-disable-line no-console
+
+      // fallback to the default layout
+      return this.getLayout('default');
+    }
+  }
+}
+
+export { AuroElement };

package/components/layoutElement/dist/registered.js

@@ -0,0 +1,98 @@
+import { LitElement } from 'lit';
+
+class AuroElement extends LitElement {
+  static get properties() {
+    return {
+
+      /**
+       * Defines the language of an element.
+       * @default {'default'}
+       */
+      layout: {
+        type: String,
+        attribute: "layout",
+        reflect: true
+      },
+
+      shape: {
+        type: String,
+        attribute: "shape",
+        reflect: true
+      },
+
+      size: {
+        type: String,
+        attribute: "size",
+        reflect: true
+      },
+
+      onDark: {
+        type: Boolean,
+        attribute: "ondark",
+        reflect: true
+      }
+    };
+  }
+
+  resetShapeClasses() {
+    const wrapper = this.shadowRoot.querySelector('.wrapper');
+
+    if (wrapper) {
+      wrapper.classList.forEach((className) => {
+        if (className.startsWith('shape-')) {
+          wrapper.classList.remove(className);
+        }
+      });
+
+      if (this.shape && this.size) {
+        wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`);
+      } else {
+        wrapper.classList.add('shape-none');
+      }
+    }
+
+  }
+
+  resetLayoutClasses() {
+    if (this.layout) {
+      const wrapper = this.shadowRoot.querySelector('.wrapper');
+
+      if (wrapper) {
+        wrapper.classList.forEach((className) => {
+          if (className.startsWith('layout-')) {
+            wrapper.classList.remove(className);
+          }
+        });
+
+        wrapper.classList.add(`layout-${this.layout.toLowerCase()}`);
+      }
+    }
+  }
+
+  updateComponentArchitecture() {
+    this.resetLayoutClasses();
+    this.resetShapeClasses();
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('layout') || changedProperties.has('shape') || changedProperties.has('size')) {
+      this.updateComponentArchitecture();
+    }
+  }
+
+  // Try to render the defined `this.layout` layout. If that fails, fall back to the default layout.
+  // This will catch if an invalid layout value is passed in and render the default layout if so.
+  render() {
+    try {
+      return this.renderLayout();
+    } catch (error) {
+      // failed to get the defined layout
+      console.error('Failed to get the defined layout - using the default layout', error); // eslint-disable-line no-console
+
+      // fallback to the default layout
+      return this.getLayout('default');
+    }
+  }
+}
+
+AuroElement.register();

package/components/menu/demo/api.html

@@ -16,18 +16,24 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Auro Web Component Generator | auro-menu 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/auro-classic/CSSCustomProperties.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
+    <title>Auro Web Component Demo | auro-menu</title>
+
+    <!-- Prism.js Stylesheet -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
+
+    <!-- Legacy reference is still needed to support auro-menu's use of legacy token values at this time -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
+
+    <!-- Design Token Alaska Theme -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
+    
+    <!-- Webcore Stylesheet Alaska Theme -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
+    
+    <!-- Demo Specific Styles -->
     <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" />
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
-  </head>
+</head>
   <body class="auro-markdown">
     <main></main>
 
@@ -47,6 +53,7 @@
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-input@latest/dist/auro-input__bundled.js" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-loader@latest/dist/auro-loader__bundled.js" type="module"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-radio/+esm"></script>
     <script type="module" data-demo-script="true">
       import { initExamples } from "./api.min.js"
       initExamples();

package/components/menu/demo/api.md

@@ -11,13 +11,14 @@ The auro-menu element provides users a way to select from a list of options.
 |-------------------------|------------------|-----------------------------------|-------------|--------------------------------------------------|
 | [disabled](#disabled)              | `disabled`       | `boolean`                         |             | When true, the entire menu and all options are disabled; |
 | [hasLoadingPlaceholder](#hasLoadingPlaceholder) |                  | `boolean`                         |             | Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state. |
+| [layout](#layout)                |                  | `string`                          |             |                                                  |
 | [loading](#loading)               | `loading`        | `boolean`                         | false       | When true, displays a loading state using the loadingIcon and loadingText slots if provided. |
 | [matchWord](#matchWord)             | `matchword`      | `string`                          | "undefined" | Specifies a string used to highlight matched string parts in options. |
 | [multiSelect](#multiSelect)           | `multiselect`    | `boolean`                         | false       | When true, the selected option can be multiple options. |
 | [noCheckmark](#noCheckmark)           | `nocheckmark`    | `boolean`                         | false       | When true, selected option will not show the checkmark. |
 | [optionActive](#optionActive)          | `optionactive`   | `object`                          | "undefined" | Specifies the current active menuOption.         |
 | [optionSelected](#optionSelected)        | `optionSelected` | `HTMLElement\|Array<HTMLElement>` | "undefined" | An array of currently selected menu options, type `HTMLElement` by default. In multi-select mode, `optionSelected` is an array of HTML elements. |
-| [value](#value)                 | `value`          | `String\|Array<string>`           | "undefined" | Value selected for the menu, type `string` by default. In multi-select mode, `value` is an array of strings. |
+| [value](#value)                 | `value`          | `string`                          | "undefined" | Value selected for the component.                |
 
 ## Methods
 
@@ -60,6 +61,7 @@ The auro-menu element provides users a way to define a menu option.
 |---------------|---------------|-----------|---------|--------------------------------------------------|
 | [disabled](#disabled)    | `disabled`    | `Boolean` | false   | When true specifies that the menuoption is disabled. |
 | [iconTag](#iconTag)     |               | `string`  |         |                                                  |
+| [layout](#layout)      |               | `string`  |         |                                                  |
 | [nocheckmark](#nocheckmark) | `nocheckmark` | `boolean` | false   |                                                  |
 | [selected](#selected)    | `selected`    | `Boolean` | false   | Specifies that an option is selected.            |
 | [value](#value)       | `value`       | `String`  |         | Specifies the value to be sent to a server.      |
@@ -936,19 +938,74 @@ export function auroMenuResetExample() {
 
 The component may be restyled using the following code sample and changing the values of the following token(s).
 
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
-<!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/default/tokens.scss) -->
+<!-- The below code snippet is automatically added from ./../src/styles/default/tokens.scss -->
 
 ```scss
-@import "@aurodesignsystem/design-tokens/dist/alaska/SCSSVariables--alaska";
+@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
 
 :host {
-  --ds-auro-menu-divider-color: var(--ds-basic-color-border-divider, #{$ds-basic-color-border-divider});
-  --ds-auro-menu-loader-color: var(--ds-basic-color-brand-primary, #{$ds-basic-color-brand-primary});
-  --ds-auro-menu-loader-text-color: var(--ds-basic-color-texticon-default, #{$ds-basic-color-texticon-default});
+  --ds-auro-menu-divider-color: var(--ds-basic-color-border-divider, #{v.$ds-basic-color-border-divider});
+  --ds-auro-menu-loader-color: var(--ds-basic-color-brand-primary, #{v.$ds-basic-color-brand-primary});
+  --ds-auro-menu-loader-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
   --ds-auro-menuoption-container-color: transparent;
+  --ds-auro-menuoption-container-border-color: var(--ds-auro-menuoption-container-color);
   --ds-auro-menuoption-icon-color: transparent;
-  --ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-default, #{$ds-basic-color-texticon-default});
+  --ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
 }
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/customColor.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/customColor.html -->
+  <style>
+    #customColorMenu auro-menuoption[selected] {
+      --ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-subtle);
+      --ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-default);
+    }
+    #customColorMenu auro-menuoption:hover {
+      --ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted);
+    }
+    #customColorMenu auro-menuoption:focus {
+      --ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand);
+    }
+
+  </style>
+  <auro-menu id="customColorMenu">
+    <auro-menuoption value="stops">Stops</auro-menuoption>
+    <auro-menuoption value="price">Price</auro-menuoption>
+    <auro-menuoption value="duration">Duration</auro-menuoption>
+    <auro-menuoption value="departure">Departure</auro-menuoption>
+    <auro-menuoption value="arrival">Arrival</auro-menuoption>
+  </auro-menu>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/customColor.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/customColor.html -->
+
+```html
+<style>
+  #customColorMenu auro-menuoption[selected] {
+    --ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-subtle);
+    --ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-default);
+  }
+  #customColorMenu auro-menuoption:hover {
+    --ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted);
+  }
+  #customColorMenu auro-menuoption:focus {
+    --ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand);
+  }
+
+</style>
+<auro-menu id="customColorMenu">
+  <auro-menuoption value="stops">Stops</auro-menuoption>
+  <auro-menuoption value="price">Price</auro-menuoption>
+  <auro-menuoption value="duration">Duration</auro-menuoption>
+  <auro-menuoption value="departure">Departure</auro-menuoption>
+  <auro-menuoption value="arrival">Arrival</auro-menuoption>
+</auro-menu>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>