@aurodesignsystem/auro-formkit 1.6.0-beta.10

package/components/input/src/buttonVersion.js

@@ -0,0 +1 @@
+export default '8.2.2';

package/components/input/src/i18n.js

@@ -0,0 +1,102 @@
+const watchedItems = new Set();
+
+
+/**
+ * Function for setting the value of the lang attribute.
+ * @private
+ * @param {object} item - Individual DOM node from set of watchedItems.
+ * @param {string} lang - Current language set for the document.
+ */
+function setLang(item, lang) {
+
+  /**
+   * It is desired that if the lang is `en` to maintain `undefined` as not to
+   * add the `lang` attribute to the individual element.
+   */
+  item.lang = lang === 'en' ? undefined : lang;
+}
+
+/**
+ * Change handler for MutationObserver() callback.
+ * @private
+ * @param {MutationRecord[]} mutationList - Observed list of mutations.
+ */
+function handleChange(mutationList) {
+  const [mutation] = mutationList;
+  const lang = mutation.target.getAttribute('lang');
+  watchedItems.forEach((item) => {
+    setLang(item, lang);
+  });
+}
+
+if (typeof window !== "undefined") {
+  if (window.MutationObserver) {
+    const observer = new MutationObserver(handleChange);
+    observer.observe(document.documentElement, { attributes: true,
+      attributeFilter: ['lang'] });
+  }
+}
+
+const stringsES = {
+  'optional': 'opcional',
+  'validCard': 'Por favor, introduzca un número de tarjeta de crédito válida.',
+  'email': 'Introduzca una dirección de correo electrónico válida (nombre@dominio.com).',
+  'password': `Las contraseñas válidas deben constar de al menos 8 caracteres, incluyendo al menos una letra mayúscula, una letra minúscula y un número.`,
+  'creditcard': 'Por favor, introduzca un número de tarjeta de crédito válida.',
+  'dateMMDDYYYY': 'Ingrese una fecha completa en el formato MM/DD/AAAA',
+  'dateMMYY': 'Ingrese una fecha completa en el formato MM/AA',
+  'dateMMYYYY': 'Ingrese una fecha completa en el formato MM/AAAA',
+  'dateYYYYMMDD': 'Ingrese una fecha completa en el formato AAAA/MM/DD',
+  'dateYY': 'Ingrese una fecha completa en el formato AA',
+  'dateYYYY': 'Ingrese una fecha completa en el formato AAAA',
+  'dateMM': 'Ingrese una fecha completa en el formato MM',
+};
+
+const stringsEN = {
+  'optional': 'optional',
+  'validCard': 'Please enter a valid credit card number.',
+  'email': 'Please enter a valid email address (name@domain.com).',
+  'password': 'Valid passwords must consist of at least 8 characters, including at least one uppercase letter, one lowercase letter, and one number.',
+  'creditcard': 'Please enter a valid credit card number.',
+  'dateMMDDYYYY': 'Please enter a complete date in the format MM/DD/YYYY',
+  'dateMMYY': 'Please enter a complete date in the format MM/YY',
+  'dateMMYYYY': 'Please enter a complete date in the format MM/YYYY',
+  'dateYYYYMMDD': 'Please enter a complete date in the format YYYY/MM/DD',
+  'dateYYY': 'Please enter a complete date in the format YY',
+  'dateYYYYY': 'Please enter a complete date in the format YYYY',
+  'dateMM': 'Please enter a complete date in the format MM'
+};
+
+/**
+ * Function to support the selected of a string in the set lang.
+ * @param {string} lang - Requested lang for content return.
+ * @param {string} requestedString - String requested in context.
+ * @private
+ * @returns {string} Value of string request.
+ */
+export default function i18n(lang, requestedString) {
+  if (lang === 'es') {
+    return stringsES[requestedString];
+  }
+
+  return stringsEN[requestedString];
+}
+
+/**
+ * @private
+ * @param {object} element - Pass in the scope of the element in use.
+ */
+export function notifyOnLangChange(element) {
+  if (!element.lang) {
+    setLang(element, document.documentElement.lang);
+  }
+  watchedItems.add(element);
+}
+
+/**
+ * @private
+ * @param {object} element - Pass in the scope of the element in use.
+ */
+export function stopNotifyingOnLangChange(element) {
+  watchedItems.delete(element);
+}

package/components/input/src/iconVersion.js

@@ -0,0 +1 @@
+export default '6.1.2';

package/components/input/src/index.js

@@ -0,0 +1,6 @@
+import { AuroInput } from './auro-input.js';
+
+AuroInput.register();
+
+// Enable TypeScript support
+export { AuroInput };

