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

package/components/combobox/node_modules/@aurodesignsystem/webcorestylesheets/src/_utilityClasses.scss

@@ -0,0 +1,22 @@
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+// Set element display: none on mobile devices and tablets
+@import 'utilityClasses/responsive';
+
+// Functional selectors for the use of defining different display properties
+@import 'utilityClasses/displayProperties';
+
+// Functional selectors for the use of defining different font style properties
+@import 'utilityClasses/fontStyles';
+
+// Functional selectors for the use of defining different layout properties
+@import 'utilityClasses/layoutProperties';
+
+// Functional selectors for the use of defining different list properties
+@import 'utilityClasses/listProperties';
+
+// Functional selectors for the use of defining different inset properties
+@import 'utilityClasses/inset';

package/components/combobox/node_modules/@aurodesignsystem/webcorestylesheets/src/bundled/essentials+fv.scss

@@ -0,0 +1,19 @@
+/*
+  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.
+*/
+
+// Import Sass variables
+@import '../../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+
+// Import minimum essential files - focus-visible MUST be loaded BEFORE essentials.
+@import '../focus-visible';
+@import '../essentials';
+@import '../fonts';

package/components/combobox/node_modules/@aurodesignsystem/webcorestylesheets/src/bundled/essentials.scss

@@ -0,0 +1,18 @@
+/*
+  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.
+*/
+
+// Import Sass variables
+@import '../../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+
+// Import minimum essential files
+@import '../essentials';
+@import '../fonts';

package/components/combobox/node_modules/@aurodesignsystem/webcorestylesheets/src/componentSupport/_anchor-roleButton.scss

@@ -0,0 +1,32 @@
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+@import '../libSupport/deprecated';
+@import '../libSupport/manageScope';
+
+// Wrapper class around anchor-roleButton utility mixin
+
+// This selector is NOT auto included with any other web code style sheet.
+// If the auro_roleButton selector is required, it is to be individually included.
+
+@import '../utilityMixins/anchor-roleButton';
+
+/// `.auro_roleButton` is a utility class to support the UI of a standard html hyperlink using the attribute `role="button"`. This utility will present the UI to mimic the UI of the auro-hyperlink component supporting the same attribute.
+///
+/// [See](/#utility-mixins-mixin-auro_anchorButton) for more information
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` options.
+/// @group Utility-auro
+/// @example scss - Default selector(s)
+///   .auro_roleButton {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .auro_roleButton {}
+///
+/// @example scss - import selector file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/componentSupport/anchor-roleButton";
+#{$scope}.auro_roleButton {
+  @include auro_anchorButton(sass, noncomponent);
+}

package/components/combobox/node_modules/@aurodesignsystem/webcorestylesheets/src/componentSupport/_anchor-roleTab.scss

@@ -0,0 +1,26 @@
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+@import '../libSupport/deprecated';
+@import '../libSupport/manageScope';
+@import '../utilityMixins/anchor-roleTab';
+
+/// `auro_roleTab` is a helper class to support the UI of a hyperlink using `role="tab"`
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` options.
+/// @group Utility-auro
+/// @example scss - Default selector(s)
+///   .auro_roleTab {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .auro_roleTab {}
+///
+/// @example scss - import selector file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/componentSupport/anchor-roleTab";
+#{$scope}.auro_roleTab {
+  @include auro_anchorTab(sass, noncomponent);
+
+  margin-right: calc(#{$ds-size-50} * -1);
+}

package/components/combobox/node_modules/@aurodesignsystem/webcorestylesheets/src/componentSupport/_containedButtons.scss

