@slotted/angular 0.0.0-stage → 0.1.0-beta.0

package/docs/event-calendar.json

@@ -0,0 +1,1202 @@
+{
+  "family": "event-calendar",
+  "ui": "event-calendar",
+  "binding": "angular",
+  "catalog": {
+    "group": "Data display",
+    "summary": "Month, week, day and list views of events."
+  },
+  "axes": {
+    "view": [
+      "month",
+      "week",
+      "day",
+      "list"
+    ],
+    "weekends": [
+      "shown",
+      "hidden"
+    ],
+    "listRange": [
+      "week",
+      "month"
+    ],
+    "compact": [
+      "list",
+      "keep"
+    ],
+    "selectionMode": [
+      "none",
+      "range"
+    ],
+    "weekNumbers": [
+      "off",
+      "on"
+    ],
+    "fixedWeeks": [
+      "off",
+      "on"
+    ],
+    "status": [
+      "confirmed",
+      "tentative",
+      "cancelled"
+    ],
+    "color": [
+      1,
+      2,
+      3,
+      4,
+      5,
+      6,
+      7,
+      8
+    ]
+  },
+  "members": {
+    "eventCalendar": {
+      "nativeElement": "div",
+      "defaults": {
+        "view": "month",
+        "views": [
+          "month",
+          "week",
+          "day",
+          "list"
+        ],
+        "weekends": "shown",
+        "listRange": "week",
+        "compact": "list",
+        "selectionMode": "none",
+        "slotDuration": 30,
+        "dayHours": [
+          0,
+          24
+        ],
+        "scrollTime": "07:00",
+        "maxEvents": 3,
+        "maxColumns": 6,
+        "weekNumbers": false,
+        "fixedWeeks": false,
+        "level": 2,
+        "loading": false,
+        "loadingDelay": 200,
+        "loadingMinDuration": 400,
+        "editable": false
+      },
+      "capabilities": [
+        "current",
+        "visibility",
+        "selection",
+        "open",
+        "content",
+        "loading",
+        "live",
+        "wiring"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "selected",
+        "open",
+        "loading",
+        "dragging"
+      ],
+      "parts": [
+        "root",
+        "header",
+        "title",
+        "navigation",
+        "previous",
+        "today",
+        "next",
+        "views",
+        "filter",
+        "actions",
+        "body",
+        "loader",
+        "error",
+        "month",
+        "weekdays",
+        "week-number-header",
+        "weekday",
+        "week",
+        "week-number",
+        "day",
+        "day-header",
+        "day-number",
+        "day-content",
+        "day-events",
+        "event",
+        "event-time",
+        "event-title",
+        "event-location",
+        "event-meta",
+        "resize-handle",
+        "continuation",
+        "more",
+        "time-grid",
+        "time-head",
+        "columns",
+        "zone",
+        "column-header",
+        "offset-change",
+        "all-day-row",
+        "all-day-label",
+        "all-day-cell",
+        "scroller",
+        "time-row",
+        "gutter",
+        "hour",
+        "column",
+        "off-hours",
+        "now",
+        "offset-line",
+        "selection",
+        "list",
+        "list-day",
+        "list-day-heading",
+        "detail-day",
+        "detail-range",
+        "list-weekday",
+        "list-date",
+        "list-events",
+        "empty"
+      ]
+    }
+  },
+  "docs": {
+    "eventCalendar": {
+      "imports": {
+        "source": "import {\n  SlEventCalendar,\n  SlEventCalendarActions,\n  SlEventCalendarDayContent,\n  SlEventCalendarDetail,\n  SlEventCalendarEmpty,\n  SlEventCalendarError,\n  SlEventCalendarEvent,\n  provideEventCalendarDefaults,\n} from '@slotted/angular/event-calendar';\nimport { wallClockIn } from '@slotted/core/date';",
+        "selector": "[slEventCalendar]",
+        "exportAs": "slEventCalendar"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "div slEventCalendar",
+          "required": true,
+          "purpose": "data-ui=\"event-calendar\", data-view, data-layout (grid or list), data-loading, data-slot-duration. The query container every reflow answers."
+        },
+        {
+          "part": "header",
+          "element": "div",
+          "required": false,
+          "purpose": "Title, navigation, views, filter and actions, in three compositions by width. Absent with header={false}."
+        },
+        {
+          "part": "title",
+          "element": "div role=heading (aria-level = level)",
+          "required": true,
+          "purpose": "The period in view; a polite live region, and the name of the grid."
+        },
+        {
+          "part": "navigation",
+          "element": "div role=group",
+          "required": true,
+          "purpose": "Previous, Today and Next."
+        },
+        {
+          "part": "previous",
+          "element": "button",
+          "required": true,
+          "purpose": "One period back; its name says which period. The chevron turns in RTL."
+        },
+        {
+          "part": "today",
+          "element": "button",
+          "required": true,
+          "purpose": "To the period holding today in timeZone."
+        },
+        {
+          "part": "next",
+          "element": "button",
+          "required": true,
+          "purpose": "One period forward."
+        },
+        {
+          "part": "views",
+          "element": "div holding slSegmentedControl",
+          "required": false,
+          "purpose": "The views offered, with more than one."
+        },
+        {
+          "part": "filter",
+          "element": "button [slMenuTriggerFor] and its sl-menu",
+          "required": false,
+          "purpose": "Checkbox items, one per calendar with its swatch; with two calendars or more. Only its funnel shows under 480 pixels."
+        },
+        {
+          "part": "actions",
+          "element": "div",
+          "required": false,
+          "purpose": "The consumer’s controls: New event, Subscribe."
+        },
+        {
+          "part": "body",
+          "element": "div",
+          "required": true,
+          "purpose": "The grid or the list; aria-busy while loading. Keyboard and pointer selection are handled here."
+        },
+        {
+          "part": "loader",
+          "element": "div holding slProgressBar",
+          "required": true,
+          "purpose": "The one indicator of a wait, on the body’s top edge, after loadingDelay."
+        },
+        {
+          "part": "error",
+          "element": "div",
+          "required": false,
+          "purpose": "The consumer’s error node, above the grid, which stays usable."
+        },
+        {
+          "part": "month",
+          "element": "table role=grid",
+          "required": false,
+          "purpose": "The month, labelled by the title."
+        },
+        {
+          "part": "weekdays",
+          "element": "tr",
+          "required": false,
+          "purpose": "The column headers."
+        },
+        {
+          "part": "week-number-header",
+          "element": "th",
+          "required": false,
+          "purpose": "With weekNumbers; its word is visually hidden."
+        },
+        {
+          "part": "weekday",
+          "element": "th, or span in a column header",
+          "required": false,
+          "purpose": "Short weekday; abbr holds the full name."
+        },
+        {
+          "part": "week",
+          "element": "tr",
+          "required": false,
+          "purpose": "One week; reserves maxEvents lanes and a line for +N."
+        },
+        {
+          "part": "week-number",
+          "element": "th scope=row",
+          "required": false,
+          "purpose": "The ISO week number."
+        },
+        {
+          "part": "day",
+          "element": "td role=gridcell",
+          "required": false,
+          "purpose": "One day; the roving tab stop; data-today, data-outside-month, data-non-working, data-selected, data-date."
+        },
+        {
+          "part": "day-header",
+          "element": "div",
+          "required": false,
+          "purpose": "The day’s number and its content."
+        },
+        {
+          "part": "day-number",
+          "element": "button",
+          "required": false,
+          "purpose": "Opens the day view on that date; named by the full date."
+        },
+        {
+          "part": "day-content",
+          "element": "div",
+          "required": false,
+          "purpose": "ng-template[slEventCalendarDayContent]: a price, a count of free slots, who is on call."
+        },
+        {
+          "part": "day-events",
+          "element": "div",
+          "required": false,
+          "purpose": "The lanes of a day."
+        },
+        {
+          "part": "event",
+          "element": "a with href, button without",
+          "required": true,
+          "purpose": "One occurrence: data-key, data-color, data-status, data-bar, data-open, the continuation and clipping flags. Its content is its name."
+        },
+        {
+          "part": "event-time",
+          "element": "span",
+          "required": false,
+          "purpose": "The start, or the range, in the locale’s clock."
+        },
+        {
+          "part": "event-title",
+          "element": "span",
+          "required": true,
+          "purpose": "Truncated with an ellipsis, never removed."
+        },
+        {
+          "part": "event-location",
+          "element": "span",
+          "required": false,
+          "purpose": "In a tall block and in the list."
+        },
+        {
+          "part": "event-meta",
+          "element": "span, visually hidden",
+          "required": true,
+          "purpose": "The full range, the calendar, the status, repeats."
+        },
+        {
+          "part": "resize-handle",
+          "element": "span aria-hidden",
+          "required": false,
+          "purpose": "The end an edit pulls: the bottom of a block, the inline end of a bar. Its grip shows on hover and focus."
+        },
+        {
+          "part": "continuation",
+          "element": "span, visually hidden",
+          "required": false,
+          "purpose": "A multi-day bar crossing this day after its first."
+        },
+        {
+          "part": "more",
+          "element": "button",
+          "required": false,
+          "purpose": "+N: opens a popover with every event of the day."
+        },
+        {
+          "part": "time-grid",
+          "element": "div role=grid",
+          "required": false,
+          "purpose": "Week and day, labelled by the title."
+        },
+        {
+          "part": "time-head",
+          "element": "div role=rowgroup",
+          "required": false,
+          "purpose": "The rows that do not scroll."
+        },
+        {
+          "part": "columns",
+          "element": "div role=row",
+          "required": false,
+          "purpose": "The column headers."
+        },
+        {
+          "part": "zone",
+          "element": "div role=columnheader",
+          "required": false,
+          "purpose": "The zone’s offset, GMT-3."
+        },
+        {
+          "part": "column-header",
+          "element": "div role=columnheader",
+          "required": false,
+          "purpose": "Weekday, date and content; a tab stop in the header row."
+        },
+        {
+          "part": "offset-change",
+          "element": "span role=note",
+          "required": false,
+          "purpose": "The day the clocks move: “−1 h at 2:00 AM”, the full sentence as its name."
+        },
+        {
+          "part": "all-day-row",
+          "element": "div role=row",
+          "required": false,
+          "purpose": "The all-day lanes."
+        },
+        {
+          "part": "all-day-label",
+          "element": "div role=rowheader",
+          "required": false,
+          "purpose": "All day."
+        },
+        {
+          "part": "all-day-cell",
+          "element": "div role=gridcell",
+          "required": false,
+          "purpose": "One day’s all-day and multi-day bars."
+        },
+        {
+          "part": "scroller",
+          "element": "div role=rowgroup",
+          "required": false,
+          "purpose": "Scrolls the hours; opens on scrollTime."
+        },
+        {
+          "part": "time-row",
+          "element": "div role=row",
+          "required": false,
+          "purpose": "The row of hours."
+        },
+        {
+          "part": "gutter",
+          "element": "div role=rowheader",
+          "required": false,
+          "purpose": "Hour labels, aria-hidden; its name says timed events."
+        },
+        {
+          "part": "hour",
+          "element": "span",
+          "required": false,
+          "purpose": "One hour label, on the line it names."
+        },
+        {
+          "part": "column",
+          "element": "div role=gridcell",
+          "required": false,
+          "purpose": "One day’s hours: events positioned by minute, column and span."
+        },
+        {
+          "part": "off-hours",
+          "element": "div aria-hidden",
+          "required": false,
+          "purpose": "A stretch outside workingHours."
+        },
+        {
+          "part": "now",
+          "element": "div aria-hidden",
+          "required": false,
+          "purpose": "The current time in timeZone, ticked each minute."
+        },
+        {
+          "part": "offset-line",
+          "element": "div aria-hidden",
+          "required": false,
+          "purpose": "The minute the zone’s offset changes."
+        },
+        {
+          "part": "selection",
+          "element": "div aria-hidden",
+          "required": false,
+          "purpose": "The chosen stretch of a column, with its range written in it."
+        },
+        {
+          "part": "list",
+          "element": "div",
+          "required": false,
+          "purpose": "The list layout, and the month and week below 600 pixels."
+        },
+        {
+          "part": "list-day",
+          "element": "section",
+          "required": false,
+          "purpose": "One day holding events, labelled by its heading."
+        },
+        {
+          "part": "list-day-heading",
+          "element": "div role=heading (aria-level = level + 1)",
+          "required": false,
+          "purpose": "The day, in its two parts below."
+        },
+        {
+          "part": "detail-day",
+          "element": "span",
+          "required": false,
+          "purpose": "The day of the open event, in its detail’s description; absent when the range names its days."
+        },
+        {
+          "part": "detail-range",
+          "element": "span",
+          "required": false,
+          "purpose": "Its hours or its days; it wraps after the day and never inside itself."
+        },
+        {
+          "part": "list-weekday",
+          "element": "span",
+          "required": false,
+          "purpose": "The weekday, small, over the date."
+        },
+        {
+          "part": "list-date",
+          "element": "span",
+          "required": false,
+          "purpose": "The date without its weekday; one line of its own, never broken inside itself."
+        },
+        {
+          "part": "list-events",
+          "element": "ul role=list",
+          "required": false,
+          "purpose": "The day’s events in order."
+        },
+        {
+          "part": "empty",
+          "element": "div",
+          "required": false,
+          "purpose": "The list’s empty sentence and the consumer’s empty node."
+        }
+      ],
+      "api": [
+        {
+          "name": "events",
+          "type": "readonly CalendarEvent[]",
+          "defaultValue": "[]",
+          "appliesTo": "slEventCalendar",
+          "description": "The consumer’s events; a start without a time is all-day"
+        },
+        {
+          "name": "calendars",
+          "type": "readonly EventCalendarCalendar[]",
+          "defaultValue": "[]",
+          "appliesTo": "slEventCalendar",
+          "description": "Key, label and an optional colour slot 1–8"
+        },
+        {
+          "name": "date",
+          "type": "model<PlainDate | undefined>",
+          "defaultValue": "—",
+          "appliesTo": "slEventCalendar",
+          "description": "The day the calendar is on; [(date)] two-way"
+        },
+        {
+          "name": "defaultDate",
+          "type": "PlainDate",
+          "defaultValue": "today in timeZone",
+          "appliesTo": "slEventCalendar",
+          "description": "Read once; pass it when rendering on a server"
+        },
+        {
+          "name": "view",
+          "type": "model<EventCalendarView | undefined>",
+          "defaultValue": "month",
+          "appliesTo": "slEventCalendar",
+          "description": "[(view)] two-way; unbound opens on the first of views"
+        },
+        {
+          "name": "defaultView",
+          "type": "EventCalendarView",
+          "defaultValue": "views[0]",
+          "appliesTo": "slEventCalendar",
+          "description": "Read once"
+        },
+        {
+          "name": "views",
+          "type": "readonly EventCalendarView[]",
+          "defaultValue": "month,week,day,list",
+          "appliesTo": "slEventCalendar",
+          "description": "The switcher, in order"
+        },
+        {
+          "name": "visibleCalendars",
+          "type": "model<readonly string[] | undefined>",
+          "defaultValue": "—",
+          "appliesTo": "slEventCalendar",
+          "description": "Keys drawn; [(visibleCalendars)] two-way"
+        },
+        {
+          "name": "defaultVisibleCalendars",
+          "type": "readonly string[]",
+          "defaultValue": "every calendar",
+          "appliesTo": "slEventCalendar",
+          "description": "Read once"
+        },
+        {
+          "name": "selectionMode",
+          "type": "'none' | 'range'",
+          "defaultValue": "none",
+          "appliesTo": "slEventCalendar",
+          "description": "Whether empty time can be chosen"
+        },
+        {
+          "name": "selection",
+          "type": "model<EventCalendarSelection | null | undefined>",
+          "defaultValue": "—",
+          "appliesTo": "slEventCalendar",
+          "description": "The chosen stretch; [(selection)] two-way"
+        },
+        {
+          "name": "defaultSelection",
+          "type": "EventCalendarSelection | null",
+          "defaultValue": "null",
+          "appliesTo": "slEventCalendar",
+          "description": "Read once"
+        },
+        {
+          "name": "openEvent",
+          "type": "model<string | null | undefined>",
+          "defaultValue": "—",
+          "appliesTo": "slEventCalendar",
+          "description": "The open occurrence’s key; [(openEvent)] two-way"
+        },
+        {
+          "name": "defaultOpenEvent",
+          "type": "string | null",
+          "defaultValue": "null",
+          "appliesTo": "slEventCalendar",
+          "description": "Read once"
+        },
+        {
+          "name": "filter",
+          "type": "(occurrence) => boolean",
+          "defaultValue": "—",
+          "appliesTo": "slEventCalendar",
+          "description": "Keeps an occurrence when true"
+        },
+        {
+          "name": "editable",
+          "type": "boolean | (occurrence) => boolean",
+          "defaultValue": "false",
+          "appliesTo": "slEventCalendar",
+          "description": "Events move and resize, by dragging or by Alt and the arrows"
+        },
+        {
+          "name": "canDrop",
+          "type": "(change) => boolean",
+          "defaultValue": "—",
+          "appliesTo": "slEventCalendar",
+          "description": "Whether a destination is allowed, asked with the change eventChangeRequest would carry"
+        },
+        {
+          "name": "workingHours",
+          "type": "readonly WorkingHours[]",
+          "defaultValue": "[]",
+          "appliesTo": "slEventCalendar",
+          "description": "Shades the time outside them"
+        },
+        {
+          "name": "header",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "slEventCalendar",
+          "description": "false draws none, for a calendar driven from outside"
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slEventCalendar",
+          "description": "Events are coming; the grid stays"
+        },
+        {
+          "name": "loadingDelay",
+          "type": "number",
+          "defaultValue": "200",
+          "appliesTo": "slEventCalendar, provideEventCalendarDefaults",
+          "description": "Milliseconds before the indicator shows"
+        },
+        {
+          "name": "loadingMinDuration",
+          "type": "number",
+          "defaultValue": "400",
+          "appliesTo": "slEventCalendar, provideEventCalendarDefaults",
+          "description": "Milliseconds it holds once shown"
+        },
+        {
+          "name": "level",
+          "type": "number",
+          "defaultValue": "2",
+          "appliesTo": "slEventCalendar",
+          "description": "The title’s heading level; list days are one below"
+        },
+        {
+          "name": "compact",
+          "type": "'list' | 'keep'",
+          "defaultValue": "list",
+          "appliesTo": "slEventCalendar, provideEventCalendarDefaults",
+          "description": "Month and week below 600 pixels"
+        },
+        {
+          "name": "dayHours",
+          "type": "readonly [number, number]",
+          "defaultValue": "0,24",
+          "appliesTo": "slEventCalendar, provideEventCalendarDefaults",
+          "description": "The first visible hour and the hour the grid stops at"
+        },
+        {
+          "name": "scrollTime",
+          "type": "PlainTime",
+          "defaultValue": "07:00",
+          "appliesTo": "slEventCalendar, provideEventCalendarDefaults",
+          "description": "Where the hours open"
+        },
+        {
+          "name": "slotDuration",
+          "type": "number",
+          "defaultValue": "30",
+          "appliesTo": "slEventCalendar, provideEventCalendarDefaults",
+          "description": "Minutes between rules, 5 to 120, and the step of a selection, a drag and Alt with an arrow"
+        },
+        {
+          "name": "maxEvents",
+          "type": "number",
+          "defaultValue": "3",
+          "appliesTo": "slEventCalendar, provideEventCalendarDefaults",
+          "description": "Lanes a month day draws before +N"
+        },
+        {
+          "name": "maxColumns",
+          "type": "number",
+          "defaultValue": "6",
+          "appliesTo": "slEventCalendar, provideEventCalendarDefaults",
+          "description": "Columns a cluster takes before +N, never more than fit at 56 pixels each"
+        },
+        {
+          "name": "weekends",
+          "type": "'shown' | 'hidden'",
+          "defaultValue": "shown",
+          "appliesTo": "slEventCalendar, provideEventCalendarDefaults",
+          "description": "A working week"
+        },
+        {
+          "name": "weekNumbers",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slEventCalendar, provideEventCalendarDefaults",
+          "description": "ISO week numbers in the month"
+        },
+        {
+          "name": "fixedWeeks",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slEventCalendar, provideEventCalendarDefaults",
+          "description": "Six rows in every month"
+        },
+        {
+          "name": "listRange",
+          "type": "'week' | 'month'",
+          "defaultValue": "week",
+          "appliesTo": "slEventCalendar, provideEventCalendarDefaults",
+          "description": "The period of the list view"
+        },
+        {
+          "name": "locale",
+          "type": "string",
+          "defaultValue": "provideSlotted",
+          "appliesTo": "slEventCalendar",
+          "description": "BCP 47; decides the first day and the clock. Unset, the language in force decides"
+        },
+        {
+          "name": "timeZone",
+          "type": "string",
+          "defaultValue": "runtime",
+          "appliesTo": "slEventCalendar, provideEventCalendarDefaults",
+          "description": "Today, now and the gutter’s label"
+        },
+        {
+          "name": "firstDayOfWeek",
+          "type": "number",
+          "defaultValue": "locale",
+          "appliesTo": "slEventCalendar, provideEventCalendarDefaults",
+          "description": "0 is Sunday"
+        },
+        {
+          "name": "hourCycle",
+          "type": "'h12' | 'h23'",
+          "defaultValue": "locale",
+          "appliesTo": "slEventCalendar, provideEventCalendarDefaults",
+          "description": "The clock"
+        },
+        {
+          "name": "messages",
+          "type": "Partial<EventCalendarMessages>",
+          "defaultValue": "—",
+          "appliesTo": "slEventCalendar",
+          "description": "Words laid over the language in force, key by key; a group (previous, next, view, empty) is laid over entry by entry"
+        },
+        {
+          "name": "ng-template[slEventCalendarEvent]",
+          "type": "TemplateRef<{ $implicit, layout, date, time }>",
+          "defaultValue": "—",
+          "appliesTo": "content",
+          "description": "Replaces an event’s content, not its element"
+        },
+        {
+          "name": "ng-template[slEventCalendarDetail]",
+          "type": "TemplateRef<{ $implicit, close }>",
+          "defaultValue": "—",
+          "appliesTo": "content",
+          "description": "Given, the family hosts the detail popover"
+        },
+        {
+          "name": "ng-template[slEventCalendarContextMenu]",
+          "type": "TemplateRef<{ $implicit: EventCalendarContextTarget }>",
+          "defaultValue": "—",
+          "appliesTo": "content",
+          "description": "Given, the body is a context-menu target; the target is { kind: \"event\", occurrence } or { kind: \"slot\", slot }"
+        },
+        {
+          "name": "[slEventCalendarContextMenuFor]",
+          "type": "(target) => boolean",
+          "defaultValue": "every target",
+          "appliesTo": "content",
+          "description": "The targets that have a menu; the others keep the browser’s own"
+        },
+        {
+          "name": "ng-template[slEventCalendarDayContent]",
+          "type": "TemplateRef<{ $implicit: PlainDate, view }>",
+          "defaultValue": "—",
+          "appliesTo": "content",
+          "description": "Writes into every day header"
+        },
+        {
+          "name": "[slEventCalendarActions]",
+          "type": "element",
+          "defaultValue": "—",
+          "appliesTo": "content",
+          "description": "Projected at the end of the header"
+        },
+        {
+          "name": "[slEventCalendarEmpty]",
+          "type": "element",
+          "defaultValue": "—",
+          "appliesTo": "content",
+          "description": "Projected after the list’s empty sentence"
+        },
+        {
+          "name": "[slEventCalendarError]",
+          "type": "element",
+          "defaultValue": "—",
+          "appliesTo": "content",
+          "description": "Projected above the grid"
+        },
+        {
+          "name": "exportAs",
+          "type": "slEventCalendar",
+          "defaultValue": "—",
+          "appliesTo": "slEventCalendar",
+          "description": "focus(), focusDate(date), focusEvent(key), scrollToTime(time), currentView()"
+        }
+      ],
+      "composition": [],
+      "events": [
+        {
+          "name": "dateRequest",
+          "payload": "ChangeRequest<PlainDate>",
+          "when": "Before the day moves: Previous, Next, Today, a day number (pointer, keyboard), an arrow or Page key (keyboard), focusDate (programmatic). cancel() refuses it; [(date)] then stays."
+        },
+        {
+          "name": "viewRequest",
+          "payload": "ChangeRequest<EventCalendarView>",
+          "when": "Before the view moves: the switcher, or a day number drilling into the day."
+        },
+        {
+          "name": "visibleCalendarsRequest",
+          "payload": "ChangeRequest<readonly string[]>",
+          "when": "Before a calendar is shown or hidden from the filter menu (pointer, keyboard)."
+        },
+        {
+          "name": "selectionRequest",
+          "payload": "ChangeRequest<EventCalendarSelection | null>",
+          "when": "Before the chosen stretch moves: a drag (pointer), Space or Shift and the arrows (keyboard), Escape (escape)."
+        },
+        {
+          "name": "openEventRequest",
+          "payload": "ChangeRequest<string | null>",
+          "when": "Before an event opens or closes: a press (pointer, keyboard), the close button (dismiss), Escape (escape), a press outside (outsidePress), close() (programmatic)."
+        },
+        {
+          "name": "eventChangeRequest",
+          "payload": "ChangeRequest<{ key, event, occurrence, recurring, kind, start, end }>",
+          "when": "Before an event moves or its end does: a drag released (pointer), Alt or Alt+Shift with an arrow (keyboard). start and end are in the kind the event holds. Not a model: the application answers by changing events."
+        },
+        {
+          "name": "rangeChange",
+          "payload": "{ start: PlainDate; end: PlainDate; view }",
+          "when": "After the period in view changes, the first render included. A fact to fetch by."
+        }
+      ],
+      "accessibility": [
+        "No Authoring Practices pattern covers a calendar of events. The month and the week are the layout grid of the Grid pattern with the day as its cell: one cell holds the tab stop, arrows move the day, Enter goes into the day’s widgets and Escape or F2 comes back out.",
+        "Every event is named by its own content and a visually hidden continuation: the whole range, the calendar, the status and whether it repeats. Position and colour state nothing the words do not; a multi-day bar is heard as continuing on each day it crosses.",
+        "The title is a heading and a polite live region, so paging by key announces the new period; a chosen stretch is announced once through the shared live announcer, and a wait once when its indicator appears.",
+        "The title and the list days are role=\"heading\" with aria-level from the level input, because an Angular template cannot choose an element’s tag at run time; the React binding writes h2 to h6. Both expose the same heading to a screen reader.",
+        "Every move a pointer makes has a key: with an editable event focused, Alt and the arrows move it a slot or a day, and Alt with Shift moves its end. The request is announced once with the title and the new range, and focus stays on the event where it lands. A destination canDrop refuses is passed over for the next allowed one; with none in reach the event stays and the refusal is announced.",
+        "With a context menu template, Shift+F10 and the ContextMenu key open the menu on the focused event, or on the selection or the day of the focused cell; the menu is named by the event’s title or the stretch in words, and closing it returns focus to where it was.",
+        "No single-letter shortcut is bound: a calendar lives in a page with shortcuts of its own, and a bare letter in a grid collides with a screen reader’s quick navigation."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-border-strong",
+    "--slotted-border-subtle",
+    "--slotted-border-width-medium",
+    "--slotted-border-width-thick",
+    "--slotted-border-width-thin",
+    "--slotted-control-border-color",
+    "--slotted-control-font-family",
+    "--slotted-control-font-size-md",
+    "--slotted-control-font-size-sm",
+    "--slotted-control-gap-md",
+    "--slotted-control-height-md",
+    "--slotted-control-height-sm",
+    "--slotted-control-icon-size-md",
+    "--slotted-control-inner-size-lg",
+    "--slotted-control-inner-size-md",
+    "--slotted-control-inner-size-sm",
+    "--slotted-control-padding-inline-md",
+    "--slotted-control-radius",
+    "--slotted-control-shadow",
+    "--slotted-control-surface",
+    "--slotted-control-transition-duration",
+    "--slotted-control-transition-easing",
+    "--slotted-data-1",
+    "--slotted-data-2",
+    "--slotted-data-3",
+    "--slotted-data-4",
+    "--slotted-data-5",
+    "--slotted-data-6",
+    "--slotted-data-7",
+    "--slotted-data-8",
+    "--slotted-duration-instant",
+    "--slotted-duration-short",
+    "--slotted-easing-enter",
+    "--slotted-easing-exit",
+    "--slotted-event-calendar-background",
+    "--slotted-event-calendar-event-radius",
+    "--slotted-event-calendar-hour-size",
+    "--slotted-event-calendar-now-color",
+    "--slotted-event-calendar-off-background",
+    "--slotted-event-calendar-rule-color",
+    "--slotted-event-calendar-selection-background",
+    "--slotted-event-calendar-selection-border-color",
+    "--slotted-event-calendar-today-background",
+    "--slotted-event-calendar-today-color",
+    "--slotted-focus-ring-color",
+    "--slotted-focus-ring-offset",
+    "--slotted-focus-ring-width",
+    "--slotted-font-family-heading",
+    "--slotted-font-family-sans",
+    "--slotted-font-size-lg",
+    "--slotted-font-size-md",
+    "--slotted-font-size-sm",
+    "--slotted-font-size-xs",
+    "--slotted-font-weight-medium",
+    "--slotted-font-weight-regular",
+    "--slotted-font-weight-semibold",
+    "--slotted-line-height-lg",
+    "--slotted-line-height-sm",
+    "--slotted-line-height-xs",
+    "--slotted-radius-full",
+    "--slotted-radius-sm",
+    "--slotted-shadow-md",
+    "--slotted-shadow-sm",
+    "--slotted-space-1",
+    "--slotted-space-10",
+    "--slotted-space-11",
+    "--slotted-space-12",
+    "--slotted-space-2",
+    "--slotted-space-3",
+    "--slotted-space-4",
+    "--slotted-space-5",
+    "--slotted-space-6",
+    "--slotted-space-9",
+    "--slotted-surface",
+    "--slotted-target-min",
+    "--slotted-text",
+    "--slotted-text-muted",
+    "--slotted-tone-accent-border",
+    "--slotted-tone-accent-on-solid",
+    "--slotted-tone-accent-solid",
+    "--slotted-tone-accent-surface",
+    "--slotted-tone-accent-text",
+    "--slotted-tone-danger-border",
+    "--slotted-tone-secondary-subtle-active",
+    "--slotted-tone-secondary-subtle-hover"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "The studio’s calendar",
+      "note": "Every model unbound: switch views, page, filter the calendars, press an event to open its detail and drag across empty hours to choose a stretch. The line under it says what the calendar asked for.",
+      "language": "html",
+      "source": "<div\n  slEventCalendar\n  [calendars]=\"calendars\"\n  [events]=\"events\"\n  selectionMode=\"range\"\n  timeZone=\"America/Sao_Paulo\"\n  (rangeChange)=\"fetch($event)\"\n>\n  <ng-template slEventCalendarDetail let-occurrence\n    ><app-event-summary [occurrence]=\"occurrence\"\n  /></ng-template>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "views",
+      "title": "Which views, in what order",
+      "note": "[views] sets the switcher and its order; the first is the one an unbound calendar opens on. A booking page that only lists and a planner without a list are the same family.",
+      "language": "html",
+      "source": "<div slEventCalendar [events]=\"events\" [views]=\"['week', 'day', 'month']\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "month",
+      "title": "The month",
+      "note": "All-day and multi-day events are bars; a meeting of one day is a dot, a time and a title. A bar running into next week stops in its cell with a chevron; the week number, the outside days and the continuous run of chosen days all show here.",
+      "language": "html",
+      "source": "<div slEventCalendar [events]=\"events\" fixedWeeks weekNumbers></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "week",
+      "title": "The week",
+      "note": "Blocks stand off the rules and off each other. The all-day lane holds bars across days, today’s column carries the now line, and the hours open on scrollTime. Hide the weekend for a working week.",
+      "language": "html",
+      "source": "<div\n  slEventCalendar\n  [events]=\"events\"\n  [dayHours]=\"[8, 20]\"\n  defaultView=\"week\"\n  weekends=\"hidden\"\n></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "day",
+      "title": "The day",
+      "note": "One column with room for the location under each title. The previous and next buttons step one day, and skip Saturday and Sunday when the weekend is hidden.",
+      "language": "html",
+      "source": "<div slEventCalendar [events]=\"events\" defaultView=\"day\" [slotDuration]=\"15\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "list",
+      "title": "The list",
+      "note": "A heading per day that holds an event and nothing for the days that hold none. Every event is in the tab order; the time has a column of its own so the titles align down the page.",
+      "language": "html",
+      "source": "<div slEventCalendar [events]=\"events\" defaultView=\"list\" listRange=\"month\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "all-day",
+      "title": "All-day, multi-day and past midnight",
+      "note": "A start without a time is a whole day, and its end is the last day, inclusive. The release window runs from 10 PM to 2 AM: one block per day in the week, one bar in the month labelled with its start.",
+      "language": "html",
+      "source": "<div slEventCalendar [events]=\"[conference, releaseWindow]\" defaultView=\"week\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "overlap",
+      "title": "Overlapping events",
+      "note": "Events that overlap share the day in columns, each spanning the free columns to its right; no text is covered. Five hiring panels at the same hour draw two columns and a +3 that opens the day.",
+      "language": "html",
+      "source": "<div slEventCalendar [events]=\"events\" defaultView=\"week\" [maxColumns]=\"4\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "recurrence",
+      "title": "Recurrence, exceptions and a moved occurrence",
+      "note": "The standup repeats every weekday and skips Labor Day; planning repeats every other Monday, and the one on the 21st was moved to Tuesday afternoon. A rule outside the subset degrades to a single occurrence.",
+      "language": "html",
+      "source": "<div slEventCalendar [events]=\"[standup, movedPlanning]\" defaultView=\"week\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "time-zone",
+      "title": "Time zones and the day the clocks change",
+      "note": "The calendar draws wall-clock time. The application converts its instants once with wallClockIn; timeZone decides today, the now line and the gutter’s label. On 1 November in New York the header says the clocks go back at 2 AM and the column marks the minute.",
+      "language": "html",
+      "source": "<div slEventCalendar [events]=\"shifts\" [timeZone]=\"zone\" defaultView=\"day\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "calendars",
+      "title": "Calendars and their colours",
+      "note": "Each calendar takes a slot of the data palette in order and never cycles. The filter is a menu of checkboxes; a predicate composes a search on top. Colour is identity only: the calendar is also in every event’s name.",
+      "language": "html",
+      "source": "<div\n  slEventCalendar\n  [calendars]=\"calendars\"\n  [events]=\"events\"\n  [(visibleCalendars)]=\"visible\"\n  [filter]=\"matches\"\n>\n  <div slTextField slEventCalendarActions size=\"sm\">\n    <input slTextFieldInput type=\"search\" aria-label=\"Search events\" (input)=\"search($event)\" />\n  </div>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "working-hours",
+      "title": "Working hours",
+      "note": "The hours outside workingHours are shaded, and a day no entry names is shaded whole. Shading informs and does not refuse: whether a slot outside hours can be booked is the application’s rule.",
+      "language": "html",
+      "source": "<div slEventCalendar [events]=\"appointments\" [workingHours]=\"shifts\" defaultView=\"week\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "day-content",
+      "title": "What a domain writes on a day",
+      "note": "An ng-template with slEventCalendarDayContent writes into every day header: who is on call here, a nightly price on a booking page, free slots in a clinic. It sits at the end of the header line in the month and under the date in the week.",
+      "language": "html",
+      "source": "<div slEventCalendar [events]=\"events\">\n  <ng-template slEventCalendarDayContent let-date>{{ onCall(date) }}</ng-template>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "detail",
+      "title": "Opening an event",
+      "note": "With an ng-template carrying slEventCalendarDetail the family opens a popover anchored to the event and gives it back focus on close. Without one, (openEventRequest) asks and the application opens its own drawer; the open event keeps aria-expanded either way.",
+      "language": "html",
+      "source": "<div slEventCalendar [events]=\"events\">\n  <ng-template slEventCalendarDetail let-occurrence let-close=\"close\">\n    <app-event-summary [occurrence]=\"occurrence\" (edit)=\"close()\" />\n  </ng-template>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "context-menu",
+      "title": "Commands on a right click",
+      "note": "With an ng-template carrying slEventCalendarContextMenu a secondary click, a long press or Shift+F10 opens the context-menu family on what was pointed at: an event, the selection when the pointer is inside it, one step of the hours, or a day. The event is drawn solid and a stretch as the selection being made; slEventCalendarContextMenuFor leaves the browser’s own menu on the targets it refuses.",
+      "language": "html",
+      "source": "<div slEventCalendar [events]=\"events\">\n  <ng-template slEventCalendarContextMenu let-target>\n    @if (target.kind === 'event') {\n      <button slMenuItem (select)=\"duplicate(target.occurrence)\">Duplicate</button>\n      <hr slMenuSeparator />\n      <button slMenuItem tone=\"danger\" (select)=\"remove(target.occurrence)\">Delete</button>\n    } @else {\n      <button slMenuItem (select)=\"openCreateDialog(target.slot)\">New event</button>\n    }\n  </ng-template>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "selection",
+      "title": "Choosing a stretch to create an event",
+      "note": "Drag across empty hours or days, or press Space on a day and extend with Shift and the arrows. The calendar asks with the stretch and a reason; the application opens its form and clears the selection when done.",
+      "language": "html",
+      "source": "<div\n  slEventCalendar\n  [events]=\"events\"\n  selectionMode=\"range\"\n  [(selection)]=\"selection\"\n  (selectionRequest)=\"create($event)\"\n></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "editing",
+      "title": "Moving and resizing",
+      "note": "With editable, a press that travels four pixels picks an event up and lays it out where it would land; its end pulls to resize. Release asks with eventChangeRequest; Escape puts it back. Alt with the arrows does the same from the keyboard. A series asks with the occurrence’s own date. canDrop is asked about every destination with the same change: a refused one is drawn with a dashed danger edge, letting go there asks nothing, and Alt with an arrow passes over it to the next allowed one.",
+      "language": "html",
+      "source": "<div\n  slEventCalendar\n  editable\n  [canDrop]=\"notAtWeekends\"\n  [events]=\"events()\"\n  (eventChangeRequest)=\"move($event.value)\"\n></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "loading",
+      "title": "Loading a new range",
+      "note": "The grid is structure the date decides, so it stays painted; one bar on its top edge says events are coming, after loadingDelay, and holds for loadingMinDuration. Events already drawn stay until the new ones arrive.",
+      "language": "html",
+      "source": "<div\n  slEventCalendar\n  [events]=\"events()\"\n  [loading]=\"fetching()\"\n  (rangeChange)=\"range.set($event)\"\n></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "empty",
+      "title": "Nothing this week",
+      "note": "The list says so in a sentence and carries the application’s next step. The grid needs no sentence: an empty month is visibly empty.",
+      "language": "html",
+      "source": "<div slEventCalendar [events]=\"[]\" defaultView=\"list\">\n  <button slButton slEventCalendarEmpty type=\"button\">New event</button>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "error",
+      "title": "A range that failed",
+      "note": "The error sits above the grid with the application’s retry; paging, the views and the filter keep working, because the failure is the data’s, not the calendar’s.",
+      "language": "html",
+      "source": "<div slEventCalendar [events]=\"events\">\n  <div slAlert slEventCalendarError tone=\"danger\">The events could not be loaded.</div>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "compact",
+      "title": "On a phone",
+      "note": "Below 600 pixels the month and the week draw as a list of the same days and the view does not change. With compact=\"keep\" the grid stays: events become marks of colour, the day is the target, and each keeps its name. At that width the “+N” panel and the detail are sheets from the bottom edge rather than popovers.",
+      "language": "html",
+      "source": "<div slEventCalendar [events]=\"events\" compact=\"keep\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "custom-event",
+      "title": "Drawing the inside of an event",
+      "note": "An ng-template with slEventCalendarEvent replaces what an event shows and keeps the element, its name, its focus and its geometry. The context says where it is drawn — lane, bar, block or list — and the time the family would write.",
+      "language": "html",
+      "source": "<div slEventCalendar [events]=\"events\" defaultView=\"day\">\n  <ng-template slEventCalendarEvent let-occurrence let-time=\"time\">\n    <span data-part=\"event-title\">{{ occurrence.event.title }}</span>\n    <span data-part=\"event-time\">{{ time }}</span>\n    <span data-part=\"event-location\">{{ occurrence.event.owner }}</span>\n  </ng-template>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "locale",
+      "title": "Locale, clock and direction",
+      "note": "Portuguese starts the week on Sunday and writes a 24-hour clock; Hebrew mirrors the grid, the chevrons and the bars, and an English title on a Hebrew page keeps its own direction.",
+      "language": "html",
+      "source": "<div slEventCalendar [events]=\"events\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "density",
+      "title": "Density",
+      "note": "An hour is two small controls tall — 60, 52 and 48 pixels — and a lane is the inside of one, so dense shrinks the grid the way it shrinks the controls around it. Switch the toolbar to compare.",
+      "language": "html",
+      "source": "<div data-slotted-density=\"dense\">\n  <div slEventCalendar [events]=\"events\" defaultView=\"week\"></div>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "keyboard",
+      "title": "Keyboard",
+      "note": "Tab reaches one day. Arrows move the day, Page Up and Down the period, Home and End the week; in the week Up and Down move between the header, all-day and hours rows. Enter goes into a day, Up and Down walk its events, Escape comes back.",
+      "language": "html",
+      "source": "<div slEventCalendar #calendar=\"slEventCalendar\" [events]=\"events\"></div>\n<button type=\"button\" (click)=\"calendar.focusDate(firstOfOctober)\">Focus 1 October</button>\n",
+      "verdict": "excerpt"
+    }
+  ]
+}