@pine-ds/core 4.0.0-mercury.0 → 4.1.0

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

@@ -1,92 +1,304 @@
 :host {
-  --box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);
-  --box-shadow-focus-error: 0 0 0 2px var(--pine-color-red-200);
-  --color-text-default: var(--pine-color-charcoal-500);
-  --color-background-disabled: var(--pine-color-grey-100);
-  --color-border-default: var(--pine-color-grey-400);
-  --color-border-error: var(--pine-color-red-300);
-  --color-border-hover: var(--pine-color-grey-500);
-  --color-disabled-text: var(--pine-color-grey-500);
-  --color-placeholder-text: var(--pine-color-charcoal-200);
-  --font-size-helper-message: var(--pine-font-size-100);
-  --font-size-input-field: var(--pine-font-size-100);
-  --font-size-label: var(--pine-font-size-100);
-  --font-weight-helper-message: var(--pine-font-weight-normal);
-  --font-weight-input-field: var(--pine-font-weight-normal);
-  --font-weight-label: var(--pine-font-weight-medium);
-  --line-height-label: var(--pine-line-height-150);
-  --line-height-helper-message: var(--pine-line-height-125);
-  --line-height-input-field: var(--pine-line-height-150);
-  --spacing-field-padding-block: var(--pine-spacing-100);
-  --spacing-input-field-padding-inline: var(--pine-spacing-200);
-  --spacing-label-margin-block-end: var(--pine-spacing-100);
-  --spacing-margin-top-helper-message: var(--pine-spacing-100);
+  --pds-input-background: var(--pine-color-background-container);
+  --pds-input-border-color: var(--pine-color-border);
+  --pds-input-border-color-hover: var(--pine-color-border-hover);
+  --pds-input-border-color-disabled: var(--pine-color-border-disabled);
+  --pds-input-border-radius: var(--pine-dimension-125);
+  --pds-input-border-width: var(--pine-border-width-thin);
+  --pds-input-padding-x: var(--pine-dimension-150);
+  --pds-input-padding-y: calc(var(--pine-dimension-xs) - var(--pine-border-width));
+  --pds-input-font: var(--pine-typography-body);
+  --pds-input-text-color: var(--pine-color-text-strong);
+  --pds-input-placeholder-color: var(--pine-color-text-placeholder);
+  --pds-input-icon-color: var(--pine-color-text-secondary);
+  --pds-input-disabled-background: var(--pine-color-background-container-disabled);
+  --pds-input-disabled-text-color: var(--pine-color-text-disabled);
+  --pds-input-error-color: var(--pine-color-text-message-danger);
+  --pds-input-error-background: var(--pine-input-color-background-danger);
+  --pds-input-error-border: var(--pine-color-border-danger);
+  --pds-input-error-border-hover: var(--pine-color-border-danger-hover);
+  --pds-input-addon-background: var(--pine-color-background-subtle);
+  --pds-input-addon-color: var(--pine-color-text-secondary);
+  --pds-input-field-min-height: var(--pine-dimension-450);
+  --box-shadow-focus: 0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring);
+  --box-shadow-focus-error: 0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring-danger);
   display: inline;
 }