@@ -0,0 +1,59 @@
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+@import '../libSupport/deprecated';
+@import '../libSupport/manageScope';
+
+// Wrapper class around the use of ods-hyperlink role=button and ods-button.
+
+// This selector is NOT auto included with any other web core style sheet.
+
+// sass-lint:disable no-mergeable-selectors
+/* stylelint-disable selector-type-no-unknown */
+
+/// `.auro_containedButtons` is a helper class to support the use of multiple buttons and/or the use of ods-hyperlink `role="button"` in a parent container.
+///
+/// `.auro_containedButtons` has a dependency on WCSS breakpoints. See example below to import dependency.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` options.
+///
+/// Place selector on outer parent element.
+/// @group utility-auro
+/// @example scss - Default selector(s)
+///   .auro_containedButtons {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .auro_containedButtons {}
+///
+/// @example scss - import selector file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/componentSupport/containedButtons";
+/// @example scss - import dependency file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";
+
+#{$scope}.auro_containedButtons {
+  display: flex;
+  flex-direction: column;
+
+  > * {
+    margin-bottom: var(--ds-text-body-size-default, $ds-text-body-size-default);
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  @include auro_breakpoint($min: $ds-grid-breakpoint-md) {
+    flex-direction: row;
+
+    > * {
+      margin-bottom: 0;
+      margin-left: var(--ds-text-body-size-default, $ds-text-body-size-default);
+
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+  }
+}

package/components/combobox/node_modules/@aurodesignsystem/webcorestylesheets/src/componentSupport/_table.scss

@@ -0,0 +1,54 @@
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+/// CSS selectors for easy reproduction of Auro Table UI.
+///
+/// Defaults are set by baseline Design Tokens
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` options.
+/// @group utility-auro
+/// @example scss - import selector file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/componentSupport/table";
+
+#{$scope}.auro_table {
+  display: block;
+  overflow: scroll;
+
+  width: auto;
+  margin-bottom: var(--ds-size-400, $ds-size-400);
+
+  border-spacing: var(--ds-size-150, $ds-size-150);
+  border-collapse: collapse;
+
+  font-weight: var(--ds-text-heading-display-weight, $ds-text-heading-display-weight);
+
+  tr {
+    &:nth-child(even) {
+      background-color: var(--ds-color-container-secondary-default, $ds-color-container-secondary-default);
+    }
+  }
+
+  th {
+    text-align: left;
+
+    font-weight: var(--ds-text-heading-default-weight, $ds-text-heading-default-weight);
+  }
+
+  @include auro_breakpoint($min: $ds-grid-breakpoint-sm) {
+    display: table;
+
+    width: 100%;
+  }
+
+  thead {
+    border-collapse: collapse;
+    border-bottom: 1px solid var(--ds-color-border-tertiary-default, $ds-color-border-tertiary-default);
+  }
+
+  th,
+  td {
+    padding: var(--ds-size-200, $ds-size-200);
+  }
+}

package/components/combobox/node_modules/@aurodesignsystem/webcorestylesheets/src/componentSupport/_tablist.scss

@@ -0,0 +1,37 @@
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+@import '../libSupport/deprecated';
+@import '../libSupport/manageScope';
+
+/// `.auro_tablist` is a helper class to support the UI of a hyperlink using `role="tab"`
+///
+/// Place selector on outer `div` or `section` container with the `role="tablist"` also applied.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` options.
+/// @group utility-auro
+/// @example scss - import selector file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/componentSupport/tablist";
+
+#{$scope}.auro_tablist {
+  @include auro_breakpoint($min: $ds-grid-breakpoint-sm) {
+    overflow-y: unset;
+
+    white-space: unset;
+  }
+
+  overflow-y: scroll;
+
+  height: calc(#{$ds-size-600} + 1px);
+  margin-bottom: var(--ds-size-200, $ds-size-200);
+
+  white-space: nowrap;
+
+  border-width: 0 0 1px;
+  border-style: solid;
+  border-color: var(--ds-color-border-primary-default, $ds-color-border-primary-default);
+
+  line-height: var(--ds-size-600, $ds-size-600);
+}

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

@@ -0,0 +1,5 @@
+# Custom element demo styles
+
+The resource in this directory is specifically to be used for the consistent rendering of Auro custom element demo pages between the demo directory of an element repo and the demo pages of the Auro docsite.
+
+Using this CSS file outside of the context of a custom element demo and the Auro doc site are unintended and user assumes all risks.

package/components/combobox/node_modules/@aurodesignsystem/webcorestylesheets/src/elementDemoStyles/demoWrapper.scss

@@ -0,0 +1,18 @@
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// Styles in this document are standardized are NOT to be edited.
+// All styles for the custom element are located in the ./src directory.
+
+// matches max-width of AS.com and Auro docsite width specs
+
+@import './../../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables.scss';
+
+body {
+  padding: var(--ds-size-400, $ds-size-400);
+}
+
+main {
+  margin: 0 auto;
+  max-width: 64rem;
+}

package/components/combobox/node_modules/@aurodesignsystem/webcorestylesheets/src/elementDemoStyles/elementDemoStyles.scss

@@ -0,0 +1,123 @@
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// Styles in this document are standardized are NOT to be edited.
+// All styles for the custom element are located in the ./src directory.
+
+// ----------------------- DO NOT EDIT -----------------------------
+@import './../../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+
+@import './../breakpoints';
+@import './../grids';
+
+// Creates baseline output in CSS
+@import './../fonts';
+@import './../normalize';
+@import './../headings';
+@import './../blockquote';
+@import "./../componentSupport/table";
+$paragraph: true;
+@import './../focus-visible';
+@import './../essentials';
+
+/* stylelint-disable selector-type-no-unknown */
+
+// Custom styles per demo pages
+// 1:1 match to ./src/sass/demo.scss file in docsite
+.auro-markdown {
+  h1,
+  h2,
+  h3 {
+    @extend .heading;
+  }
+
+  h1 {
+    @extend .heading--display;
+  }
+
+  h2 {
+    @extend .heading--700;
+  }
+
+  h3 {
+    @extend .heading--600;
+  }
+
+  h4 {
+    @extend .heading--500;
+  }
+
+  a {
+    @extend .hyperlink;
+  }
+
+  p {
+    @extend p;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  table {
+    @extend .auro_table;
+  }
+}
+
+// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
+
+:not(pre) > code[class*="language-"], pre[class*="language-"] {
+  background: var(--ds-color-container-secondary-default, $ds-color-container-secondary-default);
+}
+
+// !important because that libraries that inline CSS SUCK!
+pre  {
+  background: var(--ds-color-container-secondary-default, $ds-color-container-secondary-default) !important;
+  border: unset !important;
+  margin-bottom: var(--ds-size-300, $ds-size-300) !important;
+  padding-left: var(--ds-size-150, $ds-size-150) !important;
+  padding-top: var(--ds-size-200, $ds-size-200) !important;
+  padding-bottom: var(--ds-size-200, $ds-size-200) !important;
+
+  code {
+    font-size: .85rem !important;
+  }
+}
+
+auro-accordion {
+  pre {
+    background: none !important;
+    margin-top: 0 !important;
+    margin-bottom: 1rem !important;
+    padding: 0 !important;
+  }
+}
+
+auro-accordion + .exampleWrapper,
+auro-accordion + p {
+  margin-top: 2rem !important;
+}
+
+code[class*="language-"], pre[class*="language-"] {
+  font-family: monospace;
+}
+
+code:not(.html):not(.css):not(.js) {
+  color: var(--ds-color-utility-pink-default, $ds-color-utility-pink-default);
+}
+
+// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
+
+.exampleWrapper {
+  $stripe: var(--ds-color-container-subtle-default, $ds-color-container-subtle-default);
+  $background: var(--ds-color-container-primary-default, $ds-color-container-primary-default);
+
+  background: repeating-linear-gradient(45deg, $stripe, $stripe 10px, $background 10px, $background 20px);
+}
+
+.exampleWrapper--ondark {
+  $stripe: var(--ds-color-background-primary-100-inverse, $ds-color-background-primary-100-inverse);
+  $background: var(--ds-color-background-primary-200-inverse, $ds-color-background-primary-200-inverse);
+
+  background: repeating-linear-gradient(45deg, $stripe, $stripe 10px, $background 10px, $background 20px);
+}

package/components/combobox/node_modules/@aurodesignsystem/webcorestylesheets/src/libSupport/_deprecated.scss

@@ -0,0 +1,16 @@
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+// sass-lint:disable no-warn
+
+// Internal support mixin, not designed for public use.
+
+// @example scss - Using mixin with default values;
+//  @import './libSupport/deprecated';
+//  @include deprecated('@mixin auro_transition. No replacement. Discontinue use.');
+
+@mixin deprecated($string) {
+  @warn 'Deprecated: #{$string} Please see https://alaskaairlines.github.io/WebCoreStyleSheets/ for more information.';
+}

package/components/combobox/node_modules/@aurodesignsystem/webcorestylesheets/src/libSupport/_manageScope.scss

@@ -0,0 +1,42 @@
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+/// Variables to determine if `$scope` is to be displayed.
+///
+/// Set `true` value prior to importing file if scope selector output file is wanted
+///
+/// @group scope-prefix
+/// @type boolean
+/// @example scss - import file
+///   $scope: true;
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/ ...
+/// @example scss - return example
+///   .auro [selector] { ... }
+
+$scope: null !default;
+
+/// Variables to determine if $prefix is to be displayed
+///
+/// Set `true` value prior to importing file if prefix selector output file is wanted
+///
+/// @group scope-prefix
+/// @type boolean
+/// @example scss - import file
+///   $prefix: true;
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/ ...
+/// @example scss - return example
+///   .auro_[selector] { ... }
+
+$prefix: null !default;
+$sym: null !default;
+
+@if $scope {
+  $scope: '.auro ';
+}
+
+@if $prefix {
+  $prefix: 'auro_';
+  $sym: '.';
+}

package/components/combobox/node_modules/@aurodesignsystem/webcorestylesheets/src/utilityClasses/_displayProperties.scss

@@ -0,0 +1,142 @@
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+@import '../libSupport/manageScope';
+@import '../utilityVariables/important';
+
+/// Utility class to display elements `inline`
+///
+/// [Manage](/#utility-variable-important) `!important` flag.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group Utility-display
+/// @example scss - Default selector(s)
+///   .util_displayInline {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .util_displayInline {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_util_displayInline {}
+///
+/// @example scss - import mixin file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties";
+#{$scope}.#{$prefix}util_displayInline {
+  display: inline $important;
+}
+
+/// Utility class to display elements `inline-block`
+///
+/// [Manage](/#utility-variable-important) `!important` flag.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group Utility-display
+/// @example scss - Default selector(s)
+///   .util_displayInline {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .util_displayInline {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_util_displayInline {}
+///
+/// @example scss - import mixin file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties";
+#{$scope}.#{$prefix}util_displayInlineBlock {
+  display: inline-block $important;
+}
+
+/// Utility class to display elements `block`
+///
+/// [Manage](/#utility-variable-important) `!important` flag.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group Utility-display
+/// @example scss - Default selector(s)
+///   .util_displayBlock {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .util_displayBlock {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_util_displayBlock {}
+///
+/// @example scss - import mixin file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties";
+#{$scope}.#{$prefix}util_displayBlock {
+  display: block $important;
+}
+
+/// Utility class to display elements `flex`
+///
+/// [Manage](/#utility-variable-important) `!important` flag.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group Utility-display
+/// @example scss - Default selector(s)
+///   .util_displayFlex {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .util_displayFlex {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_util_displayFlex {}
+///
+/// @example scss - import mixin file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties";
+#{$scope}.#{$prefix}util_displayFlex {
+  display: flex $important;
+}
+
+/// Utility class to display elements `none`
+///
+/// [Manage](/#utility-variable-important) `!important` flag.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group Utility-display
+/// @example scss - Default selector(s)
+///   .util_displayHidden {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .util_displayHidden {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_util_displayHidden {}
+///
+/// @example scss - import mixin file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties";
+#{$scope}.#{$prefix}util_displayHidden {
+  display: none $important;
+}
+
+/// Utility class to visually hide elements within the UI, but still be picked up by screen readers.
+///
+/// [Manage](/#utility-variable-important) `!important` flag.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group Utility-display
+/// @example scss - Default selector(s)
+///   .util_displayHiddenVisually {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .util_displayHiddenVisually {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_util_displayHiddenVisually {}
+///
+/// @example scss - import mixin file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties";
+#{$scope}.#{$prefix}util_displayHiddenVisually {
+  position: absolute $important;
+
+  overflow: hidden $important;
+  clip: rect(1px, 1px, 1px, 1px) $important;
+
+  width: 1px $important;
+  height: 1px $important;
+  padding: 0 $important;
+
+  border: 0 $important;
+}