@repobit/dex-system-design 0.25.11 → 0.26.0

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

@@ -1,168 +1,75 @@
 import { css } from "lit";
 
+/**
+ * What the clipboard field adds to the shared field chrome: a paste button
+ * sitting over the right-hand end of the input.
+ *
+ * Everything else — label, sizes, states, help text — comes from
+ * shared/form-field.css.js.
+ */
 export default css`
-  :host {
-    display: block;
-    width: 90%;
-  }
-
-  .input-container {
-    display: flex;
-    flex-direction: column;
-  }
-
-  label {
-    margin-bottom: 4px;
-    font-weight: 500;
-    color: var(--color-neutral-900);
-  }
-
-  .form-label__required {
-    color: var(--color-red-500);
-    margin-left: var(--spacing-4);
-  }
-
-  .label-sm {
-    font-size: var(--typography-fontSize-xs);
-    font-weight: var(--typography-fontWeight-bold);
-    line-height: var(--typography-lineHeight-normal);
-    letter-spacing: var(--typography-letterSpacing-wide);
-    margin-bottom: var(--spacing-4);
-  }
-
-  .label-md {
-    font-size: var(--typography-fontSize-sm);
-    font-weight: var(--typography-fontWeight-bold);
-    line-height: var(--typography-lineHeight-normal);
-    margin-bottom: var(--spacing-4);
-  }
-
-  .label-lg {
-    font-size: var(--typography-fontSize-lg);
-    font-weight: var(--typography-fontWeight-bold);
-    line-height: var(--typography-lineHeight-normal);
-    margin-bottom: var(--spacing-8);
-  }
-
-  .form-input-bd {
-    width: 100%;
-    border: var(--border-width-1, 1px) solid var(--color-neutral-300);
-    font-family: var(--typography-fontFamily-sans, sans-serif);
-    line-height: var(--typography-lineHeight-normal, 1.5);
-    transition: border-color 0.3s ease, background-color 0.3s ease,
-      box-shadow 0.3s ease;
-    background-color: var(--color-neutral-0);
-    color: var(--color-neutral-900);
-    outline: none;
-  }
-
-  input:focus {
-    border-color: var(--color-blue-500);
-    box-shadow: var(--focus-outline-primary, 0 0 0 2px rgba(0, 109, 255, 0.3));
-  }
-
-  .input-sm {
-    padding: var(--spacing-8) var(--spacing-12);
-    font-size: var(--typography-fontSize-sm);
-    height: var(--dimension-34px);
-    border-radius: var(--form-input-medium-borderRadius);
-  }
-
-  .input-md {
-    padding: var(--spacing-12) var(--spacing-16);
-    font-size: var(--typography-fontSize-base);
-    height: var(--dimension-45px);
-    border-radius: var(--form-input-large-borderRadius);
-  }
-
-  .input-lg {
-    padding: var(--spacing-16) var(--spacing-20);
-    font-size: var(--typography-fontSize-lg);
-    height: var(--dimension-55px);
-    border-radius: var(--form-input-large-borderRadius);
-  }
-
-  ::placeholder {
-    color: var(--color-neutral-500);
-    opacity: 1;
-  }
-
-  .form-label {
-    display: block;
-    font-family: var(--typography-fontFamily-sans);
-    color: var(--color-neutral-900);
-    letter-spacing: var(--typography-letterSpacing-normal);
-  }
-
-  .form-input-bd:focus,
-  .form-input-bd.focused {
-    border-color: var(--color-blue-500);
-    box-shadow: var(--focus-outline-primary, 0 0 0 2px rgba(0, 109, 255, 0.3));
-    background: none;
-  }
-
-  .form-help-text {
-    font-size: var(--typography-fontSize-xs);
-    font-weight: var(--typography-fontWeight-normal);
-    line-height: var(--typography-lineHeight-normal);
-    letter-spacing: var(--typography-letterSpacing-normal);
-    font-family: var(--typography-fontFamily-sans);
-    margin-top: var(--spacing-4);
-  }
-
-  .form-help-text--default {
-    color: var(--color-neutral-600);
-  }
-
-  .form-input--error {
-    background-color: var(--color-red-50);
-    border-color: var(--color-red-500);
-  }
-
-  .form-help-text--error {
-    color: var(--color-red-600);
-  }
-
-  .form-input--success {
-    background-color: var(--color-green-50);
-    border-color: var(--color-green-500);
-  }
-
-  .form-help-text--success {
-    color: var(--color-green-600);
-  }
-
-  .form-input--disabled {
-    background-color: var(--color-neutral-100);
-    border-color: var(--color-neutral-300);
-    color: var(--color-neutral-500);
-    cursor: not-allowed;
-  }
-
   .input-with-button {
     position: relative;
     display: flex;
     align-items: center;
   }
 
+  /* Clearance for the button. Typed so it outranks the .input-* size classes,
+     which set the padding shorthand. */
   input.form-input-bd {
     flex: 1;
-    padding-right: 2.5rem; /* space for button */
+    padding-inline-end: var(--spacing-40);
   }
 
   .paste-button {
     position: absolute;
-    right: 0.5rem;
+    right: var(--spacing-8);
+    display: inline-flex;
+    align-items: center;
     background: transparent;
     border: none;
-    cursor: pointer;
-    font-size: 1rem;
     padding: 0;
-    color: var(--color-gray-700);
+    cursor: pointer;
+    font-family: var(--typography-fontFamily-sans);
+    /* no role: this button holds one 20x20 svg and no text, so there is no
+       text-content type for a role to describe -- the same glyph-box category
+       as .bd-arrow's fallback typography.
+       .
+       Unlike the other rows closed in this pass, this declaration is NOT
+       redundant and is marked rather than removed. Measured: at "revert" the
+       button falls to the UA's 13.333px, so the line does real work in
+       normalising a <button> to the inherited step; it simply has nothing to
+       act on today, since the box measures 20x20 at either value. Deleting it
+       would let the UA size surface the day the button gains a label. */
+    font-size: var(--typography-fontSize-base);
+    color: var(--color-text-secondary);
+  }
+
+  /* It is a real button and had no focus indicator at all, which is a 2.4.7
+     failure — reachable by keyboard, invisible once reached. The ring is the
+     shared one; the radius is the default for an element with no radius of its
+     own, so the ring is not a hard rectangle. */
+  .paste-button:focus-visible {
+    outline: none;
+    box-shadow: var(--focus-outline-primary);
+    border-radius: var(--focus-outline-radius);
+  }
+
+  .paste-button:hover {
+    color: var(--color-text-primary);
   }
 
   .paste-button:disabled {
     cursor: not-allowed;
-    opacity: 0.5;
+    /* the field expresses disabled with the neutral ramp, not with opacity.
+
+       The same token the field beside it disables to. This was
+       --color-text-disabled, which is neutral-400 and measures 3.23:1 on white
+       where every other disabled label in the family -- both text inputs, all
+       three selection controls, and bd-button -- measures 4.67:1. Disabled text
+       is exempt under 1.4.3, so neither reading was a failure; they were two
+       answers to one question inside one component, since the field this button
+       sits in already disables to --form-input-disabled-color. */
+    color: var(--form-input-disabled-color);
   }
 `;