+:host pds-select::part(select) {
+  background-color: var(--pds-input-error-background);
+  border-color: var(--pds-input-error-border);
+}
+:host::part(prefix), :host::part(suffix) {
+  align-items: center;
+  color: var(--pine-color-text-label-readonly);
+  display: flex;
+  height: 100%;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  white-space: nowrap;
+  z-index: calc(var(--pine-z-index-raised) - 1);
+}
+:host::part(prefix) {
+  border-end-start-radius: var(--pds-input-border-radius);
+  border-inline-end: var(--pine-border-width-none);
+  border-start-start-radius: var(--pds-input-border-radius);
+  inset-inline-start: var(--pds-input-padding-x);
+}
+:host::part(suffix) {
+  border-end-end-radius: var(--pds-input-border-radius);
+  border-inline-start: var(--pine-border-width-none);
+  border-start-end-radius: var(--pds-input-border-radius);
+  inset-inline-end: var(--pds-input-padding-x);
+}
+:host::part(prepend), :host::part(append) {
+  align-items: center;
+  background-color: var(--pds-input-addon-background);
+  border: var(--pds-input-border-width) solid var(--pds-input-border-color);
+  color: var(--pds-input-addon-color);
+  display: flex;
+  overflow: visible;
+}
+:host::part(prepend) {
+  border-end-start-radius: var(--pds-input-border-radius);
+  border-inline-end: var(--pine-border-width-none);
+  border-start-start-radius: var(--pds-input-border-radius);
+}
+:host::part(append) {
+  border-end-end-radius: var(--pds-input-border-radius);
+  border-inline-start: var(--pine-border-width-none);
+  border-start-end-radius: var(--pds-input-border-radius);
+}
+
+/* stylelint-disable-next-line */
+:host([has-prepend]) ::slotted(pds-button[slot=prepend]) {
+  --pds-button-background: var(--pds-input-addon-background);
+  --pds-button-border: var(--pine-border-width-none);
+  --pds-button-border-radius: var(--pine-dimension-none);
+  --pds-button-border-radius-end-end: var(--pine-dimension-none);
+  --pds-button-border-radius-start-end: var(--pine-dimension-none);
+  --pds-button-border-radius-start-start: var(--pds-input-border-radius);
+  --pds-button-border-radius-end-start: var(--pds-input-border-radius);
+  --pds-button-min-height: calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)));
+  --pds-button-box-shadow-focus: 0 0 0 3px var(--pine-color-focus-ring);
+  --pds-button-outline-focus: none;
+}
+
+/* stylelint-disable-next-line */
+:host([has-append]) ::slotted(pds-button[slot=append]) {
+  --pds-button-background: var(--pds-input-addon-background);
+  --pds-button-border: var(--pine-border-width-none);
+  --pds-button-border-radius: var(--pine-dimension-none);
+  --pds-button-border-radius-end-start: var(--pine-dimension-none);
+  --pds-button-border-radius-start-start: var(--pine-dimension-none);
+  --pds-button-border-radius-start-end: var(--pds-input-border-radius);
+  --pds-button-border-radius-end-end: var(--pds-input-border-radius);
+  --pds-button-min-height: calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)));
+  --pds-button-box-shadow-focus: 0 0 0 3px var(--pine-color-focus-ring);
+  --pds-button-outline-focus: none;
+}
+
+/* stylelint-disable-next-line */
+:host([has-prepend]) ::slotted(pds-select[slot=prepend]) {
+  --pds-select-background: var(--pds-input-addon-background);
+  --pds-select-border: var(--pine-border-width-none);
+  --pds-select-border-radius-end-end: var(--pine-dimension-none);
+  --pds-select-border-radius-end-start: var(--pds-input-border-radius);
+  --pds-select-border-radius-start-end: var(--pine-dimension-none);
+  --pds-select-border-radius-start-start: var(--pds-input-border-radius);
+  --pds-select-min-height: calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)));
+}
+
+/* stylelint-disable-next-line */
+:host([has-append]) ::slotted(pds-select[slot=append]) {
+  --pds-select-background: var(--pds-input-addon-background);
+  --pds-select-border: var(--pine-border-width-none);
+  --pds-select-border-radius-end-end: var(--pds-input-border-radius);
+  --pds-select-border-radius-end-start: var(--pine-dimension-none);
+  --pds-select-border-radius-start-end: var(--pds-input-border-radius);
+  --pds-select-border-radius-start-start: var(--pine-dimension-none);
+  --pds-select-min-height: calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)));
+}
+
+:host([aria-readonly=true]) input {
+  background-color: var(--pine-color-background-container-disabled);
+  color: var(--pine-color-text-readonly);
+}
+
+:host([aria-disabled=true])::part(prepend), :host([aria-disabled=true])::part(append) {
+  background-color: var(--pds-input-disabled-background);
+  border: var(--pds-input-border-width) solid var(--pds-input-border-color-disabled);
+}
+
+:host([full-width=true]) {
+  width: 100%;
+}
+
+:host([invalid=true])::part(prepend), :host([invalid=true])::part(append) {
+  background-color: var(--pds-input-error-background);
+  border: var(--pds-input-border-width) solid var(--pds-input-error-border);
+}
+
+:host([highlight]:not([disabled]):not([aria-disabled=true]):not([invalid]):not([aria-readonly=true])) {
+  --pds-input-background: var(--pine-color-accent-disabled);
+  --pds-input-border-color: var(--pine-color-accent);
+  --pds-input-border-color-hover: var(--pine-color-accent-hover);
+  --pds-input-text-color: var(--pine-color-text-accent);
+}
+:host([highlight]:not([disabled]):not([aria-disabled=true]):not([invalid]):not([aria-readonly=true]))::part(prefix), :host([highlight]:not([disabled]):not([aria-disabled=true]):not([invalid]):not([aria-readonly=true]))::part(suffix) {
+  color: var(--pine-color-text-accent);
+}
+:host([highlight]:not([disabled]):not([aria-disabled=true]):not([invalid]):not([aria-readonly=true])) .pds-input__field:focus-visible {
+  outline-color: var(--pine-color-focus-ring);
+}
 
 .pds-input {
   display: flex;
   flex-direction: column;
 }
 
