@0001-labs/design-system-1 0.3.0-alpha.19 → 0.3.0-alpha.21

package/DS1/3-unit/styles/ds-date-picker.css

@@ -1,124 +0,0 @@
-/* ds-date-picker.css
- * The field is the select's face: one control high at the foot of its
- * square, ten squares wide by default, the calendar icon at its start and
- * the down arrow at its end. The panel opens on the menu's frame, half a
- * square from the field: a 1px line, half a square inside it, no shadow, so
- * eight squares wide. Inside, on whole squares: the first and last day to
- * type (each with its time below when times are on), one square spare, the
- * compact month one square a day with 18px marks, then Include time and
- * Clear, each one square, set off by one-square separators with a line
- * through them. */
-
-:host {
-  --ds-date-picker-width: calc(10 * var(--ds-unit));
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: flex-end;
-  vertical-align: bottom;
-  height: var(--ds-unit);
-  color: var(--ds-text-color);
-  font-family: var(--ds-typeface-regular);
-  font-size: var(--ds-type-size-default);
-  line-height: var(--ds-type-lineheight-default);
-}
-:host([hidden]) { display: none !important; }
-
-.trigger {
-  display: inline-flex;
-  align-items: flex-end;
-  gap: calc(4px * var(--ds-sf, 1));
-  width: var(--ds-date-picker-width);
-  padding-inline: 0 calc(4px * var(--ds-sf, 1));
-  text-align: start;
-  cursor: pointer;
-}
-.trigger:disabled { cursor: default; }
-.trigger .icon,
-.trigger .arrow { flex: 0 0 auto; }
-.trigger .text {
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.trigger[data-empty] .text { color: var(--ds-title-color); }
-.trigger[aria-expanded="true"] .arrow { transform: rotate(180deg); }
-
-/* The panel, on the menu's frame. */
-.popover {
-  position: fixed;
-  inset: auto;
-  box-sizing: border-box;
-  margin: 0;
-  padding: calc(var(--ds-unit) / 2 - 1px);
-  border: 1px solid var(--ds-border-color);
-  border-radius: var(--ds-radius-card);
-  background: var(--ds-paper);
-  color: var(--ds-text-color);
-  box-shadow: none;
-  overflow: visible;
-}
-.popover:not(:popover-open) { display: none; }
-
-/* The days to type: a row of one square for each end, its time on the row below; one square spare after. */
-.fields { margin-block-end: var(--ds-unit); }
-.field-row {
-  display: flex;
-  align-items: flex-end;
-  gap: calc(var(--ds-unit) / 2);
-  height: var(--ds-unit);
-}
-.field { flex: 1 1 auto; min-width: 0; }
-.clock { flex: 1 1 auto; min-width: 0; }
-.fields, .options { width: calc(7 * var(--ds-unit)); }
-
-/* The switches and Clear, each one square, the words on the sixteen. */
-.option {
-  box-sizing: border-box;
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: var(--ds-unit);
-  width: 100%;
-  height: var(--ds-unit);
-  margin: 0;
-  padding: 0 calc(4px * var(--ds-sf, 1));
-  border: 0;
-  border-radius: var(--ds-radius);
-  background: transparent;
-  color: var(--ds-text-color);
-  font: inherit;
-  letter-spacing: inherit;
-  text-align: start;
-  cursor: pointer;
-}
-.option:hover:not(:disabled) { background: var(--ds-row-fill-hover, var(--ds-fill)); }
-.option:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }
-.option:disabled { color: var(--ds-title-color); cursor: default; }
-.option .ds-switch { flex: 0 0 auto; }
-
-/* A separator: one square with a 1px line through its middle. */
-.separator {
-  position: relative;
-  height: var(--ds-unit);
-}
-.separator::after {
-  position: absolute;
-  inset-inline: 0;
-  top: calc(50% - 0.5px);
-  height: 1px;
-  background: var(--ds-border-color);
-  content: "";
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .popover:popover-open {
-    animation: ds-date-picker-in 140ms cubic-bezier(0.22, 1, 0.36, 1);
-  }
-  .trigger .arrow { transition: transform 140ms ease; }
-}
-@keyframes ds-date-picker-in {
-  from { opacity: 0; transform: translateY(calc(-4px * var(--ds-sf, 1))); }
-  to { opacity: 1; transform: none; }
-}

package/dist/3-unit/ds-date-picker.d.ts

