@operato/event-view 10.10.2 → 10.15.0

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

@@ -4,23 +4,66 @@ export const CalendarMonthlyStyles = css `
     display: flex;
     flex-direction: column;
 
-    --md-text-button-container-height: 24px;
+    /*
+      One row of controls, one height. The text button was pinned to 24px while the icon
+      buttons beside it are 40, so the middle of the three sat in a different band.
+    */
+    --md-text-button-container-height: 32px;
+    --md-icon-button-icon-size: 20px;
+    --md-icon-button-state-layer-height: 32px;
+    --md-icon-button-state-layer-width: 32px;
   }
 
   [head] {
     display: flex;
     align-items: center;
+    /*
+      The view switch sat flush against the next button — measured 0px between them.
+
+      The space goes on the switch, not on the row: a flex gap also opens a gap between the
+      title and the nav, and those two extra pixels each made the header 8px wider than the
+      grid under it, which put a horizontal scrollbar on the whole calendar. [확인함] 2026-09-11
+    */
   }
 
   [this-month] {
     /* Was the x-large keyword, which is a browser step, not a step of this theme. */
     font-size: var(--md-sys-typescale-headline-small-size, 1.5rem);
+    /*
+      The month used to be wrapped in <b>. Formatting the whole title through Intl dropped
+      that tag and left 24px at weight 400 — large, but with nothing to say it is the title.
+    */
+    font-weight: var(--md-sys-typescale-headline-small-weight, 640);
+    /*
+      The header must never be what makes the calendar scroll sideways. A flex item's floor is
+      its content, so without this the title pushes the nav out and the grid follows — the same
+      rule the day cells needed.
+    */
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   [nav] {
     margin-left: auto;
   }
 
+  /*
+    Room for what the buttons actually occupy.
+
+    An md-icon-button paints a 48px touch target around its 32px box, so the rightmost control
+    reaches 8px past its own edge. With that control flush to the header's right edge the
+    header measured 8px wider than the grid under it, and the whole calendar grew a horizontal
+    scrollbar. [확인함] 2026-09-11 — button right 898, its inner target 906, header client 860.
+
+    The inset makes room instead of shrinking the target: a smaller target is a worse button,
+    and the last control here is slotted by the host, whose size this component cannot know.
+  */
+  [head] {
+    padding-right: var(--calendar-head-inset, 8px);
+  }
+
   ::slotted(*) {
     color: var(--md-sys-color-secondary);
   }
@@ -35,6 +78,23 @@ export const CalendarMonthlyStyles = css `
     padding: 0;
     margin: var(--calendar-monthly-ol-margin, 9px 0);
     border-top: var(--calendar-monthly-ol-top-border, 3px solid var(--md-sys-color-outline, #999));
+    /*
+      The grid closes itself into one box.
+
+      Its four sides were already drawn - the rule above for the top, each cell's own right and
+      bottom, and the left on every seventh - but the corners stayed square, so a host that put
+      a rounded box around the calendar ended up with a round line and a square line meeting at
+      the same corner. On the plant page the two were 1px apart down the sides and 9px apart at
+      the bottom: a doubled line on the left and right, a gap only at the bottom.
+
+        [확인함] 2026-09-11  outer l69 r931 b956 · grid l70 r930 b947
+
+      Clipping here rounds the corner cells' own surfaces with it, which is what makes this one
+      box rather than a square grid wearing a rounded frame. A host then needs no frame of its
+      own - and should not add one, because a second frame is what produced the doubled line.
+    */
+    border-radius: var(--calendar-monthly-radius, var(--ui-r-small, 6px));
+    overflow: hidden;
   }
 
   /*
@@ -68,47 +128,217 @@ export const CalendarMonthlyStyles = css `
 
   li[day-of-week] {
     opacity: 1;
-    background-color: var(--calendar-current-week-background-color, var(--md-sys-color-surface-variant));
-    color: var(--calendar-current-week-color, var(--md-sys-color-on-surface));
+    background-color: var(--calendar-current-week-background-color, var(--md-sys-color-surface));
+    /*
+      A column header, not content. It was the same 16px and the same ink as the date numbers
+      under it, so only the grey band told them apart.
+    */
+    color: var(--calendar-current-week-color, var(--md-sys-color-on-surface-variant));
+    font-size: var(--md-sys-typescale-label-large-size, 0.8125rem);
+    font-weight: 500;
+    letter-spacing: 0.02em;
     padding: var(--calendar-monthly-label-padding);
+    /*
+      Centred, and it stays centred.
+
+      I moved this to the left to sit over the date numbers, reading
+      --calendar-monthly-label-align as this row's alignment. That token is the date label's,
+      not this one's, and the reasoning behind the move was wrong anyway: a calendar cell is a
+      surface, not a value, and the date is a marker in its corner. This row names the whole
+      column, so it belongs over the column's middle - which is also what every calendar the
+      reader already uses does.
+    */
     text-align: center;
   }
 
