@tartaguti/ui-components 0.0.0-stage → 0.2.0

package/dist/tt-radio-group.js

@@ -0,0 +1,372 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { srOnly } from "./sr-only.js";
+let uid = 0;
+/**
+ * Pick exactly one of a small set.
+ *
+ * The group is the form control, not the individual radios, which is why
+ * this is form-associated and there is no tt-radio. A lone radio button
+ * is meaningless: "one of these" is a property of the set.
+ */
+let TTRadioGroup = class TTRadioGroup extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.internals = this.attachInternals();
+        /*
+          Reflected, and it has to be.
+      
+          A form-associated custom element is submitted under its name CONTENT
+          ATTRIBUTE, not its JS property. Without reflect, setting .name = "x"
+          from script leaves the attribute absent and the field vanishes from
+          FormData with no error anywhere. It only appeared to work because
+          every call site so far wrote name="x" in markup, which sets the
+          attribute directly.
+        */
+        this.name = "";
+        this.value = "";
+        // The group's name, visible above it. `label`, as on every other form
+        // control (it was `heading` here and on tt-checkbox-group only).
+        this.label = "";
+        // Hides the label but keeps it as the group's name, as on tt-input.
+        this.labelHidden = false;
+        this.error = "";
+        this.options = [];
+        this.required = false;
+        // Reflected: the :host([disabled]) styles below never matched a group
+        // disabled through the property.
+        this.disabled = false;
+        // `orientation`, as on tt-button-group and the cards.
+        this.orientation = "vertical";
+        this.groupId = `tt-radio-group-${++uid}`;
+    }
+    static { this.formAssociated = true; }
+    get form() {
+        return this.internals.form;
+    }
+    get validity() {
+        return this.internals.validity;
+    }
+    // Exposed so tt-form (and any consumer) can validate without reaching
+    // into internals. Form-associated elements do not get these for free.
+    checkValidity() {
+        return this.internals.checkValidity();
+    }
+    reportValidity() {
+        return this.internals.reportValidity();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.syncFormState();
+    }
+    formResetCallback() {
+        this.value = "";
+    }
+    formStateRestoreCallback(state) {
+        this.value = state ?? "";
+    }
+    updated(changed) {
+        if (changed.has("value") || changed.has("required")) {
+            this.syncFormState();
+        }
+    }
+    syncFormState() {
+        this.internals.setFormValue(this.value || null);
+        const missing = this.required && this.value === "";
+        if (missing) {
+            this.internals.setValidity({ valueMissing: true }, "Please choose an option.", this.renderRoot?.querySelector("button") ?? undefined);
+        }
+        else {
+            this.internals.setValidity({});
+        }
+    }
+    select(option) {
+        if (option.disabled || this.disabled || option.value === this.value)
+            return;
+        this.value = option.value;
+        this.dispatchEvent(new CustomEvent("tt-change", {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    /*
+      Arrow keys move between radios and select as they go. That is the
+      documented behaviour for a radio group, and it differs from a listbox
+      where arrows only move focus.
+    */
+    handleKeydown(event, index) {
+        const usable = this.options.filter((o) => !o.disabled);
+        if (usable.length === 0)
+            return;
+        const keys = ["ArrowDown", "ArrowRight", "ArrowUp", "ArrowLeft"];
+        if (!keys.includes(event.key))
+            return;
+        event.preventDefault();
+        const forward = event.key === "ArrowDown" || event.key === "ArrowRight";
+        const step = forward ? 1 : -1;
+        let next = index;
+        for (let i = 0; i < this.options.length; i++) {
+            next = (next + step + this.options.length) % this.options.length;
+            if (!this.options[next].disabled)
+                break;
+        }
+        this.select(this.options[next]);
+        const buttons = this.renderRoot?.querySelectorAll("button");
+        buttons?.[next]?.focus();
+    }
+    static { this.styles = [srOnly, css `
+    /* The browser's own [hidden] rule loses to any :host display, so a
+       hidden element would still show. Important, so it always wins. */
+    :host([hidden]) {
+      display: none !important;
+    }
+
+    :host {
+      display: block;
+      font-family: var(--tt-font-sans);
+    }
+
+    :host([disabled]) {
+      opacity: var(--tt-opacity-disabled);
+    }
+
+    .heading {
+      margin-bottom: var(--tt-space-2);
+
+      font-size: var(--tt-text-xs);
+      font-weight: var(--tt-weight-semibold);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--tt-muted-foreground);
+    }
+
+    .options {
+      display: flex;
+      flex-direction: column;
+      gap: var(--tt-space-2);
+    }
+
+    :host([orientation="horizontal"]) .options {
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: var(--tt-space-4);
+    }
+
+    button {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--tt-space-2);
+
+      padding: 0;
+      border: none;
+      background: transparent;
+      color: inherit;
+
+      font: inherit;
+      text-align: left;
+      cursor: pointer;
+      /* Long-press should activate the control, not start selecting
+         its label. The other half of the mobile blue flash: the tap
+         highlight is the flash, this is the drag-select. */
+      -webkit-user-select: none;
+      user-select: none;
+    }
+
+    /* Only an option disabled on its own. When the whole group is
+       disabled the host has already faded, and fading each option again
+       multiplied the two: the group dropped to a quarter opacity. */
+    :host(:not([disabled])) button:disabled {
+      opacity: var(--tt-opacity-disabled);
+      cursor: not-allowed;
+    }
+
+    .dot {
+      position: relative;
+      flex: 0 0 auto;
+      margin-top: 1px;
+
+      width: 18px;
+      height: 18px;
+
+      /* The same edge and surface as tt-checkbox, for the same reason:
+         this ring is the only thing that shows an option is there. The
+         surface was --tt-background, the page, which put a grey dot on
+         a white card and a darker hole in a dark one. */
+      border: 1px solid var(--tt-border-strong);
+      border-radius: var(--tt-radius-full);
+      background: var(--tt-field);
+
+      transition:
+        border-color var(--tt-duration-normal) var(--tt-ease),
+        box-shadow var(--tt-duration-normal) var(--tt-ease);
+    }
+
+    button:hover:not(:disabled) .dot {
+      border-color: var(--tt-foreground);
+    }
+
+    button:focus-visible {
+      outline: var(--tt-ring-width) solid var(--tt-ring);
+      outline-offset: var(--tt-ring-offset);
+      border-radius: var(--tt-radius-sm);
+    }
+
+    button[aria-checked="true"] .dot {
+      border-color: var(--tt-primary);
+    }
+
+    button[aria-checked="true"] .dot::after {
+      content: "";
+      position: absolute;
+      inset: 3px;
+      border-radius: var(--tt-radius-full);
+      background: var(--tt-primary);
+    }
+
+    .text {
+      display: flex;
+      flex-direction: column;
+      gap: 1px;
+      min-width: 0;
+    }
+
+    .label {
+      font-size: var(--tt-text-sm);
+      color: var(--tt-foreground);
+    }
+
+    .description {
+      font-size: var(--tt-text-xs);
+      line-height: var(--tt-leading-snug);
+      color: var(--tt-muted-foreground);
+    }
+
+    .error-text {
+      margin-top: var(--tt-space-2);
+      color: var(--tt-destructive);
+      font-size: var(--tt-text-xs);
+      font-weight: var(--tt-weight-medium);
+    }
+
+  `]; }
+    // Focus has to be forwarded: focusing the host focuses nothing, since the
+    // control lives in the shadow root. Same as tt-slider and tt-input.
+    // Lands on the selected radio, or the first: the one roving tabindex makes tabbable.
+    /*
+      Which radio Tab lands on: the checked one, or else the first that is
+      not disabled. Exactly one, always.
+  
+      It used to be "the checked one, or index 0 when nothing is checked".
+      If option 0 was disabled, or the value matched no option, NO radio
+      had tabindex 0 and the whole group was unreachable from the keyboard.
+    */
+    get tabStop() {
+        const checked = this.options.findIndex((o) => o.value === this.value && !o.disabled);
+        if (checked !== -1)
+            return checked;
+        return this.options.findIndex((o) => !o.disabled);
+    }
+    focus(options) {
+        this.renderRoot
+            ?.querySelector('[role="radio"][tabindex="0"]')
+            ?.focus(options);
+    }
+    render() {
+        return html `
+      <!-- The id is what names the radiogroup below. It used to be
+           referenced but never set, so the group had no name at all. -->
+      ${this.label
+            ? html `<div
+            class="heading ${this.labelHidden ? "sr-only" : ""}"
+            part="label"
+            id=${this.groupId}
+          >
+            ${this.label}
+          </div>`
+            : ""}
+
+      <div
+        class="options"
+        part="group"
+        role="radiogroup"
+        aria-labelledby=${ifDefined(this.label ? this.groupId : undefined)}
+        aria-required=${this.required ? "true" : "false"}
+        aria-invalid=${this.error ? "true" : "false"}
+        aria-describedby=${ifDefined(this.error ? `${this.groupId}-error` : undefined)}
+      >
+        ${this.options.map((option, index) => html `
+            <!--
+              Roving tabindex: only the selected radio is tabbable, so Tab
+              moves past the whole group rather than through every option.
+            -->
+            <button
+              type="button"
+              role="radio"
+              part="option"
+              aria-checked=${option.value === this.value ? "true" : "false"}
+              tabindex=${index === this.tabStop ? 0 : -1}
+              ?disabled=${option.disabled || this.disabled}
+              @click=${() => this.select(option)}
+              @keydown=${(e) => this.handleKeydown(e, index)}
+            >
+              <span class="dot"></span>
+
+              <span class="text">
+                <span class="label">${option.label}</span>
+
+                ${option.description
+            ? html `<span class="description">${option.description}</span>`
+            : ""}
+              </span>
+            </button>
+          `)}
+      </div>
+
+      ${this.error
+            ? html `<div class="error-text" id=${`${this.groupId}-error`} role="alert">
+            ${this.error}
+          </div>`
+            : ""}
+    `;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true })
+], TTRadioGroup.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], TTRadioGroup.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], TTRadioGroup.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "label-hidden", reflect: true })
+], TTRadioGroup.prototype, "labelHidden", void 0);
+__decorate([
+    property({ type: String })
+], TTRadioGroup.prototype, "error", void 0);
+__decorate([
+    property({ type: Array })
+], TTRadioGroup.prototype, "options", void 0);
+__decorate([
+    property({ type: Boolean })
+], TTRadioGroup.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTRadioGroup.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], TTRadioGroup.prototype, "orientation", void 0);
+TTRadioGroup = __decorate([
+    customElement("tt-radio-group")
+], TTRadioGroup);
+export { TTRadioGroup };
+//# sourceMappingURL=tt-radio-group.js.map

