@operato/event-view 10.10.2 → 10.15.0

package/dist/src/calendar-monthly.js.map

@@ -1 +1 @@
-{"version":3,"file":"calendar-monthly.js","sourceRoot":"","sources":["../../src/calendar-monthly.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/text-button.js'\n\nimport dayjs, { Dayjs } from 'dayjs/esm/index.js'\nimport { html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { CalendarMonthlyStyles } from './calendar-monthly-styles.js'\nimport { BizEvent, CALENDAR, WEEKDAYS, EventProvider, isToday } from './types.js'\n\n@customElement('calendar-monthly')\nexport class CalendarMonthly extends LitElement {\n  static styles = [CalendarMonthlyStyles]\n\n  @property({ type: Object }) eventProvider?: EventProvider\n\n  @state() year: number = dayjs().year()\n  @state() month: number = dayjs().month()\n  @state() calendar?: CALENDAR\n  @state() eventMap?: Map<Date, BizEvent[]>\n  @state() selections?: [Date, Date] | []\n\n  @state() pointerDownDate?: Date | null\n\n  render() {\n    return html`\n      <div head>\n        <div this-month><b>${dayjs(new Date(this.year, this.month)).format('MMMM')}</b> ${this.year}</div>\n\n        <div nav>\n          <md-text-button\n            @click=${() => {\n              this.moveTo(dayjs(new Date(this.year, this.month, 1)).subtract(1, 'month'))\n            }}\n            ><</md-text-button\n          >\n          <md-text-button\n            @click=${() => {\n              this.moveTo(dayjs(new Date(dayjs().year(), dayjs().month(), 1)))\n            }}\n            >Today</md-text-button\n          >\n          <md-text-button\n            @click=${() => {\n              this.moveTo(dayjs(new Date(this.year, this.month, 1)).add(1, 'month'))\n            }}\n            >></md-text-button\n          >\n        </div>\n\n        <slot></slot>\n      </div>\n\n      <ol\n        @pointerdown=${this.handlePointerDown}\n        @pointermove=${this.handlePointerMove}\n        @pointerup=${this.handlePointerUp}\n      >\n        ${WEEKDAYS.map(date => html` <li day-of-week>${date}</li> `)}\n        ${this.calendar?.map(date => {\n          const [from, to] = this.selections || ([] as any)\n          const { date: thisDate } = date\n          const selected = from && to && thisDate >= from && thisDate <= to\n\n          return html`\n            <li ?today=${date.today} ?current-month=${date.thisMonth} ?selected=${selected} .date=${thisDate} date>\n              <span date-label>${date.label}</span>\n              <div>\n                ${(this.eventMap?.get(date?.date) || []).map(({ title, color, template }) =>\n                  template ? template : html`<span event .style=\"border-color: ${color};\">${title}</span>`\n                )}\n              </div>\n            </li>\n          `\n        })}\n      </ol>\n    `\n  }\n\n  async updated(changes: PropertyValues<this>) {\n    if (changes.has('year') || changes.has('month') || changes.has('eventProvider')) {\n      const currentMonth = this.createDaysForCurrentMonth(this.year, this.month)\n\n      const calendar = [\n        ...this.createDaysForPreviousMonth(this.year, this.month, currentMonth),\n        ...currentMonth,\n        ...this.createDaysForNextMonth(this.year, this.month, currentMonth)\n      ]\n\n      this.eventMap = await this.eventProvider?.fetchEventsForCalendar(calendar)\n      this.calendar = calendar\n    }\n  }\n\n  handlePointerDown(event: PointerEvent) {\n    const target = event.target as HTMLElement\n\n    if (!target.hasAttribute('date') && !target.hasAttribute('date-label')) {\n      return\n    }\n\n    const dateElement = target.closest('[date]') as HTMLElement\n    const from = (dateElement as any).date\n\n    this.pointerDownDate = from\n\n    // 캡처를 설정하지 않음(Touch 디바이스에서 중요)\n    target.releasePointerCapture(event.pointerId)\n\n    event.preventDefault()\n  }\n\n  handlePointerMove(event: PointerEvent) {\n    const from = this.pointerDownDate\n\n    if (!from) {\n      return\n    }\n\n    const target = event.target as HTMLElement\n    const dateElement = target.closest('[date]') as HTMLElement\n\n    if (!dateElement) {\n      return\n    }\n\n    const date = (dateElement as any).date\n    this.selections = from > date ? [date, from] : [from, date]\n\n    // 캡처를 설정하지 않음(Touch 디바이스에서 중요)\n    target.releasePointerCapture(event.pointerId)\n\n    event.preventDefault()\n  }\n\n  handlePointerUp(event: PointerEvent) {\n    const from = this.pointerDownDate\n\n    this.pointerDownDate = null\n\n    if (!from) {\n      return\n    }\n\n    const target = event.target as HTMLElement\n    const dateElement = target.closest('[date]') as HTMLElement\n\n    if (!dateElement) {\n      return\n    }\n\n    const date = (dateElement as any).date\n    this.selections = from > date ? [date, from] : [from, date]\n\n    this.dispatchEvent(\n      new CustomEvent('select-date', {\n        detail: this.selections,\n        bubbles: true,\n        composed: true\n      })\n    )\n\n    event.preventDefault()\n  }\n\n  moveTo(month: Dayjs) {\n    this.year = month.year()\n    this.month = month.month()\n\n    this.dispatchEvent(\n      new CustomEvent('change-month', {\n        detail: { year: this.year, month: this.month + 1 }, // 0~11월이라 +1 해서 이벤트 전파\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  createDaysForCurrentMonth(year: number, month: number): CALENDAR {\n    return [...Array(dayjs(new Date(year, month, 1)).daysInMonth())].map((day, index) => {\n      const date = new Date(year, month, index + 1)\n      const label = index == 0 ? dayjs(date).format('MMM D') : dayjs(date).format('D')\n      return {\n        date,\n        label,\n        thisMonth: true,\n        today: isToday(date)\n      }\n    })\n  }\n\n  createDaysForPreviousMonth(year: number, month: number, currentMonth: CALENDAR): CALENDAR {\n    const previousMonth = dayjs(new Date(year, month, 1)).subtract(1, 'month')\n\n    const visibleNumberOfDaysFromPreviousMonth = (dayjs(currentMonth[0].date) as any).weekday()\n\n    const previousMonthLastMondayDayOfMonth = dayjs(currentMonth[0].date)\n      .subtract(visibleNumberOfDaysFromPreviousMonth, 'day')\n      .date()\n\n    return [...Array(visibleNumberOfDaysFromPreviousMonth)].map((day, index) => {\n      const date = new Date(previousMonth.year(), previousMonth.month(), previousMonthLastMondayDayOfMonth + index)\n      const label = index == 0 ? dayjs(date).format('MMM D') : dayjs(date).format('D')\n      return {\n        date,\n        label,\n        thisMonth: false,\n        today: isToday(date)\n      }\n    })\n  }\n\n  createDaysForNextMonth(year: number, month: number, currentMonth: CALENDAR): CALENDAR {\n    const nextMonth = dayjs(new Date(year, month, 1)).add(1, 'month')\n\n    const visibleNumberOfDaysFromNextMonth = 6 - (dayjs(new Date(year, month, currentMonth.length)) as any).weekday()\n\n    return [...Array(visibleNumberOfDaysFromNextMonth)].map((day, index) => {\n      const date = new Date(nextMonth.year(), nextMonth.month(), index + 1)\n      const label = index == 0 ? dayjs(date).format('MMM D') : dayjs(date).format('D')\n      return {\n        date,\n        label,\n        thisMonth: false,\n        today: isToday(date)\n      }\n    })\n  }\n}\n"]}
+{"version":3,"file":"calendar-monthly.js","sourceRoot":"","sources":["../../src/calendar-monthly.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/text-button.js'\nimport '@material/web/iconbutton/icon-button.js'\nimport '@material/web/icon/icon.js'\n\nimport dayjs, { Dayjs } from 'dayjs/esm/index.js'\nimport { html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { TooltipReactiveController } from '@operato/utils'\n\nimport { CalendarMonthlyStyles } from './calendar-monthly-styles.js'\nimport { reportDayOverflow } from './day-overflow.js'\nimport {\n  BizEvent,\n  CALENDAR,\n  DayState,\n  EventProvider,\n  isToday,\n  dayLabel,\n  monthTitle,\n  nextMonthLabel,\n  previousMonthLabel,\n  todayLabel,\n  weekdayNames\n} from './types.js'\n\n@customElement('calendar-monthly')\nexport class CalendarMonthly extends LitElement {\n  static styles = [CalendarMonthlyStyles]\n\n  @property({ type: Object }) eventProvider?: EventProvider\n\n  @state() year: number = dayjs().year()\n  @state() month: number = dayjs().month()\n  @state() calendar?: CALENDAR\n  @state() eventMap?: Map<Date, BizEvent[]>\n  /** What is true of the days themselves, if the host answers for them. See {@link DayState}. */\n  @state() dayStateMap?: Map<Date, DayState>\n  @state() selections?: [Date, Date] | []\n\n  @state() pointerDownDate?: Date | null\n\n  /** Last reported overflow, so the host is not told the same thing after every render. */\n  private lastOverflow = ''\n\n  /*\n   * Event titles are drawn on one nowrap line and cut with an ellipsis, so the full name only\n   * exists in a tooltip. Hosts were reaching for the browser's own `title`, which waits about a\n   * second and cannot be styled — measured on the plant calendar.\n   *\n   * data-grist already runs this controller on its header and its cells. It waits 450ms so a\n   * pointer crossing the grid does not trail tooltips behind it, then drops the wait once one\n   * is up, and it only fires on elements that actually overflow — which is exactly the set of\n   * titles worth expanding.\n   *\n   * Hosts mark the rows they want expanded with data-reactive-tooltip. The listener sits on\n   * this shadow root, where the host's own event templates are rendered.\n   */\n  private tooltip = new TooltipReactiveController(this, {\n    /*\n     * Read the attribute's value, not the row's text.\n     *\n     * The controller treats the attribute as a marker and otherwise repeats what is already on\n     * screen, which for a cut title is at least the whole title. But a host writes the line it\n     * wants read - the plant calendar puts the kind, the order and where it runs in there - and\n     * without this that sentence was thrown away. [확인함] 2026-09-11\n     */\n    content: element => element.getAttribute('data-reactive-tooltip') || element.textContent?.trim() || ''\n  })\n\n  render() {\n    return html`\n      <div head>\n        <div this-month>${monthTitle(this.year, this.month)}</div>\n\n        <div nav>\n          <!--\n            Chevrons, not the \"<\" and \">\" characters that were here. Those are text: they take\n            the text colour and weight, sit on the text baseline, and a screen reader says\n            \"less than\". An icon button is also a target, which the bare glyph was not.\n          -->\n          <md-icon-button\n            aria-label=${previousMonthLabel()}\n            title=${previousMonthLabel()}\n            @click=${() => {\n              this.moveTo(dayjs(new Date(this.year, this.month, 1)).subtract(1, 'month'))\n            }}\n          >\n            <md-icon>chevron_left</md-icon>\n          </md-icon-button>\n          <md-text-button\n            @click=${() => {\n              this.moveTo(dayjs(new Date(dayjs().year(), dayjs().month(), 1)))\n            }}\n            >${todayLabel()}</md-text-button\n          >\n          <md-icon-button\n            aria-label=${nextMonthLabel()}\n            title=${nextMonthLabel()}\n            @click=${() => {\n              this.moveTo(dayjs(new Date(this.year, this.month, 1)).add(1, 'month'))\n            }}\n          >\n            <md-icon>chevron_right</md-icon>\n          </md-icon-button>\n        </div>\n\n        <slot></slot>\n      </div>\n\n      <ol\n        @pointerdown=${this.handlePointerDown}\n        @pointermove=${this.handlePointerMove}\n        @pointerup=${this.handlePointerUp}\n      >\n        ${weekdayNames().map(name => html` <li day-of-week>${name}</li> `)}\n        ${this.calendar?.map(date => {\n          const [from, to] = this.selections || ([] as any)\n          const { date: thisDate } = date\n          const selected = from && to && thisDate >= from && thisDate <= to\n          const dayState = this.dayStateMap?.get(thisDate)\n\n          return html`\n            <li\n              ?today=${date.today}\n              ?current-month=${date.thisMonth}\n              ?selected=${selected}\n              day-state=${ifDefined(dayState?.name)}\n              style=${ifDefined(dayState && `--day-state-color:${dayState.color}`)}\n              .date=${thisDate}\n              date\n            >\n              <span date-label>${dayLabel(date.date, !!date.withMonth)}</span>\n              <div>\n                ${(this.eventMap?.get(date?.date) || []).map(({ title, color, template }) =>\n                  template ? template : html`<span event .style=\"border-color: ${color};\">${title}</span>`\n                )}\n              </div>\n            </li>\n          `\n        })}\n      </ol>\n    `\n  }\n\n  async updated(changes: PropertyValues<this>) {\n    if (changes.has('year') || changes.has('month') || changes.has('eventProvider')) {\n      const currentMonth = this.createDaysForCurrentMonth(this.year, this.month)\n\n      const calendar = [\n        ...this.createDaysForPreviousMonth(this.year, this.month, currentMonth),\n        ...currentMonth,\n        ...this.createDaysForNextMonth(this.year, this.month, currentMonth)\n      ]\n\n      /*\n       * Both questions go out together. A host that keeps the day's events and the day's own\n       * state in one place answers both from one round trip, and the two always describe the\n       * same grid - asking them apart would let a month change land between them.\n       */\n      const [eventMap, dayStateMap] = await Promise.all([\n        this.eventProvider?.fetchEventsForCalendar(calendar),\n        this.eventProvider?.fetchDayStatesForCalendar?.(calendar)\n      ])\n\n      this.eventMap = eventMap\n      this.dayStateMap = dayStateMap\n      this.calendar = calendar\n    }\n\n    /*\n     * After the rows are laid out, not before. A cap only bites once the browser has placed the\n     * children, so this has to run on every render - the grid also reflows when the host swaps\n     * its templates or the window changes width.\n     */\n    this.lastOverflow = reportDayOverflow(this, this.shadowRoot, this.lastOverflow)\n  }\n\n  handlePointerDown(event: PointerEvent) {\n    const target = event.target as HTMLElement\n\n    if (!target.hasAttribute('date') && !target.hasAttribute('date-label')) {\n      return\n    }\n\n    const dateElement = target.closest('[date]') as HTMLElement\n    const from = (dateElement as any).date\n\n    this.pointerDownDate = from\n\n    // 캡처를 설정하지 않음(Touch 디바이스에서 중요)\n    target.releasePointerCapture(event.pointerId)\n\n    event.preventDefault()\n  }\n\n  handlePointerMove(event: PointerEvent) {\n    const from = this.pointerDownDate\n\n    if (!from) {\n      return\n    }\n\n    const target = event.target as HTMLElement\n    const dateElement = target.closest('[date]') as HTMLElement\n\n    if (!dateElement) {\n      return\n    }\n\n    const date = (dateElement as any).date\n    this.selections = from > date ? [date, from] : [from, date]\n\n    // 캡처를 설정하지 않음(Touch 디바이스에서 중요)\n    target.releasePointerCapture(event.pointerId)\n\n    event.preventDefault()\n  }\n\n  handlePointerUp(event: PointerEvent) {\n    const from = this.pointerDownDate\n\n    this.pointerDownDate = null\n\n    if (!from) {\n      return\n    }\n\n    const target = event.target as HTMLElement\n    const dateElement = target.closest('[date]') as HTMLElement\n\n    if (!dateElement) {\n      return\n    }\n\n    const date = (dateElement as any).date\n    this.selections = from > date ? [date, from] : [from, date]\n\n    this.dispatchEvent(\n      new CustomEvent('select-date', {\n        detail: this.selections,\n        bubbles: true,\n        composed: true\n      })\n    )\n\n    event.preventDefault()\n  }\n\n  moveTo(month: Dayjs) {\n    this.year = month.year()\n    this.month = month.month()\n\n    this.dispatchEvent(\n      new CustomEvent('change-month', {\n        detail: { year: this.year, month: this.month + 1 }, // 0~11월이라 +1 해서 이벤트 전파\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  createDaysForCurrentMonth(year: number, month: number): CALENDAR {\n    return [...Array(dayjs(new Date(year, month, 1)).daysInMonth())].map((day, index) => {\n      const date = new Date(year, month, index + 1)\n      const withMonth = index == 0\n      return {\n        date,\n        label: dayLabel(date, withMonth),\n        withMonth,\n        thisMonth: true,\n        today: isToday(date)\n      }\n    })\n  }\n\n  createDaysForPreviousMonth(year: number, month: number, currentMonth: CALENDAR): CALENDAR {\n    const previousMonth = dayjs(new Date(year, month, 1)).subtract(1, 'month')\n\n    const visibleNumberOfDaysFromPreviousMonth = (dayjs(currentMonth[0].date) as any).weekday()\n\n    const previousMonthLastMondayDayOfMonth = dayjs(currentMonth[0].date)\n      .subtract(visibleNumberOfDaysFromPreviousMonth, 'day')\n      .date()\n\n    return [...Array(visibleNumberOfDaysFromPreviousMonth)].map((day, index) => {\n      const date = new Date(previousMonth.year(), previousMonth.month(), previousMonthLastMondayDayOfMonth + index)\n      const withMonth = index == 0\n      return {\n        date,\n        label: dayLabel(date, withMonth),\n        withMonth,\n        thisMonth: false,\n        today: isToday(date)\n      }\n    })\n  }\n\n  createDaysForNextMonth(year: number, month: number, currentMonth: CALENDAR): CALENDAR {\n    const nextMonth = dayjs(new Date(year, month, 1)).add(1, 'month')\n\n    const visibleNumberOfDaysFromNextMonth = 6 - (dayjs(new Date(year, month, currentMonth.length)) as any).weekday()\n\n    return [...Array(visibleNumberOfDaysFromNextMonth)].map((day, index) => {\n      const date = new Date(nextMonth.year(), nextMonth.month(), index + 1)\n      const withMonth = index == 0\n      return {\n        date,\n        label: dayLabel(date, withMonth),\n        withMonth,\n        thisMonth: false,\n        today: isToday(date)\n      }\n    })\n  }\n}\n"]}