package/src/components/input/input-clipboard.js

@@ -1,12 +1,17 @@
-import { LitElement, html } from "lit";
-import { tokens } from "../../tokens/tokens.js";
+import { LitElement, html, nothing } from "lit";
+// Installs the design tokens into document scope; see src/tokens/tokens.js
+import "../../tokens/tokens.js";
+import { formFieldCSS } from "../shared/form-field.css.js";
 import inputClipboardCSS from "../input/input-clipboard.css.js";
+import { resolveSize } from '../shared/prop-vocabulary.js';
 
 class CustomInputClipboard extends LitElement {
   static properties = {
     label      : { type: String },
     type       : { type: String },
-    kind       : { type: String }, // sm, md, lg
+    size       : { type: String, reflect: true },
+    /** @deprecated pass `size`. It named the size, not the kind. */
+    kind       : { type: String },
     placeholder: { type: String },
     required   : { type: Boolean },
     focused    : { type: Boolean },
@@ -19,10 +24,12 @@ class CustomInputClipboard extends LitElement {
 
   constructor() {
     super();
-    this.label = "Default Label";
+    /* No default copy — see the note in input.js. */
+    this.label = "";
     this.type = "text";
-    this.kind = "md";
-    this.placeholder = "Paste something...";
+    this.size = "md";
+    this.kind = "";
+    this.placeholder = "";
     this.required = false;
     this.focused = false;
     this.tooltip = "";
@@ -47,18 +54,25 @@ class CustomInputClipboard extends LitElement {
     this.dispatchEvent(new CustomEvent("input", { detail: this.value }));
   }
 
+  willUpdate(changed) {
+    // kind said "size" on these three and nothing else in the system,
+    // so it moved; see shared/prop-vocabulary.js
+    if (changed.has("kind") && this.kind) this.size = this.kind;
+    if (changed.has("size") || changed.has("kind")) this.size = resolveSize(this.size);
+  }
+
   render() {
     const inputClass = {
       sm: "input-sm",
       md: "input-md",
       lg: "input-lg"
-    }[this.kind];
+    }[this.size];
 
     const labelClass = {
       sm: "label-sm",
       md: "label-md",
       lg: "label-lg"
-    }[this.kind];
+    }[this.size];
 
     const inputStateClass = this.disabled
       ? "form-input--disabled"
@@ -76,12 +90,14 @@ class CustomInputClipboard extends LitElement {
 
     return html`
       <div class="input-container">
-        <label for="clipboard-input" class="form-label ${labelClass}">
-          ${this.label}
-          ${this.required
-            ? html`<span class="form-label__required">*</span>`
-            : ""}
-        </label>
+        ${this.label
+          ? html`<label for="clipboard-input" class="form-label ${labelClass}">
+              ${this.label}
+              ${this.required
+                ? html`<span class="form-label__required" aria-hidden="true">*</span>`
+                : ""}
+            </label>`
+          : nothing}
         <div class="input-with-button">
           <input
             id="clipboard-input"
@@ -132,6 +148,6 @@ class CustomInputClipboard extends LitElement {
   }
 
 }
-CustomInputClipboard.styles = [tokens, inputClipboardCSS];
+CustomInputClipboard.styles = [formFieldCSS, inputClipboardCSS];
 
 customElements.define("bd-custom-input-clipboard", CustomInputClipboard);

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

@@ -1,148 +1,10 @@
 import { css } from "lit";
 
-export default css`
-  :host {
-    display: block;
-    width: 90%;
-  }
-
-  .input-container {
-    display: flex;
-    flex-direction: column;
-  }
-
-  label {
-    margin-bottom: 4px;
-    font-weight: 500;
-    color: var(--color-neutral-900);
-  }
-
-  .form-label__required {
-    color: var(--color-red-500);
-    margin-left: var(--spacing-4);
-  }
-
-  .label-sm {
-    font-size: var(--typography-fontSize-xs);
-    font-weight: var(--typography-fontWeight-bold);
-    line-height: var(--typography-lineHeight-normal);
-    letter-spacing: var(--typography-letterSpacing-wide);
-    margin-bottom: var(--spacing-4);
-  }
-
-  .label-md {
-    font-size: var(--typography-fontSize-sm);
-    font-weight: var(--typography-fontWeight-bold);
-    line-height: var(--typography-lineHeight-normal);
-    margin-bottom: var(--spacing-4);
-  }
-
-  .label-lg {
-    font-size: var(--typography-fontSize-lg);
-    font-weight: var(--typography-fontWeight-bold);
-    line-height: var(--typography-lineHeight-normal);
-    margin-bottom: var(--spacing-8);
-  }
-
-  .form-input-bd {
-    width: 100%;
-    border: var(--border-width-1, 1px) solid var(--color-neutral-300);
-    font-family: var(--typography-fontFamily-sans, sans-serif);
-    line-height: var(--typography-lineHeight-normal, 1.5);
-    transition: border-color 0.3s ease, background-color 0.3s ease,
-      box-shadow 0.3s ease;
-    background-color: var(--color-neutral-0);
-    color: var(--color-neutral-900);
-    outline: none;
-  }
-
-  input:focus {
-    border-color: var(--color-blue-500);
-    box-shadow: var(
-      --focus-outline-primary,
-      0 0 0 2px rgba(0, 109, 255, 0.3)
-    );
-  }
-
-  .input-sm {
-    padding: var(--spacing-8) var(--spacing-12);
-    font-size: var(--typography-fontSize-sm);
-    height: var(--dimension-34px);
-    border-radius: var(--form-input-medium-borderRadius);
-  }
-
-  .input-md {
-    padding: var(--spacing-12) var(--spacing-16);
-    font-size: var(--typography-fontSize-base);
-    height: var(--dimension-45px);
-    border-radius: var(--form-input-large-borderRadius);
-  }
-
-  .input-lg {
-    padding: var(--spacing-16) var(--spacing-20);
-    font-size: var(--typography-fontSize-lg);
-    height: var(--dimension-55px);
-    border-radius: var(--form-input-large-borderRadius);
-  }
-
-  ::placeholder {
-    color: var(--color-neutral-500);
-    opacity: 1;
-  }
-
-  .form-label {
-    display: block;
-    font-family: var(--typography-fontFamily-sans);
-    color: var(--color-neutral-900);
-    letter-spacing: var(--typography-letterSpacing-normal);
-  }
-
-  .form-input-bd:focus,
-  .form-input-bd.focused {
-    border-color: var(--color-blue-500);
-    box-shadow: var(
-      --focus-outline-primary,
-      0 0 0 2px rgba(0, 109, 255, 0.3)
-    );
-    background: none;
-  }
-
-  .form-help-text {
-    font-size: var(--typography-fontSize-xs);
-    font-weight: var(--typography-fontWeight-normal);
-    line-height: var(--typography-lineHeight-normal);
-    letter-spacing: var(--typography-letterSpacing-normal);
-    font-family: var(--typography-fontFamily-sans);
-    margin-top: var(--spacing-4);
-  }
-
-  .form-help-text--default {
-    color: var(--color-neutral-600);
-  }
-
-  .form-input--error {
-    background-color: var(--color-red-50);
-    border-color: var(--color-red-500);
-  }
-
-  .form-help-text--error {
-    color: var(--color-red-600);
-  }
-
-  .form-input--success {
-    background-color: var(--color-green-50);
-    border-color: var(--color-green-500);
-  }
-
-  .form-help-text--success {
-    color: var(--color-green-600);
-  }
-
-  .form-input--disabled {
-    background-color: var(--color-neutral-100);
-    border-color: var(--color-neutral-300);
-    color: var(--color-neutral-500);
-    cursor: not-allowed;
-  }
-    
-`;
+/**
+ * bd-custom-input adds nothing to the shared field chrome — a text input is
+ * the plain case that shared/form-field.css.js was written around. The file
+ * stays so the component's `static styles` reads the same as its two
+ * siblings', and so there is somewhere obvious to put an input-only rule if
+ * one is ever needed.
+ */
+export default css``;

package/src/components/input/input.js

@@ -1,48 +1,94 @@
-import { LitElement, html } from "lit";
-import { tokens } from "../../tokens/tokens.js";
+import { LitElement, html, nothing } from "lit";
+// Installs the design tokens into document scope; see src/tokens/tokens.js
+import "../../tokens/tokens.js";
+import { formFieldCSS } from "../shared/form-field.css.js";
 import inputCSS from "./input.css.js";
+import { resolveSize } from '../shared/prop-vocabulary.js';
+
+// ids are scoped to the shadow root, so fixed ones are safe here
+const INPUT_ID = "custom-input";
+const HELP_ID = "custom-input-help";
 
 class CustomInput extends LitElement {
   static properties = {
-    label      : { type: String },
-    type       : { type: String },
-    kind       : { type: String }, // sm, md, lg
-    placeholder: { type: String },
-    required   : { type: Boolean },
-    focused    : { type: Boolean },
-    tooltip    : { type: String },
-    invalid    : { type: Boolean },
-    validated  : { type: Boolean, reflect: true },
-    disabled   : { type: Boolean, reflect: true }
+    label       : { type: String },
+    type        : { type: String },
+    size        : { type: String, reflect: true },
+    /** @deprecated pass `size`. It named the size, not the kind. */
+    kind        : { type: String },
+    placeholder : { type: String },
+    required    : { type: Boolean },
+    focused     : { type: Boolean },
+    tooltip     : { type: String },
+    invalid     : { type: Boolean },
+    validated   : { type: Boolean, reflect: true },
+    disabled    : { type: Boolean, reflect: true },
+    value       : { type: String },
+    name        : { type: String },
+    // mobile keyboard controls — see the story
+    inputmode   : { type: String },
+    autocomplete: { type: String },
+    enterkeyhint: { type: String }
   };
 
   constructor() {
     super();
-    this.label = "Default Label";
+    /* No default copy. A field that ships "Default Label" to production
+       when a consumer forgets the prop is worse than one that ships no label,
+       and the string cannot be translated. Empty means the label element is
+       not rendered at all — see render(). */
+    this.label = "";
     this.type = "text";
-    this.kind = "md";
-    this.placeholder = "Enter something...";
+    this.size = "md";
+    this.kind = "";
+    this.placeholder = "";
     this.required = false;
     this.focused = false;
     this.tooltip = "";
     this.invalid = false;
     this.validated = false;
     this.disabled = false;
+    this.value = "";
+    this.name = "";
+    this.inputmode = "";
+    this.autocomplete = "";
+    this.enterkeyhint = "";
   }
 
+  /**
+   * The value used to be unreachable. The native input event escapes the
+   * shadow root, but it retargets to the host, and the host had no value
+   * property — so `e.target.value` was undefined and the only way to read what
+   * someone typed was to reach through the shadow root.
+   */
+  _onInput(e) {
+    this.value = e.target.value;
+    this.dispatchEvent(new CustomEvent("bd-input", {
+      detail  : { value: this.value, name: this.name },
+      bubbles : true,
+      composed: true
+    }));
+  }
 
-  render() {
-    const inputClass = {
-      sm: "input-sm",
-      md: "input-md",
-      lg: "input-lg"
-    }[this.kind];
+  _onChange(e) {
+    this.value = e.target.value;
+    this.dispatchEvent(new CustomEvent("bd-change", {
+      detail  : { value: this.value, name: this.name },
+      bubbles : true,
+      composed: true
+    }));
+  }
 
-    const labelClass = {
-      sm: "label-sm",
-      md: "label-md",
-      lg: "label-lg"
-    }[this.kind];
+  willUpdate(changed) {
+    // kind said "size" on these three and nothing else in the system,
+    // so it moved; see shared/prop-vocabulary.js
+    if (changed.has("kind") && this.kind) this.size = this.kind;
+    if (changed.has("size") || changed.has("kind")) this.size = resolveSize(this.size);
+  }
+
+  render() {
+    const inputClass = { sm: "input-sm", md: "input-md", lg: "input-lg" }[this.size];
+    const labelClass = { sm: "label-sm", md: "label-md", lg: "label-lg" }[this.size];
 
     const inputStateClass = this.disabled
       ? "form-input--disabled"
@@ -60,24 +106,33 @@ class CustomInput extends LitElement {
 
     return html`
       <div class="input-container">
-        <label for="custom-input" class="form-label ${labelClass}">
-          ${this.label}
-          ${this.required
-            ? html`<span class="form-label__required">*</span>`
-            : ""}
-        </label>
+        ${this.label
+          ? html`<label for="${INPUT_ID}" class="form-label ${labelClass}">
+              ${this.label}
+              ${this.required
+                ? html`<span class="form-label__required" aria-hidden="true">*</span>`
+                : ""}
+            </label>`
+          : nothing}
         <input
-          id="custom-input"
-          class="form-input-bd ${inputClass} ${this.focused
-            ? "focused"
-            : ""} ${inputStateClass}"
+          id="${INPUT_ID}"
+          class="form-input-bd ${inputClass} ${this.focused ? "focused" : ""} ${inputStateClass}"
           type="${this.type}"
+          name="${this.name || nothing}"
           placeholder="${this.placeholder}"
+          .value="${this.value}"
+          inputmode="${this.inputmode || nothing}"
+          autocomplete="${this.autocomplete || nothing}"
+          enterkeyhint="${this.enterkeyhint || nothing}"
           ?required="${this.required}"
           ?disabled="${this.disabled}"
+          aria-invalid="${this.invalid ? "true" : nothing}"
+          aria-describedby="${this.tooltip ? HELP_ID : nothing}"
+          @input="${this._onInput}"
+          @change="${this._onChange}"
         />
         ${this.tooltip
-          ? html`<div class="form-help-text ${helpTextClass}">
+          ? html`<div id="${HELP_ID}" class="form-help-text ${helpTextClass}">
               ${this.tooltip}
             </div>`
           : ""}
@@ -85,6 +140,6 @@ class CustomInput extends LitElement {
     `;
   }
 }
-CustomInput.styles = [tokens, inputCSS];
+CustomInput.styles = [formFieldCSS, inputCSS];
 
 customElements.define("bd-custom-input", CustomInput);