@slotted/angular 0.1.0-beta.1 → 0.1.0-beta.11

package/docs/entity-picker.json

@@ -176,8 +176,8 @@
   "docs": {
     "entity-picker": {
       "imports": {
-        "source": "import { SlEntityPicker, SlEntityPickerChip, SlEntityPickerOption, provideEntityPickerDefaults } from '@slotted/angular/entity-picker';",
-        "selector": "sl-entity-picker, ng-template[slEntityPickerOption], ng-template[slEntityPickerChip]",
+        "source": "import { SlEntityPicker, SlEntityPickerChip, SlEntityPickerOption, SlEntityPickerOptionDescription, SlEntityPickerOptionLabel, SlEntityPickerOptionMedia, SlEntityPickerOptionMeta, provideEntityPickerDefaults } from '@slotted/angular/entity-picker';",
+        "selector": "sl-entity-picker, ng-template[slEntityPickerOption], ng-template[slEntityPickerChip], [slEntityPickerOptionLabel], [slEntityPickerOptionDescription], [slEntityPickerOptionMeta], [slEntityPickerOptionMedia]",
         "exportAs": "slEntityPicker"
       },
       "anatomy": [
@@ -610,12 +610,26 @@
           "appliesTo": "sl-entity-picker",
           "description": "The name when no field labels it"
         },
+        {
+          "name": "virtualize",
+          "type": "boolean",
+          "defaultValue": "above 100 options without headings",
+          "appliesTo": "sl-entity-picker",
+          "description": "Draws only the options in view and a few either side; the keyboard, aria-activedescendant and scrolling to the highlight reach every option. A list with section headings is drawn whole"
+        },
+        {
+          "name": "estimatedRowHeight",
+          "type": "number",
+          "defaultValue": "48",
+          "appliesTo": "sl-entity-picker",
+          "description": "The height an option is counted at until it has been drawn and measured"
+        },
         {
           "name": "slEntityPickerOption",
           "type": "ng-template, context { $implicit, query, selected, current, disabled }",
           "defaultValue": "—",
           "appliesTo": "option content",
-          "description": "The content of an option"
+          "description": "The content of an option, written with slEntityPickerOptionLabel, slEntityPickerOptionDescription, slEntityPickerOptionMeta and slEntityPickerOptionMedia, which place it in the row. With media=\"none\" an option draws its own face in slEntityPickerOptionMedia"
         },
         {
           "name": "slEntityPickerChip",
@@ -687,6 +701,7 @@
     "--slotted-border-width-thin",
     "--slotted-control-border-color",
     "--slotted-control-border-width",
+    "--slotted-control-focus-ring-offset",
     "--slotted-control-font-family",
     "--slotted-control-font-size-lg",
     "--slotted-control-font-size-md",
@@ -939,7 +954,7 @@
       "title": "Composition",
       "note": "An option template adds the team after the address; a chip template adds the role; provideSlotted says every sentence in Portuguese once.",
       "language": "html",
-      "source": "<sl-entity-picker aria-label=\"Reviewers\" selectionMode=\"multiple\" [source]=\"directory\">\n  <ng-template slEntityPickerOption let-person>\n    <span data-part=\"label\">{{ person.label }}</span>\n    <span data-part=\"description\">{{ person.description }} · Northwind</span>\n  </ng-template>\n  <ng-template slEntityPickerChip let-person>{{ person.label }} · {{ person.meta }}</ng-template>\n</sl-entity-picker>\n",
+      "source": "<sl-entity-picker aria-label=\"Reviewers\" selectionMode=\"multiple\" [source]=\"directory\">\n  <ng-template slEntityPickerOption let-person>\n    <span slEntityPickerOptionLabel>{{ person.label }}</span>\n    <span slEntityPickerOptionDescription>{{ person.description }} · Northwind</span>\n  </ng-template>\n  <ng-template slEntityPickerChip let-person>{{ person.label }} · {{ person.meta }}</ng-template>\n</sl-entity-picker>\n",
       "verdict": "excerpt"
     }
   ]

package/docs/entity-picker.md

@@ -6,10 +6,10 @@
 ## Import
 
 ```ts
-import { SlEntityPicker, SlEntityPickerChip, SlEntityPickerOption, provideEntityPickerDefaults } from '@slotted/angular/entity-picker';
+import { SlEntityPicker, SlEntityPickerChip, SlEntityPickerOption, SlEntityPickerOptionDescription, SlEntityPickerOptionLabel, SlEntityPickerOptionMedia, SlEntityPickerOptionMeta, provideEntityPickerDefaults } from '@slotted/angular/entity-picker';
 ```
 
-Selector: `sl-entity-picker, ng-template[slEntityPickerOption], ng-template[slEntityPickerChip]` · exportAs: `slEntityPicker`
+Selector: `sl-entity-picker, ng-template[slEntityPickerOption], ng-template[slEntityPickerChip], [slEntityPickerOptionLabel], [slEntityPickerOptionDescription], [slEntityPickerOptionMeta], [slEntityPickerOptionMedia]` · exportAs: `slEntityPicker`
 
 ## Minimal example
 
@@ -98,7 +98,9 @@ Excerpt — not a complete module
 | `locale` | `string` | — | sl-entity-picker | BCP 47. The language in force when absent |
 | `messages` | `Partial<EntityPickerMessages>` | — | sl-entity-picker | Words laid over the language in force, key by key; {count}, {query}, {label}, {id} and {max} are slots |
 | `aria-label` | `string` | — | sl-entity-picker | The name when no field labels it |
-| `slEntityPickerOption` | `ng-template, context { $implicit, query, selected, current, disabled }` | — | option content | The content of an option |
+| `virtualize` | `boolean` | above 100 options without headings | sl-entity-picker | Draws only the options in view and a few either side; the keyboard, aria-activedescendant and scrolling to the highlight reach every option. A list with section headings is drawn whole |
+| `estimatedRowHeight` | `number` | 48 | sl-entity-picker | The height an option is counted at until it has been drawn and measured |
+| `slEntityPickerOption` | `ng-template, context { $implicit, query, selected, current, disabled }` | — | option content | The content of an option, written with slEntityPickerOptionLabel, slEntityPickerOptionDescription, slEntityPickerOptionMeta and slEntityPickerOptionMedia, which place it in the row. With media="none" an option draws its own face in slEntityPickerOptionMedia |
 | `slEntityPickerChip` | `ng-template, context { $implicit }` | — | chip words | The words of a chip |
 | `provideEntityPickerDefaults` | `(defaults) => Provider` | — | an injector | The decisions an application takes once |
 
@@ -147,7 +149,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-avatar-size-md`, `--slotted-avatar-size-sm`, `--slotted-avatar-size-xs`, `--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-inner-size-lg`, `--slotted-control-inner-size-md`, `--slotted-control-inner-size-sm`, `--slotted-control-invalid-edge-width`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-shadow-focus-geometry`, `--slotted-control-surface`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-easing-exit`, `--slotted-easing-standard`, `--slotted-entity-picker-action-active-background`, `--slotted-entity-picker-action-color`, `--slotted-entity-picker-action-hover-background`, `--slotted-entity-picker-action-size`, `--slotted-entity-picker-autofill-background`, `--slotted-entity-picker-background`, `--slotted-entity-picker-border-color`, `--slotted-entity-picker-color`, `--slotted-entity-picker-content-border-color`, `--slotted-entity-picker-content-radius`, `--slotted-entity-picker-content-shadow`, `--slotted-entity-picker-content-text`, `--slotted-entity-picker-content-text-muted`, `--slotted-entity-picker-disabled-background`, `--slotted-entity-picker-disabled-border-color`, `--slotted-entity-picker-disabled-color`, `--slotted-entity-picker-error-color`, `--slotted-entity-picker-field-basis`, `--slotted-entity-picker-field-min`, `--slotted-entity-picker-highlight`, `--slotted-entity-picker-highlight-active`, `--slotted-entity-picker-highlight-ring`, `--slotted-entity-picker-hover-border-color`, `--slotted-entity-picker-icon-size-min`, `--slotted-entity-picker-invalid-border-color`, `--slotted-entity-picker-invalid-edge-width`, `--slotted-entity-picker-invalid-focus-ring-color`, `--slotted-entity-picker-item-radius`, `--slotted-entity-picker-measure`, `--slotted-entity-picker-meta-measure`, `--slotted-entity-picker-offer-color`, `--slotted-entity-picker-open-border-color`, `--slotted-entity-picker-placeholder-color`, `--slotted-entity-picker-plain-hover-background`, `--slotted-entity-picker-radius`, `--slotted-entity-picker-readonly-background`, `--slotted-entity-picker-scope-inline-size`, `--slotted-entity-picker-selected-color`, `--slotted-entity-picker-shadow`, `--slotted-entity-picker-subtle-background`, `--slotted-entity-picker-subtle-border-color`, `--slotted-entity-picker-subtle-hover-background`, `--slotted-entity-picker-surface`, `--slotted-focus-ring-color`, `--slotted-focus-ring-color-invalid`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-sans`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-semibold`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-radius-lg`, `--slotted-radius-none`, `--slotted-shadow-md`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-surface-raised`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-danger-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-z-index-popover`
+`--slotted-avatar-size-md`, `--slotted-avatar-size-sm`, `--slotted-avatar-size-xs`, `--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-focus-ring-offset`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-inner-size-lg`, `--slotted-control-inner-size-md`, `--slotted-control-inner-size-sm`, `--slotted-control-invalid-edge-width`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-shadow-focus-geometry`, `--slotted-control-surface`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-easing-exit`, `--slotted-easing-standard`, `--slotted-entity-picker-action-active-background`, `--slotted-entity-picker-action-color`, `--slotted-entity-picker-action-hover-background`, `--slotted-entity-picker-action-size`, `--slotted-entity-picker-autofill-background`, `--slotted-entity-picker-background`, `--slotted-entity-picker-border-color`, `--slotted-entity-picker-color`, `--slotted-entity-picker-content-border-color`, `--slotted-entity-picker-content-radius`, `--slotted-entity-picker-content-shadow`, `--slotted-entity-picker-content-text`, `--slotted-entity-picker-content-text-muted`, `--slotted-entity-picker-disabled-background`, `--slotted-entity-picker-disabled-border-color`, `--slotted-entity-picker-disabled-color`, `--slotted-entity-picker-error-color`, `--slotted-entity-picker-field-basis`, `--slotted-entity-picker-field-min`, `--slotted-entity-picker-highlight`, `--slotted-entity-picker-highlight-active`, `--slotted-entity-picker-highlight-ring`, `--slotted-entity-picker-hover-border-color`, `--slotted-entity-picker-icon-size-min`, `--slotted-entity-picker-invalid-border-color`, `--slotted-entity-picker-invalid-edge-width`, `--slotted-entity-picker-invalid-focus-ring-color`, `--slotted-entity-picker-item-radius`, `--slotted-entity-picker-measure`, `--slotted-entity-picker-meta-measure`, `--slotted-entity-picker-offer-color`, `--slotted-entity-picker-open-border-color`, `--slotted-entity-picker-placeholder-color`, `--slotted-entity-picker-plain-hover-background`, `--slotted-entity-picker-radius`, `--slotted-entity-picker-readonly-background`, `--slotted-entity-picker-scope-inline-size`, `--slotted-entity-picker-selected-color`, `--slotted-entity-picker-shadow`, `--slotted-entity-picker-subtle-background`, `--slotted-entity-picker-subtle-border-color`, `--slotted-entity-picker-subtle-hover-background`, `--slotted-entity-picker-surface`, `--slotted-focus-ring-color`, `--slotted-focus-ring-color-invalid`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-sans`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-semibold`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-radius-lg`, `--slotted-radius-none`, `--slotted-shadow-md`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-surface-raised`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-danger-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-z-index-popover`
 
 ## Examples
 
@@ -357,8 +359,8 @@ Excerpt — not a complete module
 ```html
 <sl-entity-picker aria-label="Reviewers" selectionMode="multiple" [source]="directory">
   <ng-template slEntityPickerOption let-person>
-    <span data-part="label">{{ person.label }}</span>
-    <span data-part="description">{{ person.description }} · Northwind</span>
+    <span slEntityPickerOptionLabel>{{ person.label }}</span>
+    <span slEntityPickerOptionDescription>{{ person.description }} · Northwind</span>
   </ng-template>
   <ng-template slEntityPickerChip let-person>{{ person.label }} · {{ person.meta }}</ng-template>
 </sl-entity-picker>

package/docs/event-calendar.json

@@ -559,6 +559,13 @@
           "appliesTo": "slEventCalendar",
           "description": "Read once; pass it when rendering on a server"
         },
+        {
+          "name": "now",
+          "type": "PlainDateTime",
+          "defaultValue": "the clock in timeZone, ticked each minute",
+          "appliesTo": "slEventCalendar",
+          "description": "Present means the consumer owns it: the clock is no longer read, and today and the now line follow it. A page dated by its content passes it."
+        },
         {
           "name": "view",
           "type": "model<EventCalendarView | undefined>",

package/docs/event-calendar.md

@@ -112,6 +112,7 @@ Excerpt — not a complete module
 | `calendars` | `readonly EventCalendarCalendar[]` | [] | slEventCalendar | Key, label and an optional colour slot 1–8 |
 | `date` | `model<PlainDate \| undefined>` | — | slEventCalendar | The day the calendar is on; [(date)] two-way |
 | `defaultDate` | `PlainDate` | today in timeZone | slEventCalendar | Read once; pass it when rendering on a server |
+| `now` | `PlainDateTime` | the clock in timeZone, ticked each minute | slEventCalendar | Present means the consumer owns it: the clock is no longer read, and today and the now line follow it. A page dated by its content passes it. |
 | `view` | `model<EventCalendarView \| undefined>` | month | slEventCalendar | [(view)] two-way; unbound opens on the first of views |
 | `defaultView` | `EventCalendarView` | views[0] | slEventCalendar | Read once |
 | `views` | `readonly EventCalendarView[]` | month,week,day,list | slEventCalendar | The switcher, in order |
@@ -177,8 +178,8 @@ Excerpt — not a complete module
 | `listRange` | `week`, `month` | `week` |
 | `compact` | `list`, `keep` | `list` |
 | `selectionMode` | `none`, `range` | `none` |
-| `weekNumbers` | `off`, `on` | `false` |
-| `fixedWeeks` | `off`, `on` | `false` |
+| `weekNumbers` | `off`, `on` | false |
+| `fixedWeeks` | `off`, `on` | false |
 | `status` | `confirmed`, `tentative`, `cancelled` | — |
 | `color` | `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8` | — |