package/components/input/src/styles/borders-css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export default css`input{border:unset}.wrapper{position:relative;overflow:hidden;border-style:solid}:host(:not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host(:not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([validity]:not([validity=valid])) .wrapper:before{border-bottom:0}`;

package/components/input/src/styles/borders.css

@@ -0,0 +1,35 @@
+/* stylelint-disable no-duplicate-selectors, max-nesting-depth, no-descending-specificity */
+input {
+  border: unset;
+}
+
+.wrapper {
+  position: relative;
+  overflow: hidden;
+  border-style: solid;
+}
+
+:host(:not([bordered], [borderless])) .wrapper {
+  border-width: 1px 0;
+}
+
+:host([bordered]) .wrapper {
+  border-width: 1px;
+  border-radius: var(--ds-border-radius, 0.375rem);
+}
+
+:host(:not([borderless])) .wrapper:focus-within:before {
+  position: absolute;
+  display: block;
+  /* stylelint-disable declaration-block-no-redundant-longhand-properties */
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  /* stylelint-enable declaration-block-no-redundant-longhand-properties */
+  content: "";
+  inset: 0;
+  pointer-events: none;
+}
+
+:host([validity]:not([validity=valid])) .wrapper:before {
+  border-bottom: 0;
+}

package/components/input/src/styles/borders.scss

@@ -0,0 +1,65 @@
+/* stylelint-disable no-duplicate-selectors, max-nesting-depth, no-descending-specificity */
+
+@import '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+@import '@aurodesignsystem/webcorestylesheets/src/breakpoints';
+
+input {
+  border: unset;
+}
+
+.wrapper {
+  position: relative;
+  overflow: hidden;
+  border-style: solid;
+}
+
+:host(:not([bordered], [borderless])) {
+  .wrapper {
+    border-width: 1px 0;
+  }
+}
+
+:host([bordered]) {
+  .wrapper {
+    border-width: 1px;
+    border-radius: var(--ds-border-radius, $ds-border-radius);
+  }
+}
+
+// Handle highlighting the border during focus and invalid stat
+
+@mixin border-highlight {
+  &:before {
+    position: absolute;
+    display: block;
+
+    /* stylelint-disable declaration-block-no-redundant-longhand-properties */
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    /* stylelint-enable declaration-block-no-redundant-longhand-properties */
+
+    content: '';
+    inset: 0;
+    pointer-events: none;
+  }
+}
+
+// FOCUS STATE
+
+:host(:not([borderless])) {
+  .wrapper {
+    &:focus-within {
+      @include border-highlight;
+    }
+  }
+}
+
+// INVALID STATE
+
+:host([validity]:not([validity='valid'])) {
+  .wrapper {
+    &:before {
+      border-bottom: 0;
+    }
+  }
+}

package/components/input/src/styles/color-css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export default css`.wrapper{border-color:transparent}.inputElement-helpText{color:var(--ds-auro-input-help-text-color)}input{background-color:transparent;caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}input::placeholder{color:transparent}input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}input:disabled{--ds-auro-input-input-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}label{color:var(--ds-auro-input-label-text-color)}:host(:not([bordered],[borderless])) .wrapper{border-bottom-color:var(--ds-auro-input-border-color)}:host([bordered]) .wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-container-color)}:host([bordered]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host(:not([borderless])) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host(:not([borderless])) .wrapper:focus-within:before{border-bottom-color:transparent}:host([validity]:not([validity=valid])){--ds-auro-input-border-color: var(--ds-color-border-error-default, #cc1816);--ds-auro-input-help-text-color: var(--ds-color-text-error-default, #cc1816)}:host([validity]:not([validity=valid])[bordered]) .wrapper{--ds-auro-input-border-color: var(--ds-color-border-error-default, #cc1816);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([disabled]){--ds-auro-input-border-color: var(--ds-color-border-ui-disabled-default, #adadad);--ds-auro-input-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}`;

package/components/input/src/styles/color.css

