kanto-ds 1.5.2 → 1.6.0

package/dist/chunks/kt-calendar-CtwOby1R.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-calendar-CtwOby1R.js","sources":["../../src/internal/date.ts","../../src/components/forms/kt-calendar/kt-calendar.ts"],"sourcesContent":["/**\n * Calendar dates without a time or a time zone.\n *\n * A date picker deals in days, and `Date` deals in instants: \"2026-03-29\" at\n * local midnight does not exist in some zones on DST night, and a day computed\n * in UTC is off by one for half the planet. So dates here are plain\n * `{ year, month, day }` values (month 1–12), serialised as ISO `YYYY-MM-DD`.\n * `Date` is only built — at noon, clear of any DST gap — to hand to `Intl`\n * for formatting.\n */\n\nexport interface PlainDate {\n  readonly year: number;\n  readonly month: number;\n  readonly day: number;\n}\n\nconst ISO = /^(\\d{4})-(\\d{2})-(\\d{2})$/;\n\nexport function daysInMonth(year: number, month: number): number {\n  return new Date(Date.UTC(year, month, 0)).getUTCDate();\n}\n\n/** `2026-09-25` → date, or `null` when malformed or impossible (Feb 30). */\nexport function parseDate(value: string | null | undefined): PlainDate | null {\n  const match = ISO.exec(value?.trim() ?? '');\n  if (!match) return null;\n  const [year, month, day] = [Number(match[1]), Number(match[2]), Number(match[3])];\n  if (month < 1 || month > 12 || day < 1 || day > daysInMonth(year, month)) return null;\n  return { year, month, day };\n}\n\nexport function formatDate(date: PlainDate): string {\n  const pad = (n: number, width = 2) => String(n).padStart(width, '0');\n  return `${pad(date.year, 4)}-${pad(date.month)}-${pad(date.day)}`;\n}\n\n/** An ISO 8601 interval, `start/end`. Either half may be missing or malformed. */\nexport function parseRange(value: string | null | undefined): {\n  start: PlainDate | null;\n  end: PlainDate | null;\n} {\n  const [start, end] = (value ?? '').split('/');\n  return { start: parseDate(start), end: parseDate(end) };\n}\n\nexport function formatRange(start: PlainDate, end: PlainDate): string {\n  return `${formatDate(start)}/${formatDate(end)}`;\n}\n\n/** Negative, zero or positive, like a sort comparator. */\nexport function compareDates(a: PlainDate, b: PlainDate): number {\n  return a.year - b.year || a.month - b.month || a.day - b.day;\n}\n\nexport function isSameDay(a: PlainDate | null, b: PlainDate | null): boolean {\n  return a !== null && b !== null && compareDates(a, b) === 0;\n}\n\n/** Whether `date` falls between `a` and `b`, inclusive, in either order. */\nexport function isBetween(date: PlainDate, a: PlainDate, b: PlainDate): boolean {\n  const [low, high] = compareDates(a, b) <= 0 ? [a, b] : [b, a];\n  return compareDates(date, low) >= 0 && compareDates(date, high) <= 0;\n}\n\nfunction fromUtc(time: number): PlainDate {\n  const d = new Date(time);\n  return { year: d.getUTCFullYear(), month: d.getUTCMonth() + 1, day: d.getUTCDate() };\n}\n\n/** Day arithmetic in UTC, where every day is 24 hours long. */\nexport function addDays(date: PlainDate, days: number): PlainDate {\n  return fromUtc(Date.UTC(date.year, date.month - 1, date.day + days));\n}\n\n/** Month arithmetic that clamps: 31 January + 1 month is 28 or 29 February. */\nexport function addMonths(date: PlainDate, months: number): PlainDate {\n  const index = date.year * 12 + (date.month - 1) + months;\n  const year = Math.floor(index / 12);\n  const month = (index % 12) + 1;\n  return { year, month, day: Math.min(date.day, daysInMonth(year, month)) };\n}\n\n/** 1 = Monday … 7 = Sunday, as ISO 8601 and `Intl.Locale#weekInfo` count them. */\nexport function isoWeekday(date: PlainDate): number {\n  const day = new Date(Date.UTC(date.year, date.month - 1, date.day)).getUTCDay();\n  return day === 0 ? 7 : day;\n}\n\n/** The first day of the week containing `date`, weeks starting on `firstDay`. */\nexport function startOfWeek(date: PlainDate, firstDay: number): PlainDate {\n  return addDays(date, -((isoWeekday(date) - firstDay + 7) % 7));\n}\n\n/**\n * The six weeks a month view shows — always six, so the calendar keeps its\n * height from one month to the next instead of jumping under the pointer.\n */\nexport function monthGrid(year: number, month: number, firstDay: number): PlainDate[][] {\n  let cursor = startOfWeek({ year, month, day: 1 }, firstDay);\n  const weeks: PlainDate[][] = [];\n  for (let week = 0; week < 6; week += 1) {\n    const days: PlainDate[] = [];\n    for (let day = 0; day < 7; day += 1) {\n      days.push(cursor);\n      cursor = addDays(cursor, 1);\n    }\n    weeks.push(days);\n  }\n  return weeks;\n}\n\nexport function today(): PlainDate {\n  const now = new Date();\n  return { year: now.getFullYear(), month: now.getMonth() + 1, day: now.getDate() };\n}\n\n/** A `Date` for `Intl` to format: local noon, clear of any DST transition. */\nexport function toLocalDate(date: PlainDate): Date {\n  return new Date(date.year, date.month - 1, date.day, 12);\n}\n\n/**\n * The first day of the week in `locale` — Monday in most of the world,\n * Sunday in the US, Saturday in parts of the Middle East. Read from\n * `Intl.Locale#getWeekInfo` (or the older `weekInfo` getter) where the\n * browser has it, Monday otherwise.\n */\nexport function firstDayOfWeek(locale: string): number {\n  try {\n    const info = new Intl.Locale(locale) as Intl.Locale & {\n      getWeekInfo?: () => { firstDay: number };\n      weekInfo?: { firstDay: number };\n    };\n    const firstDay = info.getWeekInfo?.().firstDay ?? info.weekInfo?.firstDay;\n    return firstDay && firstDay >= 1 && firstDay <= 7 ? firstDay : 1;\n  } catch {\n    return 1;\n  }\n}\n","import { css, html, nothing, type PropertyValues, type TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit, uniqueId } from '#internal/events';\nimport { dateFormat, resolveLocale } from '#internal/locale';\nimport { strings } from '#internal/strings';\nimport {\n  addDays,\n  addMonths,\n  compareDates,\n  daysInMonth,\n  firstDayOfWeek,\n  formatDate,\n  formatRange,\n  isBetween,\n  isSameDay,\n  monthGrid,\n  parseDate,\n  parseRange,\n  startOfWeek,\n  toLocalDate,\n  today,\n  type PlainDate,\n} from '#internal/date';\nimport '../../core/kt-icon/kt-icon.js';\n\n/** The grid of days, or the panel of years and months the title opens. */\nexport type KtCalendarView = 'day' | 'month';\n\n/** How far the year list reaches without a min or max: birthdays to plans. */\nconst YEARS_BACK = 120;\nconst YEARS_AHEAD = 50;\n\n/** Digits typed into the year list within this long make one year. */\nconst TYPING_PAUSE = 1000;\n\n/**\n * A month calendar to pick a day or a period from, shown in the page.\n *\n * The same calendar `<kt-date-picker>` opens in its popup, for when the\n * calendar is the interface rather than a way to fill a field: a booking\n * page, a dashboard's date filter, a planning view.\n *\n * The title — \"September 2026\" — opens one panel: a scrolling list of years\n * beside the twelve months of the one chosen. A year is a click or four typed\n * digits away, then its month a second click, whatever the distance.\n *\n * Keyboard, in the day grid (the WAI-ARIA date grid pattern): arrows by day\n * and week, Home/End to the week's ends, Page Up/Down by month and with Shift\n * by year, Enter to choose. In the year list: arrows, Page Up/Down by ten,\n * Home/End, or type the year; Enter or Tab on to the months. In the months:\n * arrows, Enter to choose. Escape returns to the days.\n *\n * @element kt-calendar\n *\n * @csspart base - The calendar.\n * @csspart day - A day cell.\n *\n * @fires kt-change - A day, or a whole period, was chosen. `detail: { value }`.\n *\n * @example\n * ```html\n * <kt-calendar value=\"2026-09-25\"></kt-calendar>\n * <kt-calendar range value=\"2026-09-01/2026-09-25\" min=\"2026-01-01\"></kt-calendar>\n * ```\n */\nexport class KtCalendar extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: inline-block;\n        --day-size: 32px;\n      }\n\n      .calendar {\n        display: flex;\n        flex-direction: column;\n        gap: var(--gap-element);\n        width: calc(var(--day-size) * 7);\n      }\n      /* Two months side by side, for a period that spans a month's end. */\n      .calendar.two {\n        width: calc(var(--day-size) * 14 + var(--month-gap));\n      }\n      :host {\n        --month-gap: 24px;\n      }\n      .months {\n        display: flex;\n        gap: var(--month-gap);\n        height: 100%;\n      }\n      .months > table {\n        flex: 1;\n      }\n      .two .header {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: var(--month-gap);\n      }\n      .two .header .title {\n        justify-self: start;\n      }\n      .second {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n      }\n      .second-title {\n        padding-left: 8px;\n        color: var(--text-body);\n        font: var(--font-normal-medium);\n        text-transform: capitalize;\n      }\n      td.blank {\n        pointer-events: none;\n      }\n\n      .header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: var(--gap-element);\n      }\n      .navs {\n        display: flex;\n        gap: 2px;\n      }\n\n      .nav,\n      .title {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        height: var(--day-size);\n        padding: 0;\n        color: var(--text-muted);\n        background: none;\n        border: none;\n        border-radius: var(--radius-input);\n        cursor: pointer;\n      }\n      .nav {\n        width: var(--day-size);\n      }\n      /* The month and year as one control: it is one place in time. */\n      /* A faint veil of the text colour at rest, so the title reads as a\n         button that opens something rather than as a heading — the same\n         lightness of touch on white and on the dark ramp. */\n      .title {\n        gap: 4px;\n        padding: 0 6px 0 10px;\n        color: var(--text-body);\n        font: var(--font-normal-medium);\n        text-transform: capitalize;\n        background: color-mix(in srgb, var(--text-body) 6%, transparent);\n        transition: background-color var(--duration-instant);\n      }\n      .title kt-icon {\n        color: var(--text-muted);\n        transition: transform var(--duration-fast) var(--easing-standard);\n      }\n      .title[aria-expanded='true'] kt-icon {\n        transform: scaleY(-1);\n      }\n      .nav:hover {\n        color: var(--text-body);\n        background: var(--color-dark-22);\n      }\n      .title:hover,\n      .title[aria-expanded='true'] {\n        background: color-mix(in srgb, var(--text-body) 11%, transparent);\n      }\n      .nav:focus-visible,\n      .title:focus-visible {\n        outline: var(--outline-width) solid var(--color-primary-base);\n      }\n\n      /* One height for every view, so the calendar does not shrink under the\n         pointer when it switches from days to months or years. */\n      .body {\n        height: calc(var(--day-size) * 7 + 16px);\n      }\n      table {\n        width: 100%;\n        table-layout: fixed;\n        border-collapse: separate;\n        border-spacing: 0 2px;\n      }\n      /* The months keep a cell's height and sit at the top, beside the\n         years, rather than stretching into tall blocks. */\n      table.wide {\n        align-self: start;\n        border-spacing: 2px;\n      }\n      th {\n        padding-bottom: 4px;\n        color: var(--text-muted);\n        font: var(--font-normal-small);\n        font-weight: 600;\n      }\n      th abbr {\n        text-decoration: none;\n      }\n\n      .cell {\n        position: relative;\n        height: var(--day-size);\n        padding: 0;\n        color: var(--text-body);\n        font: var(--font-normal-regular);\n        font-variant-numeric: tabular-nums;\n        text-align: center;\n        border-radius: var(--radius-input);\n        outline: none;\n        cursor: pointer;\n      }\n      .cell:hover {\n        background: var(--color-dark-22);\n      }\n      .cell:focus-visible {\n        box-shadow: inset 0 0 0 var(--outline-width) var(--color-primary-base);\n      }\n      /* Months and years sit three to a row, sharing the height the days use. */\n      .wide .cell {\n        height: 40px;\n        text-transform: capitalize;\n      }\n      .cell.outside {\n        color: var(--text-muted);\n      }\n      /* Today: a dot under the number, which a selection's fill keeps. */\n      .cell.current::after {\n        content: '';\n        position: absolute;\n        bottom: 3px;\n        left: 50%;\n        width: 4px;\n        height: 4px;\n        margin-left: -2px;\n        background: currentColor;\n        border-radius: var(--radius-full);\n      }\n\n      /* A period reads as one band: the days between are tinted and squared\n         off, and only its two ends are rounded. */\n      /* A clear band, not a wash: the -soft tint faded on a white popup. */\n      .cell.in-range {\n        background: color-mix(in srgb, var(--color-primary-base) 18%, transparent);\n        border-radius: 0;\n      }\n      .cell.range-start {\n        border-radius: var(--radius-input) 0 0 var(--radius-input);\n      }\n      .cell.range-end {\n        border-radius: 0 var(--radius-input) var(--radius-input) 0;\n      }\n      .cell.range-start.range-end {\n        border-radius: var(--radius-input);\n      }\n      .cell.selected {\n        color: var(--color-white);\n        background: var(--color-primary-base);\n      }\n\n      /* The month and year panel: the years scroll beside the months. */\n      .month-year {\n        display: grid;\n        grid-template-columns: 72px 1fr;\n        gap: var(--gap-element);\n        height: 100%;\n      }\n      .years {\n        display: flex;\n        flex-direction: column;\n        gap: 2px;\n        padding-right: 6px;\n        overflow-y: auto;\n        border-right: var(--border-width) solid var(--divider-popover);\n        outline: none;\n        scrollbar-width: thin;\n      }\n      .year {\n        flex: none;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        height: var(--day-size);\n        color: var(--text-body);\n        font: var(--font-normal-regular);\n        font-variant-numeric: tabular-nums;\n        border-radius: var(--radius-input);\n        outline: none;\n        cursor: pointer;\n      }\n      .year:hover {\n        background: var(--color-dark-22);\n      }\n      .year:focus-visible {\n        box-shadow: inset 0 0 0 var(--outline-width) var(--color-primary-base);\n      }\n      /* Where the list is, not what is chosen: tinted, so the one solid\n         fill in the panel stays the chosen month. */\n      .year[aria-selected='true'] {\n        color: var(--color-primary-text);\n        font-weight: 600;\n        background: var(--color-primary-soft);\n      }\n\n      .cell[aria-disabled='true'] {\n        color: var(--text-disabled);\n        background: none;\n        text-decoration: line-through;\n        cursor: not-allowed;\n      }\n    `,\n  ];\n\n  private readonly liveId = uniqueId('kt-calendar-live');\n  private focusCell = false;\n  /** Set when the year list should scroll its year into view, and focus it. */\n  private focusYear = false;\n  /** Digits typed into the year list, and when the last one came. */\n  private typed = '';\n  private typedAt = 0;\n  /** Set while the calendar writes its own value, which should not move it. */\n  private committing = false;\n\n  @state() private view: KtCalendarView = 'day';\n  /** First day of the month the day view shows. */\n  @state() private month: PlainDate = { ...today(), day: 1 };\n  /** The day, month or year holding the grid's one tab stop. */\n  @state() private focused: PlainDate = today();\n  /** In a period: the first end chosen, while the second is pending. */\n  @state() private anchor: PlainDate | null = null;\n\n  /** ISO date, or `start/end` interval with `range`. `null` when empty. */\n  @property({ type: String, reflect: true })\n  value: string | null = null;\n\n  /** Choose a period — two dates — instead of one day. */\n  @property({ type: Boolean, reflect: true })\n  range = false;\n\n  /** Earliest date that can be chosen, ISO. */\n  @property({ type: String })\n  min = '';\n\n  /** Latest date that can be chosen, ISO. */\n  @property({ type: String })\n  max = '';\n\n  /**\n   * BCP 47 language tag for names and the first day of the week. Empty: the\n   * page's `lang`, then the browser's language.\n   */\n  @property({ type: String })\n  locale = '';\n\n  /** How many months the day view shows side by side: 1, or 2 for a period. */\n  @property({ type: Number, reflect: true })\n  months: 1 | 2 = 1;\n\n  /** Accessible name of the calendar. Defaults to the strings registry. */\n  @property({ type: String })\n  label = '';\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // Open on the chosen day, or today, kept inside the bounds.\n    this.jumpTo(this.clamp(this.selection.start ?? today()), false);\n  }\n\n  override willUpdate(changed: PropertyValues<this>): void {\n    // A value set from outside — a \"today\" button, a reset — moves the\n    // calendar to it. One the user just picked leaves it where it is.\n    if (changed.has('value') && !this.committing && this.hasUpdated) {\n      this.anchor = null;\n      const start = this.selection.start;\n      if (start) this.jumpTo(this.clamp(start), false);\n    }\n    this.committing = false;\n  }\n\n  override updated(): void {\n    if (this.view === 'month') this.revealYear(this.focusYear);\n    this.focusYear = false;\n    if (!this.focusCell) return;\n    this.focusCell = false;\n    this.shadowRoot?.querySelector<HTMLElement>('.cell[tabindex=\"0\"]')?.focus();\n  }\n\n  /**\n   * Keeps the chosen year in sight in its list — centred when the panel\n   * opens — and focuses it when asked. The list scrolls itself; the page\n   * never does.\n   */\n  private revealYear(focus: boolean): void {\n    const list = this.shadowRoot?.querySelector<HTMLElement>('.years');\n    const option = list?.querySelector<HTMLElement>('[aria-selected=\"true\"]');\n    if (!list || !option) return;\n\n    const top = option.offsetTop - list.offsetTop;\n    if (focus) {\n      list.scrollTop = top - (list.clientHeight - option.offsetHeight) / 2;\n      option.focus({ preventScroll: true });\n    } else if (top < list.scrollTop) {\n      list.scrollTop = top;\n    } else if (top + option.offsetHeight > list.scrollTop + list.clientHeight) {\n      list.scrollTop = top + option.offsetHeight - list.clientHeight;\n    }\n  }\n\n  /** Focuses the grid's current cell — the chosen day, or today. */\n  override focus(): void {\n    this.focusCell = true;\n    this.requestUpdate();\n  }\n\n  // --- Reading the value ---\n\n  private get resolvedLocale(): string {\n    return resolveLocale(this.locale);\n  }\n\n  private get selection(): { start: PlainDate | null; end: PlainDate | null } {\n    return this.range\n      ? parseRange(this.value)\n      : { start: parseDate(this.value), end: parseDate(this.value) };\n  }\n\n  private get bounds(): { min: PlainDate | null; max: PlainDate | null } {\n    return { min: parseDate(this.min), max: parseDate(this.max) };\n  }\n\n  private clamp(date: PlainDate): PlainDate {\n    const { min, max } = this.bounds;\n    if (min && compareDates(date, min) < 0) return min;\n    if (max && compareDates(date, max) > 0) return max;\n    return date;\n  }\n\n  private isOutOfBounds(date: PlainDate): boolean {\n    const { min, max } = this.bounds;\n    return (\n      (min !== null && compareDates(date, min) < 0) || (max !== null && compareDates(date, max) > 0)\n    );\n  }\n\n  /** A month or a year is unavailable only when every day of it is. */\n  private isSpanOutOfBounds(first: PlainDate, last: PlainDate): boolean {\n    const { min, max } = this.bounds;\n    return (\n      (max !== null && compareDates(first, max) > 0) ||\n      (min !== null && compareDates(last, min) < 0)\n    );\n  }\n\n  private format(options: Intl.DateTimeFormatOptions, date: PlainDate): string {\n    return dateFormat(this.resolvedLocale, options).format(toLocalDate(date));\n  }\n\n  // --- Moving ---\n\n  private get monthSpan(): number {\n    return this.months === 2 ? 2 : 1;\n  }\n\n  /**\n   * Moves the tab stop, and the day view with it only when the date leaves\n   * the months on screen — moving across two months does not page.\n   */\n  private jumpTo(date: PlainDate, focus = true): void {\n    this.focused = date;\n    const index = (date.year - this.month.year) * 12 + (date.month - this.month.month);\n    if (index < 0) {\n      this.month = { year: date.year, month: date.month, day: 1 };\n    } else if (index >= this.monthSpan) {\n      this.month = addMonths({ year: date.year, month: date.month, day: 1 }, 1 - this.monthSpan);\n    }\n    this.focusCell = focus;\n  }\n\n  /** The header's arrows: the whole view, and the tab stop with it, by a month. */\n  private page(by: number): void {\n    this.month = addMonths(this.month, by);\n    this.focused = addMonths(this.focused, by);\n  }\n\n  private setView(view: KtCalendarView): void {\n    this.view = view;\n    if (view === 'month') {\n      // Open on the month on screen, and on its year in the list.\n      this.focused = { ...this.month, day: this.focused.day };\n      this.focusYear = true;\n    } else {\n      this.focusCell = true;\n    }\n  }\n\n  /** The years the list offers: the bounds, or a span around today. */\n  private get yearRange(): { first: number; last: number } {\n    const { min, max } = this.bounds;\n    const now = today().year;\n    return { first: min?.year ?? now - YEARS_BACK, last: max?.year ?? now + YEARS_AHEAD };\n  }\n\n  // --- Choosing ---\n\n  private chooseDay(date: PlainDate): void {\n    if (this.isOutOfBounds(date)) return;\n    this.focused = date;\n\n    if (!this.range) {\n      this.commit(formatDate(date));\n      return;\n    }\n    if (!this.anchor) {\n      this.anchor = date;\n      return;\n    }\n    const [start, end] =\n      compareDates(this.anchor, date) <= 0 ? [this.anchor, date] : [date, this.anchor];\n    this.anchor = null;\n    this.commit(formatRange(start, end));\n  }\n\n  private commit(value: string): void {\n    this.committing = true;\n    this.value = value;\n    emit(this, 'kt-change', { value });\n  }\n\n  private chooseMonth(month: number): void {\n    const day = Math.min(this.focused.day, daysInMonth(this.focused.year, month));\n    this.jumpTo(this.clamp({ year: this.focused.year, month, day }));\n    this.setView('day');\n  }\n\n  /** Shows a year's months, staying in the panel. */\n  private chooseYear(year: number, focus = true): void {\n    const { first, last } = this.yearRange;\n    const target = Math.min(Math.max(year, first), last);\n    const day = Math.min(this.focused.day, daysInMonth(target, this.focused.month));\n    this.focused = { year: target, month: this.focused.month, day };\n    this.focusYear = focus;\n  }\n\n  private onYearKeyDown(event: KeyboardEvent): void {\n    const { year } = this.focused;\n    const { first, last } = this.yearRange;\n\n    if (/^\\d$/.test(event.key)) {\n      // Four digits in a row make a year: type 1987, land on 1987.\n      const now = Date.now();\n      this.typed = now - this.typedAt > TYPING_PAUSE ? event.key : this.typed + event.key;\n      this.typedAt = now;\n      if (this.typed.length === 4) {\n        this.chooseYear(Number(this.typed));\n        this.typed = '';\n      }\n      event.preventDefault();\n      return;\n    }\n\n    switch (event.key) {\n      case 'ArrowUp':\n        this.chooseYear(year - 1);\n        break;\n      case 'ArrowDown':\n        this.chooseYear(year + 1);\n        break;\n      case 'PageUp':\n        this.chooseYear(year - 10);\n        break;\n      case 'PageDown':\n        this.chooseYear(year + 10);\n        break;\n      case 'Home':\n        this.chooseYear(first);\n        break;\n      case 'End':\n        this.chooseYear(last);\n        break;\n      case 'Enter':\n      case ' ':\n        // On to the months of the year.\n        this.focusCell = true;\n        this.requestUpdate();\n        break;\n      case 'Escape':\n        // Back to the days, not out of whatever holds the calendar.\n        event.stopPropagation();\n        this.setView('day');\n        break;\n      default:\n        return;\n    }\n    event.preventDefault();\n  }\n\n  // --- Keyboard ---\n\n  private onDayKeyDown(event: KeyboardEvent): void {\n    const firstDay = firstDayOfWeek(this.resolvedLocale);\n    const from = this.focused;\n    let next: PlainDate;\n\n    switch (event.key) {\n      case 'ArrowLeft':\n        next = addDays(from, -1);\n        break;\n      case 'ArrowRight':\n        next = addDays(from, 1);\n        break;\n      case 'ArrowUp':\n        next = addDays(from, -7);\n        break;\n      case 'ArrowDown':\n        next = addDays(from, 7);\n        break;\n      case 'Home':\n        next = startOfWeek(from, firstDay);\n        break;\n      case 'End':\n        next = addDays(startOfWeek(from, firstDay), 6);\n        break;\n      case 'PageUp':\n        next = addMonths(from, event.shiftKey ? -12 : -1);\n        break;\n      case 'PageDown':\n        next = addMonths(from, event.shiftKey ? 12 : 1);\n        break;\n      case 'Enter':\n      case ' ':\n        event.preventDefault();\n        this.chooseDay(from);\n        return;\n      default:\n        return;\n    }\n    event.preventDefault();\n    this.jumpTo(next);\n  }\n\n  /** The months, three to a row; crossing a year end moves the year list too. */\n  private onPickerKeyDown(event: KeyboardEvent): void {\n    const step = (by: number) => addMonths(this.focused, by);\n\n    let next: PlainDate;\n    switch (event.key) {\n      case 'ArrowLeft':\n        next = step(-1);\n        break;\n      case 'ArrowRight':\n        next = step(1);\n        break;\n      case 'ArrowUp':\n        next = step(-3);\n        break;\n      case 'ArrowDown':\n        next = step(3);\n        break;\n      case 'PageUp':\n        next = step(-12);\n        break;\n      case 'PageDown':\n        next = step(12);\n        break;\n      case 'Enter':\n      case ' ':\n        event.preventDefault();\n        this.chooseMonth(this.focused.month);\n        return;\n      case 'Escape':\n        // Back to the days, not out of whatever holds the calendar.\n        event.preventDefault();\n        event.stopPropagation();\n        this.setView('day');\n        return;\n      default:\n        return;\n    }\n    event.preventDefault();\n    this.focused = next;\n    this.focusCell = true;\n  }\n\n  // --- Rendering ---\n\n  private renderHeader(): TemplateResult {\n    const s = strings();\n    const open = this.view === 'month';\n    const shown = open ? this.focused : this.month;\n\n    const navs = html`<div class=\"navs\">\n      <button type=\"button\" class=\"nav\" aria-label=${s.previousMonth} @click=${() => this.page(-1)}>\n        <kt-icon name=\"chevron-left\" size=\"18\"></kt-icon>\n      </button>\n      <button type=\"button\" class=\"nav\" aria-label=${s.nextMonth} @click=${() => this.page(1)}>\n        <kt-icon name=\"chevron-right\" size=\"18\"></kt-icon>\n      </button>\n    </div>`;\n\n    return html`<div class=\"header\">\n      <button\n        type=\"button\"\n        class=\"title\"\n        aria-expanded=${open ? 'true' : 'false'}\n        @click=${() => this.setView(open ? 'day' : 'month')}\n      >\n        ${this.format({ month: 'long', year: 'numeric' }, shown)}\n        <kt-icon name=\"chevron-down\" size=\"16\"></kt-icon>\n      </button>\n      ${\n        open\n          ? nothing\n          : this.monthSpan === 2\n            ? html`<div class=\"second\">\n                <span class=\"second-title\" aria-hidden=\"true\"\n                  >${this.format({ month: 'long', year: 'numeric' }, addMonths(this.month, 1))}</span\n                >\n                ${navs}\n              </div>`\n            : navs\n      }\n    </div>`;\n  }\n\n  private renderDay(date: PlainDate, gridMonth: PlainDate): TemplateResult {\n    const outside = date.month !== gridMonth.month;\n    // Beside a second month, the neighbours' days would show twice: leave them out.\n    if (outside && this.monthSpan === 2) return html`<td class=\"blank\" role=\"gridcell\"></td>`;\n\n    const { start, end } = this.selection;\n    const rangeStart = this.anchor ?? start;\n    const rangeEnd = this.anchor ? this.focused : end;\n    const [low, high] =\n      rangeStart && rangeEnd && compareDates(rangeStart, rangeEnd) > 0\n        ? [rangeEnd, rangeStart]\n        : [rangeStart, rangeEnd];\n\n    const selected = this.range\n      ? isSameDay(date, low) || isSameDay(date, high)\n      : isSameDay(date, start);\n    const inRange = this.range && low !== null && high !== null && isBetween(date, low, high);\n    const isToday = isSameDay(date, today());\n\n    return html`<td\n      part=\"day\"\n      role=\"gridcell\"\n      class=${classMap({\n        cell: true,\n        outside,\n        current: isToday,\n        selected,\n        'in-range': inRange,\n        'range-start': inRange && isSameDay(date, low),\n        'range-end': inRange && isSameDay(date, high),\n      })}\n      data-date=${formatDate(date)}\n      tabindex=${isSameDay(date, this.focused) ? 0 : -1}\n      aria-selected=${selected ? 'true' : 'false'}\n      aria-disabled=${this.isOutOfBounds(date) ? 'true' : nothing}\n      aria-current=${isToday ? 'date' : nothing}\n      aria-label=${this.format({ dateStyle: 'full' }, date)}\n      @click=${() => this.chooseDay(date)}\n      @pointerenter=${() => {\n        if (this.anchor) this.focused = date;\n      }}\n    >\n      ${date.day}\n    </td>`;\n  }\n\n  private renderDays(): TemplateResult {\n    const grids = Array.from({ length: this.monthSpan }, (_, index) =>\n      this.renderMonth(addMonths(this.month, index)),\n    );\n    return this.monthSpan === 2 ? html`<div class=\"months\">${grids}</div>` : grids[0]!;\n  }\n\n  private renderMonth(month: PlainDate): TemplateResult {\n    const weeks = monthGrid(month.year, month.month, firstDayOfWeek(this.resolvedLocale));\n    return html`<table\n      role=\"grid\"\n      aria-label=${this.format({ month: 'long', year: 'numeric' }, month)}\n      @keydown=${this.onDayKeyDown}\n    >\n      <thead>\n        <tr>\n          ${weeks[0]!.map(\n            (day) =>\n              html`<th scope=\"col\">\n                <abbr title=${this.format({ weekday: 'long' }, day)}\n                  >${this.format({ weekday: 'short' }, day)}</abbr\n                >\n              </th>`,\n          )}\n        </tr>\n      </thead>\n      <tbody>\n        ${weeks.map(\n          (week) =>\n            html`<tr>\n              ${week.map((day) => this.renderDay(day, month))}\n            </tr>`,\n        )}\n      </tbody>\n    </table>`;\n  }\n\n  /** The panel the title opens: the years, and the twelve months of one. */\n  private renderPicker(): TemplateResult {\n    const s = strings();\n    const { year } = this.focused;\n    const now = today();\n    const { first, last } = this.yearRange;\n    const years = Array.from({ length: last - first + 1 }, (_, index) => first + index);\n\n    const months = Array.from({ length: 12 }, (_, index) => {\n      const month = index + 1;\n      const firstDay = { year, month, day: 1 };\n      return {\n        month,\n        label: this.format({ month: 'short' }, firstDay),\n        fullLabel: this.format({ month: 'long', year: 'numeric' }, firstDay),\n        selected: month === this.month.month && year === this.month.year,\n        current: month === now.month && year === now.year,\n        disabled: this.isSpanOutOfBounds(firstDay, {\n          year,\n          month,\n          day: daysInMonth(year, month),\n        }),\n      };\n    });\n    const rows = [0, 3, 6, 9].map((start) => months.slice(start, start + 3));\n\n    return html`<div class=\"month-year\">\n      <div class=\"years\" role=\"listbox\" aria-label=${s.chooseYear} @keydown=${this.onYearKeyDown}>\n        ${years.map(\n          (candidate) =>\n            html`<div\n              class=\"year\"\n              role=\"option\"\n              data-year=${candidate}\n              aria-selected=${candidate === year ? 'true' : 'false'}\n              tabindex=${candidate === year ? 0 : -1}\n              @click=${() => this.chooseYear(candidate)}\n            >\n              ${candidate}\n            </div>`,\n        )}\n      </div>\n\n      <table role=\"grid\" class=\"wide\" aria-label=${s.chooseMonth} @keydown=${this.onPickerKeyDown}>\n        <tbody>\n          ${rows.map(\n            (row) =>\n              html`<tr>\n                ${row.map(\n                  (cell) =>\n                    html`<td\n                      role=\"gridcell\"\n                      class=${classMap({\n                        cell: true,\n                        selected: cell.selected,\n                        current: cell.current,\n                      })}\n                      data-key=${`${year}-${cell.month}`}\n                      tabindex=${cell.month === this.focused.month ? 0 : -1}\n                      aria-selected=${cell.selected ? 'true' : 'false'}\n                      aria-disabled=${cell.disabled ? 'true' : nothing}\n                      aria-label=${cell.fullLabel}\n                      @click=${() => {\n                        if (!cell.disabled) this.chooseMonth(cell.month);\n                      }}\n                    >\n                      ${cell.label}\n                    </td>`,\n                )}\n              </tr>`,\n          )}\n        </tbody>\n      </table>\n    </div>`;\n  }\n\n  override render(): TemplateResult {\n    const s = strings();\n    const announced =\n      this.view === 'day'\n        ? this.format({ month: 'long', year: 'numeric' }, this.month)\n        : String(this.focused.year);\n\n    return html`<div\n      part=\"base\"\n      class=${classMap({ calendar: true, two: this.monthSpan === 2 })}\n      role=\"group\"\n      aria-label=${this.label || (this.range ? s.selectPeriod : s.selectDate)}\n    >\n      <span id=${this.liveId} class=\"visually-hidden\" aria-live=\"polite\">${announced}</span>\n      ${this.renderHeader()}\n      <div class=\"body\">${this.view === 'day' ? this.renderDays() : this.renderPicker()}</div>\n    </div>`;\n  }\n}\n\ndefineElement('kt-calendar', KtCalendar);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-calendar': KtCalendar;\n  }\n}\n"],"names":["ISO","daysInMonth","year","month","parseDate","value","match","day","formatDate","date","pad","n","width","parseRange","start","end","formatRange","compareDates","b","isSameDay","isBetween","a","low","high","fromUtc","time","d","addDays","days","addMonths","months","index","isoWeekday","startOfWeek","firstDay","monthGrid","cursor","weeks","week","today","now","toLocalDate","firstDayOfWeek","locale","info","YEARS_BACK","YEARS_AHEAD","TYPING_PAUSE","KtCalendar","KtElement","uniqueId","css","changed","focus","list","option","top","resolveLocale","min","max","first","last","options","dateFormat","by","view","emit","target","event","from","next","step","s","strings","open","shown","navs","html","nothing","gridMonth","outside","rangeStart","rangeEnd","selected","inRange","isToday","classMap","grids","_","years","rows","candidate","row","cell","announced","__decorateClass","state","property","defineElement"],"mappings":"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"}