+  /*
+    Three surfaces, three defaults.
+
+    All three of these rules used to fall back to surface-variant, so a host that set no tokens
+    got the month it is reading, the months either side, and the weekday band in one colour -
+    the exact flattening the theme was later written to undo, still sitting in the defaults where
+    the next host would meet it. They now default to the same ladder the theme sets: the days you
+    are reading are the brightest, the band is a step down, the neighbouring months a step under
+    that. Caught by a test running without a theme. [확인함] 2026-09-11
+  */
   li[current-month] {
-    background-color: var(--calendar-current-month-background-color, var(--md-sys-color-surface-variant));
+    background-color: var(--calendar-current-month-background-color, var(--md-sys-color-surface-container-lowest));
     color: var(--calendar-current-month-color, var(--md-sys-color-on-surface-variant));
     opacity: 1;
   }
 
-  li[selected] {
+  /*
+    The month either side, dimmed by a colour rather than by opacity.
+    
+    opacity fades everything in the cell, marks included, so a holiday on the 31st of last month
+    came out as washed pink — the mark still had to be read, only the date was meant to recede.
+    A surface and an ink say the same thing and leave the marks alone.
+  */
+  li[date]:not([current-month]) {
+    background-color: var(--calendar-other-month-background-color, var(--md-sys-color-surface-variant));
+    color: var(--calendar-other-month-color, var(--md-sys-color-on-surface-variant));
+  }
+
+  /*
+    What the host says is true of the day itself — a non-working day, a shutdown, a cut-off.
+
+    The colour arrives on the element as --day-state-color, set by the host through the provider,
+    because this component does not know what the word means. See DayState in types.ts.
+
+    ── Four rules claim this one property, so their weights are matched on purpose ────────────
+    li[current-month]             (0,1,1)
+    li[date]:not([current-month]) (0,2,1)   :not() lends its argument's weight
+    li[date][day-state]           (0,2,1)   ← two attributes to reach the same weight
+    li[date][selected]            (0,2,1)
+
+    Written as li[day-state] it was (0,1,1) and lost to the :not() rule, so a host could mark a
+    day outside the current month and nothing happened - caught by the week view's test, where
+    every event cell is behind such a rule and the mark vanished entirely.
+
+    With the weights level, order decides, and the order is the intent: a day you have selected
+    looks selected even if it is a holiday; a holiday you have not touched looks like a holiday.
+  */
+  li[date][day-state] {
+    background-color: var(--day-state-color);
+  }
+
+  li[date][selected] {
     background-color: var(--calendar-monthly-selected-background-color, var(--md-sys-color-tertiary-container));
     color: var(--calendar-monthly-selected-color, var(--md-sys-color-on-tertiary-container));
   }
 
+  /*
+    Today is a property of the day, so it is drawn on the day - not only inside it.
+
+    It was a pill on the date number and nothing else. That reads once you are already looking
+    at the number, and the number is a small thing in a large field:
+
+      [확인함] 2026-09-11  badge 39x21 = 812px² · cell 123x137 = 16,829px²
+                           4.8% of its own cell, 0.13% of the grid
+
+    So the cell carries it now, in two channels that cost nothing structurally.
+
+    ── Why a gradient and not a background-color ──────────────────────────────────
+    background-color on this element is already spoken for, several times over: the month you
+    are reading claims it, the months either side claim it, a drag selection claims it, and a
+    host marking non-working days will want it next. A background-image paints ON TOP of the
+    colour, so today layers over whichever of those applies instead of competing for the slot.
+    A day can be today and outside the month and selected all at once.
+
+    ── Why an inset shadow and not a border ──────────────────────────────────────
+    This grid's frame is assembled from each cell's own border (0 1px 1px 0, plus a left on
+    every seventh). Giving one cell a wider border moves its row by a pixel and the column with
+    it. An inset shadow is painted, not laid out, and it stays inside the clip the ol applies.
+
+    ── The values ────────────────────────────────────────────────────────────────
+    10% was measured against the neighbouring cell in four theme/mode combinations: dE00 4.4
+    and 5.4 on the plant palette, 4.1 and 6.3 on the shell one. 6% sat near 2.5, which is close
+    to not being noticed; 12% started to read as a selection rather than a position. The ring
+    against the grid's own rule measures 9.85 light and 6.42 dark.
+  */
+  li[today] {
+    background-image: linear-gradient(
+      var(--calendar-today-wash, color-mix(in srgb, var(--md-sys-color-primary, #262e38) 10%, transparent)),
+      var(--calendar-today-wash, color-mix(in srgb, var(--md-sys-color-primary, #262e38) 10%, transparent))
+    );
+    /*
+      An outline set inward, not an inset shadow flush to the edge.
+
+      Flush, the ring landed on the cell's own 1px rule and read as a crop mark - two lines in the
+      same place, with the corner of a square ring meeting the rounded corner of the grid. The
+      offset lifts it off that rule and gives it its own edge to be.
+
+      And at full primary it was the loudest thing on the screen, louder than the month title,
+      which is wrong for a marker that only says where you are. At 72% it is still plainly a line
+      and no longer shouting:
+
+        [확인함] 2026-09-11   against the cell 5.55 light · 5.84 dark
+                              against the grid's own rule 3.98 · 3.77
+
+      3.98 matters as much as 5.55: past 3:1 it reads as a different line rather than a thicker
+      one. Kept as a translucent mix rather than a computed colour so it still works over whatever
+      surface the day has - another month, a holiday, a selection.
+
+      outline rather than box-shadow because only outline takes an offset. Nothing here is
+      focusable today; if a cell ever is, its focus ring needs a different channel.
+    */
+    outline: var(--calendar-today-ring-width, 2px) solid
+      var(--calendar-today-ring-color, color-mix(in srgb, var(--md-sys-color-primary, #262e38) 72%, transparent));
+    outline-offset: var(--calendar-today-ring-inset, -3px);
+  }
+
   li[date] {
     min-height: var(--calendar-monthly-date-min-height, 120px);
+    max-height: var(--calendar-monthly-date-max-height, none);
+    /*
+      The clip belongs on the box that carries the ceiling.
+
+      It was on the row container inside instead, and that box has no height of its own - it grows
+      to fit its rows, so overflow:hidden there had nothing to clip against and the rows simply
+      spilled past the capped cell. Caught by the test: the cell held its 160px and the component
+      reported nothing cut, because by its own measurement nothing was.
+    */
+    overflow: hidden;
   }
 
   span[date-label] {
     display: block;
     margin: var(--calendar-monthly-date-label-margin);
     text-align: var(--calendar-monthly-label-align, left);
+    /*
+      The date is the cell's name, not its content — and its size was never chosen.
+
+      With nothing set here it inherited the page's body size and came out 16px at weight 400:
+      bigger than the weekday band heading its column (13px/500) and bigger than everything in
+      the cell it names. The week view had already been given 13px/500 for the same date, so
+      switching views changed the size of the same number. [확인함] 2026-09-11
+
+      One step above the band, two above the events, and the weight carries it instead of the
+      size:
+
+        title      24 / 640
+        date       14 / 500   ← here
+        band       13 / 500
+        events     12 / 400
+    */
+    font-size: var(--md-sys-typescale-title-small-size, 0.875rem);
+    font-weight: 500;
   }
 
+  /*
+    The date, emphasised - not a filled pill.
+
+    It was a solid lozenge in primary with reversed text. That made two maximum-contrast marks in
+    one cell once the cell itself took the ring, and this theme's primary is near-black, so in
+    light mode the lozenge read as an ink blot rather than an accent. It also made today's label
+    39px wide where every other day's is 114px, so the number's left edge moved on one day of the
+    month - and in the week view it wrapped the weekday too, at 61px.
+
+    Weight carries it, and only weight. Tinting it as well pointed the emphasis two ways: primary
+    is a step away from the body ink, so a bolder today number came out measurably paler than
+    every ordinary day beside it — dE00 7.2 dark, 5.7 light, against cell contrast 9.94 where its
+    neighbours had 12.97. The ring is the accent-coloured thing; the number is a number.
+
+    The colour token stays, defaulting to the ink the cell already gives, for a host whose accent
+    is far enough from its body ink for a tint to add something.
+  */
   li[today] > span[date-label] {
-    display: inline-block;
-    background-color: var(--calendar-monthly-date-label-background-color, var(--md-sys-color-error, #cc3300));
-    padding: var(--calendar-monthly-date-label-padding);
-    border-radius: var(--calendar-monthly-date-label-border-radius, 999em);
-    color: var(--calendar-monthly-date-label-color, var(--md-sys-color-on-error, #fff));
-    min-width: 16px;
-    text-align: center;
+    font-weight: 700;
+    color: var(--calendar-monthly-date-label-color, inherit);
   }
 
   [date] div {
     display: block;
     /* Was the small keyword. */
     font-size: var(--md-sys-typescale-body-small-size, 0.75rem);
+    /*
+      Events ran into the cell's own borders — measured 0px on the left and 1px on the right,
+      while the date number above them sat 4px in. One cell, two left edges, and the titles
+      touching the rules on both sides.
+
+      The inset reads the date label's own margin, so the two lines stay together.
+    */
+    padding-inline: var(--calendar-monthly-date-label-margin, 4px);
   }
 
   [event] {

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4HvC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const CalendarMonthlyStyles = css`\n  :host {\n    display: flex;\n    flex-direction: column;\n\n    --md-text-button-container-height: 24px;\n  }\n\n  [head] {\n    display: flex;\n    align-items: center;\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\n  [nav] {\n    margin-left: auto;\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\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-variant));\n    color: var(--calendar-current-week-color, var(--md-sys-color-on-surface));\n    padding: var(--calendar-monthly-label-padding);\n    text-align: center;\n  }\n\n  li[current-month] {\n    background-color: var(--calendar-current-month-background-color, var(--md-sys-color-surface-variant));\n    color: var(--calendar-current-month-color, var(--md-sys-color-on-surface-variant));\n    opacity: 1;\n  }\n\n  li[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  li[date] {\n    min-height: var(--calendar-monthly-date-min-height, 120px);\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\n  li[today] > span[date-label] {\n    display: inline-block;\n    background-color: var(--calendar-monthly-date-label-background-color, var(--md-sys-color-error, #cc3300));\n    padding: var(--calendar-monthly-date-label-padding);\n    border-radius: var(--calendar-monthly-date-label-border-radius, 999em);\n    color: var(--calendar-monthly-date-label-color, var(--md-sys-color-on-error, #fff));\n    min-width: 16px;\n    text-align: center;\n  }\n\n  [date] div {\n    display: block;\n    /* Was the small keyword. */\n    font-size: var(--md-sys-typescale-body-small-size, 0.75rem);\n  }\n\n  [event] {\n    display: block;\n    background-color: var(--calendar-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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkWvC,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  [nav] {\n    margin-left: auto;\n  }\n\n  /*\n    Room for what the buttons actually occupy.\n\n    An md-icon-button paints a 48px touch target around its 32px box, so the rightmost control\n    reaches 8px past its own edge. With that control flush to the header's right edge the\n    header measured 8px wider than the grid under it, and the whole calendar grew a horizontal\n    scrollbar. [확인함] 2026-09-11 — button right 898, its inner target 906, header client 860.\n\n    The inset makes room instead of shrinking the target: a smaller target is a worse button,\n    and the last control here is slotted by the host, whose size this component cannot know.\n  */\n  [head] {\n    padding-right: var(--calendar-head-inset, 8px);\n  }\n\n  ::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"]}

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

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

package/dist/src/calendar-monthly.js

@@ -1,41 +1,83 @@
 import { __decorate } from "tslib";
 import '@material/web/button/text-button.js';
+import '@material/web/iconbutton/icon-button.js';
+import '@material/web/icon/icon.js';
 import dayjs from 'dayjs/esm/index.js';
 import { html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { TooltipReactiveController } from '@operato/utils';
 import { CalendarMonthlyStyles } from './calendar-monthly-styles.js';
-import { WEEKDAYS, isToday } from './types.js';
+import { reportDayOverflow } from './day-overflow.js';
+import { isToday, dayLabel, monthTitle, nextMonthLabel, previousMonthLabel, todayLabel, weekdayNames } from './types.js';
 let CalendarMonthly = class CalendarMonthly extends LitElement {
     constructor() {
         super(...arguments);
         this.year = dayjs().year();
         this.month = dayjs().month();
+        /** Last reported overflow, so the host is not told the same thing after every render. */
+        this.lastOverflow = '';
+        /*
+         * Event titles are drawn on one nowrap line and cut with an ellipsis, so the full name only
+         * exists in a tooltip. Hosts were reaching for the browser's own `title`, which waits about a
+         * second and cannot be styled — measured on the plant calendar.
+         *
+         * data-grist already runs this controller on its header and its cells. It waits 450ms so a
+         * pointer crossing the grid does not trail tooltips behind it, then drops the wait once one
+         * is up, and it only fires on elements that actually overflow — which is exactly the set of
+         * titles worth expanding.
+         *
+         * Hosts mark the rows they want expanded with data-reactive-tooltip. The listener sits on
+         * this shadow root, where the host's own event templates are rendered.
+         */
+        this.tooltip = new TooltipReactiveController(this, {
+            /*
+             * Read the attribute's value, not the row's text.
+             *
+             * The controller treats the attribute as a marker and otherwise repeats what is already on
+             * screen, which for a cut title is at least the whole title. But a host writes the line it
+             * wants read - the plant calendar puts the kind, the order and where it runs in there - and
+             * without this that sentence was thrown away. [확인함] 2026-09-11
+             */
+            content: element => element.getAttribute('data-reactive-tooltip') || element.textContent?.trim() || ''
+        });
     }
     static { this.styles = [CalendarMonthlyStyles]; }
     render() {
         return html `
       <div head>
-        <div this-month><b>${dayjs(new Date(this.year, this.month)).format('MMMM')}</b> ${this.year}</div>
+        <div this-month>${monthTitle(this.year, this.month)}</div>
 
         <div nav>
-          <md-text-button
+          <!--
+            Chevrons, not the "<" and ">" characters that were here. Those are text: they take
+            the text colour and weight, sit on the text baseline, and a screen reader says
+            "less than". An icon button is also a target, which the bare glyph was not.
+          -->
+          <md-icon-button
+            aria-label=${previousMonthLabel()}
+            title=${previousMonthLabel()}
             @click=${() => {
             this.moveTo(dayjs(new Date(this.year, this.month, 1)).subtract(1, 'month'));
         }}
-            ><</md-text-button
           >
+            <md-icon>chevron_left</md-icon>
+          </md-icon-button>
           <md-text-button
             @click=${() => {
             this.moveTo(dayjs(new Date(dayjs().year(), dayjs().month(), 1)));
         }}
-            >Today</md-text-button
+            >${todayLabel()}</md-text-button
           >
-          <md-text-button
+          <md-icon-button
+            aria-label=${nextMonthLabel()}
+            title=${nextMonthLabel()}
             @click=${() => {
             this.moveTo(dayjs(new Date(this.year, this.month, 1)).add(1, 'month'));
         }}
-            >></md-text-button
           >
+            <md-icon>chevron_right</md-icon>
+          </md-icon-button>
         </div>
 
         <slot></slot>
@@ -46,14 +88,23 @@ let CalendarMonthly = class CalendarMonthly extends LitElement {
         @pointermove=${this.handlePointerMove}
         @pointerup=${this.handlePointerUp}
       >
-        ${WEEKDAYS.map(date => html ` <li day-of-week>${date}</li> `)}
+        ${weekdayNames().map(name => html ` <li day-of-week>${name}</li> `)}
         ${this.calendar?.map(date => {
             const [from, to] = this.selections || [];
             const { date: thisDate } = date;
             const selected = from && to && thisDate >= from && thisDate <= to;
+            const dayState = this.dayStateMap?.get(thisDate);
             return html `
-            <li ?today=${date.today} ?current-month=${date.thisMonth} ?selected=${selected} .date=${thisDate} date>
-              <span date-label>${date.label}</span>
+            <li
+              ?today=${date.today}
+              ?current-month=${date.thisMonth}
+              ?selected=${selected}
+              day-state=${ifDefined(dayState?.name)}
+              style=${ifDefined(dayState && `--day-state-color:${dayState.color}`)}
+              .date=${thisDate}
+              date
+            >
+              <span date-label>${dayLabel(date.date, !!date.withMonth)}</span>
               <div>
                 ${(this.eventMap?.get(date?.date) || []).map(({ title, color, template }) => template ? template : html `<span event .style="border-color: ${color};">${title}</span>`)}
               </div>
@@ -71,9 +122,25 @@ let CalendarMonthly = class CalendarMonthly extends LitElement {
                 ...currentMonth,
                 ...this.createDaysForNextMonth(this.year, this.month, currentMonth)
             ];
-            this.eventMap = await this.eventProvider?.fetchEventsForCalendar(calendar);
+            /*
+             * Both questions go out together. A host that keeps the day's events and the day's own
+             * state in one place answers both from one round trip, and the two always describe the
+             * same grid - asking them apart would let a month change land between them.
+             */
+            const [eventMap, dayStateMap] = await Promise.all([
+                this.eventProvider?.fetchEventsForCalendar(calendar),
+                this.eventProvider?.fetchDayStatesForCalendar?.(calendar)
+            ]);
+            this.eventMap = eventMap;
+            this.dayStateMap = dayStateMap;
             this.calendar = calendar;
         }
+        /*
+         * After the rows are laid out, not before. A cap only bites once the browser has placed the
+         * children, so this has to run on every render - the grid also reflows when the host swaps
+         * its templates or the window changes width.
+         */
+        this.lastOverflow = reportDayOverflow(this, this.shadowRoot, this.lastOverflow);
     }
     handlePointerDown(event) {
         const target = event.target;
@@ -135,10 +202,11 @@ let CalendarMonthly = class CalendarMonthly extends LitElement {
     createDaysForCurrentMonth(year, month) {
         return [...Array(dayjs(new Date(year, month, 1)).daysInMonth())].map((day, index) => {
             const date = new Date(year, month, index + 1);
-            const label = index == 0 ? dayjs(date).format('MMM D') : dayjs(date).format('D');
+            const withMonth = index == 0;
             return {
                 date,
-                label,
+                label: dayLabel(date, withMonth),
+                withMonth,
                 thisMonth: true,
                 today: isToday(date)
             };
@@ -152,10 +220,11 @@ let CalendarMonthly = class CalendarMonthly extends LitElement {
             .date();
         return [...Array(visibleNumberOfDaysFromPreviousMonth)].map((day, index) => {
             const date = new Date(previousMonth.year(), previousMonth.month(), previousMonthLastMondayDayOfMonth + index);
-            const label = index == 0 ? dayjs(date).format('MMM D') : dayjs(date).format('D');
+            const withMonth = index == 0;
             return {
                 date,
-                label,
+                label: dayLabel(date, withMonth),
+                withMonth,
                 thisMonth: false,
                 today: isToday(date)
             };
@@ -166,10 +235,11 @@ let CalendarMonthly = class CalendarMonthly extends LitElement {
         const visibleNumberOfDaysFromNextMonth = 6 - dayjs(new Date(year, month, currentMonth.length)).weekday();
         return [...Array(visibleNumberOfDaysFromNextMonth)].map((day, index) => {
             const date = new Date(nextMonth.year(), nextMonth.month(), index + 1);
-            const label = index == 0 ? dayjs(date).format('MMM D') : dayjs(date).format('D');
+            const withMonth = index == 0;
             return {
                 date,
-                label,
+                label: dayLabel(date, withMonth),
+                withMonth,
                 thisMonth: false,
                 today: isToday(date)
             };
@@ -191,6 +261,9 @@ __decorate([
 __decorate([
     state()
 ], CalendarMonthly.prototype, "eventMap", void 0);
+__decorate([
+    state()
+], CalendarMonthly.prototype, "dayStateMap", void 0);
 __decorate([
     state()
 ], CalendarMonthly.prototype, "selections", void 0);