package/dist/src/calendar-weekly-styles.js

@@ -5,12 +5,26 @@ export const CalendarWeeklyStyles = css `
     flex-direction: column;
     color: var(--calendar-weekly-text-color, var(--md-sys-color-on-surface-variant, #585858));
 
-    --md-text-button-container-height: 24px;
+    /*
+      One row of controls, one height. The text button was pinned to 24px while the icon
+      buttons beside it are 40, so the middle of the three sat in a different band.
+    */
+    --md-text-button-container-height: 32px;
+    --md-icon-button-icon-size: 20px;
+    --md-icon-button-state-layer-height: 32px;
+    --md-icon-button-state-layer-width: 32px;
   }
 
   [head] {
     display: flex;
     align-items: center;
+    /*
+      The view switch sat flush against the next button — measured 0px between them.
+
+      The space goes on the switch, not on the row: a flex gap also opens a gap between the
+      title and the nav, and those two extra pixels each made the header 8px wider than the
+      grid under it, which put a horizontal scrollbar on the whole calendar. [확인함] 2026-09-11
+    */
   }
 
   [head-week] {
@@ -22,12 +36,41 @@ export const CalendarWeeklyStyles = css `
   [this-week] {
     /* Was the x-large keyword, which is a browser step, not a step of this theme. */
     font-size: var(--md-sys-typescale-headline-small-size, 1.5rem);
+    /*
+      The month used to be wrapped in <b>. Formatting the whole title through Intl dropped
+      that tag and left 24px at weight 400 — large, but with nothing to say it is the title.
+    */
+    font-weight: var(--md-sys-typescale-headline-small-weight, 640);
+    /*
+      The header must never be what makes the calendar scroll sideways. A flex item's floor is
+      its content, so without this the title pushes the nav out and the grid follows — the same
+      rule the day cells needed.
+    */
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   [nav] {
     margin-left: auto;
   }
 
+  /*
+    Room for what the buttons actually occupy.
+
+    An md-icon-button paints a 48px touch target around its 32px box, so the rightmost control
+    reaches 8px past its own edge. With that control flush to the header's right edge the
+    header measured 8px wider than the grid under it, and the whole calendar grew a horizontal
+    scrollbar. [확인함] 2026-09-11 — button right 898, its inner target 906, header client 860.
+
+    The inset makes room instead of shrinking the target: a smaller target is a worse button,
+    and the last control here is slotted by the host, whose size this component cannot know.
+  */
+  [head] {
+    padding-right: var(--calendar-head-inset, 8px);
+  }
+
   /*
    * Same token the monthly view uses for its slotted switch.
    *
@@ -56,6 +99,9 @@ export const CalendarWeeklyStyles = css `
     padding: 0;
     margin: var(--calendar-weekly-ol-margin, 9px 0);
     border-top: var(--calendar-weekly-ol-top-border, 3px solid var(--md-sys-color-outline, #999));
+    /* Same as the month view — the grid is one box and closes its own corners. */
+    border-radius: var(--calendar-weekly-radius, var(--ui-r-small, 6px));
+    overflow: hidden;
   }
 
   /*
@@ -88,42 +134,119 @@ export const CalendarWeeklyStyles = css `
 
   li[day-of-week] {
     opacity: 1;
-    background-color: var(--calendar-current-week-background-color, var(--md-sys-color-surface-variant));
+    background-color: var(--calendar-current-week-background-color, var(--md-sys-color-surface));
     color: var(--calendar-current-week-color, var(--md-sys-color-on-surface));
     padding: var(--calendar-weekly-label-padding);
     text-align: center;
   }
 
-  li[current-week] {
-    background-color: var(--calendar-current-week-background-color, var(--md-sys-color-surface, #fff));
-    opacity: 1;
+  /*
+    The cells that hold the events.
+
+    They carried no surface at all. This view draws two rows of seven - the dates on top, the
+    events under them - and only the date row was painted, by the rule above. The event row was
+    transparent, so it showed whatever the host put behind the calendar, which on the plant page
+    is the same colour as the date band. [확인함] 2026-09-11 — both measured rgb(240,242,244),
+    and the outer box behind them the same again.
+
+    So the week view never got the separation the month view has: there, the days you are
+    reading are the brightest surface and the band above them is a step down. Same ladder here.
+
+    A rule for li[current-week] used to sit in this place. Nothing has ever carried that
+    attribute - the markup writes day-of-week on the date row and nothing on this one - so it
+    painted nothing, while reading the token that the date band above actually uses.
+  */
+  li[date]:not([day-of-week]) {
+    background-color: var(--calendar-weekly-date-background-color, var(--md-sys-color-surface-container-lowest));
+  }
+
+  /*
+    What the host says is true of the day itself — the same channel and ordering rule as the
+    month view, which carries the reasoning.
+
+    Both of a day's cells take it here, the date band as well as the events under it, so a
+    non-working day reads as a whole column rather than a tinted strip with an untouched body.
+  */
+  li[date][day-state] {
+    background-color: var(--day-state-color);
   }
 
