@echodial/deck 0.1.0

package/src/06-forms.css

@@ -0,0 +1,401 @@
+/* ==========================================================================
+   Deck — 06 Forms
+   Inputs are 16px on touch devices so iOS never zooms on focus.
+   ========================================================================== */
+
+@layer deck.components {
+
+  /* One form control and everything attached to it: label, input, help
+     text, error. The vertical gap between them comes from here, so a field
+     never needs margins. */
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    min-inline-size: 0;
+  }
+
+  /* The label for a control. A flex row, so a "required" or "optional"
+     marker sits beside the text without extra markup. */
+  .label {
+    font-size: var(--text-sm);
+    font-weight: 580;
+    color: var(--text);
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+  /* The marker for an optional field. Where most fields are required this
+     reads better than an asterisk on nearly every label. */
+  .label .optional { color: var(--text-faint); font-weight: 400; }
+  /* The marker beside a required field's label. Visual only — a screen
+     reader announces the required attribute, not the asterisk. */
+  .label .required { color: var(--bad-500); }
+
+  /* A hint below a control. Needs aria-describedby on the control to reach
+     a screen reader — sitting next to it is not an association. */
+  .help { font-size: var(--text-sm); color: var(--text-muted); }
+  /* A validation message below a control. Lightened for dark mode with
+     light-dark(), and aligned to flex-start so an icon stays on the first
+     line of a two-line message. */
+  .error {
+    font-size: var(--text-sm);
+    color: light-dark(var(--bad-700), oklch(76% .13 var(--hue-bad)));
+    display: flex;
+    gap: var(--space-2);
+    align-items: flex-start;
+  }
+
+  .input, .textarea, .select {
+    inline-size: 100%;
+    min-block-size: var(--control-h);
+    padding: var(--space-2) var(--space-3);
+    background: var(--surface);
+    color: var(--text);
+    border: 1px solid var(--line-strong);
+    border-radius: var(--r-sm);
+    box-shadow: var(--shadow-1);
+    font-size: var(--text-base);
+    line-height: 1.45;
+    transition: border-color var(--dur-1) var(--ease-out),
+                box-shadow var(--dur-1) var(--ease-out),
+                background-color var(--dur-1) var(--ease-out);
+  }
+
+  @media (pointer: coarse) {
+    .input, .textarea, .select { font-size: 16px; }
+  }
+
+  .input::placeholder, .textarea::placeholder { color: var(--text-faint); }
+
+  .input:hover, .textarea:hover, .select:hover { border-color: var(--ink-400); }
+
+  .input:focus, .textarea:focus, .select:focus {
+    outline: none;
+    border-color: var(--focus);
+    box-shadow: var(--ring);
+  }
+
+  .input[disabled], .textarea[disabled], .select[disabled] {
+    background: var(--bg-sunken);
+    color: var(--text-faint);
+    cursor: not-allowed;
+    box-shadow: none;
+  }
+  .input[readonly] { background: var(--surface-2); }
+
+  /* Grows with its content instead of scrolling in a 4-row box */
+  .textarea {
+    min-block-size: calc(var(--control-h) * 2);
+    resize: vertical;
+    field-sizing: content;
+    max-block-size: 22rem;
+  }
+
+  .select {
+    appearance: none;
+    padding-inline-end: var(--space-10);
+    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
+                      linear-gradient(135deg, currentColor 50%, transparent 50%);
+    background-position: calc(100% - 19px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
+    background-size: 5px 5px, 5px 5px;
+    background-repeat: no-repeat;
+    cursor: pointer;
+  }
+
+  /* Validation only after the user has actually interacted */
+  /* Marks a field invalid from your own validation, producing the same
+     border and ring as :user-invalid without needing the browser to agree.
+     One of the few states an author writes by hand. */
+  .input:user-invalid, .textarea:user-invalid, .select:user-invalid,
+  .field.is-invalid :is(.input, .textarea, .select) {
+    border-color: var(--bad-500);
+  }
+  .input:user-invalid:focus, .field.is-invalid :is(.input, .textarea, .select):focus {
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--bad-500) 26%, transparent);
+  }
+
+  /* --- Input group: prefix / suffix / attached button --------------------- */
+  /* A prefix, suffix or attached button joined to a control. The group
+     takes over the border, radius and shadow, and the input inside strips
+     its own, so the seam does not double up. :focus-within puts the ring
+     around the whole assembly. */
+  .input-group {
+    display: flex;
+    align-items: stretch;
+    inline-size: 100%;
+    border: 1px solid var(--line-strong);
+    border-radius: var(--r-sm);
+    background: var(--surface);
+    box-shadow: var(--shadow-1);
+    overflow: hidden;
+  }
+  .input-group:focus-within { border-color: var(--focus); box-shadow: var(--ring); }
+  .input-group > .input {
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    background: transparent;
+  }
+  .input-group > .input:focus { box-shadow: none; }
+  /* A prefix or suffix attached to a control inside .input-group. Its
+     divider is border-inline-end normally and border-inline-start on
+     :last-child, so a leading and a trailing addon each get their rule on
+     the correct side in both writing directions. */
+  .input-group > .addon {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding-inline: var(--space-3);
+    background: var(--surface-2);
+    color: var(--text-muted);
+    font-size: var(--text-sm);
+    white-space: nowrap;
+    border-inline-end: 1px solid var(--line);
+  }
+  .input-group > .addon:last-child { border-inline-start: 1px solid var(--line); border-inline-end: 0; }
+  .input-group > .btn { border-radius: 0; border-block: 0; border-inline-end: 0; box-shadow: none; }
+
+  /* --- Search field ------------------------------------------------------- */
+  /* A control with an icon inside its starting edge. The icon is
+     pointer-events: none, so clicking it focuses the field underneath
+     rather than doing nothing. */
+  .search { position: relative; display: flex; align-items: center; }
+  .search > .icon {
+    position: absolute;
+    inset-inline-start: var(--space-3);
+    color: var(--text-faint);
+    pointer-events: none;
+  }
+  .search > .input { padding-inline-start: var(--space-10); border-radius: var(--r-full); }
+
+  /* --- Checkbox and radio ------------------------------------------------- */
+  /* A checkbox or radio and its text, laid out as a row that clears the
+     44px touch target. Wrap the text in .check-text to add a second line. */
+  .check {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-3);
+    min-block-size: var(--tap);
+    padding-block: var(--space-2);
+    cursor: pointer;
+    line-height: 1.4;
+  }
+  .check input[type="checkbox"], .check input[type="radio"] {
+    appearance: none;
+    flex: 0 0 auto;
+    inline-size: 20px;
+    block-size: 20px;
+    margin-block-start: 1px;
+    border: 1.5px solid var(--line-strong);
+    background: var(--surface);
+    border-radius: var(--r-xs);
+    display: grid;
+    place-content: center;
+    cursor: pointer;
+    transition: background-color var(--dur-1) var(--ease-out),
+                border-color var(--dur-1) var(--ease-out);
+  }
+  .check input[type="radio"] { border-radius: var(--r-full); }
+  .check input:hover { border-color: var(--brand-400); }
+  .check input:checked { background: var(--brand-600); border-color: var(--brand-600); }
+  .check input[type="checkbox"]::before {
+    content: "";
+    inline-size: 11px;
+    block-size: 11px;
+    scale: 0;
+    transition: scale var(--dur-2) var(--ease-spring);
+    box-shadow: inset 1em 1em var(--text-on-brand);
+    clip-path: polygon(14% 44%, 0 65%, 41% 100%, 100% 16%, 84% 0, 39% 68%);
+  }
+  .check input[type="radio"]::before {
+    content: "";
+    inline-size: 9px;
+    block-size: 9px;
+    border-radius: var(--r-full);
+    background: var(--text-on-brand);
+    scale: 0;
+    transition: scale var(--dur-2) var(--ease-spring);
+  }
+  .check input:checked::before { scale: 1; }
+  .check input:indeterminate { background: var(--brand-600); border-color: var(--brand-600); }
+  .check input:indeterminate::before {
+    scale: 1;
+    clip-path: polygon(10% 42%, 90% 42%, 90% 58%, 10% 58%);
+  }
+  .check input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
+  /* The text beside a checkbox or radio. A column, so a .check-note can sit
+     under the label as a second line. */
+  /* The text beside a checkbox, as a column, so a .check-note can sit
+     beneath the label as a second line. */
+  .check .check-text { display: flex; flex-direction: column; gap: 2px; }
+  /* A muted second line inside .check-text. It is inside the label, so it
+     becomes part of the accessible name — move it out and use
+     aria-describedby if that name gets too long. */
+  .check .check-note { font-size: var(--text-sm); color: var(--text-muted); }
+
+  /* Card-style choice, good for pricing and plan pickers */
+  .check-card {
+    border: 1px solid var(--line);
+    border-radius: var(--r-md);
+    padding: var(--space-4);
+    background: var(--surface);
+    transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
+  }
+  .check-card:has(input:checked) {
+    border-color: var(--brand-500);
+    background: var(--brand-soft);
+  }
+
+  /* --- Switch ------------------------------------------------------------- */
+  /* An on/off control that takes effect immediately, drawn over a real
+     checkbox. If the reader has to press Save afterwards, use .check
+     instead. Add role="switch" when "on"/"off" reads better than
+     "checked"/"unchecked". */
+  .switch { display: flex; align-items: center; gap: var(--space-3); min-block-size: var(--tap); cursor: pointer; }
+  .switch input {
+    appearance: none;
+    flex: 0 0 auto;
+    inline-size: 46px;
+    block-size: 28px;
+    border-radius: var(--r-full);
+    background: var(--ink-300);
+    position: relative;
+    cursor: pointer;
+    transition: background-color var(--dur-2) var(--ease-out);
+  }
+  .switch input::after {
+    content: "";
+    position: absolute;
+    inset-block-start: 3px;
+    inset-inline-start: 3px;
+    inline-size: 22px;
+    block-size: 22px;
+    border-radius: var(--r-full);
+    background: var(--ink-0);
+    box-shadow: var(--shadow-2);
+    transition: translate var(--dur-2) var(--ease-spring);
+  }
+  .switch input:checked { background: var(--brand-600); }
+  .switch input:checked::after { translate: 18px 0; }
+  .switch input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
+
+  /* --- Range -------------------------------------------------------------- */
+  /* A slider. The track and thumb are vendor pseudo-elements with
+     different names and different box models per engine, so every
+     declaration is written twice — WebKit needs a negative block-start
+     margin to centre the thumb and Firefox does not. */
+  .range {
+    inline-size: 100%;
+    appearance: none;
+    background: transparent;
+    block-size: var(--tap);
+  }
+  .range::-webkit-slider-runnable-track {
+    block-size: 6px;
+    border-radius: var(--r-full);
+    background: var(--ink-200);
+  }
+  .range::-moz-range-track {
+    block-size: 6px;
+    border-radius: var(--r-full);
+    background: var(--ink-200);
+  }
+  .range::-webkit-slider-thumb {
+    appearance: none;
+    margin-block-start: -8px;
+    inline-size: 22px;
+    block-size: 22px;
+    border-radius: var(--r-full);
+    background: var(--brand-600);
+    border: 3px solid var(--ink-0);
+    box-shadow: var(--shadow-2);
+    cursor: grab;
+  }
+  .range::-moz-range-thumb {
+    inline-size: 22px;
+    block-size: 22px;
+    border-radius: var(--r-full);
+    background: var(--brand-600);
+    border: 3px solid var(--ink-0);
+    box-shadow: var(--shadow-2);
+    cursor: grab;
+  }
+  .range:active::-webkit-slider-thumb { cursor: grabbing; scale: 1.08; }
+
+  /* --- File --------------------------------------------------------------- */
+  /* A dashed drop zone wrapping a real file input. The input is 1px and
+     transparent rather than display: none, so it keeps its place in the
+     tab order, and :focus-within is what makes that focus visible. Deck
+     styles the zone; dropping needs a handler of your own. */
+  .file {
+    display: grid;
+    place-items: center;
+    gap: var(--space-2);
+    padding: var(--space-6);
+    border: 1.5px dashed var(--line-strong);
+    border-radius: var(--r-md);
+    background: var(--surface-2);
+    text-align: center;
+    color: var(--text-muted);
+    cursor: pointer;
+    transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
+  }
+  .file:hover, .file:focus-within { border-color: var(--brand-500); background: var(--brand-soft); }
+  .file input[type="file"] { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
+
+  /* --- Fieldset ----------------------------------------------------------- */
+  /* A bordered group of controls that answer one question. Its legend is
+     the group's accessible name, which is what a radio group needs and
+     what a .label above one does not provide. */
+  .fieldset {
+    border: 1px solid var(--line);
+    border-radius: var(--r-md);
+    padding: var(--space-5);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+    min-inline-size: 0;
+  }
+  .fieldset > legend {
+    padding-inline: var(--space-2);
+    font-size: var(--text-sm);
+    font-weight: 600;
+    color: var(--text-muted);
+  }
+
+  /* Two fields side by side on anything wider than a phone */
+  .field-row {
+    display: grid;
+    gap: var(--space-4);
+    grid-template-columns: 1fr;
+  }
+  @media (min-width: 40rem) {
+    .field-row { grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }
+  }
+
+  /* Sticky save bar for long forms on mobile */
+  .form-actions {
+    display: flex;
+    gap: var(--space-3);
+    flex-wrap: wrap;
+  }
+  /* Pins the action row to the bottom of the viewport with a blur behind
+     it and a safe-area inset for the home indicator. Add matching bottom
+     padding to the form, or the last field sits underneath it. */
+  .form-actions-sticky {
+    position: sticky;
+    inset-block-end: 0;
+    z-index: var(--z-sticky);
+    background: color-mix(in oklab, var(--bg) 88%, transparent);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border-block-start: 1px solid var(--line);
+    padding-block: var(--space-3);
+    padding-block-end: calc(var(--space-3) + env(safe-area-inset-bottom));
+  }
+  .form-actions-sticky > .btn { flex: 1 1 auto; }
+  @media (min-width: 48rem) {
+    .form-actions-sticky > .btn { flex: 0 0 auto; }
+  }
+}