@@ -0,0 +1,63 @@
+/* stylelint-disable */
+/* stylelint-disable no-descending-specificity */
+.wrapper {
+  border-color: transparent;
+}
+
+.inputElement-helpText {
+  color: var(--ds-auro-input-help-text-color);
+}
+
+input {
+  background-color: transparent;
+  caret-color: var(--ds-auro-input-caret-color);
+  color: var(--ds-auro-input-text-color);
+}
+input::placeholder {
+  color: transparent;
+}
+input:focus::placeholder {
+  color: var(--ds-auro-input-placeholder-text-color);
+}
+input:disabled {
+  --ds-auro-input-input-text-color: var(--ds-color-text-ui-disabled-default, #adadad);
+}
+
+label {
+  color: var(--ds-auro-input-label-text-color);
+}
+
+:host(:not([bordered], [borderless])) .wrapper {
+  border-bottom-color: var(--ds-auro-input-border-color);
+}
+
+:host([bordered]) .wrapper {
+  border-color: var(--ds-auro-input-border-color);
+  background-color: var(--ds-auro-input-container-color);
+}
+:host([bordered]) .wrapper:focus-within {
+  --ds-auro-input-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);
+  box-shadow: inset 0 0 0 1px var(--ds-auro-input-border-color);
+}
+
+:host(:not([borderless])) .wrapper:focus-within {
+  --ds-auro-input-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);
+}
+:host(:not([borderless])) .wrapper:focus-within:before {
+  border-bottom-color: transparent;
+}
+
+:host([validity]:not([validity=valid])) {
+  --ds-auro-input-border-color: var(--ds-color-border-error-default, #cc1816);
+  --ds-auro-input-help-text-color: var(--ds-color-text-error-default, #cc1816);
+}
+
+:host([validity]:not([validity=valid])[bordered]) .wrapper {
+  --ds-auro-input-border-color: var(--ds-color-border-error-default, #cc1816);
+  box-shadow: inset 0 0 0 1px var(--ds-auro-input-border-color);
+}
+
+:host([disabled]) {
+  --ds-auro-input-border-color: var(--ds-color-border-ui-disabled-default, #adadad);
+  --ds-auro-input-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad);
+}

package/components/input/src/styles/color.scss

@@ -0,0 +1,96 @@
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+// Support for fallback values
+@import '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+
+/* stylelint-disable */
+
+/* stylelint-disable no-descending-specificity */
+
+// Handle highlighting the border during focus and invalid state
+@mixin border-highlight {
+  &:before {
+    border-bottom-color: transparent;
+  }
+}
+
+.wrapper {
+  border-color: transparent;
+}
+
+.inputElement-helpText {
+  color: var(--ds-auro-input-help-text-color);
+}
+
+input {
+  background-color: transparent;
+  caret-color: var(--ds-auro-input-caret-color);
+  color: var(--ds-auro-input-text-color);
+
+  &::placeholder {
+    color: transparent;
+  }
+
+  &:focus {
+    &::placeholder {
+      color: var(--ds-auro-input-placeholder-text-color);
+    }
+  }
+
+  &:disabled {
+    --ds-auro-input-input-text-color: var(--ds-color-text-ui-disabled-default, #{$ds-color-text-ui-disabled-default});
+  }
+}
+
+label {
+  color: var(--ds-auro-input-label-text-color);
+}
+
+:host(:not([bordered], [borderless])) {
+  .wrapper {
+    border-bottom-color: var(--ds-auro-input-border-color);
+  }
+}
+
+:host([bordered]) {
+  .wrapper {
+    border-color: var(--ds-auro-input-border-color);
+    background-color: var(--ds-auro-input-container-color);
+
+    &:focus-within {
+      --ds-auro-input-border-color: var(--ds-color-border-ui-focus-default, #{$ds-color-border-ui-focus-default});
+
+      box-shadow: inset 0 0 0 1px var(--ds-auro-input-border-color);
+    }
+  }
+}
+
+:host(:not([borderless])) {
+  .wrapper {
+    &:focus-within {
+      --ds-auro-input-border-color: var(--ds-color-border-ui-focus-default, #{$ds-color-border-ui-focus-default});
+
+      @include border-highlight;
+    }
+  }
+}
+
+:host([validity]:not([validity='valid'])) {
+  --ds-auro-input-border-color: var(--ds-color-border-error-default, #{$ds-color-border-error-default});
+  --ds-auro-input-help-text-color: var(--ds-color-text-error-default, #{$ds-color-text-error-default});
+}
+
+:host([validity]:not([validity='valid'])[bordered]) {
+  .wrapper {
+    --ds-auro-input-border-color: var(--ds-color-border-error-default, #{$ds-color-border-error-default});
+
+    box-shadow: inset 0 0 0 1px var(--ds-auro-input-border-color);
+  }
+}
+
+:host([disabled]) {
+  --ds-auro-input-border-color: var(--ds-color-border-ui-disabled-default, #{$ds-color-border-ui-disabled-default});
+  --ds-auro-input-label-text-color: var(--ds-color-text-ui-disabled-default, #{$ds-color-text-ui-disabled-default});
+}

package/components/input/src/styles/helpText-css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export default css`.inputElement-helpText{margin:var(--ds-size-50, 0.25rem) 0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}`;

package/components/input/src/styles/helpText.css

@@ -0,0 +1,6 @@
+/* stylelint-disable selector-class-pattern */
+.inputElement-helpText {
+  margin: var(--ds-size-50, 0.25rem) 0;
+  font-size: var(--ds-text-body-size-xs, 0.75rem);
+  line-height: var(--ds-size-200, 1rem);
+}

package/components/input/src/styles/helpText.scss

@@ -0,0 +1,9 @@
+@import '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+
+
+/* stylelint-disable selector-class-pattern */
+.inputElement-helpText {
+  margin: var(--ds-size-50, $ds-size-50) 0;
+  font-size: var(--ds-text-body-size-xs, $ds-text-body-size-xs);
+  line-height: var(--ds-size-200, $ds-size-200);
+}

package/components/input/src/styles/input-css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export default css`input{position:relative;overflow:hidden;min-height:calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));max-height:calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));flex:1;padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);margin:0;font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-size-200, 1rem);outline:none;text-overflow:ellipsis;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:nowrap}input::-ms-reveal,input::-ms-clear{display:none}input:disabled{background:none;pointer-events:none}`;

package/components/input/src/styles/input.css

@@ -0,0 +1,22 @@
+input {
+  position: relative;
+  overflow: hidden;
+  min-height: calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));
+  max-height: calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));
+  flex: 1;
+  padding: var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);
+  margin: 0;
+  font-family: var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);
+  font-size: var(--ds-size-200, 1rem);
+  outline: none;
+  text-overflow: ellipsis;
+  transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
+  white-space: nowrap;
+}
+input::-ms-reveal, input::-ms-clear {
+  display: none;
+}
+input:disabled {
+  background: none;
+  pointer-events: none;
+}

package/components/input/src/styles/input.scss

@@ -0,0 +1,29 @@
+// Support for fallback values
+@import '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+
+input {
+  position: relative;
+  overflow: hidden;
+  min-height: calc(var(--ds-size-700, $ds-size-700) + var(--ds-size-25, $ds-size-25));
+  max-height: calc(var(--ds-size-700, $ds-size-700) + var(--ds-size-25, $ds-size-25));
+  flex: 1;
+  padding: var(--ds-size-400, $ds-size-400) 0 var(--ds-size-50, $ds-size-50);
+  margin: 0;
+  font-family: var(--ds-font-family-default, $ds-font-family-default);
+  font-size: var(--ds-size-200, $ds-size-200);
+  outline: none;
+  text-overflow: ellipsis;
+  transition: all .3s cubic-bezier(.215, .61, .355, 1);
+  white-space: nowrap;
+
+  // this is to disable the toggle-password feature in MS Edge only
+  &::-ms-reveal,
+  &::-ms-clear {
+    display: none;
+  }
+
+  &:disabled {
+    background: none;
+    pointer-events: none;
+  }
+}

package/components/input/src/styles/label-css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export default css`label{position:absolute;overflow:hidden;pointer-events:none;text-overflow:ellipsis;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:nowrap}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{top:var(--ds-size-25, 0.125rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host label.withValue{top:var(--ds-size-25, 0.125rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host([activeLabel]) .wrapper label{top:var(--ds-size-25, 0.125rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}`;

package/components/input/src/styles/label.css

@@ -0,0 +1,45 @@
+/* stylelint-disable no-duplicate-selectors, max-nesting-depth, no-descending-specificity, selector-max-combinators, selector-max-compound-selectors, selector-no-qualifying-type */
+label {
+  position: absolute;
+  overflow: hidden;
+  pointer-events: none;
+  text-overflow: ellipsis;
+  transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
+  white-space: nowrap;
+}
+
+:host(:not([bordered])) label {
+  top: calc(100% - var(--ds-size-25, 0.125rem));
+  transform: translateY(-100%);
+}
+:host(:not([bordered])) label.withIcon {
+  left: var(--ds-size-400, 2rem);
+}
+
+:host([bordered]) label {
+  top: 50%;
+  transform: translateY(-50%);
+}
+:host([bordered]) label.withIcon {
+  left: var(--ds-size-500, 2.5rem);
+}
+:host([bordered]) label:not(label.withIcon) {
+  left: var(--ds-size-100, 0.5rem);
+}
+
+:host .wrapper:focus-within label {
+  top: var(--ds-size-25, 0.125rem);
+  font-size: var(--ds-text-body-size-xs, 0.75rem);
+  transform: unset;
+}
+:host label.withValue {
+  top: var(--ds-size-25, 0.125rem);
+  font-size: var(--ds-text-body-size-xs, 0.75rem);
+  transform: unset;
+}
+
+:host([activeLabel]) .wrapper label {
+  top: var(--ds-size-25, 0.125rem);
+  font-size: var(--ds-text-body-size-xs, 0.75rem);
+  transform: unset;
+}

package/components/input/src/styles/label.scss

@@ -0,0 +1,75 @@
+@import '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+
+/* stylelint-disable no-duplicate-selectors, max-nesting-depth, no-descending-specificity, selector-max-combinators, selector-max-compound-selectors, selector-no-qualifying-type */
+
+label {
+  position: absolute;
+  overflow: hidden;
+  pointer-events: none;
+  text-overflow: ellipsis;
+  transition: all .3s cubic-bezier(.215, .61, .355, 1);
+  white-space: nowrap;
+}
+
+:host(:not([bordered])) {
+  label {
+    top: calc(100% - var(--ds-size-25, $ds-size-25));
+    transform: translateY(-100%);
+  }
+
+  label {
+    &.withIcon {
+      left: var(--ds-size-400, $ds-size-400);
+    }
+  }
+}
+
+:host([bordered]) {
+  label {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  label {
+    &.withIcon {
+      left: var(--ds-size-500, $ds-size-500);
+    }
+  }
+
+  label {
+    &:not(label.withIcon) {
+      left: var(--ds-size-100, $ds-size-100);
+    }
+  }
+}
+
+// active label for non-bordered inputs
+@mixin active-label {
+  top: var(--ds-size-25, $ds-size-25);
+  font-size: var(--ds-text-body-size-xs, $ds-text-body-size-xs);
+  transform: unset;
+}
+
+:host {
+  .wrapper {
+    &:focus-within {
+      label {
+        @include active-label;
+      }
+    }
+  }
+
+  label {
+    &.withValue {
+      @include active-label;
+    }
+  }
+}
+
+:host([activeLabel]) {
+  .wrapper {
+    label {
+      @include active-label;
+    }
+  }
+}

package/components/input/src/styles/notificationIcons-css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export default css`.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem))}.passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}`;

package/components/input/src/styles/notificationIcons.css

@@ -0,0 +1,76 @@
+/* stylelint-disable  selector-max-attribute, max-nesting-depth, selector-max-class, selector-max-combinators, selector-max-compound-selectors */
+.typeIcon {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.typeIcon [auro-icon] {
+  --ds-auro-icon-size: var(--ds-size-300, 1.5rem);
+  height: var(--ds-size-300, 1.5rem);
+  margin-right: var(--ds-size-100, 0.5rem);
+}
+
+.notificationIcons {
+  display: flex;
+  flex-direction: row;
+  padding-right: var(--ds-size-100, 0.5rem);
+}
+
+:host([bordered]) .typeIcon {
+  padding-left: var(--ds-size-100, 0.5rem);
+}
+:host([bordered]) .notificationIcons {
+  align-items: center;
+}
+
+.notification:not(:first-of-type) {
+  margin-left: var(--ds-size-100, 0.5rem);
+}
+
+.alertNotification {
+  width: calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));
+  height: calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));
+}
+
+.clearBtn {
+  width: calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));
+  height: calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));
+}
+
+.passwordBtn {
+  width: calc(var(--ds-size-300, 1.5rem));
+  height: calc(var(--ds-size-300, 1.5rem));
+}
+
+.notificationBtn {
+  display: block;
+  width: var(--ds-size-300, 1.5rem);
+  height: var(--ds-size-300, 1.5rem);
+  padding: 0;
+  border: 0;
+  background: unset;
+  cursor: pointer;
+}
+.notificationBtn [auro-icon] {
+  display: block;
+  height: var(--ds-size-300, 1.5rem);
+  --ds-auro-icon-size: var(--ds-size-300, 1.5rem);
+}
+.notificationBtn [auro-icon][hidden] {
+  display: none;
+}
+
+:host(:not([bordered])) .typeIcon,
+:host(:not([bordered])) .notificationIcons {
+  align-items: flex-end;
+  padding-bottom: var(--ds-size-50, 0.25rem);
+}
+
+:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification {
+  overflow: hidden;
+  width: 0;
+  height: 0;
+  padding: 0;
+  margin: 0;
+  visibility: hidden;
+}