@@ -1,203 +0,0 @@
-import { LitElement, type PropertyValues } from "lit";
-import { type DateLength } from "../0-face/format";
-import { type Day } from "../0-face/calendar";
-import "../2-core/ds-icon";
-import "./ds-calendar";
-/** Detail of `change` and `input`: the value now and before; each is empty when there is none. */
-export interface DatePickerChangeDetail {
-    value: string;
-    previous: string;
-}
-/** One end of a value: its day and, when it has one, its time (`14:30`). */
-export interface DatePickerEnd {
-    day: Day;
-    time: string;
-}
-/** Reads a value: `2026-10-21`, `2026-10-21T14:30`, or two of them joined by `/`. */
-export declare function readDateValue(value: string | null | undefined): {
-    start?: DatePickerEnd;
-    end?: DatePickerEnd;
-};
-/**
- * Writes a value from its ends, the times only with `time`. An end that is
- * the same moment as the start leaves the value one day.
- */
-export declare function writeDateValue(start: DatePickerEnd | undefined, end: DatePickerEnd | undefined, options: {
-    time: boolean;
-}): string;
-/** Reads what a person typed: a day written `YYYY-MM-DD`, or a date the browser can read ("Oct 21, 2026"). */
-export declare function parseTypedDay(text: string): Day | null;
-/**
- * @element ds-date-picker
- * @prop {string} value - `YYYY-MM-DD`, `YYYY-MM-DDTHH:MM`, or two joined by
- *   `/` for a range; empty for none.
- * @prop {string} name - The form field's name.
- * @prop {string} label - The field's accessible name: a translation key, or
- *   literal words.
- * @prop {boolean} literal - Show `label` and `placeholder` as written.
- * @prop {string} placeholder - The words before a day is chosen; the shared
- *   "Choose a date" by default.
- * @prop {string} length - How a day is written: `short`, `medium` (the
- *   default) or `long`.
- * @prop {boolean} time - Choose a time with each day (the Include time switch).
- * @prop {boolean} noOptions - Leave the Include time switch out (`no-options`);
- *   `time` still applies.
- * @prop {string} min - The first day a person may choose.
- * @prop {string} max - The last day a person may choose.
- * @prop {string} weekStart - The week's first day (`week-start`); the
- *   language's own by default.
- * @prop {string} today - The day drawn as today; the reader's own by default.
- * @prop {boolean} required - A form needs a value; Clear is left out.
- * @prop {boolean} disabled - The field cannot be opened.
- * @prop {boolean} open - The panel is open.
- *
- * @fires change - A person changed the value; `{ value, previous }`.
- * @fires input - The same moment, for code listening as to a field.
- * @fires ds-date-picker-toggle - The panel opened or closed; `{ open }`.
- *
- * @example
- * <ds-date-picker label="When" literal name="when" value="2026-10-21/2026-10-24"></ds-date-picker>
- */
-export declare class DatePicker extends LitElement {
-    static formAssociated: boolean;
-    static properties: {
-        value: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        name: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        label: {
-            type: StringConstructor;
-        };
-        literal: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        placeholder: {
-            type: StringConstructor;
-        };
-        length: {
-            type: StringConstructor;
-        };
-        time: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        noOptions: {
-            type: BooleanConstructor;
-            attribute: string;
-            reflect: boolean;
-        };
-        min: {
-            type: StringConstructor;
-        };
-        max: {
-            type: StringConstructor;
-        };
-        weekStart: {
-            type: StringConstructor;
-            attribute: string;
-        };
-        today: {
-            type: StringConstructor;
-        };
-        required: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        disabled: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        open: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        awaitingEnd: {
-            state: boolean;
-        };
-    };
-    static styles: import("lit").CSSResult[];
-    value: string;
-    name: string | undefined;
-    label: string | undefined;
-    literal: boolean;
-    placeholder: string | undefined;
-    length: DateLength | undefined;
-    time: boolean;
-    noOptions: boolean;
-    min: string | undefined;
-    max: string | undefined;
-    weekStart: string | undefined;
-    today: string | undefined;
-    required: boolean;
-    disabled: boolean;
-    open: boolean;
-    /** A first day has been pressed in this opening and the last is still to come. */
-    awaitingEnd: boolean;
-    private readonly internals;
-    /** The value the field started with, for a form's reset. */
-    private initial;
-    private shown;
-    /** Whether opening should move focus into the month (a key opened it). */
-    private focusMonth;
-    private readonly relabel;
-    constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    protected firstUpdated(): void;
-    /** The form was reset: back to the value it started with. */
-    formResetCallback(): void;
-    formDisabledCallback(disabled: boolean): void;
-    private words;
-    private get trigger();
-    private get panel();
-    private get calendar();
-    private get ends();
-    protected willUpdate(changed: PropertyValues<this>): void;
-    protected updated(changed: PropertyValues<this>): void;
-    /** Opens the panel. */
-    show(): void;
-    /** Closes the panel, giving focus back to the field when it was inside. */
-    hide(restore?: boolean): void;
-    private focusDay;
-    /** Below the field, half a square from it, or above when there is more room there; held inside the screen. */
-    private place;
-    private onOutside;
-    private toggle;
-    private onTriggerKey;
-    private onPanelKey;
-    private onFocusOut;
-    /** Takes a new value and says so. */
-    private commit;
-    private write;
-    /**
-     * A day pressed in the month. The first press of an opening starts the range
-     * (the value is that day until another is pressed); the second ends it and,
-     * without times to set, closes the panel.
-     */
-    private picked;
-    /** A day typed in a field, read when the person leaves it or presses Enter. */
-    private typed;
-    private timed;
-    private setTime;
-    /** Pressing the switch's row presses the switch, as a label would. */
-    private passPress;
-    private clear;
-    private moment;
-    private formatter;
-    private fieldText;
-    /** The face's words: one day, or a range written as the language writes one ("Oct 21 – 24, 2026"). */
-    private faceText;
-    private renderEnd;
-    render(): import("lit").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        "ds-date-picker": DatePicker;
-    }
-}
-//# sourceMappingURL=ds-date-picker.d.ts.map

package/dist/3-unit/ds-date-picker.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ds-date-picker.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/ds-date-picker.ts"],"names":[],"mappings":"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"}