package/dist/tt-radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-radio-group.js","sourceRoot":"","sources":["../src/tt-radio-group.ts"],"names":[],"mappings":"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"}

package/dist/tt-rating.d.ts

@@ -0,0 +1,54 @@
+import { LitElement } from "lit";
+/**
+ * A star rating, readable or settable.
+ *
+ * The library already had tt-product, tt-profile-card and tt-company-card
+ * and no way to say how good any of them were, which is the one number
+ * every listing, review and directory entry eventually needs.
+ *
+ * TWO COMPONENTS IN ONE, ON PURPOSE. A rating is displayed far more often
+ * than it is set, and the two cases want different semantics rather than
+ * different elements. Read-only is a single image with a text
+ * alternative, because a screen reader needs "4.5 out of 5", not five
+ * separate stars it has to add up. Interactive is a slider, which is the
+ * pattern that already works with arrow keys everywhere else.
+ *
+ * Fractions are supported for the read-only case only. An average of many
+ * ratings is 4.3; nobody has ever meant to award 4.3 themselves.
+ */
+export declare class TTRating extends LitElement {
+    /** Stars filled. Fractional values are drawn as partial stars. */
+    value: number;
+    max: number;
+    label: string;
+    /** Show the number beside the stars. An average is easier to read as digits. */
+    showValue: boolean;
+    /** How many ratings the value averages, shown as "(128)". */
+    count?: number;
+    /** Let the user set it. Off by default: display is the common case. */
+    interactive: boolean;
+    size: string;
+    /**
+     * Colour by value rather than always gold. Off by default, because a
+     * product rating is gold everywhere and a red two-star review would
+     * look like an error state rather than a low score.
+     */
+    grade: boolean;
+    /** What the pointer is over, which previews a click before committing it. */
+    private hovered?;
+    private get shown();
+    private get tone();
+    /** "4.5" but "4", because a whole number with a trailing .0 reads as noise. */
+    private get printed();
+    private commit;
+    private onKey;
+    static styles: import("lit").CSSResult;
+    private star;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-rating": TTRating;
+    }
+}
+//# sourceMappingURL=tt-rating.d.ts.map

package/dist/tt-rating.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-rating.d.ts","sourceRoot":"","sources":["../src/tt-rating.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA2B,MAAM,KAAK,CAAC;AAI1D;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,kEAAkE;IACtC,KAAK,SAAK;IAEV,GAAG,SAAK;IAER,KAAK,SAAM;IAEvC,gFAAgF;IAC1B,SAAS,UAAS;IAExE,6DAA6D;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IAE3C,uEAAuE;IAC1C,WAAW,UAAS;IAErB,IAAI,SAAU;IAE1C;;;;OAIG;IAC0B,KAAK,UAAS;IAE3C,6EAA6E;IACpE,OAAO,CAAC,OAAO,CAAC,CAAS;IAElC,OAAO,KAAK,KAAK,GAGhB;IAED,OAAO,KAAK,IAAI,GAMf;IAED,+EAA+E;IAC/E,OAAO,KAAK,OAAO,GAIlB;IAED,OAAO,CAAC,MAAM;IAmBd,OAAO,CAAC,KAAK;IA2Bb,MAAM,CAAC,MAAM,0BA8FX;IAEF,OAAO,CAAC,IAAI;IAoCZ,MAAM;CAoDP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}