-  li[selected] {
+  li[date][selected] {
     background-color: var(--calendar-weekly-selected-background-color, var(--md-sys-color-tertiary-container));
     color: var(--calendar-weekly-selected-color, var(--md-sys-color-on-tertiary-container));
   }
 
+  /*
+    Today, on the day rather than only inside it — the same token and the same reasoning as the
+    month view, which explains the gradient and the measured 10%.
+
+    No ring here, though. A day in this view is a whole column, two cells tall, and an inset ring
+    on each of them would draw a doubled rule across the middle where they meet. The column is
+    also large enough that the tint alone is found immediately — the month view needs the ring
+    because its cell is one of thirty-five.
+  */
+  li[today] {
+    background-image: linear-gradient(
+      var(--calendar-today-wash, color-mix(in srgb, var(--md-sys-color-primary, #262e38) 10%, transparent)),
+      var(--calendar-today-wash, color-mix(in srgb, var(--md-sys-color-primary, #262e38) 10%, transparent))
+    );
+  }
+
   span[date-label] {
     display: block;
     margin: var(--calendar-weekly-date-label-margin);
     text-align: var(--calendar-weekly-label-align, center);
+    /*
+      A column header, not content. It stood at the body's size and ink, so the row of dates
+      read as another row of data rather than as the heading of its column.
+    */
+    font-size: var(--md-sys-typescale-label-large-size, 0.8125rem);
+    font-weight: 500;
+    color: var(--md-sys-color-on-surface-variant);
   }
 
+  /*
+    The date, emphasised - not a filled pill.
+
+    Two rules used to sit here, one setting a weight and the next overriding it with a lozenge.
+
+    It was a solid lozenge in primary with reversed text. That made two maximum-contrast marks in
+    one cell once the cell itself took the ring, and this theme's primary is near-black, so in
+    light mode the lozenge read as an ink blot rather than an accent. It also made today's label
+    39px wide where every other day's is 114px, so the number's left edge moved on one day of the
+    month - and in the week view it wrapped the weekday too, at 61px.
+
+    Weight carries it, and only weight. Tinting it as well pointed the emphasis two ways: primary
+    is a step away from the body ink, so a bolder today number came out measurably paler than
+    every ordinary day beside it — dE00 7.2 dark, 5.7 light, against cell contrast 9.94 where its
+    neighbours had 12.97. The ring is the accent-coloured thing; the number is a number.
+
+    The colour token stays, defaulting to the ink the cell already gives, for a host whose accent
+    is far enough from its body ink for a tint to add something.
+  */
   li[today] > span[date-label] {
-    display: inline-block;
-    background-color: var(--calendar-weekly-date-label-background-color, var(--md-sys-color-error, #cc3300));
-    padding: var(--calendar-weekly-date-label-padding);
-    border-radius: var(--calendar-weekly-date-label-border-radius, 999em);
-    color: var(--calendar-weekly-date-label-color, var(--md-sys-color-on-error, #fff));
-    min-width: 16px;
-    text-align: center;
+    font-weight: 700;
+    color: var(--calendar-weekly-date-label-color, inherit);
+  }
+
+  li[date] {
+    max-height: var(--calendar-weekly-date-max-height, none);
+    /* The clip goes on the box that carries the ceiling — see the month view. */
+    overflow: hidden;
   }
 
   [date] div {
     display: block;
     /* Was the small keyword. */
     font-size: var(--md-sys-typescale-body-small-size, 0.75rem);
+    /*
+      Events ran into the cell's own borders — measured 0px on the left and 1px on the right,
+      while the date number above them sat 4px in. One cell, two left edges, and the titles
+      touching the rules on both sides.
+
+      The inset reads the date label's own margin, so the two lines stay together.
+    */
+    padding-inline: var(--calendar-weekly-date-label-margin, 4px);
   }
 
   [event] {

package/dist/src/calendar-weekly-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"calendar-weekly-styles.js","sourceRoot":"","sources":["../../src/calendar-weekly-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0ItC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const CalendarWeeklyStyles = css`\n  :host {\n    display: flex;\n    flex-direction: column;\n    color: var(--calendar-weekly-text-color, var(--md-sys-color-on-surface-variant, #585858));\n\n    --md-text-button-container-height: 24px;\n  }\n\n  [head] {\n    display: flex;\n    align-items: center;\n  }\n\n  [head-week] {\n    display: flex;\n    /* left is not a value align-items accepts — the rule did nothing. */\n    align-items: flex-start;\n  }\n\n  [this-week] {\n    /* Was the x-large keyword, which is a browser step, not a step of this theme. */\n    font-size: var(--md-sys-typescale-headline-small-size, 1.5rem);\n  }\n\n  [nav] {\n    margin-left: auto;\n  }\n\n  /*\n   * Same token the monthly view uses for its slotted switch.\n   *\n   * This used to override --md-sys-color-primary inside the component with\n   * rgba(var(--secondary-color-rgb), 0.8), which never produced a color:\n   *\n   *   host does not define --secondary-color-rgb   the token resolves to empty, so nothing\n   *                                                reading it gets a color at all\n   *   host defines it as \"12 34 56\"                rgba(12 34 56, 0.8) mixes space-separated\n   *                                                channels into the comma syntax — invalid,\n   *                                                and the property falls back to black\n   *\n   * [확인함] 2026-09-07 · both cases measured in a browser\n   */\n  ::slotted(*) {\n    color: var(--md-sys-color-secondary);\n  }\n\n  ol {\n    flex: 1;\n\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n    grid-template-rows: max-content;\n\n    padding: 0;\n    margin: var(--calendar-weekly-ol-margin, 9px 0);\n    border-top: var(--calendar-weekly-ol-top-border, 3px solid var(--md-sys-color-outline, #999));\n  }\n\n  /*\n   * The seven tracks are 1fr, and 1fr's minimum is min-content — so a cell whose chip is\n   * white-space: nowrap pushes its own track wide and squeezes the rest.\n   *\n   * Measured at 700px with one long title: li widths came out\n   *   [58, 58, 353, 58, 58, 58, 58]   without min-width: 0\n   *   [100 × 7]                       with it\n   *\n   * The host page had already asked for text-overflow: ellipsis on that chip, and it never\n   * ran: the track grew instead of the text being clipped. [확인함] 2026-09-07\n   */\n  li {\n    position: relative;\n    min-width: 0;\n\n    list-style: none;\n    border: var(--calendar-weekly-border, 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.1)));\n    border-width: var(--calendar-weekly-border-width, 0 1px 1px 0px);\n    opacity: var(--calendar-weekly-opacity);\n\n    user-select: none;\n    touch-action: none;\n  }\n\n  li:nth-child(7n + 1) {\n    border-left-width: 1px;\n  }\n\n  li[day-of-week] {\n    opacity: 1;\n    background-color: var(--calendar-current-week-background-color, var(--md-sys-color-surface-variant));\n    color: var(--calendar-current-week-color, var(--md-sys-color-on-surface));\n    padding: var(--calendar-weekly-label-padding);\n    text-align: center;\n  }\n\n  li[current-week] {\n    background-color: var(--calendar-current-week-background-color, var(--md-sys-color-surface, #fff));\n    opacity: 1;\n  }\n\n  li[selected] {\n    background-color: var(--calendar-weekly-selected-background-color, var(--md-sys-color-tertiary-container));\n    color: var(--calendar-weekly-selected-color, var(--md-sys-color-on-tertiary-container));\n  }\n\n  span[date-label] {\n    display: block;\n    margin: var(--calendar-weekly-date-label-margin);\n    text-align: var(--calendar-weekly-label-align, center);\n  }\n\n  li[today] > span[date-label] {\n    display: inline-block;\n    background-color: var(--calendar-weekly-date-label-background-color, var(--md-sys-color-error, #cc3300));\n    padding: var(--calendar-weekly-date-label-padding);\n    border-radius: var(--calendar-weekly-date-label-border-radius, 999em);\n    color: var(--calendar-weekly-date-label-color, var(--md-sys-color-on-error, #fff));\n    min-width: 16px;\n    text-align: center;\n  }\n\n  [date] div {\n    display: block;\n    /* Was the small keyword. */\n    font-size: var(--md-sys-typescale-body-small-size, 0.75rem);\n  }\n\n  [event] {\n    display: block;\n    background-color: var(--calendar-weekly-background-color);\n    border: var(--calendar-weekly-event-border);\n    border-width: var(--calendar-weekly-event-border-width);\n    margin: var(--calendar-weekly-event-margin, 0 0 4px 0);\n    padding: var(--calendar-weekly-event-padding, 2px 4px 2px 4px);\n\n    user-select: all;\n    touch-action: all;\n  }\n`\n"]}
+{"version":3,"file":"calendar-weekly-styles.js","sourceRoot":"","sources":["../../src/calendar-weekly-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqQtC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const CalendarWeeklyStyles = css`\n  :host {\n    display: flex;\n    flex-direction: column;\n    color: var(--calendar-weekly-text-color, var(--md-sys-color-on-surface-variant, #585858));\n\n    /*\n      One row of controls, one height. The text button was pinned to 24px while the icon\n      buttons beside it are 40, so the middle of the three sat in a different band.\n    */\n    --md-text-button-container-height: 32px;\n    --md-icon-button-icon-size: 20px;\n    --md-icon-button-state-layer-height: 32px;\n    --md-icon-button-state-layer-width: 32px;\n  }\n\n  [head] {\n    display: flex;\n    align-items: center;\n    /*\n      The view switch sat flush against the next button — measured 0px between them.\n\n      The space goes on the switch, not on the row: a flex gap also opens a gap between the\n      title and the nav, and those two extra pixels each made the header 8px wider than the\n      grid under it, which put a horizontal scrollbar on the whole calendar. [확인함] 2026-09-11\n    */\n  }\n\n  [head-week] {\n    display: flex;\n    /* left is not a value align-items accepts — the rule did nothing. */\n    align-items: flex-start;\n  }\n\n  [this-week] {\n    /* Was the x-large keyword, which is a browser step, not a step of this theme. */\n    font-size: var(--md-sys-typescale-headline-small-size, 1.5rem);\n    /*\n      The month used to be wrapped in <b>. Formatting the whole title through Intl dropped\n      that tag and left 24px at weight 400 — large, but with nothing to say it is the title.\n    */\n    font-weight: var(--md-sys-typescale-headline-small-weight, 640);\n    /*\n      The header must never be what makes the calendar scroll sideways. A flex item's floor is\n      its content, so without this the title pushes the nav out and the grid follows — the same\n      rule the day cells needed.\n    */\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  [nav] {\n    margin-left: auto;\n  }\n\n  /*\n    Room for what the buttons actually occupy.\n\n    An md-icon-button paints a 48px touch target around its 32px box, so the rightmost control\n    reaches 8px past its own edge. With that control flush to the header's right edge the\n    header measured 8px wider than the grid under it, and the whole calendar grew a horizontal\n    scrollbar. [확인함] 2026-09-11 — button right 898, its inner target 906, header client 860.\n\n    The inset makes room instead of shrinking the target: a smaller target is a worse button,\n    and the last control here is slotted by the host, whose size this component cannot know.\n  */\n  [head] {\n    padding-right: var(--calendar-head-inset, 8px);\n  }\n\n  /*\n   * Same token the monthly view uses for its slotted switch.\n   *\n   * This used to override --md-sys-color-primary inside the component with\n   * rgba(var(--secondary-color-rgb), 0.8), which never produced a color:\n   *\n   *   host does not define --secondary-color-rgb   the token resolves to empty, so nothing\n   *                                                reading it gets a color at all\n   *   host defines it as \"12 34 56\"                rgba(12 34 56, 0.8) mixes space-separated\n   *                                                channels into the comma syntax — invalid,\n   *                                                and the property falls back to black\n   *\n   * [확인함] 2026-09-07 · both cases measured in a browser\n   */\n  ::slotted(*) {\n    color: var(--md-sys-color-secondary);\n  }\n\n  ol {\n    flex: 1;\n\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n    grid-template-rows: max-content;\n\n    padding: 0;\n    margin: var(--calendar-weekly-ol-margin, 9px 0);\n    border-top: var(--calendar-weekly-ol-top-border, 3px solid var(--md-sys-color-outline, #999));\n    /* Same as the month view — the grid is one box and closes its own corners. */\n    border-radius: var(--calendar-weekly-radius, var(--ui-r-small, 6px));\n    overflow: hidden;\n  }\n\n  /*\n   * The seven tracks are 1fr, and 1fr's minimum is min-content — so a cell whose chip is\n   * white-space: nowrap pushes its own track wide and squeezes the rest.\n   *\n   * Measured at 700px with one long title: li widths came out\n   *   [58, 58, 353, 58, 58, 58, 58]   without min-width: 0\n   *   [100 × 7]                       with it\n   *\n   * The host page had already asked for text-overflow: ellipsis on that chip, and it never\n   * ran: the track grew instead of the text being clipped. [확인함] 2026-09-07\n   */\n  li {\n    position: relative;\n    min-width: 0;\n\n    list-style: none;\n    border: var(--calendar-weekly-border, 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.1)));\n    border-width: var(--calendar-weekly-border-width, 0 1px 1px 0px);\n    opacity: var(--calendar-weekly-opacity);\n\n    user-select: none;\n    touch-action: none;\n  }\n\n  li:nth-child(7n + 1) {\n    border-left-width: 1px;\n  }\n\n  li[day-of-week] {\n    opacity: 1;\n    background-color: var(--calendar-current-week-background-color, var(--md-sys-color-surface));\n    color: var(--calendar-current-week-color, var(--md-sys-color-on-surface));\n    padding: var(--calendar-weekly-label-padding);\n    text-align: center;\n  }\n\n  /*\n    The cells that hold the events.\n\n    They carried no surface at all. This view draws two rows of seven - the dates on top, the\n    events under them - and only the date row was painted, by the rule above. The event row was\n    transparent, so it showed whatever the host put behind the calendar, which on the plant page\n    is the same colour as the date band. [확인함] 2026-09-11 — both measured rgb(240,242,244),\n    and the outer box behind them the same again.\n\n    So the week view never got the separation the month view has: there, the days you are\n    reading are the brightest surface and the band above them is a step down. Same ladder here.\n\n    A rule for li[current-week] used to sit in this place. Nothing has ever carried that\n    attribute - the markup writes day-of-week on the date row and nothing on this one - so it\n    painted nothing, while reading the token that the date band above actually uses.\n  */\n  li[date]:not([day-of-week]) {\n    background-color: var(--calendar-weekly-date-background-color, var(--md-sys-color-surface-container-lowest));\n  }\n\n  /*\n    What the host says is true of the day itself — the same channel and ordering rule as the\n    month view, which carries the reasoning.\n\n    Both of a day's cells take it here, the date band as well as the events under it, so a\n    non-working day reads as a whole column rather than a tinted strip with an untouched body.\n  */\n  li[date][day-state] {\n    background-color: var(--day-state-color);\n  }\n\n  li[date][selected] {\n    background-color: var(--calendar-weekly-selected-background-color, var(--md-sys-color-tertiary-container));\n    color: var(--calendar-weekly-selected-color, var(--md-sys-color-on-tertiary-container));\n  }\n\n  /*\n    Today, on the day rather than only inside it — the same token and the same reasoning as the\n    month view, which explains the gradient and the measured 10%.\n\n    No ring here, though. A day in this view is a whole column, two cells tall, and an inset ring\n    on each of them would draw a doubled rule across the middle where they meet. The column is\n    also large enough that the tint alone is found immediately — the month view needs the ring\n    because its cell is one of thirty-five.\n  */\n  li[today] {\n    background-image: linear-gradient(\n      var(--calendar-today-wash, color-mix(in srgb, var(--md-sys-color-primary, #262e38) 10%, transparent)),\n      var(--calendar-today-wash, color-mix(in srgb, var(--md-sys-color-primary, #262e38) 10%, transparent))\n    );\n  }\n\n  span[date-label] {\n    display: block;\n    margin: var(--calendar-weekly-date-label-margin);\n    text-align: var(--calendar-weekly-label-align, center);\n    /*\n      A column header, not content. It stood at the body's size and ink, so the row of dates\n      read as another row of data rather than as the heading of its column.\n    */\n    font-size: var(--md-sys-typescale-label-large-size, 0.8125rem);\n    font-weight: 500;\n    color: var(--md-sys-color-on-surface-variant);\n  }\n\n  /*\n    The date, emphasised - not a filled pill.\n\n    Two rules used to sit here, one setting a weight and the next overriding it with a lozenge.\n\n    It was a solid lozenge in primary with reversed text. That made two maximum-contrast marks in\n    one cell once the cell itself took the ring, and this theme's primary is near-black, so in\n    light mode the lozenge read as an ink blot rather than an accent. It also made today's label\n    39px wide where every other day's is 114px, so the number's left edge moved on one day of the\n    month - and in the week view it wrapped the weekday too, at 61px.\n\n    Weight carries it, and only weight. Tinting it as well pointed the emphasis two ways: primary\n    is a step away from the body ink, so a bolder today number came out measurably paler than\n    every ordinary day beside it — dE00 7.2 dark, 5.7 light, against cell contrast 9.94 where its\n    neighbours had 12.97. The ring is the accent-coloured thing; the number is a number.\n\n    The colour token stays, defaulting to the ink the cell already gives, for a host whose accent\n    is far enough from its body ink for a tint to add something.\n  */\n  li[today] > span[date-label] {\n    font-weight: 700;\n    color: var(--calendar-weekly-date-label-color, inherit);\n  }\n\n  li[date] {\n    max-height: var(--calendar-weekly-date-max-height, none);\n    /* The clip goes on the box that carries the ceiling — see the month view. */\n    overflow: hidden;\n  }\n\n  [date] div {\n    display: block;\n    /* Was the small keyword. */\n    font-size: var(--md-sys-typescale-body-small-size, 0.75rem);\n    /*\n      Events ran into the cell's own borders — measured 0px on the left and 1px on the right,\n      while the date number above them sat 4px in. One cell, two left edges, and the titles\n      touching the rules on both sides.\n\n      The inset reads the date label's own margin, so the two lines stay together.\n    */\n    padding-inline: var(--calendar-weekly-date-label-margin, 4px);\n  }\n\n  [event] {\n    display: block;\n    background-color: var(--calendar-weekly-background-color);\n    border: var(--calendar-weekly-event-border);\n    border-width: var(--calendar-weekly-event-border-width);\n    margin: var(--calendar-weekly-event-margin, 0 0 4px 0);\n    padding: var(--calendar-weekly-event-padding, 2px 4px 2px 4px);\n\n    user-select: all;\n    touch-action: all;\n  }\n`\n"]}

package/dist/src/calendar-weekly.d.ts

@@ -1,7 +1,9 @@
 import '@material/web/button/text-button.js';
+import '@material/web/iconbutton/icon-button.js';
+import '@material/web/icon/icon.js';
 import { Dayjs } from 'dayjs/esm/index.js';
 import { LitElement, PropertyValues } from 'lit';
-import { BizEvent, CALENDAR, EventProvider } from './types.js';
+import { BizEvent, CALENDAR, DayState, EventProvider } from './types.js';
 export declare class CalendarWeekly extends LitElement {
     static styles: import("lit").CSSResult[];
     eventProvider?: EventProvider;
@@ -10,8 +12,13 @@ export declare class CalendarWeekly extends LitElement {
     week: number;
     calendar?: CALENDAR;
     eventMap?: Map<Date, BizEvent[]>;
+    /** What is true of the days themselves, if the host answers for them. See {@link DayState}. */
+    dayStateMap?: Map<Date, DayState>;
     selections?: [Date, Date];
     pointerDownDate?: Date | null;
+    /** Last reported overflow, so the host is not told the same thing after every render. */
+    private lastOverflow;
+    private tooltip;
     render(): import("lit-html").TemplateResult<1>;
     updated(changes: PropertyValues<this>): Promise<void>;
     moveTo(year: number, month: number, week: number): void;

package/dist/src/calendar-weekly.js

@@ -1,48 +1,89 @@
 import { __decorate } from "tslib";
 import '@material/web/button/text-button.js';
+import '@material/web/iconbutton/icon-button.js';
+import '@material/web/icon/icon.js';
 import dayjs from 'dayjs/esm/index.js';
 import { html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { TooltipReactiveController } from '@operato/utils';
 import { CalendarWeeklyStyles } from './calendar-weekly-styles.js';
-import { WEEKDAYS, isToday } from './types.js';
+import { reportDayOverflow } from './day-overflow.js';
+import { isToday, dayLabel, monthTitle, nextWeekLabel, previousWeekLabel, todayLabel, weekdayNames } from './types.js';
 let CalendarWeekly = class CalendarWeekly extends LitElement {
     constructor() {
         super(...arguments);
         this.year = dayjs().year();
         this.month = dayjs().month();
         this.week = dayjs().week();
+        /** Last reported overflow, so the host is not told the same thing after every render. */
+        this.lastOverflow = '';
+        /*
+         * Event titles are drawn on one nowrap line and cut with an ellipsis, so the full name only
+         * exists in a tooltip. Hosts were reaching for the browser's own `title`, which waits about a
+         * second and cannot be styled — measured on the plant calendar.
+         *
+         * data-grist already runs this controller on its header and its cells. It waits 450ms so a
+         * pointer crossing the grid does not trail tooltips behind it, then drops the wait once one
+         * is up, and it only fires on elements that actually overflow — which is exactly the set of
+         * titles worth expanding.
+         *
+         * Hosts mark the rows they want expanded with data-reactive-tooltip. The listener sits on
+         * this shadow root, where the host's own event templates are rendered.
+         */
+        this.tooltip = new TooltipReactiveController(this, {
+            /*
+             * Read the attribute's value, not the row's text.
+             *
+             * The controller treats the attribute as a marker and otherwise repeats what is already on
+             * screen, which for a cut title is at least the whole title. But a host writes the line it
+             * wants read - the plant calendar puts the kind, the order and where it runs in there - and
+             * without this that sentence was thrown away. [확인함] 2026-09-11
+             */
+            content: element => element.getAttribute('data-reactive-tooltip') || element.textContent?.trim() || ''
+        });
     }
     static { this.styles = [CalendarWeeklyStyles]; }
     render() {
         return html `
       <div head>
         <div this-week>
-          <b>${dayjs(new Date(this.year, this.month)).format('MMMM')}</b> ${this.year} <b>Week ${this.week}</b>
+          <!--
+            W37 is the ISO 8601 week designator. The word "Week" was English on every screen,
+            and Intl has no name for a week number, so the marker carries it instead of a word.
+          -->
+          ${monthTitle(this.year, this.month)} · W${this.week}
         </div>
 
         <div nav>
-          <md-text-button
+          <md-icon-button
+            aria-label=${previousWeekLabel()}
+            title=${previousWeekLabel()}
             @click=${() => {
             const dayJs = this.getLastDateOfWeek(this.year, this.week);
             const prevWeek = dayJs.subtract(1, 'week');
             this.moveTo(prevWeek.year(), prevWeek.month(), prevWeek.week());
         }}
-            ><</md-text-button
           >
+            <md-icon>chevron_left</md-icon>
+          </md-icon-button>
           <md-text-button
             @click=${() => {
             this.moveTo(dayjs().year(), dayjs().month(), dayjs().week());
         }}
-            >Today</md-text-button
+            >${todayLabel()}</md-text-button
           >
-          <md-text-button
+          <md-icon-button
+            aria-label=${nextWeekLabel()}
+            title=${nextWeekLabel()}
             @click=${() => {
             const dayJs = this.getLastDateOfWeek(this.year, this.week);
             const nextWeek = dayJs.add(1, 'week');
             this.moveTo(nextWeek.year(), nextWeek.month(), nextWeek.week());
         }}
-            >></md-text-button
           >
+            <md-icon>chevron_right</md-icon>
+          </md-icon-button>
         </div>
 
         <slot></slot>
@@ -58,8 +99,17 @@ let CalendarWeekly = class CalendarWeekly extends LitElement {
             const { date: thisDate } = date;
             const selected = from && to && thisDate >= from && thisDate <= to;
             return html `
-            <li ?today=${date.today} day-of-week date .date=${thisDate} ?selected=${selected}>
-              <span date-label>${date.label}(${WEEKDAYS[index]})</span>
+            <li
+              ?today=${date.today}
+              day-of-week
+              date
+              day-state=${ifDefined(this.dayStateMap?.get(thisDate)?.name)}
+              style=${ifDefined(this.dayStateMap?.get(thisDate) &&
+                `--day-state-color:${this.dayStateMap.get(thisDate).color}`)}
+              .date=${thisDate}
+              ?selected=${selected}
+            >
+              <span date-label>${dayLabel(date.date, !!date.withMonth)} (${weekdayNames()[index]})</span>
             </li>
           `;
         })}
@@ -67,7 +117,22 @@ let CalendarWeekly = class CalendarWeekly extends LitElement {
             const [from, to] = this.selections || [];
             const { date: thisDate } = date;
             const selected = from && to && thisDate >= from && thisDate <= to;
-            return html `<li date .date=${thisDate} ?selected=${selected}>
+            /*
+             * The event cell carries today as well as the date cell above it.
+             *
+             * This view draws a day as two cells in one column - the date on top, its events
+             * under it - and only the top one was marked. Today's tint therefore stopped at the
+             * date band, which is the part you are least likely to be looking at.
+             */
+            const dayState = this.dayStateMap?.get(thisDate);
+            return html `<li
+            date
+            ?today=${date.today}
+            day-state=${ifDefined(dayState?.name)}
+            style=${ifDefined(dayState && `--day-state-color:${dayState.color}`)}
+            .date=${thisDate}
+            ?selected=${selected}
+          >
             <div>
               ${(this.eventMap?.get(date?.date) || []).map(({ title, color, template }) => template ? template : html `<span event style="border-color: ${color};">${title}</span>`)}
             </div>
@@ -79,9 +144,21 @@ let CalendarWeekly = class CalendarWeekly extends LitElement {
     async updated(changes) {
         if (changes.has('year') || changes.has('month') || changes.has('week') || changes.has('eventProvider')) {
             const calendar = this.createDaysForCurrentWeek(this.year, this.week);
-            this.eventMap = await this.eventProvider?.fetchEventsForCalendar(calendar);
+            /* Both questions go out together — see the month view for why. */
+            const [eventMap, dayStateMap] = await Promise.all([
+                this.eventProvider?.fetchEventsForCalendar(calendar),
+                this.eventProvider?.fetchDayStatesForCalendar?.(calendar)
+            ]);
+            this.eventMap = eventMap;
+            this.dayStateMap = dayStateMap;
             this.calendar = calendar;
         }
+        /*
+         * After the rows are laid out, not before. A cap only bites once the browser has placed the
+         * children, so this has to run on every render - the grid also reflows when the host swaps
+         * its templates or the window changes width.
+         */
+        this.lastOverflow = reportDayOverflow(this, this.shadowRoot, this.lastOverflow);
     }
     moveTo(year, month, week) {
         this.year = year;
@@ -160,7 +237,7 @@ let CalendarWeekly = class CalendarWeekly extends LitElement {
         return [...Array(weekDays)]
             .map((day, index) => {
             const date = new Date(lastDayjs.year(), lastDayjs.month(), lastDayjs.date() - index);
-            const label = dayjs(date).format('MM-DD');
+            const label = dayLabel(date, true);
             return {
                 date,
                 label,
@@ -189,6 +266,9 @@ __decorate([
 __decorate([
     state()
 ], CalendarWeekly.prototype, "eventMap", void 0);
+__decorate([
+    state()
+], CalendarWeekly.prototype, "dayStateMap", void 0);
 __decorate([
     state()
 ], CalendarWeekly.prototype, "selections", void 0);

package/dist/src/calendar-weekly.js.map

@@ -1 +1 @@
-{"version":3,"file":"calendar-weekly.js","sourceRoot":"","sources":["../../src/calendar-weekly.ts"],"names":[],"mappings":";AAAA,OAAO,qCAAqC,CAAA;AAE5C,OAAO,KAAgB,MAAM,oBAAoB,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAA;AAClE,OAAO,EAAsB,QAAQ,EAAiB,OAAO,EAAE,MAAM,YAAY,CAAA;AAG1E,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QAKI,SAAI,GAAW,KAAK,EAAE,CAAC,IAAI,EAAE,CAAA;QAC7B,UAAK,GAAW,KAAK,EAAE,CAAC,KAAK,EAAE,CAAA;QAC/B,SAAI,GAAW,KAAK,EAAE,CAAC,IAAI,EAAE,CAAA;IAwMxC,CAAC;aA9MQ,WAAM,GAAG,CAAC,oBAAoB,CAAC,AAAzB,CAAyB;IAatC,MAAM;QACJ,OAAO,IAAI,CAAA;;;eAGA,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,QAAQ,IAAI,CAAC,IAAI,YAAY,IAAI,CAAC,IAAI;;;;;qBAKrF,GAAG,EAAE;YACZ,MAAM,KAAK,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAA;YAC1D,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC,CAAA;YAC1C,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,EAAE,QAAQ,CAAC,KAAK,EAAE,EAAE,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAA;QACjE,CAAC;;;;qBAIQ,GAAG,EAAE;YACZ,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,IAAI,EAAE,CAAC,CAAA;QAC9D,CAAC;;;;qBAIQ,GAAG,EAAE;YACZ,MAAM,KAAK,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAA;YAC1D,MAAM,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,CAAA;YACrC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,EAAE,QAAQ,CAAC,KAAK,EAAE,EAAE,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAA;QACjE,CAAC;;;;;;;;;uBASU,IAAI,CAAC,iBAAiB;uBACtB,IAAI,CAAC,iBAAiB;qBACxB,IAAI,CAAC,eAAe;;UAE/B,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YACnC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,UAAU,IAAK,EAAU,CAAA;YACjD,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;YAC/B,MAAM,QAAQ,GAAG,IAAI,IAAI,EAAE,IAAI,QAAQ,IAAI,IAAI,IAAI,QAAQ,IAAI,EAAE,CAAA;YAEjE,OAAO,IAAI,CAAA;yBACI,IAAI,CAAC,KAAK,2BAA2B,QAAQ,cAAc,QAAQ;iCAC3D,IAAI,CAAC,KAAK,IAAI,QAAQ,CAAC,KAAK,CAAC;;WAEnD,CAAA;QACH,CAAC,CAAC;UACA,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE;YAC1B,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,UAAU,IAAK,EAAU,CAAA;YACjD,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;YAC/B,MAAM,QAAQ,GAAG,IAAI,IAAI,EAAE,IAAI,QAAQ,IAAI,IAAI,IAAI,QAAQ,IAAI,EAAE,CAAA;YAEjE,OAAO,IAAI,CAAA,kBAAkB,QAAQ,cAAc,QAAQ;;gBAErD,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,CAC1E,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,oCAAoC,KAAK,MAAM,KAAK,SAAS,CACxF;;gBAEC,CAAA;QACR,CAAC,CAAC;;KAEL,CAAA;IACH,CAAC;IAED,KAAK,CAAC,OAAO,CAAC,OAA6B;QACzC,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,EAAE,CAAC;YACvG,MAAM,QAAQ,GAAG,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAA;YAEpE,IAAI,CAAC,QAAQ,GAAG,MAAM,IAAI,CAAC,aAAa,EAAE,sBAAsB,CAAC,QAAQ,CAAC,CAAA;YAC1E,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAA;QAC1B,CAAC;IACH,CAAC;IAED,MAAM,CAAC,IAAY,EAAE,KAAa,EAAE,IAAY;QAC9C,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;QAChB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QAClB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;IAClB,CAAC;IAED,iBAAiB,CAAC,KAAmB;QACnC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAA;QAE1C,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC;YACvE,OAAM;QACR,CAAC;QAED,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAgB,CAAA;QAC3D,MAAM,IAAI,GAAI,WAAmB,CAAC,IAAI,CAAA;QAEtC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAA;QAE3B,+BAA+B;QAC/B,MAAM,CAAC,qBAAqB,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;QAE7C,KAAK,CAAC,cAAc,EAAE,CAAA;IACxB,CAAC;IAED,iBAAiB,CAAC,KAAmB;QACnC,MAAM,IAAI,GAAG,IAAI,CAAC,eAAe,CAAA;QAEjC,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,OAAM;QACR,CAAC;QAED,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAA;QAC1C,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAgB,CAAA;QAE3D,IAAI,CAAC,WAAW,EAAE,CAAC;YACjB,OAAM;QACR,CAAC;QAED,MAAM,IAAI,GAAI,WAAmB,CAAC,IAAI,CAAA;QACtC,IAAI,CAAC,UAAU,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;QAE3D,+BAA+B;QAC/B,MAAM,CAAC,qBAAqB,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;QAE7C,KAAK,CAAC,cAAc,EAAE,CAAA;IACxB,CAAC;IAED,eAAe,CAAC,KAAmB;QACjC,MAAM,IAAI,GAAG,IAAI,CAAC,eAAe,CAAA;QAEjC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAA;QAE3B,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,OAAM;QACR,CAAC;QAED,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAA;QAC1C,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAgB,CAAA;QAE3D,IAAI,CAAC,WAAW,EAAE,CAAC;YACjB,OAAM;QACR,CAAC;QAED,MAAM,IAAI,GAAI,WAAmB,CAAC,IAAI,CAAA;QACtC,IAAI,CAAC,UAAU,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;QAE3D,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,aAAa,EAAE;YAC7B,MAAM,EAAE,IAAI,CAAC,UAAU;YACvB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAA;QAED,KAAK,CAAC,cAAc,EAAE,CAAA;IACxB,CAAC;IAED,UAAU,CAAC,IAA6F;QACtG,IAAI,IAAI,EAAE,CAAC;YACT,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAA;QAC1C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,UAAU,GAAG,SAAS,CAAA;QAC7B,CAAC;QAED,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,aAAa,EAAE;YAC7B,MAAM,EAAE,IAAI;YACZ,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAA;IACH,CAAC;IAED,iBAAiB,CAAC,IAAY,EAAE,IAAY;QAC1C,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;QAC/D,IAAI,IAAI,CAAC,CAAA,CAAC,wCAAwC;QAClD,OAAO,gBAAgB,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,CAAA;IACxC,CAAC;IAED,wBAAwB,CAAC,IAAY,EAAE,IAAY;QACjD,MAAM,SAAS,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;QACpD,MAAM,QAAQ,GAAG,CAAC,CAAA;QAElB,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC;aACxB,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;YAClB,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,EAAE,SAAS,CAAC,KAAK,EAAE,EAAE,SAAS,CAAC,IAAI,EAAE,GAAG,KAAK,CAAC,CAAA;YACpF,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;YACzC,OAAO;gBACL,IAAI;gBACJ,KAAK;gBACL,QAAQ,EAAE,IAAI;gBACd,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC;aACrB,CAAA;QACH,CAAC,CAAC;aACD,OAAO,EAAE,CAAA;IACd,CAAC;;AA3M2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAA8B;AAEhD;IAAR,KAAK,EAAE;4CAA8B;AAC7B;IAAR,KAAK,EAAE;6CAAgC;AAC/B;IAAR,KAAK,EAAE;4CAA8B;AAC7B;IAAR,KAAK,EAAE;gDAAoB;AACnB;IAAR,KAAK,EAAE;gDAAiC;AAChC;IAAR,KAAK,EAAE;kDAA0B;AAEzB;IAAR,KAAK,EAAE;uDAA8B;AAZ3B,cAAc;IAD1B,aAAa,CAAC,iBAAiB,CAAC;GACpB,cAAc,CA+M1B","sourcesContent":["import '@material/web/button/text-button.js'\n\nimport dayjs, { Dayjs } from 'dayjs/esm/index.js'\nimport { html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { CalendarWeeklyStyles } from './calendar-weekly-styles.js'\nimport { BizEvent, CALENDAR, WEEKDAYS, EventProvider, isToday } from './types.js'\n\n@customElement('calendar-weekly')\nexport class CalendarWeekly extends LitElement {\n  static styles = [CalendarWeeklyStyles]\n\n  @property({ type: Object }) eventProvider?: EventProvider\n\n  @state() year: number = dayjs().year()\n  @state() month: number = dayjs().month()\n  @state() week: number = dayjs().week()\n  @state() calendar?: CALENDAR\n  @state() eventMap?: Map<Date, BizEvent[]>\n  @state() selections?: [Date, Date]\n\n  @state() pointerDownDate?: Date | null\n\n  render() {\n    return html`\n      <div head>\n        <div this-week>\n          <b>${dayjs(new Date(this.year, this.month)).format('MMMM')}</b> ${this.year} <b>Week ${this.week}</b>\n        </div>\n\n        <div nav>\n          <md-text-button\n            @click=${() => {\n              const dayJs = this.getLastDateOfWeek(this.year, this.week)\n              const prevWeek = dayJs.subtract(1, 'week')\n              this.moveTo(prevWeek.year(), prevWeek.month(), prevWeek.week())\n            }}\n            ><</md-text-button\n          >\n          <md-text-button\n            @click=${() => {\n              this.moveTo(dayjs().year(), dayjs().month(), dayjs().week())\n            }}\n            >Today</md-text-button\n          >\n          <md-text-button\n            @click=${() => {\n              const dayJs = this.getLastDateOfWeek(this.year, this.week)\n              const nextWeek = dayJs.add(1, 'week')\n              this.moveTo(nextWeek.year(), nextWeek.month(), nextWeek.week())\n            }}\n            >></md-text-button\n          >\n        </div>\n\n        <slot></slot>\n      </div>\n\n      <ol\n        @pointerdown=${this.handlePointerDown}\n        @pointermove=${this.handlePointerMove}\n        @pointerup=${this.handlePointerUp}\n      >\n        ${this.calendar?.map((date, index) => {\n          const [from, to] = this.selections || ([] as any)\n          const { date: thisDate } = date\n          const selected = from && to && thisDate >= from && thisDate <= to\n\n          return html`\n            <li ?today=${date.today} day-of-week date .date=${thisDate} ?selected=${selected}>\n              <span date-label>${date.label}(${WEEKDAYS[index]})</span>\n            </li>\n          `\n        })}\n        ${this.calendar?.map(date => {\n          const [from, to] = this.selections || ([] as any)\n          const { date: thisDate } = date\n          const selected = from && to && thisDate >= from && thisDate <= to\n\n          return html`<li date .date=${thisDate} ?selected=${selected}>\n            <div>\n              ${(this.eventMap?.get(date?.date) || []).map(({ title, color, template }) =>\n                template ? template : html`<span event style=\"border-color: ${color};\">${title}</span>`\n              )}\n            </div>\n          </li>`\n        })}\n      </ol>\n    `\n  }\n\n  async updated(changes: PropertyValues<this>) {\n    if (changes.has('year') || changes.has('month') || changes.has('week') || changes.has('eventProvider')) {\n      const calendar = this.createDaysForCurrentWeek(this.year, this.week)\n\n      this.eventMap = await this.eventProvider?.fetchEventsForCalendar(calendar)\n      this.calendar = calendar\n    }\n  }\n\n  moveTo(year: number, month: number, week: number) {\n    this.year = year\n    this.month = month\n    this.week = week\n  }\n\n  handlePointerDown(event: PointerEvent) {\n    const target = event.target as HTMLElement\n\n    if (!target.hasAttribute('date') && !target.hasAttribute('date-label')) {\n      return\n    }\n\n    const dateElement = target.closest('[date]') as HTMLElement\n    const from = (dateElement as any).date\n\n    this.pointerDownDate = from\n\n    // 캡처를 설정하지 않음(Touch 디바이스에서 중요)\n    target.releasePointerCapture(event.pointerId)\n\n    event.preventDefault()\n  }\n\n  handlePointerMove(event: PointerEvent) {\n    const from = this.pointerDownDate\n\n    if (!from) {\n      return\n    }\n\n    const target = event.target as HTMLElement\n    const dateElement = target.closest('[date]') as HTMLElement\n\n    if (!dateElement) {\n      return\n    }\n\n    const date = (dateElement as any).date\n    this.selections = from > date ? [date, from] : [from, date]\n\n    // 캡처를 설정하지 않음(Touch 디바이스에서 중요)\n    target.releasePointerCapture(event.pointerId)\n\n    event.preventDefault()\n  }\n\n  handlePointerUp(event: PointerEvent) {\n    const from = this.pointerDownDate\n\n    this.pointerDownDate = null\n\n    if (!from) {\n      return\n    }\n\n    const target = event.target as HTMLElement\n    const dateElement = target.closest('[date]') as HTMLElement\n\n    if (!dateElement) {\n      return\n    }\n\n    const date = (dateElement as any).date\n    this.selections = from > date ? [date, from] : [from, date]\n\n    this.dispatchEvent(\n      new CustomEvent('select-date', {\n        detail: this.selections,\n        bubbles: true,\n        composed: true\n      })\n    )\n\n    event.preventDefault()\n  }\n\n  selectDate(date: { label: string; date: Date; thisMonth?: boolean; thisWeek?: boolean; today?: boolean }) {\n    if (date) {\n      this.selections = [date.date, date.date]\n    } else {\n      this.selections = undefined\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('select-date', {\n        detail: date,\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  getLastDateOfWeek(year: number, week: number): Dayjs {\n    const firstWeekLastDay = dayjs(new Date(year, 0, 1)).endOf('w')\n    week -= 1 // one-based week, so need the minus-one\n    return firstWeekLastDay.add(week, 'w')\n  }\n\n  createDaysForCurrentWeek(year: number, week: number): CALENDAR {\n    const lastDayjs = this.getLastDateOfWeek(year, week)\n    const weekDays = 7\n\n    return [...Array(weekDays)]\n      .map((day, index) => {\n        const date = new Date(lastDayjs.year(), lastDayjs.month(), lastDayjs.date() - index)\n        const label = dayjs(date).format('MM-DD')\n        return {\n          date,\n          label,\n          thisWeek: true,\n          today: isToday(date)\n        }\n      })\n      .reverse()\n  }\n}\n"]}
+{"version":3,"file":"calendar-weekly.js","sourceRoot":"","sources":["../../src/calendar-weekly.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/text-button.js'\nimport '@material/web/iconbutton/icon-button.js'\nimport '@material/web/icon/icon.js'\n\nimport dayjs, { Dayjs } from 'dayjs/esm/index.js'\nimport { html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { TooltipReactiveController } from '@operato/utils'\n\nimport { CalendarWeeklyStyles } from './calendar-weekly-styles.js'\nimport { reportDayOverflow } from './day-overflow.js'\nimport {\n  BizEvent,\n  CALENDAR,\n  DayState,\n  EventProvider,\n  isToday,\n  dayLabel,\n  monthTitle,\n  nextWeekLabel,\n  previousWeekLabel,\n  todayLabel,\n  weekdayNames\n} from './types.js'\n\n@customElement('calendar-weekly')\nexport class CalendarWeekly extends LitElement {\n  static styles = [CalendarWeeklyStyles]\n\n  @property({ type: Object }) eventProvider?: EventProvider\n\n  @state() year: number = dayjs().year()\n  @state() month: number = dayjs().month()\n  @state() week: number = dayjs().week()\n  @state() calendar?: CALENDAR\n  @state() eventMap?: Map<Date, BizEvent[]>\n  /** What is true of the days themselves, if the host answers for them. See {@link DayState}. */\n  @state() dayStateMap?: Map<Date, DayState>\n  @state() selections?: [Date, Date]\n\n  @state() pointerDownDate?: Date | null\n\n  /** Last reported overflow, so the host is not told the same thing after every render. */\n  private lastOverflow = ''\n\n  /*\n   * Event titles are drawn on one nowrap line and cut with an ellipsis, so the full name only\n   * exists in a tooltip. Hosts were reaching for the browser's own `title`, which waits about a\n   * second and cannot be styled — measured on the plant calendar.\n   *\n   * data-grist already runs this controller on its header and its cells. It waits 450ms so a\n   * pointer crossing the grid does not trail tooltips behind it, then drops the wait once one\n   * is up, and it only fires on elements that actually overflow — which is exactly the set of\n   * titles worth expanding.\n   *\n   * Hosts mark the rows they want expanded with data-reactive-tooltip. The listener sits on\n   * this shadow root, where the host's own event templates are rendered.\n   */\n  private tooltip = new TooltipReactiveController(this, {\n    /*\n     * Read the attribute's value, not the row's text.\n     *\n     * The controller treats the attribute as a marker and otherwise repeats what is already on\n     * screen, which for a cut title is at least the whole title. But a host writes the line it\n     * wants read - the plant calendar puts the kind, the order and where it runs in there - and\n     * without this that sentence was thrown away. [확인함] 2026-09-11\n     */\n    content: element => element.getAttribute('data-reactive-tooltip') || element.textContent?.trim() || ''\n  })\n\n  render() {\n    return html`\n      <div head>\n        <div this-week>\n          <!--\n            W37 is the ISO 8601 week designator. The word \"Week\" was English on every screen,\n            and Intl has no name for a week number, so the marker carries it instead of a word.\n          -->\n          ${monthTitle(this.year, this.month)} · W${this.week}\n        </div>\n\n        <div nav>\n          <md-icon-button\n            aria-label=${previousWeekLabel()}\n            title=${previousWeekLabel()}\n            @click=${() => {\n              const dayJs = this.getLastDateOfWeek(this.year, this.week)\n              const prevWeek = dayJs.subtract(1, 'week')\n              this.moveTo(prevWeek.year(), prevWeek.month(), prevWeek.week())\n            }}\n          >\n            <md-icon>chevron_left</md-icon>\n          </md-icon-button>\n          <md-text-button\n            @click=${() => {\n              this.moveTo(dayjs().year(), dayjs().month(), dayjs().week())\n            }}\n            >${todayLabel()}</md-text-button\n          >\n          <md-icon-button\n            aria-label=${nextWeekLabel()}\n            title=${nextWeekLabel()}\n            @click=${() => {\n              const dayJs = this.getLastDateOfWeek(this.year, this.week)\n              const nextWeek = dayJs.add(1, 'week')\n              this.moveTo(nextWeek.year(), nextWeek.month(), nextWeek.week())\n            }}\n          >\n            <md-icon>chevron_right</md-icon>\n          </md-icon-button>\n        </div>\n\n        <slot></slot>\n      </div>\n\n      <ol\n        @pointerdown=${this.handlePointerDown}\n        @pointermove=${this.handlePointerMove}\n        @pointerup=${this.handlePointerUp}\n      >\n        ${this.calendar?.map((date, index) => {\n          const [from, to] = this.selections || ([] as any)\n          const { date: thisDate } = date\n          const selected = from && to && thisDate >= from && thisDate <= to\n\n          return html`\n            <li\n              ?today=${date.today}\n              day-of-week\n              date\n              day-state=${ifDefined(this.dayStateMap?.get(thisDate)?.name)}\n              style=${ifDefined(\n                this.dayStateMap?.get(thisDate) &&\n                  `--day-state-color:${this.dayStateMap.get(thisDate)!.color}`\n              )}\n              .date=${thisDate}\n              ?selected=${selected}\n            >\n              <span date-label>${dayLabel(date.date, !!date.withMonth)} (${weekdayNames()[index]})</span>\n            </li>\n          `\n        })}\n        ${this.calendar?.map(date => {\n          const [from, to] = this.selections || ([] as any)\n          const { date: thisDate } = date\n          const selected = from && to && thisDate >= from && thisDate <= to\n\n          /*\n           * The event cell carries today as well as the date cell above it.\n           *\n           * This view draws a day as two cells in one column - the date on top, its events\n           * under it - and only the top one was marked. Today's tint therefore stopped at the\n           * date band, which is the part you are least likely to be looking at.\n           */\n          const dayState = this.dayStateMap?.get(thisDate)\n\n          return html`<li\n            date\n            ?today=${date.today}\n            day-state=${ifDefined(dayState?.name)}\n            style=${ifDefined(dayState && `--day-state-color:${dayState.color}`)}\n            .date=${thisDate}\n            ?selected=${selected}\n          >\n            <div>\n              ${(this.eventMap?.get(date?.date) || []).map(({ title, color, template }) =>\n                template ? template : html`<span event style=\"border-color: ${color};\">${title}</span>`\n              )}\n            </div>\n          </li>`\n        })}\n      </ol>\n    `\n  }\n\n  async updated(changes: PropertyValues<this>) {\n    if (changes.has('year') || changes.has('month') || changes.has('week') || changes.has('eventProvider')) {\n      const calendar = this.createDaysForCurrentWeek(this.year, this.week)\n\n      /* Both questions go out together — see the month view for why. */\n      const [eventMap, dayStateMap] = await Promise.all([\n        this.eventProvider?.fetchEventsForCalendar(calendar),\n        this.eventProvider?.fetchDayStatesForCalendar?.(calendar)\n      ])\n\n      this.eventMap = eventMap\n      this.dayStateMap = dayStateMap\n      this.calendar = calendar\n    }\n\n    /*\n     * After the rows are laid out, not before. A cap only bites once the browser has placed the\n     * children, so this has to run on every render - the grid also reflows when the host swaps\n     * its templates or the window changes width.\n     */\n    this.lastOverflow = reportDayOverflow(this, this.shadowRoot, this.lastOverflow)\n  }\n\n  moveTo(year: number, month: number, week: number) {\n    this.year = year\n    this.month = month\n    this.week = week\n  }\n\n  handlePointerDown(event: PointerEvent) {\n    const target = event.target as HTMLElement\n\n    if (!target.hasAttribute('date') && !target.hasAttribute('date-label')) {\n      return\n    }\n\n    const dateElement = target.closest('[date]') as HTMLElement\n    const from = (dateElement as any).date\n\n    this.pointerDownDate = from\n\n    // 캡처를 설정하지 않음(Touch 디바이스에서 중요)\n    target.releasePointerCapture(event.pointerId)\n\n    event.preventDefault()\n  }\n\n  handlePointerMove(event: PointerEvent) {\n    const from = this.pointerDownDate\n\n    if (!from) {\n      return\n    }\n\n    const target = event.target as HTMLElement\n    const dateElement = target.closest('[date]') as HTMLElement\n\n    if (!dateElement) {\n      return\n    }\n\n    const date = (dateElement as any).date\n    this.selections = from > date ? [date, from] : [from, date]\n\n    // 캡처를 설정하지 않음(Touch 디바이스에서 중요)\n    target.releasePointerCapture(event.pointerId)\n\n    event.preventDefault()\n  }\n\n  handlePointerUp(event: PointerEvent) {\n    const from = this.pointerDownDate\n\n    this.pointerDownDate = null\n\n    if (!from) {\n      return\n    }\n\n    const target = event.target as HTMLElement\n    const dateElement = target.closest('[date]') as HTMLElement\n\n    if (!dateElement) {\n      return\n    }\n\n    const date = (dateElement as any).date\n    this.selections = from > date ? [date, from] : [from, date]\n\n    this.dispatchEvent(\n      new CustomEvent('select-date', {\n        detail: this.selections,\n        bubbles: true,\n        composed: true\n      })\n    )\n\n    event.preventDefault()\n  }\n\n  selectDate(date: { label: string; date: Date; thisMonth?: boolean; thisWeek?: boolean; today?: boolean }) {\n    if (date) {\n      this.selections = [date.date, date.date]\n    } else {\n      this.selections = undefined\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('select-date', {\n        detail: date,\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  getLastDateOfWeek(year: number, week: number): Dayjs {\n    const firstWeekLastDay = dayjs(new Date(year, 0, 1)).endOf('w')\n    week -= 1 // one-based week, so need the minus-one\n    return firstWeekLastDay.add(week, 'w')\n  }\n\n  createDaysForCurrentWeek(year: number, week: number): CALENDAR {\n    const lastDayjs = this.getLastDateOfWeek(year, week)\n    const weekDays = 7\n\n    return [...Array(weekDays)]\n      .map((day, index) => {\n        const date = new Date(lastDayjs.year(), lastDayjs.month(), lastDayjs.date() - index)\n        const label = dayLabel(date, true)\n        return {\n          date,\n          label,\n          thisWeek: true,\n          today: isToday(date)\n        }\n      })\n      .reverse()\n  }\n}\n"]}