@reliability-design/web 1.4.5 → 1.4.7

package/dist/components/rel-checkbox/rel-checkbox.ts

@@ -1,382 +0,0 @@
-import { LitElement, html, css, nothing, type PropertyValues } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import "@reliability-design/icons/rel-icon";
-
-type CheckboxState = "default" | "error" | "disabled";
-type CheckboxStatus = "unchecked" | "checked" | "indeterminate";
-type CheckboxSize = "small" | "medium";
-type CheckboxDensity = "compact" | "comfortable";
-type CheckboxAlignment = "leading" | "trailing";
-
-@customElement("rel-checkbox")
-export class RelCheckbox extends LitElement {
-  @property({ type: String }) label = "Label";
-  /** rel-icon name rendered between the checkbox and the label (label prefix icon). */
-  @property({ type: String }) icon = "";
-  @property({ type: String }) supportingtext = "";
-  @property({ type: String }) state: CheckboxState = "default";
-  @property({ type: String }) status: CheckboxStatus = "unchecked";
-  @property({ type: String }) value = "";
-
-  /** Control scale (Figma Size). `"medium"` (default) = 18px box with body-lg
-   *  label; `"small"` = 14px box with body-md label. */
-  @property({ type: String, reflect: true }) size: CheckboxSize = "medium";
-
-  /** Supporting-text layout (Figma Density). `"compact"` (default) puts the
-   *  supporting text on its own line under the row, indented past the box;
-   *  `"comfortable"` stacks label + supporting text beside the box. */
-  @property({ type: String, reflect: true }) density: CheckboxDensity = "compact";
-
-  /** Box position (Figma Alignment). `"leading"` (default) renders the box
-   *  before the label; `"trailing"` pushes it to the far edge of the row.
-   *  Trailing has no compact layout in the spec, so it always renders with
-   *  comfortable density. */
-  @property({ type: String, reflect: true }) alignment: CheckboxAlignment = "leading";
-
-  get checked(): boolean {
-    return this.status === "checked";
-  }
-  set checked(val: boolean) {
-    this.status = val ? "checked" : "unchecked";
-  }
-
-  private _onChange: (value: boolean) => void = () => {};
-  private _onTouched: () => void = () => {};
-
-  static styles = css`
-    :host {
-      color: var(--rel-text-default);
-      display: block;
-      font-family: var(--rel-fonts-font-family);
-    }
-
-    .wrapper {
-      display: flex;
-      flex-direction: column;
-      gap: var(--rel-spacing-3xs);
-    }
-
-    .row {
-      /* Containing block for the hidden input below — without this the
-         absolutely-positioned input resolves against the document (or any
-         positioned ancestor in the consumer page), where it neither moves
-         with intermediate scroll containers nor stays aligned with the
-         visible box. Tabbing to it then makes the browser scroll the WRONG
-         scroller (often the window past a 100vh overflow-hidden shell),
-         shoving the whole page up and leaving it in a broken state. */
-      position: relative;
-      display: flex;
-      align-items: center;
-      gap: var(--rel-spacing-xs);
-      cursor: pointer;
-    }
-
-    /* Trailing alignment — box moves to the far edge, label stack to the
-       start. row-reverse keeps the box first in DOM order (input + .box
-       adjacency drives the focus ring) while space-between stretches the
-       row to its container. */
-    :host([alignment="trailing"]) .row {
-      flex-direction: row-reverse;
-      justify-content: space-between;
-    }
-
-    /* Comfortable density — label and supporting text stack beside the box. */
-    .content {
-      display: flex;
-      flex-direction: column;
-      gap: var(--rel-spacing-3xs);
-      min-width: 0;
-    }
-
-    .label-line {
-      display: flex;
-      align-items: center;
-      gap: var(--rel-spacing-xs);
-    }
-
-    input {
-      position: absolute;
-      inset: 0;
-      width: 100%;
-      height: 100%;
-      margin: 0;
-      opacity: 0;
-      pointer-events: none;
-    }
-
-    /* Unchecked — transparent fill, gray border */
-    .box {
-      width: 18px;
-      height: 18px;
-      border-radius: 4px;
-      border: 2px solid var(--rel-text-default);
-      background: transparent;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: all 0.2s;
-      flex-shrink: 0;
-    }
-
-    input:focus-visible + .box {
-      outline: 2px solid var(--rel-border-focus);
-      outline-offset: 2px;
-    }
-
-    svg {
-      width: 12px;
-      height: 12px;
-      display: none;
-    }
-
-    /* Checked — filled box, transparent checkmark (bg shows through) */
-    .checked .box {
-      background: var(--rel-bg-neutral-inverse-2);
-      border-color: var(--rel-bg-neutral-inverse-2);
-    }
-
-    .checked .check-icon {
-      display: block;
-      fill: var(--rel-text-inverse);
-    }
-
-    /* Indeterminate — transparent fill, dash inherits border color */
-    .indeterminate .indeterminate-icon {
-      display: block;
-      fill: var(--rel-bg-neutral-inverse-2);
-    }
-
-    /* Error unchecked — transparent fill, error border */
-    .error .box {
-      border-color: var(--rel-border-danger);
-    }
-
-    /* Error checked — error fill, transparent checkmark */
-    .error.checked .box {
-      background: var(--rel-action-danger-fill);
-      border-color: var(--rel-action-danger-fill);
-    }
-
-    .error.checked .check-icon {
-      fill: var(--rel-action-danger-label-icons-fill);
-    }
-
-    /* Error indeterminate — transparent fill, dash is error color */
-    .error.indeterminate .indeterminate-icon {
-      fill: var(--rel-text-danger);
-    }
-
-    /* Hover (Figma State=Hover): box outline/fill and label shift text-default -> text-body.
-       Scoped to .default so error keeps its danger colors and disabled never hovers. */
-    .default .row:hover .box {
-      border-color: var(--rel-text-body);
-    }
-
-    .default .row:hover .label {
-      color: var(--rel-text-body);
-    }
-
-    .default.checked .row:hover .box {
-      background: var(--rel-text-body);
-      border-color: var(--rel-text-body);
-    }
-
-    .default.indeterminate .row:hover .indeterminate-icon {
-      fill: var(--rel-text-body);
-    }
-
-    .disabled {
-      opacity: 0.55;
-      cursor: not-allowed;
-    }
-
-    :host([state="disabled"]) {
-      cursor: not-allowed;
-    }
-
-    :host([state="disabled"]) * {
-      pointer-events: none;
-    }
-
-    .disabled .label,
-    .disabled .text {
-      color: var(--rel-text-disabled);
-    }
-
-    /* Optional label prefix icon — tracks the label's color in every state
-       (rel-icon inherits currentColor). */
-    .icon-prefix {
-      flex-shrink: 0;
-      color: var(--rel-text-default);
-    }
-
-    .default .row:hover .icon-prefix {
-      color: var(--rel-text-body);
-    }
-
-    .disabled .icon-prefix {
-      color: var(--rel-text-disabled);
-    }
-
-    .label {
-      /* Figma: label rests on text-default; text-body is the hover color */
-      color: var(--rel-text-default);
-
-      font-family: var(--rel-body-lg-regular-font-family);
-
-      font-weight: var(--rel-body-lg-regular-font-weight);
-
-      font-size: var(--rel-body-lg-regular-font-size);
-
-      line-height: var(--rel-body-lg-regular-line-height);
-
-      letter-spacing: var(--rel-body-lg-regular-letter-spacing);
-
-    }
-
-    .text {
-      color: var(--rel-text-caption);
-
-      font-family: var(--rel-body-sm-regular-font-family);
-
-      font-weight: var(--rel-body-sm-regular-font-weight);
-
-      font-size: var(--rel-body-sm-regular-font-size);
-
-      line-height: var(--rel-body-sm-regular-line-height);
-
-      letter-spacing: var(--rel-body-sm-regular-letter-spacing);
-
-    }
-
-    /* Compact density — supporting text sits under the whole row, indented
-       past the box (box width + row gap, matching the pre-existing 28px). */
-    .text-below {
-      padding-left: 28px;
-    }
-
-    /* Size variant (medium is the base scale above). */
-    :host([size="small"]) .box {
-      width: 14px;
-      height: 14px;
-      border-radius: 3px;
-    }
-
-    :host([size="small"]) svg {
-      width: 10px;
-      height: 10px;
-    }
-
-    :host([size="small"]) .label {
-      font-family: var(--rel-body-md-regular-font-family);
-      font-weight: var(--rel-body-md-regular-font-weight);
-      font-size: var(--rel-body-md-regular-font-size);
-      line-height: var(--rel-body-md-regular-line-height);
-      letter-spacing: var(--rel-body-md-regular-letter-spacing);
-    }
-
-    :host([size="small"]) .text {
-      font-family: var(--rel-body-xs-regular-font-family);
-      font-weight: var(--rel-body-xs-regular-font-weight);
-      font-size: var(--rel-body-xs-regular-font-size);
-      line-height: var(--rel-body-xs-regular-line-height);
-      letter-spacing: var(--rel-body-xs-regular-letter-spacing);
-    }
-
-    :host([size="small"]) .text-below {
-      padding-left: 24px;
-    }
-  `;
-
-  protected willUpdate(changed: PropertyValues<this>) {
-    if (
-      (changed.has("alignment") || changed.has("density")) &&
-      this.alignment === "trailing" &&
-      this.density === "compact"
-    ) {
-      console.warn(
-        '[rel-checkbox] density="compact" has no trailing layout; rendering comfortable density.'
-      );
-    }
-  }
-
-  /** Trailing has no compact layout in the spec — trailing wins. */
-  private get effectiveDensity(): CheckboxDensity {
-    return this.alignment === "trailing" ? "comfortable" : this.density;
-  }
-
-  private toggle() {
-    if (this.state === "disabled") return;
-
-    // Binary toggle — indeterminate is programmatic-only and resolves to checked on user toggle.
-    this.status = this.status === "checked" ? "unchecked" : "checked";
-
-    this.dispatchEvent(
-      new CustomEvent("rel-change", {
-        detail: {
-          checked: this.status === "checked",
-          value: this.value,
-        },
-        bubbles: true,
-        composed: true,
-      })
-    );
-    this._onChange(this.checked);
-  }
-
-  registerOnChange(fn: (value: boolean) => void): void { this._onChange = fn; }
-  registerOnTouched(fn: () => void): void { this._onTouched = fn; }
-  writeValue(checked: boolean): void { this.checked = checked; }
-
-  render() {
-    return html`
-      <div part="base" class="wrapper ${this.state} ${this.status}">
-        <label class="row">
-          <input
-            type="checkbox"
-            .checked=${this.status === "checked"}
-            .indeterminate=${this.status === "indeterminate"}
-            aria-checked="${this.status === "indeterminate" ? "mixed" : nothing}"
-            @click=${this.toggle}
-            @blur=${() => this._onTouched()}
-            ?disabled=${this.state === "disabled"}
-          />
-
-          <span class="box">
-            <svg class="check-icon" viewBox="0 0 18 14" fill="var(--rel-text-inverse)">
-              <path
-                d="M6.44 14L0.5 7.36l1.49-1.66L6.44 10.68 16.01 0 17.5 1.66z"
-              />
-            </svg>
-
-            <svg class="indeterminate-icon" viewBox="0 0 16 2" fill="var(--rel-text-inverse)">
-              <rect width="16" height="2" />
-            </svg>
-          </span>
-
-          <span class="content">
-            <span class="label-line">
-              ${this.icon
-                ? html`<rel-icon
-                    name="${this.icon}"
-                    size="${this.size === "small" ? "sm" : "md"}"
-                    class="icon-prefix"
-                  ></rel-icon>`
-                : null}
-
-              <span part="label" class="label">${this.label}</span>
-            </span>
-
-            ${this.effectiveDensity === "comfortable" && this.supportingtext
-              ? html`<span part="helper" class="text">${this.supportingtext}</span>`
-              : null}
-          </span>
-        </label>
-
-        ${this.effectiveDensity === "compact" && this.supportingtext
-          ? html`<span part="helper" class="text text-below">${this.supportingtext}</span>`
-          : null}
-      </div>
-    `;
-  }
-}