@esri/calcite-components 1.0.0-beta.69 → 1.0.0-beta.72

package/dist/collection/components/calcite-input/calcite-input.css

@@ -47,7 +47,11 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 .calcite-animate {
@@ -84,7 +88,7 @@
   display: none;
 }
 
-:host([scale=s]) input, :host([scale=s]) .calcite-input__prefix, :host([scale=s]) .calcite-input__suffix {
+:host([scale=s]) input, :host([scale=s]) .prefix, :host([scale=s]) .suffix {
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
   padding: 0.5rem;
@@ -96,7 +100,7 @@
   min-height: 1.5rem;
 }
 
-:host([scale=s]) .calcite-input__number-button-wrapper, :host([scale=s]) .calcite-input__action-wrapper calcite-button, :host([scale=s]) .calcite-input__action-wrapper calcite-button button {
+:host([scale=s]) .number-button-wrapper, :host([scale=s]) .action-wrapper calcite-button, :host([scale=s]) .action-wrapper calcite-button button {
   height: 1.5rem;
 }
 
@@ -104,7 +108,7 @@
   height: 1.5rem;
 }
 
-:host([scale=s]) .calcite-input__clear-button {
+:host([scale=s]) .clear-button {
   min-height: 1.5rem;
   min-width: 1.5rem;
 }
@@ -119,7 +123,7 @@
   height: auto;
 }
 
-:host([scale=m]) input, :host([scale=m]) .calcite-input__prefix, :host([scale=m]) .calcite-input__suffix {
+:host([scale=m]) input, :host([scale=m]) .prefix, :host([scale=m]) .suffix {
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
   padding: 0.75rem;
@@ -130,7 +134,7 @@
   min-height: 2rem;
 }
 
-:host([scale=m]) .calcite-input__number-button-wrapper, :host([scale=m]) .calcite-input__action-wrapper calcite-button, :host([scale=m]) .calcite-input__action-wrapper calcite-button button {
+:host([scale=m]) .number-button-wrapper, :host([scale=m]) .action-wrapper calcite-button, :host([scale=m]) .action-wrapper calcite-button button {
   height: 2rem;
 }
 
@@ -138,7 +142,7 @@
   height: 2rem;
 }
 
-:host([scale=m]) .calcite-input__clear-button {
+:host([scale=m]) .clear-button {
   min-height: 2rem;
   min-width: 2rem;
 }
@@ -153,7 +157,7 @@
   height: auto;
 }
 
-:host([scale=l]) input, :host([scale=l]) .calcite-input__prefix, :host([scale=l]) .calcite-input__suffix {
+:host([scale=l]) input, :host([scale=l]) .prefix, :host([scale=l]) .suffix {
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
   padding: 1rem;
@@ -164,7 +168,7 @@
   min-height: 2.75rem;
 }
 
-:host([scale=l]) .calcite-input__number-button-wrapper, :host([scale=l]) .calcite-input__action-wrapper calcite-button, :host([scale=l]) .calcite-input__action-wrapper calcite-button button {
+:host([scale=l]) .number-button-wrapper, :host([scale=l]) .action-wrapper calcite-button, :host([scale=l]) .action-wrapper calcite-button button {
   height: 2.75rem;
 }
 
@@ -172,7 +176,7 @@
   height: 2.75rem;
 }
 
-:host([scale=l]) .calcite-input__clear-button {
+:host([scale=l]) .clear-button {
   min-height: 2.75rem;
   min-width: 2.75rem;
 }
@@ -189,9 +193,10 @@
 
 :host([disabled]) {
   pointer-events: none;
+  opacity: var(--calcite-ui-opacity-disabled);
 }
 
-:host([disabled]) .calcite-input__wrapper {
+:host([disabled]) .wrapper {
   pointer-events: none;
   --text-opacity: var(--calcite-ui-opacity-disabled);
 }
@@ -246,6 +251,7 @@
 
 :host input[readonly], :host textarea[readonly] {
   background-color: var(--calcite-ui-background);
+  font-weight: var(--calcite-font-weight-medium);
 }
 
 :host input[readonly]:focus, :host textarea[readonly]:focus {
@@ -278,61 +284,31 @@
   outline-offset: -2px;
 }
 
-:host([scale=s]) .calcite-input__icon {
-  left: 0.5rem;
-}
-
-:host([scale=s]) .calcite--rtl .calcite-input__icon {
-  left: unset;
-  right: 0.5rem;
-}
-
-:host([scale=m]) .calcite-input__icon {
-  left: 0.75rem;
-}
-
-:host([scale=m]) .calcite--rtl .calcite-input__icon {
-  left: unset;
-  right: 0.75rem;
+:host([scale=s]) .icon {
+  inset-inline-start: 0.5rem;
 }
 
-:host([scale=l]) .calcite-input__icon {
-  left: 1rem;
+:host([scale=m]) .icon {
+  inset-inline-start: 0.75rem;
 }
 
-:host([scale=l]) .calcite--rtl .calcite-input__icon {
-  left: unset;
-  right: 1rem;
+:host([scale=l]) .icon {
+  inset-inline-start: 1rem;
 }
 
 :host([icon][scale=s]) input {
-  padding-left: 2rem;
-}
-
-:host([icon][scale=s]) .calcite--rtl input {
-  padding-right: 2rem;
-  padding-left: 0.5rem;
+  padding-inline-start: 2rem;
 }
 
 :host([icon][scale=m]) input {
-  padding-left: 2.5rem;
-}
-
-:host([icon][scale=m]) .calcite--rtl input {
-  padding-right: 2.5rem;
-  padding-left: 0.5rem;
+  padding-inline-start: 2.5rem;
 }
 
 :host([icon][scale=l]) input {
-  padding-left: 3rem;
-}
-
-:host([icon][scale=l]) .calcite--rtl input {
-  padding-right: 3rem;
-  padding-left: 0.5rem;
+  padding-inline-start: 3rem;
 }
 
-.calcite-input__element-wrapper {
+.element-wrapper {
   display: inline-flex;
   align-items: center;
   flex: 1 1 0%;
@@ -340,13 +316,13 @@
   order: 3;
 }
 
-.calcite-input__icon {
+.icon {
   display: block;
   position: absolute;
   pointer-events: none;
   z-index: 10;
   transition-property: all;
-  transition-duration: 150ms;
+  transition-duration: var(--calcite-animation-timing);
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
 }
@@ -367,7 +343,7 @@ input[type=time]::-webkit-clear-button {
   display: none;
 }
 
-.calcite-input__clear-button {
+.clear-button {
   pointer-events: initial;
   outline-offset: 0;
   outline-color: transparent;
@@ -383,51 +359,45 @@ input[type=time]::-webkit-clear-button {
   border-style: solid;
   border-color: var(--calcite-ui-border-input);
   background-color: var(--calcite-ui-foreground-1);
-  border-left-width: 0;
   order: 4;
   margin: 0;
+  border-inline-start-width: 0;
 }
 
-.calcite-input__clear-button:hover {
+.clear-button:hover {
   background-color: var(--calcite-ui-foreground-2);
   transition-property: all;
-  transition-duration: 150ms;
+  transition-duration: var(--calcite-animation-timing);
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
 }
 
-.calcite-input__clear-button:hover calcite-icon {
+.clear-button:hover calcite-icon {
   color: var(--calcite-ui-text-1);
   transition-property: all;
-  transition-duration: 150ms;
+  transition-duration: var(--calcite-animation-timing);
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
 }
 
-.calcite-input__clear-button:active {
+.clear-button:active {
   background-color: var(--calcite-ui-foreground-3);
 }
 
-.calcite-input__clear-button:active calcite-icon {
+.clear-button:active calcite-icon {
   color: var(--calcite-ui-text-1);
 }
 
-.calcite-input__clear-button:focus {
+.clear-button:focus {
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: -2px;
 }
 
-.calcite-input__clear-button:disabled {
+.clear-button:disabled {
   opacity: var(--calcite-ui-opacity-disabled);
 }
 
-.calcite--rtl .calcite-input__clear-button {
-  border-left-color: var(--calcite-ui-border-input);
-  border-width: 1px;
-  border-right-width: 0;
-}
-
-.calcite-input__loader {
+.loader {
   top: 1px;
   left: 1px;
   right: 1px;
@@ -436,13 +406,13 @@ input[type=time]::-webkit-clear-button {
   position: absolute;
 }
 
-.calcite-input__action-wrapper {
+.action-wrapper {
   display: flex;
   order: 7;
 }
 
-.calcite-input__prefix,
-.calcite-input__suffix {
+.prefix,
+.suffix {
   display: flex;
   align-items: center;
   align-content: center;
@@ -462,40 +432,22 @@ input[type=time]::-webkit-clear-button {
   overflow-wrap: break-word;
 }
 
-.calcite-input__prefix {
+.prefix {
   order: 2;
-  border-right-width: 0;
+  border-inline-end-width: 0;
 }
 
-.calcite-input__suffix {
+.suffix {
   order: 5;
-  border-left-width: 0;
-}
-
-.calcite--rtl .calcite-input__prefix {
-  border-right-width: 1px;
-  border-left-width: 0;
-}
-
-.calcite--rtl .calcite-input__suffix {
-  border-left-width: 1px;
-  border-right-width: 0;
+  border-inline-start-width: 0;
 }
 
 :host([alignment=start]) textarea, :host([alignment=start]) input {
-  text-align: left;
-}
-
-:host([alignment=start]) .calcite--rtl textarea, :host([alignment=start]) .calcite--rtl input {
-  text-align: right;
+  text-align: start;
 }
 
 :host([alignment=end]) textarea, :host([alignment=end]) input {
-  text-align: right;
-}
-
-:host([alignment=end]) .calcite--rtl textarea, :host([alignment=end]) .calcite--rtl input {
-  text-align: left;
+  text-align: end;
 }
 
 :host input[type=number] {
@@ -508,19 +460,19 @@ input[type=time]::-webkit-clear-button {
   margin: 0;
 }
 
-.calcite-input__number-button-wrapper {
+.number-button-wrapper {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   pointer-events: none;
   order: 6;
   transition-property: all;
-  transition-duration: 150ms;
+  transition-duration: var(--calcite-animation-timing);
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
 }
 
-:host([number-button-type=vertical]) .calcite-input__wrapper {
+:host([number-button-type=vertical]) .wrapper {
   flex-direction: row;
   display: flex;
 }
@@ -530,86 +482,73 @@ input[type=time]::-webkit-clear-button {
   order: 2;
 }
 
-:host([number-button-type=horizontal]) .calcite--rtl .calcite-input__number-button-item[data-adjustment=down] calcite-icon {
+:host([number-button-type=horizontal]) .calcite--rtl .number-button-item[data-adjustment=down] calcite-icon {
   transform: rotate(-90deg);
 }
 
-:host([number-button-type=horizontal]) .calcite--rtl .calcite-input__number-button-item[data-adjustment=up] calcite-icon {
+:host([number-button-type=horizontal]) .calcite--rtl .number-button-item[data-adjustment=up] calcite-icon {
   transform: rotate(-90deg);
 }
 
-.calcite-input__number-button-item.calcite-input__number-button-item--horizontal[data-adjustment=down], .calcite-input__number-button-item.calcite-input__number-button-item--horizontal[data-adjustment=up] {
+.number-button-item.number-button-item--horizontal[data-adjustment=down], .number-button-item.number-button-item--horizontal[data-adjustment=up] {
   min-height: 100%;
   max-height: 100%;
   order: 1;
   align-self: stretch;
 }
 
-.calcite-input__number-button-item.calcite-input__number-button-item--horizontal[data-adjustment=down] calcite-icon, .calcite-input__number-button-item.calcite-input__number-button-item--horizontal[data-adjustment=up] calcite-icon {
+.number-button-item.number-button-item--horizontal[data-adjustment=down] calcite-icon, .number-button-item.number-button-item--horizontal[data-adjustment=up] calcite-icon {
   transform: rotate(90deg);
 }
 
-.calcite-input__number-button-item.calcite-input__number-button-item--horizontal[data-adjustment=down] {
+.number-button-item.number-button-item--horizontal[data-adjustment=down] {
   border-width: 1px;
   border-style: solid;
   border-color: var(--calcite-ui-border-input);
-  border-right-width: 0;
+  border-inline-end-width: 0;
 }
 
-.calcite-input__number-button-item.calcite-input__number-button-item--horizontal[data-adjustment=down]:hover {
+.number-button-item.number-button-item--horizontal[data-adjustment=down]:hover {
   background-color: var(--calcite-ui-foreground-2);
 }
 
-.calcite-input__number-button-item.calcite-input__number-button-item--horizontal[data-adjustment=down]:hover calcite-icon {
+.number-button-item.number-button-item--horizontal[data-adjustment=down]:hover calcite-icon {
   color: var(--calcite-ui-text-1);
 }
 
-.calcite-input__number-button-item.calcite-input__number-button-item--horizontal[data-adjustment=up] {
+.number-button-item.number-button-item--horizontal[data-adjustment=up] {
   order: 5;
 }
 
-.calcite-input__number-button-item.calcite-input__number-button-item--horizontal[data-adjustment=up]:hover {
+.number-button-item.number-button-item--horizontal[data-adjustment=up]:hover {
   background-color: var(--calcite-ui-foreground-2);
 }
 
-.calcite-input__number-button-item.calcite-input__number-button-item--horizontal[data-adjustment=up]:hover calcite-icon {
+.number-button-item.number-button-item--horizontal[data-adjustment=up]:hover calcite-icon {
   color: var(--calcite-ui-text-1);
 }
 
-:host([number-button-type=vertical]) .calcite-input__number-button-item[data-adjustment=down]:hover {
+:host([number-button-type=vertical]) .number-button-item[data-adjustment=down]:hover {
   background-color: var(--calcite-ui-foreground-2);
 }
 
-:host([number-button-type=vertical]) .calcite-input__number-button-item[data-adjustment=down]:hover calcite-icon {
+:host([number-button-type=vertical]) .number-button-item[data-adjustment=down]:hover calcite-icon {
   color: var(--calcite-ui-text-1);
 }
 
-:host([number-button-type=vertical]) .calcite-input__number-button-item[data-adjustment=up]:hover {
+:host([number-button-type=vertical]) .number-button-item[data-adjustment=up]:hover {
   background-color: var(--calcite-ui-foreground-2);
 }
 
-:host([number-button-type=vertical]) .calcite-input__number-button-item[data-adjustment=up]:hover calcite-icon {
+:host([number-button-type=vertical]) .number-button-item[data-adjustment=up]:hover calcite-icon {
   color: var(--calcite-ui-text-1);
 }
 
-.calcite--rtl .calcite-input__number-button-item.calcite-input__number-button-item--horizontal[data-adjustment=down] {
-  border-width: 1px;
-  border-left-width: 0;
-  border-color: var(--calcite-ui-border-input);
-}
-
-.calcite--rtl .calcite-input__number-button-item.calcite-input__number-button-item--horizontal[data-adjustment=up] {
-  border-width: 1px;
-  border-right-width: 0;
-  border-color: var(--calcite-ui-border-input);
-}
-
-:host([number-button-type=vertical]) .calcite-input__number-button-item[data-adjustment=down],
-:host([number-button-type=vertical]) .calcite--rtl .calcite-input__number-button-item[data-adjustment=down] {
+:host([number-button-type=vertical]) .number-button-item[data-adjustment=down] {
   border-top-width: 0;
 }
 
-.calcite-input__number-button-item {
+.number-button-item {
   max-height: 50%;
   min-height: 50%;
   pointer-events: initial;
@@ -626,42 +565,35 @@ input[type=time]::-webkit-clear-button {
   border-style: solid;
   border-color: var(--calcite-ui-border-input);
   background-color: var(--calcite-ui-foreground-1);
-  border-left-width: 0;
   transition-property: all;
-  transition-duration: 150ms;
+  transition-duration: var(--calcite-animation-timing);
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
   margin: 0;
+  border-inline-start-width: 0;
 }
 
-.calcite-input__number-button-item calcite-icon {
+.number-button-item calcite-icon {
   pointer-events: none;
   transition-property: all;
-  transition-duration: 150ms;
+  transition-duration: var(--calcite-animation-timing);
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
 }
 
-.calcite-input__number-button-item:focus {
+.number-button-item:focus {
   background-color: var(--calcite-ui-foreground-2);
 }
 
-.calcite-input__number-button-item:focus calcite-icon {
+.number-button-item:focus calcite-icon {
   color: var(--calcite-ui-text-1);
 }
 
-.calcite-input__number-button-item:active {
+.number-button-item:active {
   background-color: var(--calcite-ui-foreground-3);
 }
 
-:host([number-button-type=vertical]) .calcite--rtl .calcite-input__number-button-item {
-  border-width: 1px;
-  border-style: solid;
-  border-color: var(--calcite-ui-border-input);
-  border-right-width: 0;
-}
-
-.calcite-input__wrapper {
+.wrapper {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -680,22 +612,16 @@ input[type=time]::-webkit-clear-button {
   box-sizing: border-box;
   position: absolute;
   bottom: 0;
-  right: 0;
   padding-top: 0;
   padding-bottom: 0;
   padding-left: 0.25rem;
   padding-right: 0.25rem;
+  inset-inline-end: 0;
 }
 
-@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-  .calcite-input__resize-icon-wrapper {
-    display: none;
-  }
-}
-
-.calcite-input__resize-icon-wrapper {
+.resize-icon-wrapper {
   bottom: 2px;
-  right: 2px;
+  inset-inline-end: 2px;
   background-color: var(--calcite-ui-foreground-1);
   color: var(--calcite-ui-text-3);
   position: absolute;
@@ -705,25 +631,13 @@ input[type=time]::-webkit-clear-button {
   height: 0.75rem;
 }
 
-.calcite-input__resize-icon-wrapper calcite-icon {
+.resize-icon-wrapper calcite-icon {
   bottom: 0.25rem;
-  right: 0.25rem;
+  inset-inline-end: 0.25rem;
   transform: rotate(-45deg);
 }
 
-.calcite--rtl textarea::-webkit-resizer {
-  right: unset;
-  left: 0;
-}
-
-.calcite--rtl .calcite-input__resize-icon-wrapper {
-  left: 2px;
-  right: unset;
-}
-
-.calcite--rtl .calcite-input__resize-icon-wrapper calcite-icon {
-  bottom: 0.25rem;
-  right: 0.25rem;
+.calcite--rtl .resize-icon-wrapper calcite-icon {
   transform: rotate(45deg);
 }
 
@@ -761,10 +675,44 @@ input[type=time]::-webkit-clear-button {
   padding-right: 1rem;
 }
 
-:host(.no-bottom-border) input.sc-calcite-input {
+:host(.no-bottom-border) input {
   border-bottom-width: 0;
 }
 
-:host(.border-t-color-1) input.sc-calcite-input {
+:host(.border-t-color-1) input {
   border-top-color: var(--calcite-ui-border-1);
+}
+
+:host .inline-child {
+  transition-property: all;
+  transition-duration: var(--calcite-animation-timing);
+  transition-timing-function: ease-in-out;
+  transition-delay: 0s;
+  background-color: transparent;
+}
+
+:host .inline-child .editing-enabled {
+  background-color: inherit;
+}
+
+:host .inline-child:not(.editing-enabled) {
+  display: flex;
+  cursor: pointer;
+  border-color: transparent;
+  padding-inline-start: 0;
+}
+
+::slotted(input[slot=hidden-form-input]) {
+  bottom: 0 !important;
+  left: 0 !important;
+  margin: 0 !important;
+  opacity: 0 !important;
+  outline: none !important;
+  padding: 0 !important;
+  position: absolute !important;
+  right: 0 !important;
+  top: 0 !important;
+  transform: none !important;
+  -webkit-appearance: none !important;
+  z-index: -1 !important;
 }