@esri/calcite-components 1.0.0-beta.68 → 1.0.0-beta.71

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

@@ -84,7 +84,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 +96,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 +104,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 +119,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 +130,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 +138,7 @@
   height: 2rem;
 }
 
-:host([scale=m]) .calcite-input__clear-button {
+:host([scale=m]) .clear-button {
   min-height: 2rem;
   min-width: 2rem;
 }
@@ -153,7 +153,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 +164,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 +172,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 +189,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 +247,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,29 +280,29 @@
   outline-offset: -2px;
 }
 
-:host([scale=s]) .calcite-input__icon {
+:host([scale=s]) .icon {
   left: 0.5rem;
 }
 
-:host([scale=s]) .calcite--rtl .calcite-input__icon {
+:host([scale=s]) .calcite--rtl .icon {
   left: unset;
   right: 0.5rem;
 }
 
-:host([scale=m]) .calcite-input__icon {
+:host([scale=m]) .icon {
   left: 0.75rem;
 }
 
-:host([scale=m]) .calcite--rtl .calcite-input__icon {
+:host([scale=m]) .calcite--rtl .icon {
   left: unset;
   right: 0.75rem;
 }
 
-:host([scale=l]) .calcite-input__icon {
+:host([scale=l]) .icon {
   left: 1rem;
 }
 
-:host([scale=l]) .calcite--rtl .calcite-input__icon {
+:host([scale=l]) .calcite--rtl .icon {
   left: unset;
   right: 1rem;
 }
@@ -332,7 +334,7 @@
   padding-left: 0.5rem;
 }
 
-.calcite-input__element-wrapper {
+.element-wrapper {
   display: inline-flex;
   align-items: center;
   flex: 1 1 0%;
@@ -340,7 +342,7 @@
   order: 3;
 }
 
-.calcite-input__icon {
+.icon {
   display: block;
   position: absolute;
   pointer-events: none;
@@ -367,7 +369,7 @@ input[type=time]::-webkit-clear-button {
   display: none;
 }
 
-.calcite-input__clear-button {
+.clear-button {
   pointer-events: initial;
   outline-offset: 0;
   outline-color: transparent;
@@ -388,7 +390,7 @@ input[type=time]::-webkit-clear-button {
   margin: 0;
 }
 
-.calcite-input__clear-button:hover {
+.clear-button:hover {
   background-color: var(--calcite-ui-foreground-2);
   transition-property: all;
   transition-duration: 150ms;
@@ -396,7 +398,7 @@ input[type=time]::-webkit-clear-button {
   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;
@@ -404,30 +406,30 @@ input[type=time]::-webkit-clear-button {
   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 {
+.calcite--rtl .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 +438,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,22 +464,22 @@ input[type=time]::-webkit-clear-button {
   overflow-wrap: break-word;
 }
 
-.calcite-input__prefix {
+.prefix {
   order: 2;
   border-right-width: 0;
 }
 
-.calcite-input__suffix {
+.suffix {
   order: 5;
   border-left-width: 0;
 }
 
-.calcite--rtl .calcite-input__prefix {
+.calcite--rtl .prefix {
   border-right-width: 1px;
   border-left-width: 0;
 }
 
-.calcite--rtl .calcite-input__suffix {
+.calcite--rtl .suffix {
   border-left-width: 1px;
   border-right-width: 0;
 }
@@ -508,7 +510,7 @@ 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;
@@ -520,7 +522,7 @@ input[type=time]::-webkit-clear-button {
   transition-delay: 0s;
 }
 
-:host([number-button-type=vertical]) .calcite-input__wrapper {
+:host([number-button-type=vertical]) .wrapper {
   flex-direction: row;
   display: flex;
 }
@@ -530,86 +532,86 @@ 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;
 }
 
-.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] {
+.calcite--rtl .number-button-item.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] {
+.calcite--rtl .number-button-item.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],
+:host([number-button-type=vertical]) .calcite--rtl .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;
@@ -634,7 +636,7 @@ input[type=time]::-webkit-clear-button {
   margin: 0;
 }
 
-.calcite-input__number-button-item calcite-icon {
+.number-button-item calcite-icon {
   pointer-events: none;
   transition-property: all;
   transition-duration: 150ms;
@@ -642,26 +644,26 @@ input[type=time]::-webkit-clear-button {
   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 {
+:host([number-button-type=vertical]) .calcite--rtl .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;
@@ -688,12 +690,12 @@ input[type=time]::-webkit-clear-button {
 }
 
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-  .calcite-input__resize-icon-wrapper {
+  .resize-icon-wrapper {
     display: none;
   }
 }
 
-.calcite-input__resize-icon-wrapper {
+.resize-icon-wrapper {
   bottom: 2px;
   right: 2px;
   background-color: var(--calcite-ui-foreground-1);
@@ -705,7 +707,7 @@ 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;
   transform: rotate(-45deg);
@@ -716,12 +718,12 @@ input[type=time]::-webkit-clear-button {
   left: 0;
 }
 
-.calcite--rtl .calcite-input__resize-icon-wrapper {
+.calcite--rtl .resize-icon-wrapper {
   left: 2px;
   right: unset;
 }
 
-.calcite--rtl .calcite-input__resize-icon-wrapper calcite-icon {
+.calcite--rtl .resize-icon-wrapper calcite-icon {
   bottom: 0.25rem;
   right: 0.25rem;
   transform: rotate(45deg);
@@ -761,10 +763,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: 150ms;
+  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;
 }