-label {
-  font-size: var(--font-size-label);
-  font-weight: var(--font-weight-label);
-  line-height: var(--line-height-label);
-  margin-block-end: var(--spacing-label-margin-block-end);
+.pds-input__label-wrapper {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  margin-block-end: var(--pine-dimension-2xs);
+}
+
+.pds-input__label {
+  color: var(--pine-color-text-strong);
+  margin-block-end: var(--pine-dimension-2xs);
+}
+
+.pds-input__label-wrapper .pds-input__label {
+  margin-block-end: 0;
+}
+
+.pds-input__action {
+  align-items: center;
+  display: flex;
+  gap: var(--pine-dimension-xs);
+  margin-inline-start: var(--pine-dimension-xs);
 }
 
-input {
-  border: 1px solid var(--color-border-default);
-  border-radius: 10px;
-  font-size: var(--font-size-input-field);
-  font-weight: var(--font-weight-input-field);
-  line-height: var(--line-height-input-field);
-  padding: var(--spacing-field-padding-block) var(--spacing-input-field-padding-inline);
-  /* stylelint-disable */
-  /* stylelint-enable */
+.pds-input__field-wrapper {
+  align-items: center;
+  display: flex;
+  position: relative;
+  width: 100%;
+}
+.pds-input__field-wrapper.has-prefix .pds-input__field {
+  padding-inline-start: calc(2 * var(--pds-input-padding-x) + var(--prefix-width, 1em));
+}
+.pds-input__field-wrapper.has-suffix .pds-input__field {
+  padding-inline-end: calc(2 * var(--pds-input-padding-x) + var(--suffix-width, 1em));
+}
+.pds-input__field-wrapper.has-prepend .pds-input__field {
+  border-end-start-radius: var(--pine-dimension-none);
+  border-start-start-radius: var(--pine-dimension-none);
 }
-input:disabled {
-  background-color: var(--color-background-disabled);
-  color: var(--color-disabled-text);
+.pds-input__field-wrapper.has-append .pds-input__field {
+  border-end-end-radius: var(--pine-dimension-none);
+  border-start-end-radius: var(--pine-dimension-none);
+}
+
+.pds-input__field {
+  background: var(--pds-input-background);
+  border: var(--pds-input-border-width) solid var(--pds-input-border-color);
+  border-radius: var(--pds-input-border-radius);
+  box-sizing: border-box;
+  color: var(--pds-input-text-color);
+  flex: 1;
+  font: var(--pds-input-font);
+  letter-spacing: var(--pine-letter-spacing);
+  min-height: var(--pds-input-field-min-height);
+  min-width: var(--pine-dimension-none);
+  padding: var(--pds-input-padding-y) var(--pds-input-padding-x);
+  transition: border-color var(--pine-motion-duration-base) ease;
+  width: 100%;
+}
+.pds-input__field:hover:not(:disabled) {
+  border-color: var(--pds-input-border-color-hover);
+}
+.pds-input__field:disabled {
+  background: var(--pds-input-disabled-background);
+  border-color: var(--pine-color-border-disabled);
+  color: var(--pds-input-disabled-text-color);
   cursor: not-allowed;
 }
-input:hover {
-  border-color: var(--color-border-hover);
+.pds-input__field:disabled::placeholder {
+  color: var(--pine-color-text-placeholder-disabled);
 }
-input:focus-visible {
-  box-shadow: var(--box-shadow-focus);
-  outline: none;
+.has-error .pds-input__field:hover:not(:disabled) {
+  border-color: var(--pds-input-error-border-hover);
 }
-input::-webkit-input-placeholder {
-  color: var(--color-placeholder-text);
+:host-context([data-theme=dark]) .has-error .pds-input__field:hover:not(:disabled) {
+  border-color: var(--pine-color-red-950);
 }
-input::-moz-placeholder {
-  color: var(--color-placeholder-text);
+.pds-input__field:focus-visible:not(.has-error) {
+  border-color: var(--pine-color-border-active);
+  outline: var(--pine-outline-focus);
+  outline-offset: var(--pine-border-width);
+  position: relative;
+  z-index: 1;
 }
-input::-moz-placeholder {
-  color: var(--color-placeholder-text);
+:host([has-prepend]) .pds-input__field:focus-visible:not(.has-error), :host([has-append]) .pds-input__field:focus-visible:not(.has-error), :host([has-prefix]) .pds-input__field:focus-visible:not(.has-error), :host([has-suffix]) .pds-input__field:focus-visible:not(.has-error) {
+  outline-offset: var(--pine-dimension-none);
 }
-input:-ms-input-placeholder {
-  color: var(--color-placeholder-text);
+.pds-input__field::placeholder {
+  color: var(--pds-input-placeholder-color);
 }
-input:has(~ .pds-input__error-message) {
-  border-color: var(--color-border-error);
+.pds-input__field:placeholder-shown {
+  text-overflow: ellipsis;
 }
-input:has(~ .pds-input__error-message):focus-visible {
-  box-shadow: var(--box-shadow-focus-error);
-  outline: none;
+.has-error .pds-input__field {
+  background-color: var(--pds-input-error-background);
+  border-color: var(--pds-input-error-border);
+}
+:host-context([data-theme=dark]) .has-error .pds-input__field {
+  background-color: var(--pine-color-red-950);
+}
+.has-error .pds-input__field:focus-visible {
+  outline-color: var(--pine-color-focus-ring-danger);
+  position: relative;
+  z-index: 1;
 }
 
 .pds-input__error-message,
 .pds-input__helper-message {
-  font-size: var(--font-size-helper-message);
-  font-weight: var(--font-weight-helper-message);
-  line-height: var(--line-height-helper-message);
-  margin-block-end: 0;
-  margin-block-start: var(--spacing-margin-top-helper-message);
+  color: var(--pine-color-text-message);
+  font: var(--pine-typography-body-sm-medium);
+  margin-block-end: var(--pine-dimension-none);
+  margin-block-start: var(--pine-dimension-2xs);
 }
 
 .pds-input__error-message {
-  color: var(--color-error);
+  color: var(--pds-input-error-color);
+  display: flex;
+  gap: var(--pine-dimension-2xs);
+}
+.pds-input__error-message pds-icon {
+  margin-block-start: var(--pine-dimension-025);
+}
+
+.visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: polygon(0 0, 0 0, 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.pds-input__field::-webkit-search-cancel-button {
+  appearance: none;
+  background-color: var(--pds-input-placeholder-color);
+  cursor: pointer;
+  height: var(--pine-dimension-sm);
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.646 3.646a.5.5 0 0 1 .708 0L8 7.293l3.646-3.647a.5.5 0 0 1 .708.708L8.707 8l3.647 3.646a.5.5 0 0 1-.708.708L8 8.707l-3.646 3.647a.5.5 0 0 1-.708-.708L7.293 8 3.646 4.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
+  mask-size: contain;
+  width: var(--pine-dimension-sm);
 }