@aurodesignsystem/auro-formkit 2.0.0-beta.4 → 2.0.0-beta.6

package/components/combobox/node_modules/@aurodesignsystem/webcorestylesheets/README.md

@@ -0,0 +1,109 @@
+# WC Style Sheets
+
+WC Style Sheets(WCSS) is a responsive, mobile-first collection of styles and tools designed to make it quick and simple for developers to create web experiences using the Auro Design Language.
+
+## What's included
+
+This repository is a library of core level styles, functions, and mixins that can be used for consistent front-end UI development. This will include full descriptions of CSS selectors, mixins and any other supporting functions or tools.
+
+## Documentation
+
+Please see the [documentation site](https://alaskaairlines.github.io/WebCoreStyleSheets/) for all information related to WC Style Sheets.
+
+## Design tokens and legacy component support
+
+Upgrading to WCSS `v5.x` requires `@aurodesignsystem/design-tokens@4.x`.
+
+When upgrading your project it may be required to also retain `@aurodesignsystem/design-tokens@v3.15.5` in order to support Auro custom elements have not been updated to support the [new design token naming convention](https://github.com/AlaskaAirlines/AuroDesignTokens/issues/118).
+
+Please also see Auro design tokens [migration from 3.x to 4.x](https://github.com/AlaskaAirlines/aurodesignTokens/#migration-from-3x-to-4x) for additional information.
+
+## Install
+
+[![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/webcorestylesheets/testPublish.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/webcorestylesheets/actions/workflows/testPublish.yml)
+[![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/webcorestylesheets.svg?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/webcorestyleSheets)
+[![License](https://img.shields.io/npm/l/@aurodesignsystem/webcorestylesheets.svg?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)
+[![issues](https://img.shields.io/github/issues-raw/AlaskaAirlines/WebCoreStyleSheets?style=for-the-badge)](https://github.com/AlaskaAirlines/WebCoreStyleSheets/issues)
+![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge)
+
+### Pre-processed bundled resources
+
+At a limited scale, some files have been pre-processed to CSS so that it can be delivered via CDN and used in environments where this rendered resource is required.
+
+**API Note**: First supporting version `v2.9.0`
+
+**NOTICE!** Use `@latest` **at your own risk**. This will not restrict updates and will allow instant access to **MAJOR** releases that will contain **BREAKING CHANGES**. You have been warned!
+
+| resource | CDN URL |
+|---|---
+| essentials.scss<br>fonts.scss|[https://cdn.jsdelivr.net/npm/@aurodesignsystem/<br>webcorestylesheets@latest/dist/bundled/essentials.css](https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials.css)|
+| focus-visible.scss<br>essentials.scss<br>fonts.scss|[https://cdn.jsdelivr.net/npm/@aurodesignsystem/<br>webcorestylesheets@latest/dist/bundled/essentials+fv.css](https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials+fv.css)|
+
+### Using the files in Sass from npm resource
+
+```bash
+$ npm i @aurodesignsystem/webcorestylesheets
+```
+
+There are no core files to import, rather WCSS is an à la carte solution allowing for users to import what they want and when they want it. In most cases you can simply import the Sass file as illustrated below:
+
+```scss
+@import "./../node_modules/@aurodesignsystem/webcorestylesheets/src/ ... "
+```
+
+### Installing the essentials
+
+While WCSS is an à la carte solution, there are things that should be considered when adding WCSS to your project. For example, if the project has little or no legacy CSS, it is suggested to set the following foundation, in this order:
+
+```scss
+// baseline design tokens as Sass variables
+@import "./../node_modules/@aurodesignsystem/design-tokens/src/tokens/SCSSVariables";
+
+// globally add the mixins so that any future reference will be addressed
+@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/breakpoints';
+
+// it's typically best practice to load the @font-face rules prior to any reference of the custom web fonts
+@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/fonts';
+
+// set a baseline browser normalize
+@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/normalize';
+
+// opt-in support for `:focus-visible` accessibility feature
+@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/focus-visible';
+
+// essentials setup baseline primitive selectors for any UI development
+@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/essentials';
+```
+
+For an example of setting up a master file that imports all of WCSS's resources, see the [styleTest.scss](https://raw.githubusercontent.com/AlaskaAirlines/WebCoreStyleSheets/master/tests/styleTest.scss) in the project.
+
+### Tokens Dependency
+
+WCSS uses Sass and has a dependency on the `SCSSVariables.scss` file from [Design Tokens](https://github.com/AlaskaAirlines/AuroDesignTokens) package. This reference needs to be imported before any reference of a WCSS partial.
+
+```scss
+@import "./../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
+@import "./../node_modules/@aurodesignsystem/webcorestylesheets/src/ ... ";
+```
+
+### Web font dependency
+
+WC style sheets has full support for Auro's web fonts, ASCircular. When importing the following code, this will import the (3) Auro web fonts that are loaded from our CDN for `light`, `medium`, and `book` weights.
+
+```scss
+@import "./../node_modules/@aurodesignsystem/webcorestylesheets/src/fonts"
+```
+
+Any references to `ASCircularWeb-Book`, `ASCircularWeb-Medium`, or `ASCircularWeb-Light` would be considered redundant and you should remove those legacy references.
+
+Any references to `ASCircularWeb-Bold` or any other `ASCircularWeb-` style font family is not supported and these references are considered fully deprecated.
+
+## Development
+
+To develop against WCSS run both `npm run watch` and `npm run serve` in separate terminals.
+
+The `watch` command will run a Sass linter, process a test file from Sass to CSS and run a post CSS linter. This will ensure the quality of all new Sass added to the repo.
+
+If additional selectors or scenarios are needed, please update the `./scripts/testBuild.scss` file to test your code.
+
+Running the `serve` command will open the Sassdoc view. Please review all changes as Sassdoc produces all documentation.

package/components/combobox/node_modules/@aurodesignsystem/webcorestylesheets/dist/auroElement/README.md

@@ -0,0 +1,86 @@
+# What is auroElement?
+
+The concept of auroElement is that it is an extension of the base litElement class. When your component imports auroElement you are inheriting new base functionality.
+
+## Accessibility
+
+When building a component with the auroElement base class you will inherit a simple API for accessibility support.
+
+| Property         | Attribute        | Type      | Description                                      |
+|------------------|------------------|-----------|--------------------------------------------------|
+| `hidden`         | `hidden`         | `Boolean` | If present, the component will be hidden both visually and from screen readers |
+| `hiddenAudible`  | `hiddenAudible`  | `Boolean` | If present, the component will be hidden from screen readers, but seen visually |
+| `hiddenVisually` | `hiddenVisually` | `Boolean` | If present, the component will be hidden visually, but still read by screen readers |
+
+### Install
+
+The auroElement.js is already included with the base setup of a web component within the WCSS package. Installing requires a few modifications to the structure of the component.
+
+Find the following
+
+```js
+import { LitElement, html, css } from "lit";
+```
+
+Update to the following
+
+```js
+import { html, css } from "lit";
+import AuroElement from '@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement.mjs';
+```
+
+**Note:** The legacy `/auroElement.js` is deprecated and will no longer be supported. Any reference to this file should be updated to point to `/auroElement.mjs`.
+
+### Add supporting styles
+
+To complete the install, be sure to add the following to the `./src/styles.scss` file
+
+```scss
+@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement";
+```
+
+### Update class
+
+In the component's JS file, find the following
+
+```js
+class [Namespace][Name] extends LitElement { ... }
+```
+
+Update to
+
+```js
+class [Namespace][Name] extends AuroElement { ... }
+```
+
+### Update properties
+
+In the component's class, find the following
+
+```js
+static get properties() {
+  return {
+
+  };
+}
+```
+
+And update to include the `super` keyword is used to access and call functions on an object's parent.
+
+```js
+static get properties() {
+  return {
+    ...super.properties,
+  };
+}
+```
+
+### Update HTML template
+
+Within the auroElement will be the `hideAudible()` method. In order to make full use of auroElement's accessibility features, be sure to add the following to the HTML element(s) you wish to hide from screen readers.
+
+```html
+aria-hidden="${this.hideAudible(this.hiddenAudible)}"
+```
+
+This completes the install of auroElement and all its supported features.

package/components/combobox/node_modules/@aurodesignsystem/webcorestylesheets/dist/auroElement/_auroElement.scss

@@ -0,0 +1,45 @@
+// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+@import '../../src/utilityClasses/displayProperties';
+
+/// Component a11y support for `:host` </br>
+/// For use with auroElement.js base class and web component development
+///
+/// @group Component-support
+/// @example scss - Default selector
+///   :host {}
+///
+/// @example scss - import mixin file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement";
+:host {
+  @extend .util_displayBlock;
+}
+
+/// Component a11y support for `:host` selector with `hidden` attribute </br>
+/// For use with auroElement.js base class and web component development
+///
+/// @group Component-support
+/// @example scss - Default selector
+///   :host([hidden]:not(:focus):not(:active)) {}
+///
+/// @example scss - import mixin file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement";
+:host([hidden]:not(:focus):not(:active)) {
+  @extend .util_displayHidden;
+}
+
+/// Component a11y support for `:host` selector with `hiddenVisually` attribute </br>
+/// For use with auroElement.js base class and web component development
+///
+/// @group Component-support
+/// @example scss - Default selector
+///   :host([hiddenVisually]:not(:focus):not(:active)) {}
+///
+/// @example scss - import mixin file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement";
+:host([hiddenVisually]:not(:focus):not(:active)) {
+  @extend .util_displayHiddenVisually;
+}

package/components/combobox/node_modules/@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement.js

@@ -0,0 +1,38 @@
+// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+import { LitElement } from "lit";
+
+/**
+ * @attr {Boolean} hidden - If present, the component will be hidden both visually and from screen readers
+ * @attr {Boolean} hiddenVisually - If present, the component will be hidden visually, but still read by screen readers
+ * @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
+ */
+
+export default class AuroElement extends LitElement {
+
+  // function to define props used within the scope of this component
+  static get properties() {
+    return {
+      hidden:         { type: Boolean,
+                        reflect: true },
+      hiddenVisually: { type: Boolean,
+                        reflect: true },
+      hiddenAudible:  { type: Boolean,
+                        reflect: true },
+    };
+  }
+
+  /**
+   * @private Function that determines state of aria-hidden
+   */
+  hideAudible(value) {
+    if (value) {
+      return 'true'
+    }
+
+    return 'false'
+  }
+}

package/components/combobox/node_modules/@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement.mjs

@@ -0,0 +1,38 @@
+// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+import { LitElement } from "lit";
+
+/**
+ * @attr {Boolean} hidden - If present, the component will be hidden both visually and from screen readers
+ * @attr {Boolean} hiddenVisually - If present, the component will be hidden visually, but still read by screen readers
+ * @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
+ */
+
+export default class AuroElement extends LitElement {
+
+  // function to define props used within the scope of this component
+  static get properties() {
+    return {
+      hidden:         { type: Boolean,
+                        reflect: true },
+      hiddenVisually: { type: Boolean,
+                        reflect: true },
+      hiddenAudible:  { type: Boolean,
+                        reflect: true },
+    };
+  }
+
+  /**
+   * @private Function that determines state of aria-hidden
+   */
+  hideAudible(value) {
+    if (value) {
+      return 'true'
+    }
+
+    return 'false'
+  }
+}

package/components/combobox/node_modules/@aurodesignsystem/webcorestylesheets/dist/bundled/essentials+fv.css

@@ -0,0 +1,110 @@
+/*
+  Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+  See LICENSE in the project root for license information.
+*/
+/* --------------------------------------------------------------------- */
+/*
+  This file is reserved for CDN consumption of web components
+  and not intended to be used with standard dynamic projects.
+*/
+*:focus-visible {
+  outline: 1px solid var(--ds-color-border-ui-focus-default, #2c67b5);
+}
+
+:focus:not(:focus-visible) {
+  outline: 3px solid transparent;
+}
+
+html {
+  box-sizing: border-box;
+  font-size: var(--ds-text-body-size-default, 1rem);
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+}
+
+body,
+.baseType {
+  margin: 0;
+  color: var(--ds-color-text-primary-default, #2a2a2a);
+  font-family: var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);
+  font-variant-ligatures: no-common-ligatures;
+  font-size: var(--ds-text-body-size-default, 1rem);
+  font-weight: var(--ds-text-body-default-weight, 500);
+  line-height: var(--ds-text-body-height-default, 1.5rem);
+}
+
+.baseParagraph {
+  margin: 0 0 1rem;
+  line-height: var(--ds-text-body-height-default, 1.5rem);
+}
+.baseParagraph .hyperlink {
+  text-decoration: underline;
+}
+
+.hyperlink {
+  text-decoration: underline;
+  color: var(--ds-color-text-ui-default-default, #2c67b5);
+}
+.hyperlink:visited {
+  color: var(--ds-color-text-ui-default-default, #2c67b5);
+}
+.hyperlink--nav {
+  display: block;
+  text-decoration: none;
+}
+.hyperlink--nav:not(.is-touching):hover {
+  text-decoration: underline !important;
+}
+.hyperlink--ondark {
+  color: var(--ds-color-text-ui-default-inverse, #56bbde);
+}
+.hyperlink--ondark:not(.is-touching):hover {
+  color: var(--ds-color-text-ui-hover-inverse, #a8e9f7);
+}
+.hyperlink--ondark:visited {
+  color: var(--ds-color-text-ui-default-inverse, #56bbde);
+}
+.hyperlink:not(.is-touching):hover {
+  text-decoration: none;
+  color: var(--ds-color-text-ui-hover-default, #193d73);
+}
+
+img {
+  max-width: 100%;
+}
+
+small,
+.type--small {
+  font-size: var(--ds-text-body-size-xs, 0.75rem);
+  line-height: var(--ds-text-body-height-xs, 1rem);
+}
+
+/* stylelint-disable-line scss/dollar-variable-first-in-block */
+.fineprint {
+  font-family: var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);
+  font-size: var(--ds-text-body-size-xs, 0.75rem);
+  line-height: var(--ds-text-body-height-xs, 1rem);
+  color: var(--ds-color-text-secondary-default, #525252);
+}
+
+@font-face {
+  font-family: "AS Circular";
+  font-weight: var(--ds-text-heading-display-weight, 100);
+  font-style: normal;
+  font-display: fallback;
+  src: url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/bltd55b385b9432ca51/ASCircularWeb-Light?environment=production") format("woff2"), url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/blt1566a6d54c0bf457/ASCircularWeb-Light?environment=production") format("woff");
+}
+@font-face {
+  font-family: "AS Circular";
+  font-weight: var(--ds-text-heading-medium-weight, 300);
+  font-style: normal;
+  font-display: fallback;
+  src: url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/bltc48385a5d7dd0f20/ASCircularWeb-Medium?environment=production") format("woff2"), url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/bltf30c93842722e935/ASCircularWeb-Medium?environment=production") format("woff");
+}
+@font-face {
+  font-family: "AS Circular";
+  font-weight: var(--ds-text-body-default-weight, 500);
+  font-style: normal;
+  font-display: fallback;
+  src: url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/blt3b851fb0e0de3833/ASCircularWeb-Book?environment=production") format("woff2"), url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/blt8b440e82e9793058/ASCircularWeb-Book?environment=production") format("woff");
+}

package/components/combobox/node_modules/@aurodesignsystem/webcorestylesheets/dist/bundled/essentials.css

@@ -0,0 +1,106 @@
+/*
+  Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+  See LICENSE in the project root for license information.
+*/
+/* --------------------------------------------------------------------- */
+/*
+  This file is reserved for CDN consumption of web components
+  and not intended to be used with standard dynamic projects.
+*/
+:focus:not(:focus-visible) {
+  outline: 3px solid transparent;
+}
+
+html {
+  box-sizing: border-box;
+  font-size: var(--ds-text-body-size-default, 1rem);
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+}
+
+body,
+.baseType {
+  margin: 0;
+  color: var(--ds-color-text-primary-default, #2a2a2a);
+  font-family: var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);
+  font-variant-ligatures: no-common-ligatures;
+  font-size: var(--ds-text-body-size-default, 1rem);
+  font-weight: var(--ds-text-body-default-weight, 500);
+  line-height: var(--ds-text-body-height-default, 1.5rem);
+}
+
+.baseParagraph {
+  margin: 0 0 1rem;
+  line-height: var(--ds-text-body-height-default, 1.5rem);
+}
+.baseParagraph .hyperlink {
+  text-decoration: underline;
+}
+
+.hyperlink {
+  text-decoration: underline;
+  color: var(--ds-color-text-ui-default-default, #2c67b5);
+}
+.hyperlink:visited {
+  color: var(--ds-color-text-ui-default-default, #2c67b5);
+}
+.hyperlink--nav {
+  display: block;
+  text-decoration: none;
+}
+.hyperlink--nav:not(.is-touching):hover {
+  text-decoration: underline !important;
+}
+.hyperlink--ondark {
+  color: var(--ds-color-text-ui-default-inverse, #56bbde);
+}
+.hyperlink--ondark:not(.is-touching):hover {
+  color: var(--ds-color-text-ui-hover-inverse, #a8e9f7);
+}
+.hyperlink--ondark:visited {
+  color: var(--ds-color-text-ui-default-inverse, #56bbde);
+}
+.hyperlink:not(.is-touching):hover {
+  text-decoration: none;
+  color: var(--ds-color-text-ui-hover-default, #193d73);
+}
+
+img {
+  max-width: 100%;
+}
+
+small,
+.type--small {
+  font-size: var(--ds-text-body-size-xs, 0.75rem);
+  line-height: var(--ds-text-body-height-xs, 1rem);
+}
+
+/* stylelint-disable-line scss/dollar-variable-first-in-block */
+.fineprint {
+  font-family: var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);
+  font-size: var(--ds-text-body-size-xs, 0.75rem);
+  line-height: var(--ds-text-body-height-xs, 1rem);
+  color: var(--ds-color-text-secondary-default, #525252);
+}
+
+@font-face {
+  font-family: "AS Circular";
+  font-weight: var(--ds-text-heading-display-weight, 100);
+  font-style: normal;
+  font-display: fallback;
+  src: url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/bltd55b385b9432ca51/ASCircularWeb-Light?environment=production") format("woff2"), url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/blt1566a6d54c0bf457/ASCircularWeb-Light?environment=production") format("woff");
+}
+@font-face {
+  font-family: "AS Circular";
+  font-weight: var(--ds-text-heading-medium-weight, 300);
+  font-style: normal;
+  font-display: fallback;
+  src: url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/bltc48385a5d7dd0f20/ASCircularWeb-Medium?environment=production") format("woff2"), url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/bltf30c93842722e935/ASCircularWeb-Medium?environment=production") format("woff");
+}
+@font-face {
+  font-family: "AS Circular";
+  font-weight: var(--ds-text-body-default-weight, 500);
+  font-style: normal;
+  font-display: fallback;
+  src: url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/blt3b851fb0e0de3833/ASCircularWeb-Book?environment=production") format("woff2"), url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/blt8b440e82e9793058/ASCircularWeb-Book?environment=production") format("woff");
+}

package/components/combobox/node_modules/@aurodesignsystem/webcorestylesheets/dist/demoWrapper.css

@@ -0,0 +1,8 @@
+body {
+  padding: var(--ds-size-400, 2rem);
+}
+
+main {
+  margin: 0 auto;
+  max-width: 64rem;
+}