@operato/event-view 10.29.76 → 10.29.79

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [10.29.79](https://github.com/hatiolab/operato/compare/v10.29.78...v10.29.79) (2026-11-10)
+
+
+### :bug: Bug Fix
+
+* **event-view:** select dates by drag only when the calendar is selectable ([2839e6b](https://github.com/hatiolab/operato/commit/2839e6bd0792c1a9ededb1e8ba38d745f0b0552f))
+* **styles:** calendar theme follows the dark theme ([86e9ec0](https://github.com/hatiolab/operato/commit/86e9ec048ed57321374735c1df4a4333fe7f0cb8)), closes [#f4f4f4](https://github.com/hatiolab/operato/issues/f4f4f4)
+
+
+
 ### [10.29.76](https://github.com/hatiolab/operato/compare/v10.29.75...v10.29.76) (2026-11-09)
 
 **Note:** Version bump only for package @operato/event-view

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

@@ -131,6 +131,13 @@ export const CalendarMonthlyStyles = css `
     opacity: var(--calendar-monthly-opacity);
 
     user-select: none;
+  }
+
+  /*
+    Only a picker takes touch for itself. A calendar that only shows leaves touch-action alone,
+    so a finger dragged over the days scrolls the page.
+  */
+  :host([selectable]) li {
     touch-action: none;
   }
 

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

@@ -1 +1 @@
-{"version":3,"file":"calendar-monthly-styles.js","sourceRoot":"","sources":["../../src/calendar-monthly-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8WvC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const CalendarMonthlyStyles = css`\n  :host {\n    display: flex;\n    flex-direction: column;\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  [this-month] {\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  /*\n    The three controls are one group: on a phone the week's title left them too little room and\n    the group, a plain block, broke its buttons onto three lines. [확인함] 2026-11-05 · 375px\n  */\n  [nav] {\n    margin-left: auto;\n    display: flex;\n    align-items: center;\n    flex: none;\n  }\n\n  /* When title and controls do not fit on one line, the controls go under the title. */\n  [head] {\n    flex-wrap: wrap;\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  ::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-monthly-ol-margin, 9px 0);\n    border-top: var(--calendar-monthly-ol-top-border, 3px solid var(--md-sys-color-outline, #999));\n    /*\n      The grid closes itself into one box.\n\n      Its four sides were already drawn - the rule above for the top, each cell's own right and\n      bottom, and the left on every seventh - but the corners stayed square, so a host that put\n      a rounded box around the calendar ended up with a round line and a square line meeting at\n      the same corner. On the plant page the two were 1px apart down the sides and 9px apart at\n      the bottom: a doubled line on the left and right, a gap only at the bottom.\n\n        [확인함] 2026-09-11  outer l69 r931 b956 · grid l70 r930 b947\n\n      Clipping here rounds the corner cells' own surfaces with it, which is what makes this one\n      box rather than a square grid wearing a rounded frame. A host then needs no frame of its\n      own - and should not add one, because a second frame is what produced the doubled line.\n    */\n    border-radius: var(--calendar-monthly-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    min-height: 10%;\n    list-style: none;\n    border: var(--calendar-monthly-border, 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.1)));\n    border-width: var(--calendar-monthly-border-width, 0 1px 1px 0px);\n    opacity: var(--calendar-monthly-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    /*\n      A column header, not content. It was the same 16px and the same ink as the date numbers\n      under it, so only the grey band told them apart.\n    */\n    color: var(--calendar-current-week-color, var(--md-sys-color-on-surface-variant));\n    font-size: var(--md-sys-typescale-label-large-size, 0.8125rem);\n    font-weight: 500;\n    letter-spacing: 0.02em;\n    padding: var(--calendar-monthly-label-padding);\n    /*\n      Centred, and it stays centred.\n\n      I moved this to the left to sit over the date numbers, reading\n      --calendar-monthly-label-align as this row's alignment. That token is the date label's,\n      not this one's, and the reasoning behind the move was wrong anyway: a calendar cell is a\n      surface, not a value, and the date is a marker in its corner. This row names the whole\n      column, so it belongs over the column's middle - which is also what every calendar the\n      reader already uses does.\n    */\n    text-align: center;\n  }\n\n  /*\n    Three surfaces, three defaults.\n\n    All three of these rules used to fall back to surface-variant, so a host that set no tokens\n    got the month it is reading, the months either side, and the weekday band in one colour -\n    the exact flattening the theme was later written to undo, still sitting in the defaults where\n    the next host would meet it. They now default to the same ladder the theme sets: the days you\n    are reading are the brightest, the band is a step down, the neighbouring months a step under\n    that. Caught by a test running without a theme. [확인함] 2026-09-11\n  */\n  li[current-month] {\n    background-color: var(--calendar-current-month-background-color, var(--md-sys-color-surface-container-lowest));\n    color: var(--calendar-current-month-color, var(--md-sys-color-on-surface-variant));\n    opacity: 1;\n  }\n\n  /*\n    The month either side, dimmed by a colour rather than by opacity.\n    \n    opacity fades everything in the cell, marks included, so a holiday on the 31st of last month\n    came out as washed pink — the mark still had to be read, only the date was meant to recede.\n    A surface and an ink say the same thing and leave the marks alone.\n  */\n  li[date]:not([current-month]) {\n    background-color: var(--calendar-other-month-background-color, var(--md-sys-color-surface-variant));\n    color: var(--calendar-other-month-color, var(--md-sys-color-on-surface-variant));\n  }\n\n  /*\n    What the host says is true of the day itself — a non-working day, a shutdown, a cut-off.\n\n    The colour arrives on the element as --day-state-color, set by the host through the provider,\n    because this component does not know what the word means. See DayState in types.ts.\n\n    ── Four rules claim this one property, so their weights are matched on purpose ────────────\n    li[current-month]             (0,1,1)\n    li[date]:not([current-month]) (0,2,1)   :not() lends its argument's weight\n    li[date][day-state]           (0,2,1)   ← two attributes to reach the same weight\n    li[date][selected]            (0,2,1)\n\n    Written as li[day-state] it was (0,1,1) and lost to the :not() rule, so a host could mark a\n    day outside the current month and nothing happened - caught by the week view's test, where\n    every event cell is behind such a rule and the mark vanished entirely.\n\n    With the weights level, order decides, and the order is the intent: a day you have selected\n    looks selected even if it is a holiday; a holiday you have not touched looks like a holiday.\n  */\n  li[date][day-state] {\n    background-color: var(--day-state-color);\n  }\n\n  li[date][selected] {\n    background-color: var(--calendar-monthly-selected-background-color, var(--md-sys-color-tertiary-container));\n    color: var(--calendar-monthly-selected-color, var(--md-sys-color-on-tertiary-container));\n  }\n\n  /*\n    Today is a property of the day, so it is drawn on the day - not only inside it.\n\n    It was a pill on the date number and nothing else. That reads once you are already looking\n    at the number, and the number is a small thing in a large field:\n\n      [확인함] 2026-09-11  badge 39x21 = 812px² · cell 123x137 = 16,829px²\n                           4.8% of its own cell, 0.13% of the grid\n\n    So the cell carries it now, in two channels that cost nothing structurally.\n\n    ── Why a gradient and not a background-color ──────────────────────────────────\n    background-color on this element is already spoken for, several times over: the month you\n    are reading claims it, the months either side claim it, a drag selection claims it, and a\n    host marking non-working days will want it next. A background-image paints ON TOP of the\n    colour, so today layers over whichever of those applies instead of competing for the slot.\n    A day can be today and outside the month and selected all at once.\n\n    ── Why an inset shadow and not a border ──────────────────────────────────────\n    This grid's frame is assembled from each cell's own border (0 1px 1px 0, plus a left on\n    every seventh). Giving one cell a wider border moves its row by a pixel and the column with\n    it. An inset shadow is painted, not laid out, and it stays inside the clip the ol applies.\n\n    ── The values ────────────────────────────────────────────────────────────────\n    10% was measured against the neighbouring cell in four theme/mode combinations: dE00 4.4\n    and 5.4 on the plant palette, 4.1 and 6.3 on the shell one. 6% sat near 2.5, which is close\n    to not being noticed; 12% started to read as a selection rather than a position. The ring\n    against the grid's own rule measures 9.85 light and 6.42 dark.\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      An outline set inward, not an inset shadow flush to the edge.\n\n      Flush, the ring landed on the cell's own 1px rule and read as a crop mark - two lines in the\n      same place, with the corner of a square ring meeting the rounded corner of the grid. The\n      offset lifts it off that rule and gives it its own edge to be.\n\n      And at full primary it was the loudest thing on the screen, louder than the month title,\n      which is wrong for a marker that only says where you are. At 72% it is still plainly a line\n      and no longer shouting:\n\n        [확인함] 2026-09-11   against the cell 5.55 light · 5.84 dark\n                              against the grid's own rule 3.98 · 3.77\n\n      3.98 matters as much as 5.55: past 3:1 it reads as a different line rather than a thicker\n      one. Kept as a translucent mix rather than a computed colour so it still works over whatever\n      surface the day has - another month, a holiday, a selection.\n\n      outline rather than box-shadow because only outline takes an offset. Nothing here is\n      focusable today; if a cell ever is, its focus ring needs a different channel.\n    */\n    outline: var(--calendar-today-ring-width, 2px) solid\n      var(--calendar-today-ring-color, color-mix(in srgb, var(--md-sys-color-primary, #262e38) 72%, transparent));\n    outline-offset: var(--calendar-today-ring-inset, -3px);\n  }\n\n  li[date] {\n    min-height: var(--calendar-monthly-date-min-height, 120px);\n    max-height: var(--calendar-monthly-date-max-height, none);\n    /*\n      The clip belongs on the box that carries the ceiling.\n\n      It was on the row container inside instead, and that box has no height of its own - it grows\n      to fit its rows, so overflow:hidden there had nothing to clip against and the rows simply\n      spilled past the capped cell. Caught by the test: the cell held its 160px and the component\n      reported nothing cut, because by its own measurement nothing was.\n    */\n    overflow: hidden;\n  }\n\n  span[date-label] {\n    display: block;\n    margin: var(--calendar-monthly-date-label-margin);\n    text-align: var(--calendar-monthly-label-align, left);\n    /*\n      The date is the cell's name, not its content — and its size was never chosen.\n\n      With nothing set here it inherited the page's body size and came out 16px at weight 400:\n      bigger than the weekday band heading its column (13px/500) and bigger than everything in\n      the cell it names. The week view had already been given 13px/500 for the same date, so\n      switching views changed the size of the same number. [확인함] 2026-09-11\n\n      One step above the band, two above the events, and the weight carries it instead of the\n      size:\n\n        title      24 / 640\n        date       14 / 500   ← here\n        band       13 / 500\n        events     12 / 400\n    */\n    font-size: var(--md-sys-typescale-title-small-size, 0.875rem);\n    font-weight: 500;\n  }\n\n  /*\n    The date, emphasised - not a filled pill.\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-monthly-date-label-color, inherit);\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-monthly-date-label-margin, 4px);\n  }\n\n  [event] {\n    display: block;\n    background-color: var(--calendar-monthly-background-color);\n    color: var(--calendar-monthly-color);\n    border: var(--calendar-monthly-event-border);\n    border-width: var(--calendar-monthly-event-border-width);\n    margin: var(--calendar-monthly-event-margin, 0 0 4px 0);\n    padding: var(--calendar-monthly-event-padding, 2px 4px 2px 4px);\n\n    user-select: all;\n    touch-action: all;\n  }\n`\n"]}
+{"version":3,"file":"calendar-monthly-styles.js","sourceRoot":"","sources":["../../src/calendar-monthly-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqXvC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const CalendarMonthlyStyles = css`\n  :host {\n    display: flex;\n    flex-direction: column;\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  [this-month] {\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  /*\n    The three controls are one group: on a phone the week's title left them too little room and\n    the group, a plain block, broke its buttons onto three lines. [확인함] 2026-11-05 · 375px\n  */\n  [nav] {\n    margin-left: auto;\n    display: flex;\n    align-items: center;\n    flex: none;\n  }\n\n  /* When title and controls do not fit on one line, the controls go under the title. */\n  [head] {\n    flex-wrap: wrap;\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  ::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-monthly-ol-margin, 9px 0);\n    border-top: var(--calendar-monthly-ol-top-border, 3px solid var(--md-sys-color-outline, #999));\n    /*\n      The grid closes itself into one box.\n\n      Its four sides were already drawn - the rule above for the top, each cell's own right and\n      bottom, and the left on every seventh - but the corners stayed square, so a host that put\n      a rounded box around the calendar ended up with a round line and a square line meeting at\n      the same corner. On the plant page the two were 1px apart down the sides and 9px apart at\n      the bottom: a doubled line on the left and right, a gap only at the bottom.\n\n        [확인함] 2026-09-11  outer l69 r931 b956 · grid l70 r930 b947\n\n      Clipping here rounds the corner cells' own surfaces with it, which is what makes this one\n      box rather than a square grid wearing a rounded frame. A host then needs no frame of its\n      own - and should not add one, because a second frame is what produced the doubled line.\n    */\n    border-radius: var(--calendar-monthly-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    min-height: 10%;\n    list-style: none;\n    border: var(--calendar-monthly-border, 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.1)));\n    border-width: var(--calendar-monthly-border-width, 0 1px 1px 0px);\n    opacity: var(--calendar-monthly-opacity);\n\n    user-select: none;\n  }\n\n  /*\n    Only a picker takes touch for itself. A calendar that only shows leaves touch-action alone,\n    so a finger dragged over the days scrolls the page.\n  */\n  :host([selectable]) li {\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    /*\n      A column header, not content. It was the same 16px and the same ink as the date numbers\n      under it, so only the grey band told them apart.\n    */\n    color: var(--calendar-current-week-color, var(--md-sys-color-on-surface-variant));\n    font-size: var(--md-sys-typescale-label-large-size, 0.8125rem);\n    font-weight: 500;\n    letter-spacing: 0.02em;\n    padding: var(--calendar-monthly-label-padding);\n    /*\n      Centred, and it stays centred.\n\n      I moved this to the left to sit over the date numbers, reading\n      --calendar-monthly-label-align as this row's alignment. That token is the date label's,\n      not this one's, and the reasoning behind the move was wrong anyway: a calendar cell is a\n      surface, not a value, and the date is a marker in its corner. This row names the whole\n      column, so it belongs over the column's middle - which is also what every calendar the\n      reader already uses does.\n    */\n    text-align: center;\n  }\n\n  /*\n    Three surfaces, three defaults.\n\n    All three of these rules used to fall back to surface-variant, so a host that set no tokens\n    got the month it is reading, the months either side, and the weekday band in one colour -\n    the exact flattening the theme was later written to undo, still sitting in the defaults where\n    the next host would meet it. They now default to the same ladder the theme sets: the days you\n    are reading are the brightest, the band is a step down, the neighbouring months a step under\n    that. Caught by a test running without a theme. [확인함] 2026-09-11\n  */\n  li[current-month] {\n    background-color: var(--calendar-current-month-background-color, var(--md-sys-color-surface-container-lowest));\n    color: var(--calendar-current-month-color, var(--md-sys-color-on-surface-variant));\n    opacity: 1;\n  }\n\n  /*\n    The month either side, dimmed by a colour rather than by opacity.\n    \n    opacity fades everything in the cell, marks included, so a holiday on the 31st of last month\n    came out as washed pink — the mark still had to be read, only the date was meant to recede.\n    A surface and an ink say the same thing and leave the marks alone.\n  */\n  li[date]:not([current-month]) {\n    background-color: var(--calendar-other-month-background-color, var(--md-sys-color-surface-variant));\n    color: var(--calendar-other-month-color, var(--md-sys-color-on-surface-variant));\n  }\n\n  /*\n    What the host says is true of the day itself — a non-working day, a shutdown, a cut-off.\n\n    The colour arrives on the element as --day-state-color, set by the host through the provider,\n    because this component does not know what the word means. See DayState in types.ts.\n\n    ── Four rules claim this one property, so their weights are matched on purpose ────────────\n    li[current-month]             (0,1,1)\n    li[date]:not([current-month]) (0,2,1)   :not() lends its argument's weight\n    li[date][day-state]           (0,2,1)   ← two attributes to reach the same weight\n    li[date][selected]            (0,2,1)\n\n    Written as li[day-state] it was (0,1,1) and lost to the :not() rule, so a host could mark a\n    day outside the current month and nothing happened - caught by the week view's test, where\n    every event cell is behind such a rule and the mark vanished entirely.\n\n    With the weights level, order decides, and the order is the intent: a day you have selected\n    looks selected even if it is a holiday; a holiday you have not touched looks like a holiday.\n  */\n  li[date][day-state] {\n    background-color: var(--day-state-color);\n  }\n\n  li[date][selected] {\n    background-color: var(--calendar-monthly-selected-background-color, var(--md-sys-color-tertiary-container));\n    color: var(--calendar-monthly-selected-color, var(--md-sys-color-on-tertiary-container));\n  }\n\n  /*\n    Today is a property of the day, so it is drawn on the day - not only inside it.\n\n    It was a pill on the date number and nothing else. That reads once you are already looking\n    at the number, and the number is a small thing in a large field:\n\n      [확인함] 2026-09-11  badge 39x21 = 812px² · cell 123x137 = 16,829px²\n                           4.8% of its own cell, 0.13% of the grid\n\n    So the cell carries it now, in two channels that cost nothing structurally.\n\n    ── Why a gradient and not a background-color ──────────────────────────────────\n    background-color on this element is already spoken for, several times over: the month you\n    are reading claims it, the months either side claim it, a drag selection claims it, and a\n    host marking non-working days will want it next. A background-image paints ON TOP of the\n    colour, so today layers over whichever of those applies instead of competing for the slot.\n    A day can be today and outside the month and selected all at once.\n\n    ── Why an inset shadow and not a border ──────────────────────────────────────\n    This grid's frame is assembled from each cell's own border (0 1px 1px 0, plus a left on\n    every seventh). Giving one cell a wider border moves its row by a pixel and the column with\n    it. An inset shadow is painted, not laid out, and it stays inside the clip the ol applies.\n\n    ── The values ────────────────────────────────────────────────────────────────\n    10% was measured against the neighbouring cell in four theme/mode combinations: dE00 4.4\n    and 5.4 on the plant palette, 4.1 and 6.3 on the shell one. 6% sat near 2.5, which is close\n    to not being noticed; 12% started to read as a selection rather than a position. The ring\n    against the grid's own rule measures 9.85 light and 6.42 dark.\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      An outline set inward, not an inset shadow flush to the edge.\n\n      Flush, the ring landed on the cell's own 1px rule and read as a crop mark - two lines in the\n      same place, with the corner of a square ring meeting the rounded corner of the grid. The\n      offset lifts it off that rule and gives it its own edge to be.\n\n      And at full primary it was the loudest thing on the screen, louder than the month title,\n      which is wrong for a marker that only says where you are. At 72% it is still plainly a line\n      and no longer shouting:\n\n        [확인함] 2026-09-11   against the cell 5.55 light · 5.84 dark\n                              against the grid's own rule 3.98 · 3.77\n\n      3.98 matters as much as 5.55: past 3:1 it reads as a different line rather than a thicker\n      one. Kept as a translucent mix rather than a computed colour so it still works over whatever\n      surface the day has - another month, a holiday, a selection.\n\n      outline rather than box-shadow because only outline takes an offset. Nothing here is\n      focusable today; if a cell ever is, its focus ring needs a different channel.\n    */\n    outline: var(--calendar-today-ring-width, 2px) solid\n      var(--calendar-today-ring-color, color-mix(in srgb, var(--md-sys-color-primary, #262e38) 72%, transparent));\n    outline-offset: var(--calendar-today-ring-inset, -3px);\n  }\n\n  li[date] {\n    min-height: var(--calendar-monthly-date-min-height, 120px);\n    max-height: var(--calendar-monthly-date-max-height, none);\n    /*\n      The clip belongs on the box that carries the ceiling.\n\n      It was on the row container inside instead, and that box has no height of its own - it grows\n      to fit its rows, so overflow:hidden there had nothing to clip against and the rows simply\n      spilled past the capped cell. Caught by the test: the cell held its 160px and the component\n      reported nothing cut, because by its own measurement nothing was.\n    */\n    overflow: hidden;\n  }\n\n  span[date-label] {\n    display: block;\n    margin: var(--calendar-monthly-date-label-margin);\n    text-align: var(--calendar-monthly-label-align, left);\n    /*\n      The date is the cell's name, not its content — and its size was never chosen.\n\n      With nothing set here it inherited the page's body size and came out 16px at weight 400:\n      bigger than the weekday band heading its column (13px/500) and bigger than everything in\n      the cell it names. The week view had already been given 13px/500 for the same date, so\n      switching views changed the size of the same number. [확인함] 2026-09-11\n\n      One step above the band, two above the events, and the weight carries it instead of the\n      size:\n\n        title      24 / 640\n        date       14 / 500   ← here\n        band       13 / 500\n        events     12 / 400\n    */\n    font-size: var(--md-sys-typescale-title-small-size, 0.875rem);\n    font-weight: 500;\n  }\n\n  /*\n    The date, emphasised - not a filled pill.\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-monthly-date-label-color, inherit);\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-monthly-date-label-margin, 4px);\n  }\n\n  [event] {\n    display: block;\n    background-color: var(--calendar-monthly-background-color);\n    color: var(--calendar-monthly-color);\n    border: var(--calendar-monthly-event-border);\n    border-width: var(--calendar-monthly-event-border-width);\n    margin: var(--calendar-monthly-event-margin, 0 0 4px 0);\n    padding: var(--calendar-monthly-event-padding, 2px 4px 2px 4px);\n\n    user-select: all;\n    touch-action: all;\n  }\n`\n"]}

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

@@ -7,6 +7,8 @@ import { BizEvent, CALENDAR, DayState, EventProvider } from './types.js';
 export declare class CalendarMonthly extends LitElement {
     static styles: import("lit").CSSResult[];
     eventProvider?: EventProvider;
+    /** Days are picked by press or drag. Off, the grid only shows and touch scrolls the page. */
+    selectable: boolean;
     year: number;
     month: number;
     calendar?: CALENDAR;

package/dist/src/calendar-monthly.js

@@ -13,6 +13,8 @@ import { isToday, dayLabel, monthTitle, nextMonthLabel, previousMonthLabel, toda
 let CalendarMonthly = class CalendarMonthly extends LitElement {
     constructor() {
         super(...arguments);
+        /** Days are picked by press or drag. Off, the grid only shows and touch scrolls the page. */
+        this.selectable = false;
         this.year = dayjs().year();
         this.month = dayjs().month();
         /** Last reported overflow, so the host is not told the same thing after every render. */
@@ -143,6 +145,9 @@ let CalendarMonthly = class CalendarMonthly extends LitElement {
         this.lastOverflow = reportDayOverflow(this, this.shadowRoot, this.lastOverflow);
     }
     handlePointerDown(event) {
+        if (!this.selectable) {
+            return;
+        }
         const target = event.target;
         if (!target.hasAttribute('date') && !target.hasAttribute('date-label')) {
             return;
@@ -249,6 +254,9 @@ let CalendarMonthly = class CalendarMonthly extends LitElement {
 __decorate([
     property({ type: Object })
 ], CalendarMonthly.prototype, "eventProvider", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], CalendarMonthly.prototype, "selectable", void 0);
 __decorate([
     state()
 ], CalendarMonthly.prototype, "year", void 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'\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          <!-- The host's view switch is one of the controls: it moves with them when the header wraps. -->\n          <slot></slot>\n        </div>\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"]}
+{"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  /** Days are picked by press or drag. Off, the grid only shows and touch scrolls the page. */\n  @property({ type: Boolean, reflect: true }) selectable: boolean = false\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          <!-- The host's view switch is one of the controls: it moves with them when the header wraps. -->\n          <slot></slot>\n        </div>\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    if (!this.selectable) {\n      return\n    }\n\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

@@ -137,6 +137,13 @@ export const CalendarWeeklyStyles = css `
     opacity: var(--calendar-weekly-opacity);
 
     user-select: none;
+  }
+
+  /*
+    Only a picker takes touch for itself. A calendar that only shows leaves touch-action alone,
+    so a finger dragged over the days scrolls the page.
+  */
+  :host([selectable]) li {
     touch-action: none;
   }
 

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiRtC,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  /*\n    The three controls are one group: on a phone the week's title left them too little room and\n    the group, a plain block, broke its buttons onto three lines. [확인함] 2026-11-05 · 375px\n  */\n  [nav] {\n    margin-left: auto;\n    display: flex;\n    align-items: center;\n    flex: none;\n  }\n\n  /* When title and controls do not fit on one line, the controls go under the title. */\n  [head] {\n    flex-wrap: wrap;\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"]}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwRtC,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  /*\n    The three controls are one group: on a phone the week's title left them too little room and\n    the group, a plain block, broke its buttons onto three lines. [확인함] 2026-11-05 · 375px\n  */\n  [nav] {\n    margin-left: auto;\n    display: flex;\n    align-items: center;\n    flex: none;\n  }\n\n  /* When title and controls do not fit on one line, the controls go under the title. */\n  [head] {\n    flex-wrap: wrap;\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  }\n\n  /*\n    Only a picker takes touch for itself. A calendar that only shows leaves touch-action alone,\n    so a finger dragged over the days scrolls the page.\n  */\n  :host([selectable]) li {\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

@@ -7,6 +7,8 @@ import { BizEvent, CALENDAR, DayState, EventProvider } from './types.js';
 export declare class CalendarWeekly extends LitElement {
     static styles: import("lit").CSSResult[];
     eventProvider?: EventProvider;
+    /** Days are picked by press or drag. Off, the grid only shows and touch scrolls the page. */
+    selectable: boolean;
     year: number;
     month: number;
     week: number;

package/dist/src/calendar-weekly.js

@@ -13,6 +13,8 @@ import { isToday, dayLabel, monthTitle, nextWeekLabel, previousWeekLabel, todayL
 let CalendarWeekly = class CalendarWeekly extends LitElement {
     constructor() {
         super(...arguments);
+        /** Days are picked by press or drag. Off, the grid only shows and touch scrolls the page. */
+        this.selectable = false;
         this.year = dayjs().year();
         this.month = dayjs().month();
         this.week = dayjs().week();
@@ -104,8 +106,7 @@ let CalendarWeekly = class CalendarWeekly extends LitElement {
               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}`)}
+              style=${ifDefined(this.dayStateMap?.get(thisDate) && `--day-state-color:${this.dayStateMap.get(thisDate).color}`)}
               .date=${thisDate}
               ?selected=${selected}
             >
@@ -166,6 +167,9 @@ let CalendarWeekly = class CalendarWeekly extends LitElement {
         this.week = week;
     }
     handlePointerDown(event) {
+        if (!this.selectable) {
+            return;
+        }
         const target = event.target;
         if (!target.hasAttribute('date') && !target.hasAttribute('date-label')) {
             return;
@@ -251,6 +255,9 @@ let CalendarWeekly = class CalendarWeekly extends LitElement {
 __decorate([
     property({ type: Object })
 ], CalendarWeekly.prototype, "eventProvider", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], CalendarWeekly.prototype, "selectable", void 0);
 __decorate([
     state()
 ], CalendarWeekly.prototype, "year", 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":"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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          <!-- The host's view switch is one of the controls: it moves with them when the header wraps. -->\n          <slot></slot>\n        </div>\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"]}
+{"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  /** Days are picked by press or drag. Off, the grid only shows and touch scrolls the page. */\n  @property({ type: Boolean, reflect: true }) selectable: boolean = false\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          <!-- The host's view switch is one of the controls: it moves with them when the header wraps. -->\n          <slot></slot>\n        </div>\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) && `--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    if (!this.selectable) {\n      return\n    }\n\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"]}

package/dist/src/ox-event-view.d.ts

@@ -8,6 +8,14 @@ export declare class OxEventView extends LitElement {
     static styles: import("lit").CSSResult[];
     mode: 'monthly' | 'weekly';
     eventProvider?: EventProvider;
+    /**
+     * The calendar is used to pick dates.
+     *
+     * Off, the grid only shows: a touch drag over it scrolls the page, and a mouse drag selects
+     * nothing. On, a press or drag over the days selects a range and reports it as `select-date`,
+     * and the grid takes touch for itself so the drag is not read as a scroll.
+     */
+    selectable: boolean;
     monthlyLabel: string;
     weeklyLabel: string;
     /**

package/dist/src/ox-event-view.js

@@ -10,6 +10,14 @@ let OxEventView = class OxEventView extends LitElement {
     constructor() {
         super(...arguments);
         this.mode = 'monthly';
+        /**
+         * The calendar is used to pick dates.
+         *
+         * Off, the grid only shows: a touch drag over it scrolls the page, and a mouse drag selects
+         * nothing. On, a press or drag over the days selects a range and reports it as `select-date`,
+         * and the grid takes touch for itself so the drag is not read as a scroll.
+         */
+        this.selectable = false;
         /*
          * What the view switch is called.
          *
@@ -69,7 +77,7 @@ let OxEventView = class OxEventView extends LitElement {
     render() {
         return this.mode == 'weekly'
             ? html `
-          <calendar-weekly .eventProvider=${this.eventProvider}>
+          <calendar-weekly .eventProvider=${this.eventProvider} ?selectable=${this.selectable}>
             <md-icon-button
               aria-label=${this.monthlyLabel}
               title=${this.monthlyLabel}
@@ -80,7 +88,7 @@ let OxEventView = class OxEventView extends LitElement {
           </calendar-weekly>
         `
             : html `
-          <calendar-monthly .eventProvider=${this.eventProvider}>
+          <calendar-monthly .eventProvider=${this.eventProvider} ?selectable=${this.selectable}>
             <md-icon-button
               aria-label=${this.weeklyLabel}
               title=${this.weeklyLabel}
@@ -98,6 +106,9 @@ __decorate([
 __decorate([
     property({ type: Object })
 ], OxEventView.prototype, "eventProvider", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], OxEventView.prototype, "selectable", void 0);
 __decorate([
     property({ type: String, attribute: 'monthly-label' })
 ], OxEventView.prototype, "monthlyLabel", void 0);

package/dist/src/ox-event-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-event-view.js","sourceRoot":"","sources":["../../src/ox-event-view.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,yCAAyC,CAAA;AAEhD,OAAO,uBAAuB,CAAA;AAC9B,OAAO,sBAAsB,CAAA;AAE7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAK1C,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QA4BuB,SAAI,GAAyB,SAAS,CAAA;QAGlE;;;;;;;;;WASG;QACqD,iBAAY,GAAW,YAAY,CAAA;QACpC,gBAAW,GAAW,WAAW,CAAA;IA6C1F,CAAC;aAtFQ,WAAM,GAAG;QACd;;;;;WAKG;QACH,eAAe;QACf,GAAG,CAAA;;;;;;;;;;;;;;;;KAgBF;KACF,AAzBY,CAyBZ;IAkBD;;;;;;;;;;;;OAYG;IACK,QAAQ,CAAC,IAA0B;QACzC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;QAChB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,aAAa,EAAE,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IACzG,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,IAAI,IAAI,QAAQ;YAC1B,CAAC,CAAC,IAAI,CAAA;4CACgC,IAAI,CAAC,aAAa;;2BAEnC,IAAI,CAAC,YAAY;sBACtB,IAAI,CAAC,YAAY;uBAChB,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC;;;;;SAK5C;YACH,CAAC,CAAC,IAAI,CAAA;6CACiC,IAAI,CAAC,aAAa;;2BAEpC,IAAI,CAAC,WAAW;sBACrB,IAAI,CAAC,WAAW;uBACf,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC;;;;;SAK3C,CAAA;IACP,CAAC;;AA1D2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAuC;AACtC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAA8B;AAYD;IAAvD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;iDAAoC;AACpC;IAAtD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;gDAAkC;AA1C7E,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CAuFvB","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/iconbutton/icon-button.js'\n\nimport './calendar-monthly.js'\nimport './calendar-weekly.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { EventProvider } from './types.js'\n\n@customElement('ox-event-view')\nexport class OxEventView extends LitElement {\n  static styles = [\n    /*\n     * The host page is the one that decides this element scrolls — operato-plant sets\n     * overflow: auto on it. A rule written here still reaches that scrollbar: measured in\n     * Chrome, :host::-webkit-scrollbar from inside the shadow root gives the same 5px as the\n     * identical rule written on the outer page. [확인함] 2026-09-07\n     */\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        background-color: var(--md-sys-color-background);\n        color: var(--md-sys-color-on-background);\n      }\n\n      calendar-weekly,\n      calendar-monthly {\n        flex: 1;\n\n        padding: 0;\n        margin: 0;\n      }\n    `\n  ]\n\n  @property({ type: String }) mode: 'monthly' | 'weekly' = 'monthly'\n  @property({ type: Object }) eventProvider?: EventProvider\n\n  /*\n   * What the view switch is called.\n   *\n   * It was a bare md-icon: 24px, no padding, no hit area, and no name, sitting flush against a\n   * 40px button. A reader met four vertical bars and a screen reader met nothing at all.\n   *\n   * The dates around it come from Intl, which has no phrase for \"week view\", so these are\n   * properties with an English default rather than invented translations. A host that has a\n   * dictionary passes its own words; one that does not still gets a named button.\n   */\n  @property({ type: String, attribute: 'monthly-label' }) monthlyLabel: string = 'month view'\n  @property({ type: String, attribute: 'weekly-label' }) weeklyLabel: string = 'week view'\n\n  /**\n   * Switch view, and tell the host.\n   *\n   * There are two switches for one piece of state: the icon in here, and whatever the host page\n   * puts on its own toolbar. Without the event the host never learns that the icon was used, and\n   * anything it derives from the mode goes stale.\n   *\n   * What that cost on screen: the factory calendar slices each day to a per-view maximum (4 in\n   * monthly, 32 in weekly). Switching by this icon left the host on monthly, so a weekly cell\n   * over 1000px tall showed four rows and \"+56 more\". [확인함] 2026-09-07\n   *\n   * The mode still changes here, so a host that ignores the event keeps working on its own.\n   */\n  private switchTo(mode: 'monthly' | 'weekly') {\n    this.mode = mode\n    this.dispatchEvent(new CustomEvent('mode-change', { detail: { mode }, bubbles: true, composed: true }))\n  }\n\n  render() {\n    return this.mode == 'weekly'\n      ? html`\n          <calendar-weekly .eventProvider=${this.eventProvider}>\n            <md-icon-button\n              aria-label=${this.monthlyLabel}\n              title=${this.monthlyLabel}\n              @click=${() => this.switchTo('monthly')}\n            >\n              <md-icon>calendar_month</md-icon>\n            </md-icon-button>\n          </calendar-weekly>\n        `\n      : html`\n          <calendar-monthly .eventProvider=${this.eventProvider}>\n            <md-icon-button\n              aria-label=${this.weeklyLabel}\n              title=${this.weeklyLabel}\n              @click=${() => this.switchTo('weekly')}\n            >\n              <md-icon>calendar_view_week</md-icon>\n            </md-icon-button>\n          </calendar-monthly>\n        `\n  }\n}\n"]}
+{"version":3,"file":"ox-event-view.js","sourceRoot":"","sources":["../../src/ox-event-view.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,yCAAyC,CAAA;AAEhD,OAAO,uBAAuB,CAAA;AAC9B,OAAO,sBAAsB,CAAA;AAE7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAK1C,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QA4BuB,SAAI,GAAyB,SAAS,CAAA;QAGlE;;;;;;WAMG;QACyC,eAAU,GAAY,KAAK,CAAA;QAEvE;;;;;;;;;WASG;QACqD,iBAAY,GAAW,YAAY,CAAA;QACpC,gBAAW,GAAW,WAAW,CAAA;IA6C1F,CAAC;aA/FQ,WAAM,GAAG;QACd;;;;;WAKG;QACH,eAAe;QACf,GAAG,CAAA;;;;;;;;;;;;;;;;KAgBF;KACF,AAzBY,CAyBZ;IA2BD;;;;;;;;;;;;OAYG;IACK,QAAQ,CAAC,IAA0B;QACzC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;QAChB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,aAAa,EAAE,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IACzG,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,IAAI,IAAI,QAAQ;YAC1B,CAAC,CAAC,IAAI,CAAA;4CACgC,IAAI,CAAC,aAAa,gBAAgB,IAAI,CAAC,UAAU;;2BAElE,IAAI,CAAC,YAAY;sBACtB,IAAI,CAAC,YAAY;uBAChB,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC;;;;;SAK5C;YACH,CAAC,CAAC,IAAI,CAAA;6CACiC,IAAI,CAAC,aAAa,gBAAgB,IAAI,CAAC,UAAU;;2BAEnE,IAAI,CAAC,WAAW;sBACrB,IAAI,CAAC,WAAW;uBACf,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC;;;;;SAK3C,CAAA;IACP,CAAC;;AAnE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAuC;AACtC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAA8B;AASb;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAA4B;AAYf;IAAvD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;iDAAoC;AACpC;IAAtD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;gDAAkC;AAnD7E,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CAgGvB","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/iconbutton/icon-button.js'\n\nimport './calendar-monthly.js'\nimport './calendar-weekly.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { EventProvider } from './types.js'\n\n@customElement('ox-event-view')\nexport class OxEventView extends LitElement {\n  static styles = [\n    /*\n     * The host page is the one that decides this element scrolls — operato-plant sets\n     * overflow: auto on it. A rule written here still reaches that scrollbar: measured in\n     * Chrome, :host::-webkit-scrollbar from inside the shadow root gives the same 5px as the\n     * identical rule written on the outer page. [확인함] 2026-09-07\n     */\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        background-color: var(--md-sys-color-background);\n        color: var(--md-sys-color-on-background);\n      }\n\n      calendar-weekly,\n      calendar-monthly {\n        flex: 1;\n\n        padding: 0;\n        margin: 0;\n      }\n    `\n  ]\n\n  @property({ type: String }) mode: 'monthly' | 'weekly' = 'monthly'\n  @property({ type: Object }) eventProvider?: EventProvider\n\n  /**\n   * The calendar is used to pick dates.\n   *\n   * Off, the grid only shows: a touch drag over it scrolls the page, and a mouse drag selects\n   * nothing. On, a press or drag over the days selects a range and reports it as `select-date`,\n   * and the grid takes touch for itself so the drag is not read as a scroll.\n   */\n  @property({ type: Boolean, reflect: true }) selectable: boolean = false\n\n  /*\n   * What the view switch is called.\n   *\n   * It was a bare md-icon: 24px, no padding, no hit area, and no name, sitting flush against a\n   * 40px button. A reader met four vertical bars and a screen reader met nothing at all.\n   *\n   * The dates around it come from Intl, which has no phrase for \"week view\", so these are\n   * properties with an English default rather than invented translations. A host that has a\n   * dictionary passes its own words; one that does not still gets a named button.\n   */\n  @property({ type: String, attribute: 'monthly-label' }) monthlyLabel: string = 'month view'\n  @property({ type: String, attribute: 'weekly-label' }) weeklyLabel: string = 'week view'\n\n  /**\n   * Switch view, and tell the host.\n   *\n   * There are two switches for one piece of state: the icon in here, and whatever the host page\n   * puts on its own toolbar. Without the event the host never learns that the icon was used, and\n   * anything it derives from the mode goes stale.\n   *\n   * What that cost on screen: the factory calendar slices each day to a per-view maximum (4 in\n   * monthly, 32 in weekly). Switching by this icon left the host on monthly, so a weekly cell\n   * over 1000px tall showed four rows and \"+56 more\". [확인함] 2026-09-07\n   *\n   * The mode still changes here, so a host that ignores the event keeps working on its own.\n   */\n  private switchTo(mode: 'monthly' | 'weekly') {\n    this.mode = mode\n    this.dispatchEvent(new CustomEvent('mode-change', { detail: { mode }, bubbles: true, composed: true }))\n  }\n\n  render() {\n    return this.mode == 'weekly'\n      ? html`\n          <calendar-weekly .eventProvider=${this.eventProvider} ?selectable=${this.selectable}>\n            <md-icon-button\n              aria-label=${this.monthlyLabel}\n              title=${this.monthlyLabel}\n              @click=${() => this.switchTo('monthly')}\n            >\n              <md-icon>calendar_month</md-icon>\n            </md-icon-button>\n          </calendar-weekly>\n        `\n      : html`\n          <calendar-monthly .eventProvider=${this.eventProvider} ?selectable=${this.selectable}>\n            <md-icon-button\n              aria-label=${this.weeklyLabel}\n              title=${this.weeklyLabel}\n              @click=${() => this.switchTo('weekly')}\n            >\n              <md-icon>calendar_view_week</md-icon>\n            </md-icon-button>\n          </calendar-monthly>\n        `\n  }\n}\n"]}

package/dist/test/calendar-layout.test.d.ts

@@ -0,0 +1 @@
+import '../src/ox-event-view.js';