@plexui/styles 0.0.0-stage → 0.1.0

package/dist/es/components/Input/Input.module.css

@@ -0,0 +1,519 @@
+@layer components {.Container {
+  display: flex;
+  align-items: center;
+  gap: var(--input-gap);
+  width: 100%;
+  border-radius: var(--input-radius);
+  color: var(--input-text-color);
+  cursor: text;
+  /* NOTE: Whenever this is not 16px on mobile, zooming occurs. */
+  font-size: var(--input-font-size);
+  font-weight: var(--font-weight-normal);
+  line-height: 1;
+  transition-duration: var(--transition-duration-basic);
+  transition-property: color, box-shadow, background-color;
+  transition-timing-function: var(--transition-ease-basic);
+}
+
+  .Container:where([data-optically-align="start"]) {
+    margin-inline-start: calc(var(--input-gutter) * -1);
+  }
+
+    .Container:where([data-optically-align="start"])[data-pill] {
+      margin-inline-start: calc(var(--input-gutter) * var(--control-gutter-pill-scaling) * -1);
+    }
+
+  .Container:where([data-optically-align="end"]) {
+    margin-inline-end: calc(var(--input-gutter) * -1);
+  }
+
+    .Container:where([data-optically-align="end"])[data-pill] {
+      margin-inline-end: calc(var(--input-gutter) * var(--control-gutter-pill-scaling) * -1);
+    }
+
+  /* =============================================
+    Outline variant
+  ============================================= */
+  .Container:where([data-variant="outline"]) {
+    /* NOTE: Don't add box-model size here, as the <input> defines all height sizing */
+    box-shadow: 0 0 0 1px var(--input-outline-border-color) inset;
+  }
+      @media (hover: hover) and (pointer: fine) {.Container:where([data-variant="outline"]):not([data-disabled]):hover {
+        box-shadow: 0 0 0 1px var(--input-outline-border-color-hover) inset;
+}
+}
+
+      .Container:where([data-variant="outline"]):not([data-disabled])[data-focused="true"] {
+        box-shadow: 0 0 0 1px var(--input-outline-border-color-focus) inset;
+      }
+
+      .Container:where([data-variant="outline"]):not([data-disabled])[data-invalid] {
+        box-shadow: 0 0 0 1px var(--input-border-color-invalid) inset;
+      }
+
+  /* =============================================
+    Soft variant
+  ============================================= */
+  .Container:where([data-variant="soft"]) {
+    background-color: var(--input-soft-background-color);
+  }
+      .Container:where([data-variant="soft"]):not([data-disabled])[data-focused="true"] {
+        box-shadow: 0 0 0 1px var(--input-soft-border-color-focus) inset;
+      }
+
+      .Container:where([data-variant="soft"]):not([data-disabled])[data-invalid] {
+        box-shadow: 0 0 0 1px var(--input-border-color-invalid) inset;
+      }
+
+  /* =============================================
+    Ghost variant: no border, no fill. For a field that its container
+    already frames, such as the search line at the top of a dialog
+  ============================================= */
+  .Container:where([data-variant="ghost"]) {
+    background-color: transparent;
+  }
+
+    .Container:where([data-variant="ghost"]):not([data-disabled])[data-invalid] {
+      box-shadow: 0 0 0 1px var(--input-border-color-invalid) inset;
+    }
+
+  /* =============================================
+    Invalid
+  ============================================= */
+    .Container[data-invalid] ::-moz-selection {
+      background-color: var(--red-a50);
+    }
+    .Container[data-invalid] ::selection {
+      background-color: var(--red-a50);
+    }
+
+  /* =============================================
+    Sizes
+  ============================================= */
+  .Container:where([data-size="3xs"]) {
+    --input-size: var(--control-size-3xs);
+    --input-font-size: var(--control-font-size-sm);
+    --input-radius: var(--control-radius-sm);
+    --input-gutter: var(--control-gutter-2xs);
+    --input-gap: var(--input-gap-xs);
+    --input-adornment-offset: -1px;
+    --input-clear-size: 12px;
+    --input-clear-icon-size: 10px;
+    --input-clear-offset: -1px;
+    --input-clear-pill-offset: -2px;
+  }
+
+  .Container:where([data-size="2xs"]) {
+    --input-size: var(--control-size-2xs);
+    --input-font-size: var(--control-font-size-sm);
+    --input-radius: var(--control-radius-sm);
+    --input-gutter: var(--control-gutter-xs);
+    --input-gap: var(--input-gap-xs);
+    --input-adornment-offset: -1px;
+    --input-clear-size: 14px;
+    --input-clear-icon-size: 12px;
+    --input-clear-offset: -2px;
+    --input-clear-pill-offset: -4px;
+  }
+
+  .Container:where([data-size="xs"]) {
+    --input-size: var(--control-size-xs);
+    --input-font-size: var(--control-font-size-md);
+    --input-radius: var(--control-radius-sm);
+    --input-gutter: var(--control-gutter-xs);
+    --input-gap: var(--input-gap-sm);
+    --input-adornment-offset: -1px;
+    --input-clear-size: 16px;
+    --input-clear-icon-size: 12px;
+    --input-clear-offset: -2px;
+    --input-clear-pill-offset: -4px;
+  }
+
+  .Container:where([data-size="sm"]) {
+    --input-size: var(--control-size-sm);
+    --input-font-size: var(--control-font-size-md);
+    --input-radius: var(--control-radius-sm);
+    --input-gutter: var(--control-gutter-sm);
+    --input-gap: var(--input-gap-md);
+    --input-adornment-offset: -1px;
+    --input-clear-size: 16px;
+    --input-clear-icon-size: 12px;
+    --input-clear-offset: -3px;
+    --input-clear-pill-offset: -6px;
+  }
+
+  .Container:where([data-size="md"]) {
+    --input-size: var(--control-size-md);
+    --input-font-size: var(--control-font-size-md);
+    --input-radius: var(--control-radius-md);
+    --input-gutter: var(--control-gutter-md);
+    --input-gap: var(--input-gap-md);
+    --input-clear-size: 18px;
+    --input-clear-icon-size: 14px;
+    --input-clear-offset: -4px;
+    --input-clear-pill-offset: -7px;
+  }
+
+  .Container:where([data-size="lg"]) {
+    --input-size: var(--control-size-lg);
+    --input-font-size: var(--control-font-size-md);
+    --input-radius: var(--control-radius-lg);
+    --input-gutter: var(--control-gutter-md);
+    --input-gap: var(--input-gap-md);
+    --input-clear-size: 18px;
+    --input-clear-icon-size: 14px;
+    --input-clear-offset: -5px;
+    --input-clear-pill-offset: -6px;
+  }
+
+  .Container:where([data-size="xl"]) {
+    --input-size: var(--control-size-xl);
+    --input-font-size: var(--control-font-size-lg);
+    --input-radius: var(--control-radius-xl);
+    --input-gutter: var(--control-gutter-lg);
+    --input-gap: var(--input-gap-lg);
+    --input-clear-size: 18px;
+    --input-clear-icon-size: 14px;
+    --input-clear-offset: -6px;
+    --input-clear-pill-offset: -7px;
+  }
+
+  .Container:where([data-size="2xl"]) {
+    --input-size: var(--control-size-2xl);
+    --input-font-size: var(--control-font-size-lg);
+    --input-radius: var(--control-radius-xl);
+    --input-gutter: var(--control-gutter-lg);
+    --input-gap: var(--input-gap-lg);
+    --input-adornment-offset: -4px;
+    --input-clear-size: 20px;
+    --input-clear-icon-size: 15px;
+    --input-clear-offset: -6px;
+    --input-clear-pill-offset: -7px;
+  }
+
+  .Container:where([data-size="3xl"]) {
+    --input-size: var(--control-size-3xl);
+    --input-font-size: var(--control-font-size-lg);
+    --input-radius: var(--control-radius-xl);
+    --input-gutter: var(--control-gutter-xl);
+    --input-gap: var(--input-gap-lg);
+    --input-adornment-offset: -4px;
+    --input-clear-size: 20px;
+    --input-clear-icon-size: 15px;
+    --input-clear-offset: -6px;
+    --input-clear-pill-offset: -7px;
+  }
+
+  /* =============================================
+    Gutter sizes
+  ============================================= */
+  .Container:where([data-gutter-size="2xs"]) {
+    --input-gutter: var(--control-gutter-2xs);
+    --input-adornment-offset: -1px;
+  }
+
+  .Container:where([data-gutter-size="xs"]) {
+    --input-gutter: var(--control-gutter-xs);
+    --input-adornment-offset: -1px;
+  }
+
+  .Container:where([data-gutter-size="sm"]) {
+    --input-gutter: var(--control-gutter-sm);
+    --input-adornment-offset: -2px;
+  }
+
+  .Container:where([data-gutter-size="md"]) {
+    --input-gutter: var(--control-gutter-md);
+    --input-adornment-offset: -2px;
+  }
+
+  .Container:where([data-gutter-size="lg"]) {
+    --input-gutter: var(--control-gutter-lg);
+    --input-adornment-offset: -2px;
+  }
+
+  .Container:where([data-gutter-size="xl"]) {
+    --input-gutter: var(--control-gutter-xl);
+    --input-adornment-offset: -4px;
+  }
+
+  /* =============================================
+    Pill
+  ============================================= */
+  .Container:where([data-pill]) {
+    --input-radius: var(--radius-full);
+  }
+
+  /* =============================================
+    Disabled
+    ---------------------------------------------
+    Fade the input text and the built-in Clear button, but keep the
+    Container's chrome (border, focus ring) and any AdornmentButton
+    at full opacity — AdornmentButtons often double as toggles that
+    remain interactive while the input is disabled (voice-mode switch,
+    edit-in-place, etc.).
+  ============================================= */
+  .Container[data-disabled] {
+    cursor: not-allowed;
+  }
+
+    .Container[data-disabled] > .Input,
+    .Container[data-disabled] > .Clear {
+      opacity: 0.5;
+    }
+  /*
+   * When adornments are present, gutter is applied to the container instead of the input.
+   */
+  .Container:where([data-has-start-adornment]) {
+    padding-left: var(--input-gutter);
+  }
+
+  /* =============================================
+    Gutter
+  ============================================= */
+
+  .Container:where([data-has-start-adornment][data-pill]) {
+    padding-left: calc(var(--input-gutter) * var(--control-gutter-pill-scaling));
+  }
+
+  .Container:where([data-has-end-adornment]) {
+    padding-right: var(--input-gutter);
+  }
+
+  .Container:where([data-has-end-adornment][data-pill]) {
+    padding-right: calc(var(--input-gutter) * var(--control-gutter-pill-scaling));
+  }
+
+  /* =============================================
+    Adornments
+  ============================================= */
+  .Container > :first-child:not(input) {
+    margin-left: var(--input-adornment-offset, -2px);
+  }
+
+  .Container > :last-child:not(input, .Clear, .AdornmentButton) {
+    margin-right: var(--input-adornment-offset, -2px);
+  }.Input {
+  display: block;
+  width: 100%;
+  height: var(--input-size);
+  /* `padding` is intrinsic to `.Input` when no adornments are present, for a few reasons. Autofill extensions are one such reason. */
+  padding: 0 var(--input-gutter);
+  border: 0;
+  border-radius: 0;
+  background: none;
+  box-shadow: none;
+  color: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+}
+
+  .Input:focus {
+    outline: 0;
+  }
+
+  .Input:disabled {
+    cursor: not-allowed;
+  }
+
+  .Input::-moz-placeholder {
+    color: var(--input-placeholder-text-color);
+  }
+
+  .Input::placeholder {
+    color: var(--input-placeholder-text-color);
+  }
+
+  /* Applying an animation on autofill allows us to listen for the event in JS */
+  .Input:-webkit-autofill {
+    animation: native-autofill-in 1ms;
+  }
+
+  .Input:-webkit-autofill, .Input:-webkit-autofill:focus, .Input:-webkit-autofill:hover {
+    color: var(--color-text) !important;
+    -webkit-text-fill-color: var(--color-text) !important;
+    /*
+     * Prevent all color changes by delaying their effect for a very long time
+     * We cannot beat the specificity of user-agent stylesheet declarations, so we must delay them.
+     */
+    -webkit-transition:
+      background-color 0s 50000s,
+      box-shadow 0s 50000s,
+      filter 0s 50000s !important;
+    transition:
+      background-color 0s 50000s,
+      box-shadow 0s 50000s,
+      filter 0s 50000s !important;
+}
+
+  .Input:-webkit-autofill-and-obscured, .Input:-webkit-autofill-strong-password, .Input:-webkit-autofill-strong-password-viewable {
+    color: var(--color-text) !important;
+    -webkit-text-fill-color: var(--color-text) !important;
+    /*
+     * Prevent all color changes by delaying their effect for a very long time
+     * We cannot beat the specificity of user-agent stylesheet declarations, so we must delay them.
+     */
+    -webkit-transition:
+      background-color 0s 50000s,
+      box-shadow 0s 50000s,
+      filter 0s 50000s !important;
+    transition:
+      background-color 0s 50000s,
+      box-shadow 0s 50000s,
+      filter 0s 50000s !important;
+}
+
+  /* Prevent strange autofill size adjustments */
+  .Input:-webkit-autofill::first-line {
+    font-size: inherit !important;
+    -webkit-transition: font-size 0s 50000s !important;
+    transition: font-size 0s 50000s !important;
+  }
+
+  /* Hide up/down arrows */
+  .Input[type="number"] {
+    /* Firefox */
+    -webkit-appearance: textfield;
+       -moz-appearance: textfield;
+            appearance: textfield;
+
+    /* Chrome, Safari, Edge, Opera */
+  }
+    .Input[type="number"]::-webkit-outer-spin-button,
+    .Input[type="number"]::-webkit-inner-spin-button {
+      margin: 0;
+      -webkit-appearance: none;
+              appearance: none;
+    }
+
+  /* Dynamic pill spacing */
+  :where(.Container[data-pill]) .Input {
+    padding: 0 calc(var(--input-gutter) * var(--control-gutter-pill-scaling));
+  }
+
+  :where(.Container[data-has-start-adornment]) .Input {
+    padding-left: 0;
+  }
+
+  :where(.Container[data-has-end-adornment]) .Input {
+    padding-right: 0;
+  }.Clear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--input-clear-size);
+  height: var(--input-clear-size);
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-full);
+  margin-right: var(--input-clear-offset);
+  background-color: var(--color-background-primary-soft-alpha);
+  color: var(--color-text-primary-soft);
+  cursor: pointer;
+  transition-duration: var(--transition-duration-basic);
+  transition-property: background-color;
+  transition-timing-function: var(--transition-ease-basic);
+}
+
+  .Clear:hover {
+    background-color: var(--color-background-primary-soft-alpha-hover);
+  }
+
+  .Clear:active {
+    background-color: var(--color-background-primary-soft-alpha-active);
+  }
+
+  :where(.Container[data-pill]) .Clear {
+    margin-right: var(--input-clear-pill-offset);
+  }
+
+  .Clear > svg {
+    width: var(--input-clear-icon-size);
+    height: var(--input-clear-icon-size);
+  }/* AdornmentButton — public sibling of .Clear for in-input action buttons
+   (mic toggle, copy, send, etc.). Sized from the Input's own size token:
+   input height minus one spacing step each side leaves ~4px of breathing
+   room top + bottom, so a md (32px) input gets a 24px pill, an lg (36px)
+   gets 28px, etc. Radius is --radius-full so a pill input stays
+   concentric with the button. Icon fills half the button. */.AdornmentButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: calc(var(--input-size) - calc(var(--spacing) * 2));
+  height: calc(var(--input-size) - calc(var(--spacing) * 2));
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-full);
+  /* Concentric with the input edge — leave a spacing(1) = 4px breathing
+     gap between the button's outer edge and the input's inner edge.
+     For a non-pill input that's `4 - gutter`; a pill input scales the
+     gutter by --control-gutter-pill-scaling. */
+  margin-right: calc(calc(var(--spacing) * 1) - var(--input-gutter));
+  background-color: transparent;
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  transition-duration: var(--transition-duration-basic);
+  transition-property: background-color, color;
+  transition-timing-function: var(--transition-ease-basic);
+}
+
+  .AdornmentButton:hover {
+    background-color: var(--color-background-secondary-soft-alpha);
+    color: var(--color-text);
+  }
+
+  .AdornmentButton[aria-pressed="true"] {
+    background-color: var(--color-background-primary-soft);
+    color: var(--color-text);
+  }
+
+  .AdornmentButton[data-color="caution"][aria-pressed="true"] {
+    background-color: var(--color-background-caution-soft);
+    color: var(--color-text-caution-soft);
+  }
+
+  .AdornmentButton[data-color="danger"][aria-pressed="true"] {
+    background-color: var(--color-background-danger-soft);
+    color: var(--color-text-danger-soft);
+  }
+
+  .AdornmentButton[data-color="success"][aria-pressed="true"] {
+    background-color: var(--color-background-success-soft);
+    color: var(--color-text-success-soft);
+  }
+
+  .AdornmentButton[data-color="info"][aria-pressed="true"] {
+    background-color: var(--color-background-info-soft);
+    color: var(--color-text-info-soft);
+  }
+
+  .AdornmentButton[data-color="discovery"][aria-pressed="true"] {
+    background-color: var(--color-background-discovery-soft);
+    color: var(--color-text-discovery-soft);
+  }
+
+  .AdornmentButton:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  :where(.Container[data-pill]) .AdornmentButton {
+    margin-right: calc(calc(var(--spacing) * 1) - var(--input-gutter) * var(--control-gutter-pill-scaling));
+  }
+
+  .AdornmentButton > svg {
+    width: calc(var(--input-size) / 2);
+    height: calc(var(--input-size) / 2);
+  }@keyframes native-autofill-in {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+}