package/dist/chunks/{kt-element-Djx2JcGl.js → kt-element-T0VbIBNp.js}

@@ -1,5 +1,5 @@
 import { LitElement as n, css as i } from "lit";
-import { o } from "./index-STEEvEP7.js";
+import { o } from "./index-TWJzttLX.js";
 const t = "kt-strings";
 class c extends n {
   static {
@@ -49,4 +49,4 @@ export {
   c as K,
   d
 };
-//# sourceMappingURL=kt-element-Djx2JcGl.js.map
+//# sourceMappingURL=kt-element-T0VbIBNp.js.map

package/dist/chunks/{kt-element-Djx2JcGl.js.map → kt-element-T0VbIBNp.js.map}

@@ -1 +1 @@
-{"version":3,"file":"kt-element-Djx2JcGl.js","sources":["../../src/internal/kt-element.ts"],"sourcesContent":["import { LitElement, css, type CSSResultGroup, type PropertyValues } from 'lit';\nimport { onStringsChange } from './strings.js';\n\n/**\n * The key a `setStrings` call marks in `changedProperties`, so an element can\n * recompute copy it caches outside `render()` — a validation message.\n */\nconst STRINGS_CHANGED = 'kt-strings';\n\n/**\n * Base class for every Kanto element.\n *\n * It exists for two reasons. First, `box-sizing: border-box` does not cross a\n * shadow boundary, so each root has to re-establish it. Second, `[hidden]`\n * loses to a `:host { display: flex }` rule inside the shadow root, and every\n * element in this system sets its own display — without the override here,\n * hiding a Kanto element from the outside silently does nothing.\n */\nexport class KtElement extends LitElement {\n  static override styles: CSSResultGroup = css`\n    :host {\n      box-sizing: border-box;\n    }\n\n    :host([hidden]) {\n      display: none !important;\n    }\n\n    *,\n    *::before,\n    *::after {\n      box-sizing: inherit;\n    }\n\n    /* Read by assistive technology, never drawn. */\n    .visually-hidden {\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      overflow: hidden;\n      clip-path: inset(50%);\n      white-space: nowrap;\n    }\n  `;\n\n  private unsubscribeStrings: (() => void) | undefined;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // Copy comes from the strings registry at render time; follow it when an\n    // application switches language.\n    // A fresh old value, because Lit skips a named update whose value did not\n    // change — and 'kt-strings' is not a property, so it is always undefined.\n    this.unsubscribeStrings = onStringsChange(() =>\n      this.requestUpdate(STRINGS_CHANGED, Symbol('previous strings')),\n    );\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.unsubscribeStrings?.();\n    this.unsubscribeStrings = undefined;\n  }\n\n  /** True when this update was triggered by `setStrings`. */\n  protected stringsChanged(changed: PropertyValues): boolean {\n    return changed.has(STRINGS_CHANGED);\n  }\n}\n\n/**\n * Registers a custom element, tolerating a repeat call.\n *\n * A design system gets loaded twice more often than you would like — two\n * versions in one dependency tree, a dev-server hot reload, a micro-frontend\n * mounting a second copy. `customElements.define` throws on a duplicate tag\n * and would take the whole page down with it.\n */\nexport function defineElement(tag: string, ctor: CustomElementConstructor): void {\n  if (customElements.get(tag)) return;\n  customElements.define(tag, ctor);\n}\n"],"names":["STRINGS_CHANGED","KtElement","LitElement","css","onStringsChange","changed","defineElement","tag","ctor"],"mappings":";;AAOA,MAAMA,IAAkB;AAWjB,MAAMC,UAAkBC,EAAW;AAAA,EACxC,OAAA;AAAA,SAAgB,SAAyBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAAA,EA4BhC,oBAA0B;AACjC,UAAM,kBAAA,GAKN,KAAK,qBAAqBC;AAAA,MAAgB,MACxC,KAAK,cAAcJ,GAAiB,uBAAO,kBAAkB,CAAC;AAAA,IAAA;AAAA,EAElE;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA,GACN,KAAK,qBAAA,GACL,KAAK,qBAAqB;AAAA,EAC5B;AAAA;AAAA,EAGU,eAAeK,GAAkC;AACzD,WAAOA,EAAQ,IAAIL,CAAe;AAAA,EACpC;AACF;AAUO,SAASM,EAAcC,GAAaC,GAAsC;AAC/E,EAAI,eAAe,IAAID,CAAG,KAC1B,eAAe,OAAOA,GAAKC,CAAI;AACjC;"}
+{"version":3,"file":"kt-element-T0VbIBNp.js","sources":["../../src/internal/kt-element.ts"],"sourcesContent":["import { LitElement, css, type CSSResultGroup, type PropertyValues } from 'lit';\nimport { onStringsChange } from './strings.js';\n\n/**\n * The key a `setStrings` call marks in `changedProperties`, so an element can\n * recompute copy it caches outside `render()` — a validation message.\n */\nconst STRINGS_CHANGED = 'kt-strings';\n\n/**\n * Base class for every Kanto element.\n *\n * It exists for two reasons. First, `box-sizing: border-box` does not cross a\n * shadow boundary, so each root has to re-establish it. Second, `[hidden]`\n * loses to a `:host { display: flex }` rule inside the shadow root, and every\n * element in this system sets its own display — without the override here,\n * hiding a Kanto element from the outside silently does nothing.\n */\nexport class KtElement extends LitElement {\n  static override styles: CSSResultGroup = css`\n    :host {\n      box-sizing: border-box;\n    }\n\n    :host([hidden]) {\n      display: none !important;\n    }\n\n    *,\n    *::before,\n    *::after {\n      box-sizing: inherit;\n    }\n\n    /* Read by assistive technology, never drawn. */\n    .visually-hidden {\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      overflow: hidden;\n      clip-path: inset(50%);\n      white-space: nowrap;\n    }\n  `;\n\n  private unsubscribeStrings: (() => void) | undefined;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // Copy comes from the strings registry at render time; follow it when an\n    // application switches language.\n    // A fresh old value, because Lit skips a named update whose value did not\n    // change — and 'kt-strings' is not a property, so it is always undefined.\n    this.unsubscribeStrings = onStringsChange(() =>\n      this.requestUpdate(STRINGS_CHANGED, Symbol('previous strings')),\n    );\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.unsubscribeStrings?.();\n    this.unsubscribeStrings = undefined;\n  }\n\n  /** True when this update was triggered by `setStrings`. */\n  protected stringsChanged(changed: PropertyValues): boolean {\n    return changed.has(STRINGS_CHANGED);\n  }\n}\n\n/**\n * Registers a custom element, tolerating a repeat call.\n *\n * A design system gets loaded twice more often than you would like — two\n * versions in one dependency tree, a dev-server hot reload, a micro-frontend\n * mounting a second copy. `customElements.define` throws on a duplicate tag\n * and would take the whole page down with it.\n */\nexport function defineElement(tag: string, ctor: CustomElementConstructor): void {\n  if (customElements.get(tag)) return;\n  customElements.define(tag, ctor);\n}\n"],"names":["STRINGS_CHANGED","KtElement","LitElement","css","onStringsChange","changed","defineElement","tag","ctor"],"mappings":";;AAOA,MAAMA,IAAkB;AAWjB,MAAMC,UAAkBC,EAAW;AAAA,EACxC,OAAA;AAAA,SAAgB,SAAyBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAAA,EA4BhC,oBAA0B;AACjC,UAAM,kBAAA,GAKN,KAAK,qBAAqBC;AAAA,MAAgB,MACxC,KAAK,cAAcJ,GAAiB,uBAAO,kBAAkB,CAAC;AAAA,IAAA;AAAA,EAElE;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA,GACN,KAAK,qBAAA,GACL,KAAK,qBAAqB;AAAA,EAC5B;AAAA;AAAA,EAGU,eAAeK,GAAkC;AACzD,WAAOA,EAAQ,IAAIL,CAAe;AAAA,EACpC;AACF;AAUO,SAASM,EAAcC,GAAaC,GAAsC;AAC/E,EAAI,eAAe,IAAID,CAAG,KAC1B,eAAe,OAAOA,GAAKC,CAAI;AACjC;"}

package/dist/chunks/{listbox-llcUu_V-.js → listbox-LsUEyGhQ.js}

@@ -34,7 +34,7 @@ const u = o`
     padding: var(--padding-expand);
     overflow: auto;
     list-style: none;
-    background: var(--color-dark-20);
+    background: var(--surface-popover);
     border-radius: var(--radius-input);
     scrollbar-width: thin;
 
@@ -102,4 +102,4 @@ export {
   s as n,
   i as o
 };
-//# sourceMappingURL=listbox-llcUu_V-.js.map
+//# sourceMappingURL=listbox-LsUEyGhQ.js.map

package/dist/chunks/{listbox-llcUu_V-.js.map → listbox-LsUEyGhQ.js.map}

@@ -1 +1 @@
-{"version":3,"file":"listbox-llcUu_V-.js","sources":["../../src/internal/listbox.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * Shared pieces of the two option-list controls, `<kt-select>` and\n * `<kt-input-menu>`.\n *\n * They differ in how an option is chosen — pick from a list, or filter by\n * typing — but the popup, the option rows and the keyboard model are the same,\n * and having them drift apart is how a design system stops looking like one.\n */\n\nexport interface KtOption {\n  readonly id: string | number;\n  readonly label?: string;\n  readonly disabled?: boolean;\n}\n\n/** The text to display for an option: its label, or its id as a fallback. */\nexport function optionLabel(option: KtOption): string {\n  return option.label ?? String(option.id);\n}\n\n/** Case-insensitive substring match on the visible label. */\nexport function filterOptions(options: readonly KtOption[], query: string): readonly KtOption[] {\n  const needle = query.trim().toLowerCase();\n  if (!needle) return options;\n  return options.filter((option) => optionLabel(option).toLowerCase().includes(needle));\n}\n\n/**\n * The next selectable index in `direction`, skipping disabled options and\n * wrapping at both ends. Returns -1 when every option is disabled, so a caller\n * never lands the active descendant on something that cannot be chosen.\n */\nexport function nextEnabledIndex(\n  options: readonly KtOption[],\n  from: number,\n  direction: 1 | -1,\n): number {\n  if (options.length === 0) return -1;\n\n  for (let step = 1; step <= options.length; step += 1) {\n    const index = (from + direction * step + options.length * step) % options.length;\n    if (!options[index]?.disabled) return index;\n  }\n  return -1;\n}\n\n/** The first selectable index, for opening a list with nothing selected. */\nexport function firstEnabledIndex(options: readonly KtOption[]): number {\n  return options.findIndex((option) => !option.disabled);\n}\n\n/** The last selectable index, for End. */\nexport function lastEnabledIndex(options: readonly KtOption[]): number {\n  for (let index = options.length - 1; index >= 0; index -= 1) {\n    if (!options[index]?.disabled) return index;\n  }\n  return -1;\n}\n\n/**\n * The popup and option-row styles.\n *\n * The panel animates through opacity and transform while staying in the layout\n * as `visibility: hidden`, rather than being added and removed: a popup that\n * unmounts cannot animate out, and one that only sets `display: none` cannot\n * animate at all.\n */\nexport const listboxStyles = css`\n  /* Placed from the field by FloatingController, which also sets its width. */\n  .popup {\n    display: flex;\n    flex-direction: column;\n    gap: var(--gap-element);\n    box-sizing: border-box;\n    max-height: 300px;\n    margin: 0;\n    padding: var(--padding-expand);\n    overflow: auto;\n    list-style: none;\n    background: var(--color-dark-20);\n    border-radius: var(--radius-input);\n    scrollbar-width: thin;\n\n    visibility: hidden;\n    opacity: 0;\n    transform: translateY(-6px) scaleY(0.98);\n    transform-origin: top left;\n    pointer-events: none;\n    transition:\n      opacity var(--duration-fast) var(--easing-standard),\n      transform var(--duration-fast) var(--easing-standard);\n  }\n\n  .popup.open {\n    visibility: visible;\n    opacity: 1;\n    transform: translateY(0) scaleY(1);\n    pointer-events: auto;\n  }\n\n  /* Opened above the field, for want of room below: it grows upwards. */\n  .popup.top {\n    transform-origin: bottom left;\n  }\n  .popup.top:not(.open) {\n    transform: translateY(6px) scaleY(0.98);\n  }\n\n  .option {\n    padding: var(--padding-expand-item);\n    color: var(--text-muted);\n    font: var(--font-input);\n    border-radius: var(--radius-input);\n    cursor: pointer;\n  }\n\n  .option:hover,\n  .option.active {\n    background: var(--color-dark-22);\n  }\n\n  .option.selected {\n    color: var(--text-body);\n    font-weight: 600;\n    background: var(--color-dark-23);\n  }\n\n  .option.disabled {\n    opacity: 0.5;\n    pointer-events: none;\n  }\n\n  .empty {\n    padding: var(--padding-expand-item);\n    color: var(--text-muted);\n    font: var(--font-normal-small);\n    pointer-events: none;\n  }\n`;\n"],"names":["optionLabel","option","filterOptions","options","query","needle","nextEnabledIndex","from","direction","step","index","firstEnabledIndex","lastEnabledIndex","listboxStyles","css"],"mappings":";AAkBO,SAASA,EAAYC,GAA0B;AACpD,SAAOA,EAAO,SAAS,OAAOA,EAAO,EAAE;AACzC;AAGO,SAASC,EAAcC,GAA8BC,GAAoC;AAC9F,QAAMC,IAASD,EAAM,KAAA,EAAO,YAAA;AAC5B,SAAKC,IACEF,EAAQ,OAAO,CAACF,MAAWD,EAAYC,CAAM,EAAE,YAAA,EAAc,SAASI,CAAM,CAAC,IADhEF;AAEtB;AAOO,SAASG,EACdH,GACAI,GACAC,GACQ;AACR,MAAIL,EAAQ,WAAW,EAAG,QAAO;AAEjC,WAASM,IAAO,GAAGA,KAAQN,EAAQ,QAAQM,KAAQ,GAAG;AACpD,UAAMC,KAASH,IAAOC,IAAYC,IAAON,EAAQ,SAASM,KAAQN,EAAQ;AAC1E,QAAI,CAACA,EAAQO,CAAK,GAAG,SAAU,QAAOA;AAAA,EACxC;AACA,SAAO;AACT;AAGO,SAASC,EAAkBR,GAAsC;AACtE,SAAOA,EAAQ,UAAU,CAACF,MAAW,CAACA,EAAO,QAAQ;AACvD;AAGO,SAASW,EAAiBT,GAAsC;AACrE,WAASO,IAAQP,EAAQ,SAAS,GAAGO,KAAS,GAAGA,KAAS;AACxD,QAAI,CAACP,EAAQO,CAAK,GAAG,SAAU,QAAOA;AAExC,SAAO;AACT;AAUO,MAAMG,IAAgBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"listbox-LsUEyGhQ.js","sources":["../../src/internal/listbox.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * Shared pieces of the two option-list controls, `<kt-select>` and\n * `<kt-input-menu>`.\n *\n * They differ in how an option is chosen — pick from a list, or filter by\n * typing — but the popup, the option rows and the keyboard model are the same,\n * and having them drift apart is how a design system stops looking like one.\n */\n\nexport interface KtOption {\n  readonly id: string | number;\n  readonly label?: string;\n  readonly disabled?: boolean;\n}\n\n/** The text to display for an option: its label, or its id as a fallback. */\nexport function optionLabel(option: KtOption): string {\n  return option.label ?? String(option.id);\n}\n\n/** Case-insensitive substring match on the visible label. */\nexport function filterOptions(options: readonly KtOption[], query: string): readonly KtOption[] {\n  const needle = query.trim().toLowerCase();\n  if (!needle) return options;\n  return options.filter((option) => optionLabel(option).toLowerCase().includes(needle));\n}\n\n/**\n * The next selectable index in `direction`, skipping disabled options and\n * wrapping at both ends. Returns -1 when every option is disabled, so a caller\n * never lands the active descendant on something that cannot be chosen.\n */\nexport function nextEnabledIndex(\n  options: readonly KtOption[],\n  from: number,\n  direction: 1 | -1,\n): number {\n  if (options.length === 0) return -1;\n\n  for (let step = 1; step <= options.length; step += 1) {\n    const index = (from + direction * step + options.length * step) % options.length;\n    if (!options[index]?.disabled) return index;\n  }\n  return -1;\n}\n\n/** The first selectable index, for opening a list with nothing selected. */\nexport function firstEnabledIndex(options: readonly KtOption[]): number {\n  return options.findIndex((option) => !option.disabled);\n}\n\n/** The last selectable index, for End. */\nexport function lastEnabledIndex(options: readonly KtOption[]): number {\n  for (let index = options.length - 1; index >= 0; index -= 1) {\n    if (!options[index]?.disabled) return index;\n  }\n  return -1;\n}\n\n/**\n * The popup and option-row styles.\n *\n * The panel animates through opacity and transform while staying in the layout\n * as `visibility: hidden`, rather than being added and removed: a popup that\n * unmounts cannot animate out, and one that only sets `display: none` cannot\n * animate at all.\n */\nexport const listboxStyles = css`\n  /* Placed from the field by FloatingController, which also sets its width. */\n  .popup {\n    display: flex;\n    flex-direction: column;\n    gap: var(--gap-element);\n    box-sizing: border-box;\n    max-height: 300px;\n    margin: 0;\n    padding: var(--padding-expand);\n    overflow: auto;\n    list-style: none;\n    background: var(--surface-popover);\n    border-radius: var(--radius-input);\n    scrollbar-width: thin;\n\n    visibility: hidden;\n    opacity: 0;\n    transform: translateY(-6px) scaleY(0.98);\n    transform-origin: top left;\n    pointer-events: none;\n    transition:\n      opacity var(--duration-fast) var(--easing-standard),\n      transform var(--duration-fast) var(--easing-standard);\n  }\n\n  .popup.open {\n    visibility: visible;\n    opacity: 1;\n    transform: translateY(0) scaleY(1);\n    pointer-events: auto;\n  }\n\n  /* Opened above the field, for want of room below: it grows upwards. */\n  .popup.top {\n    transform-origin: bottom left;\n  }\n  .popup.top:not(.open) {\n    transform: translateY(6px) scaleY(0.98);\n  }\n\n  .option {\n    padding: var(--padding-expand-item);\n    color: var(--text-muted);\n    font: var(--font-input);\n    border-radius: var(--radius-input);\n    cursor: pointer;\n  }\n\n  .option:hover,\n  .option.active {\n    background: var(--color-dark-22);\n  }\n\n  .option.selected {\n    color: var(--text-body);\n    font-weight: 600;\n    background: var(--color-dark-23);\n  }\n\n  .option.disabled {\n    opacity: 0.5;\n    pointer-events: none;\n  }\n\n  .empty {\n    padding: var(--padding-expand-item);\n    color: var(--text-muted);\n    font: var(--font-normal-small);\n    pointer-events: none;\n  }\n`;\n"],"names":["optionLabel","option","filterOptions","options","query","needle","nextEnabledIndex","from","direction","step","index","firstEnabledIndex","lastEnabledIndex","listboxStyles","css"],"mappings":";AAkBO,SAASA,EAAYC,GAA0B;AACpD,SAAOA,EAAO,SAAS,OAAOA,EAAO,EAAE;AACzC;AAGO,SAASC,EAAcC,GAA8BC,GAAoC;AAC9F,QAAMC,IAASD,EAAM,KAAA,EAAO,YAAA;AAC5B,SAAKC,IACEF,EAAQ,OAAO,CAACF,MAAWD,EAAYC,CAAM,EAAE,YAAA,EAAc,SAASI,CAAM,CAAC,IADhEF;AAEtB;AAOO,SAASG,EACdH,GACAI,GACAC,GACQ;AACR,MAAIL,EAAQ,WAAW,EAAG,QAAO;AAEjC,WAASM,IAAO,GAAGA,KAAQN,EAAQ,QAAQM,KAAQ,GAAG;AACpD,UAAMC,KAASH,IAAOC,IAAYC,IAAON,EAAQ,SAASM,KAAQN,EAAQ;AAC1E,QAAI,CAACA,EAAQO,CAAK,GAAG,SAAU,QAAOA;AAAA,EACxC;AACA,SAAO;AACT;AAGO,SAASC,EAAkBR,GAAsC;AACtE,SAAOA,EAAQ,UAAU,CAACF,MAAW,CAACA,EAAO,QAAQ;AACvD;AAGO,SAASW,EAAiBT,GAAsC;AACrE,WAASO,IAAQP,EAAQ,SAAS,GAAGO,KAAS,GAAGA,KAAS;AACxD,QAAI,CAACP,EAAQO,CAAK,GAAG,SAAU,QAAOA;AAExC,SAAO;AACT;AAUO,MAAMG,IAAgBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/chunks/segmented-field-BBXR4XFL.js

@@ -0,0 +1,384 @@
+import { css as b, nothing as h, html as p } from "lit";
+import { state as d, property as u } from "lit/decorators.js";
+import { classMap as y } from "lit/directives/class-map.js";
+import { K as v } from "./kt-element-T0VbIBNp.js";
+import { u as g, e as k } from "./events-r51msXNf.js";
+import { a as w, s as $, b as S } from "./form-control-B74_EHtG.js";
+import { r as K } from "./locale-C5xLkGx5.js";
+function E(a, t, e) {
+  let r = a.length >= e.length ? t : a + t;
+  Number(r) > e.max && (r = t);
+  const i = r.length >= e.length || Number(r) * 10 > e.max;
+  return { text: r, advance: i };
+}
+function A(a, t, e) {
+  const r = Math.abs(t) || 1, i = e.min, s = e.min + Math.floor((e.max - e.min) / r) * r;
+  if (a === null) return t > 0 ? i : s;
+  const o = a - e.min;
+  if (t > 0) {
+    const m = e.min + (Math.floor(o / r) + 1) * r;
+    return m > e.max ? i : m;
+  }
+  const l = o % r === 0 ? a - r : e.min + Math.floor(o / r) * r;
+  return l < e.min ? s : l;
+}
+function f(a, t) {
+  return String(a).padStart(t.length, "0");
+}
+var B = Object.defineProperty, n = (a, t, e, r) => {
+  for (var i = void 0, s = a.length - 1, o; s >= 0; s--)
+    (o = a[s]) && (i = o(t, e, i) || i);
+  return i && B(t, e, i), i;
+};
+const x = (a) => "key" in a, D = /* @__PURE__ */ new Set(["/", ".", "-", ":", ",", " "]);
+class c extends v {
+  constructor() {
+    super(...arguments), this.internals = null, this.defaultValue = null, this.committing = !1, this.errorId = g("kt-segmented-error"), this.texts = {}, this.typedError = "", this.focusedKey = null, this.formDisabled = !1, this.value = null, this.name = "", this.label = "", this.locale = "", this.min = "", this.max = "", this.size = "medium", this.disabled = !1, this.required = !1, this.error = "";
+  }
+  static {
+    this.formAssociated = !0;
+  }
+  static {
+    this.styles = [
+      v.styles,
+      b`
+      :host {
+        display: block;
+        --field-height: var(--button-height);
+      }
+      :host([size='small']) {
+        --field-height: var(--button-height-small);
+      }
+      :host([size='large']) {
+        --field-height: var(--button-height-large);
+      }
+
+      /* The field as kt-input draws one: a fill with a resting hairline, an
+         outline on hover and focus that never reflows it. */
+      .field {
+        display: flex;
+        align-items: center;
+        gap: var(--gap-element);
+        height: var(--field-height);
+        /* Less the segment's own padding, so the digits line up with a
+           kt-input's text. */
+        padding: 0 10px 0 calc(var(--button-padding-x) - 2px);
+        color: var(--text-body);
+        font: var(--font-input);
+        background-color: var(--surface-field);
+        border: var(--border-width) solid var(--border-field);
+        border-radius: var(--radius-input);
+        outline: var(--outline-width) solid transparent;
+        cursor: text;
+        transition: outline-color var(--duration-instant);
+      }
+      .field:hover {
+        outline: var(--outline-width) solid var(--color-text-700);
+      }
+      .field:focus-within,
+      .field.open {
+        outline: var(--outline-width) solid var(--color-primary-base);
+      }
+      .field.error,
+      .field.error:hover,
+      .field.error:focus-within {
+        outline: var(--outline-width) solid var(--color-danger-base);
+      }
+      .field.disabled {
+        color: var(--text-disabled);
+        background-color: var(--color-dark-14);
+        cursor: not-allowed;
+      }
+
+      .segments {
+        display: flex;
+        flex: 1;
+        align-items: center;
+        min-width: 0;
+        font-variant-numeric: tabular-nums;
+      }
+
+      /* A segment takes a tint while it has focus, so it is plain which part
+         a digit will go into; the caret itself would only flicker. */
+      .segment {
+        padding: 1px 2px;
+        border-radius: calc(4px * var(--radius-scale, 1));
+        outline: none;
+        caret-color: transparent;
+        white-space: nowrap;
+      }
+      .segment.empty {
+        color: var(--text-muted);
+      }
+      .segment:focus {
+        color: var(--color-primary-text);
+        background: var(--color-primary-soft);
+      }
+      .error .segment:not(.empty) {
+        color: var(--color-danger-text);
+      }
+      .literal {
+        padding: 0 1px;
+        color: var(--text-muted);
+      }
+
+      .error-icon {
+        flex: none;
+        color: var(--color-danger-text);
+      }
+    `
+    ];
+  }
+  /** Anything after the segments: a calendar button. */
+  renderAfter() {
+    return h;
+  }
+  /**
+   * What a segment left half-typed becomes when the focus leaves it — a
+   * two-digit year written out — or null to leave it as typed.
+   */
+  completeOnBlur(t, e) {
+    return null;
+  }
+  /** Whether a popup belonging to the field is open, for the field's outline. */
+  get expanded() {
+    return !1;
+  }
+  // --- Lifecycle ---
+  connectedCallback() {
+    super.connectedCallback(), this.internals ??= w(this), this.defaultValue = this.value, this.texts = this.fill(this.value);
+  }
+  willUpdate(t) {
+    if ((t.has("value") || t.has("locale")) && !this.committing && (this.texts = this.fill(this.value), this.typedError = ""), this.committing = !1, t.has("value") || t.has("required") || t.has("error") || t.has("typedError") || this.stringsChanged(t)) {
+      $(this.internals, this.value);
+      const e = this.required && this.value === null && !this.typedError;
+      S(
+        this.internals,
+        {
+          valueMissing: e,
+          badInput: !!this.typedError,
+          customError: !!this.error
+        },
+        this.error || this.typedError || (e ? this.requiredMessage() : "")
+      );
+    }
+  }
+  formResetCallback() {
+    this.value = this.defaultValue, this.texts = this.fill(this.value), this.typedError = "";
+  }
+  /**
+   * Called by the platform when the control's disabled state changes — its
+   * own `disabled`, or an ancestor `<fieldset disabled>` it cannot see.
+   */
+  formDisabledCallback(t) {
+    this.formDisabled = t;
+  }
+  /** Called by the platform when the browser restores a session. */
+  formStateRestoreCallback(t) {
+    this.value = t;
+  }
+  /** Focuses the first segment. */
+  focus(t) {
+    this.segmentElements()[0]?.focus(t);
+  }
+  get inactive() {
+    return this.disabled || this.formDisabled;
+  }
+  get resolvedLocale() {
+    return K(this.locale);
+  }
+  // --- Values ---
+  /** Sets a value chosen outside the segments — a day picked in a calendar. */
+  commitValue(t) {
+    this.texts = this.fill(t), this.typedError = "", this.apply(t);
+  }
+  setText(t, e) {
+    this.texts = { ...this.texts, [t]: e };
+    const { value: r, error: i } = this.read(this.texts);
+    this.typedError = i, this.apply(r);
+  }
+  apply(t) {
+    t !== this.value && (this.committing = !0, this.value = t, k(this, "kt-change", { value: t }));
+  }
+  // --- Keyboard ---
+  segmentElements() {
+    return [...this.shadowRoot?.querySelectorAll('[role="spinbutton"]') ?? []];
+  }
+  focusSegment(t) {
+    this.segmentElements()[t]?.focus();
+  }
+  /** One key's effect on a segment; true when the key was the field's to handle. */
+  applyKey(t, e, r) {
+    const i = this.texts[e.key] ?? "";
+    if (/^\d$/.test(t) && e.spec) {
+      const s = E(i, t, e.spec);
+      return this.setText(e.key, s.text), s.advance && this.focusSegment(r + 1), !0;
+    }
+    if (e.choices && /^\p{L}$/u.test(t)) {
+      const s = e.choices.findIndex(
+        (o) => o.toLowerCase().startsWith(t.toLowerCase())
+      );
+      return s >= 0 && (this.setText(e.key, String(s)), this.focusSegment(r + 1)), !0;
+    }
+    switch (t) {
+      case "ArrowUp":
+      case "ArrowDown": {
+        const s = t === "ArrowUp" ? 1 : -1;
+        if (e.spec) {
+          const o = i === "" ? null : Number(i), l = A(o, s * (e.step ?? 1), e.spec);
+          this.setText(e.key, f(l, e.spec));
+        } else if (e.choices) {
+          const o = e.choices.length, l = i === "" ? s > 0 ? -1 : 0 : Number(i);
+          this.setText(e.key, String((l + s + o) % o));
+        }
+        return !0;
+      }
+      case "Home":
+      case "End":
+        if (e.spec) {
+          const s = t === "Home" ? e.spec.min : e.spec.max;
+          this.setText(e.key, f(s, e.spec));
+        }
+        return !0;
+      case "ArrowLeft":
+        return this.focusSegment(r - 1), !0;
+      case "ArrowRight":
+        return this.focusSegment(r + 1), !0;
+      case "Backspace":
+      case "Delete":
+        return i ? this.setText(e.key, e.choices ? "" : i.slice(0, -1)) : t === "Backspace" && this.focusSegment(r - 1), !0;
+      default:
+        return D.has(t) ? (i && this.focusSegment(r + 1), !0) : t.length === 1;
+    }
+  }
+  onKeyDown(t, e, r) {
+    this.inactive || t.metaKey || t.ctrlKey || t.altKey || this.applyKey(t.key, e, r) && t.preventDefault();
+  }
+  /**
+   * What a phone's keyboard sends: input events rather than key presses.
+   * The text is never left to the browser; each character goes through the
+   * same path as a key.
+   */
+  onBeforeInput(t, e, r) {
+    if (t.preventDefault(), !this.inactive) {
+      if (t.inputType.startsWith("delete")) {
+        this.applyKey("Backspace", e, r);
+        return;
+      }
+      for (const i of t.data ?? "") this.applyKey(i, e, r);
+    }
+  }
+  /** A click on the field's padding or separators lands in its first empty segment. */
+  onFieldClick(t) {
+    if (this.inactive || t.target.closest('[role="spinbutton"], button, kt-tooltip')) return;
+    const e = this.items().filter(x), r = e.findIndex((i) => !this.texts[i.key]);
+    this.focusSegment(r >= 0 ? r : e.length - 1);
+  }
+  // --- Rendering ---
+  renderSegment(t, e) {
+    const r = this.texts[t.key] ?? "", i = this.focusedKey === t.key;
+    let s = t.placeholder, o = h;
+    return r !== "" && (o = Number(r), t.choices ? s = t.choices[Number(r)] ?? "" : t.spec && (s = i ? r : f(Number(r), t.spec))), p`<span
+      part="segment"
+      role="spinbutton"
+      class=${y({ segment: !0, empty: r === "" })}
+      data-key=${t.key}
+      tabindex=${this.inactive ? -1 : 0}
+      contenteditable=${this.inactive ? "false" : "true"}
+      inputmode=${t.spec ? "numeric" : "text"}
+      spellcheck="false"
+      autocorrect="off"
+      enterkeyhint="next"
+      aria-label=${t.label}
+      aria-valuemin=${t.spec ? t.spec.min : h}
+      aria-valuemax=${t.spec ? t.spec.max : h}
+      aria-valuenow=${o}
+      aria-valuetext=${r === "" ? t.placeholder : s}
+      aria-disabled=${this.inactive ? "true" : h}
+      @keydown=${(l) => this.onKeyDown(l, t, e)}
+      @beforeinput=${(l) => this.onBeforeInput(l, t, e)}
+      @focus=${() => {
+      this.focusedKey = t.key;
+    }}
+      @blur=${() => {
+      this.focusedKey = null;
+      const l = this.completeOnBlur(t, this.texts[t.key] ?? "");
+      l !== null && l !== this.texts[t.key] && this.setText(t.key, l);
+    }}
+      >${s}</span
+    >`;
+  }
+  render() {
+    const t = this.error || this.typedError;
+    let e = -1;
+    return p`${t ? p`<span id=${this.errorId} class="visually-hidden">${t}</span>` : h}
+      <div
+        part="field"
+        class=${y({
+      field: !0,
+      error: !!t,
+      disabled: this.inactive,
+      open: this.expanded
+    })}
+        role="group"
+        aria-label=${this.label || h}
+        aria-invalid=${t ? "true" : h}
+        aria-describedby=${t ? this.errorId : h}
+        @click=${this.onFieldClick}
+      >
+        <div class="segments">
+          ${this.items().map((r) => x(r) ? (e += 1, this.renderSegment(r, e)) : p`<span class="literal" aria-hidden="true">${r.literal}</span>`)}
+        </div>
+        ${t ? p`<kt-tooltip class="error-icon" text=${t} ?open=${this.focusedKey !== null}>
+                <kt-icon name="circle-alert" size="18"></kt-icon>
+              </kt-tooltip>` : h}
+        ${this.renderAfter()}
+      </div>`;
+  }
+}
+n([
+  d()
+], c.prototype, "texts");
+n([
+  d()
+], c.prototype, "typedError");
+n([
+  d()
+], c.prototype, "focusedKey");
+n([
+  d()
+], c.prototype, "formDisabled");
+n([
+  u({ type: String, reflect: !0 })
+], c.prototype, "value");
+n([
+  u({ type: String })
+], c.prototype, "name");
+n([
+  u({ type: String })
+], c.prototype, "label");
+n([
+  u({ type: String })
+], c.prototype, "locale");
+n([
+  u({ type: String })
+], c.prototype, "min");
+n([
+  u({ type: String })
+], c.prototype, "max");
+n([
+  u({ type: String, reflect: !0 })
+], c.prototype, "size");
+n([
+  u({ type: Boolean, reflect: !0 })
+], c.prototype, "disabled");
+n([
+  u({ type: Boolean, reflect: !0 })
+], c.prototype, "required");
+n([
+  u({ type: String, reflect: !0 })
+], c.prototype, "error");
+export {
+  c as K
+};
+//# sourceMappingURL=segmented-field-BBXR4XFL.js.map