use-wc 1.0.0-pre.48 → 1.0.0-pre.49

package/custom-elements.json

@@ -269,11 +269,28 @@
               ]
             },
             {
-              "kind": "field",
+              "kind": "method",
               "name": "renderDay",
-              "type": {
-                "text": "UseCalendarRenderDay"
-              }
+              "return": {
+                "type": {
+                  "text": "TemplateResult | string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "data",
+                  "type": {
+                    "text": "{ day: number; date: string }"
+                  }
+                },
+                {
+                  "name": "_html",
+                  "type": {
+                    "text": "LitHtml"
+                  }
+                }
+              ],
+              "description": "See UseCalendarRenderDay. Assigning a new function on an\ninstance (e.g. via `.renderDay=${fn}` in a Lit template) after first\nrender does not schedule a re-render on its own — call `requestUpdate()`\nif needed.\n\nDeclared as a regular method rather than a class field so subclass\noverrides can call `super.renderDay(data, html)` to fall back to the\ndefault (or a parent override's) rendering."
             },
             {
               "kind": "method",
@@ -396,6 +413,71 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/elements/use-calendarday/use-calendarday.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A helper component for customizing specific days within `use-calendar`.\nContent placed inside this element will replace the default day number display.",
+          "name": "UseCalendarday",
+          "slots": [
+            {
+              "description": "slot for custom day content (replaces the day number)",
+              "name": "default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "date",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "date"
+            },
+            {
+              "kind": "field",
+              "name": "day",
+              "readonly": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "date",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "date"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "use-calendarday",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UseCalendarday",
+          "declaration": {
+            "name": "UseCalendarday",
+            "module": "src/elements/use-calendarday/use-calendarday.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "use-calendarday",
+          "declaration": {
+            "name": "UseCalendarday",
+            "module": "src/elements/use-calendarday/use-calendarday.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/elements/use-date-input/use-date-input.ts",
@@ -522,78 +604,13 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/elements/use-calendarday/use-calendarday.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A helper component for customizing specific days within `use-calendar`.\nContent placed inside this element will replace the default day number display.",
-          "name": "UseCalendarday",
-          "slots": [
-            {
-              "description": "slot for custom day content (replaces the day number)",
-              "name": "default"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "date",
-              "type": {
-                "text": "string"
-              },
-              "attribute": "date"
-            },
-            {
-              "kind": "field",
-              "name": "day",
-              "readonly": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "date",
-              "type": {
-                "text": "string"
-              },
-              "fieldName": "date"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "use-calendarday",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "UseCalendarday",
-          "declaration": {
-            "name": "UseCalendarday",
-            "module": "src/elements/use-calendarday/use-calendarday.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "use-calendarday",
-          "declaration": {
-            "name": "UseCalendarday",
-            "module": "src/elements/use-calendarday/use-calendarday.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/elements/use-date-picker/use-date-picker.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "A day-granularity date picker. Value format: YYYY-MM-DD.",
+          "description": "A day-granularity date picker. Value format: YYYY-MM-DD.\n\nCustomize day rendering on an instance:\n```ts\ndatePicker.renderDay = ({ day, date }, html) =>\n  date === \"2026-03-17\" ? html`<strong>${day}</strong>` : String(day);\n```\n\nOr override on a subclass to apply it to every instance, falling back to\n`super.renderDay(...)` for dates you don't want to customize:\n```ts\nclass MyDatePicker extends UseDatePicker {\n  renderDay(data: { day: number; date: string }, html: LitHtml) {\n    if (data.date === \"2026-03-17\") {\n      return html`<strong>${data.day}</strong>`;\n    }\n    return super.renderDay(data, html);\n  }\n}\n```",
           "name": "UseDatePicker",
           "members": [
             {
@@ -775,11 +792,28 @@
               }
             },
             {
-              "kind": "field",
+              "kind": "method",
               "name": "renderDay",
-              "type": {
-                "text": "UseCalendarRenderDay"
+              "return": {
+                "type": {
+                  "text": "TemplateResult | string"
+                }
               },
+              "parameters": [
+                {
+                  "name": "data",
+                  "type": {
+                    "text": "{ day: number; date: string }"
+                  }
+                },
+                {
+                  "name": "_html",
+                  "type": {
+                    "text": "LitHtml"
+                  }
+                }
+              ],
+              "description": "See UseCalendarRenderDay. Assigning a new function on an\ninstance (e.g. via `.renderDay=${fn}` in a Lit template) after first\nrender does not schedule a re-render on its own — call `requestUpdate()`\nif needed.\n\nDeclared as a regular method rather than a class field so subclass\noverrides can call `super.renderDay(data, html)` to fall back to the\ndefault (or a parent override's) rendering.",
               "inheritedFrom": {
                 "name": "UseCalendarBase",
                 "module": "src/elements/use-calendar-base/use-calendar-base.ts"
@@ -1233,6 +1267,115 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/elements/use-dropdown/use-dropdown.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "When the popover is opened the tabbable elements are found and indexed for\nkeyboard navigation. The first tabbable element is focused when the popover is opened. The\nfollowing selector is used to find tabbable elements:\n\n```css\n:is(\n  [role=\"menuitem\"],\n  [role=\"menuitemcheckbox\"],\n  [role=\"menuitemradio\"],\n  use-menu\n):not(:is(\n  [disabled],\n  [hidden],\n  [inert],\n  [aria-hidden=\"true\"]\n))\n```\n\nMenu items are not used for navigation, they are intended for related action\nitems that allows a user to manipulate a user interface or content. Read the\nWCAG guidance for more details:\n[https://www.w3.org/WAI/ARIA/apg/patterns/menubar/](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/)\n\nFor an icon-only trigger, omit `label` and set `aria-label` on `use-dropdown` itself — it is\nforwarded to the trigger button so the control still has an accessible name.",
+          "name": "UseDropdown",
+          "slots": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "trigger-content"
+            },
+            {
+              "name": "trigger-label"
+            },
+            {
+              "name": "trigger-arrow"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "trigger",
+              "type": {
+                "text": "HTMLButtonElement | null"
+              },
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "attribute": "disabled"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "inlinealign",
+              "type": {
+                "text": "\"start\" | \"end\""
+              },
+              "default": "\"start\"",
+              "description": "Aligns the menu along the inline axis relative to the trigger. Applies to top-level\nmenus; nested submenus are always positioned to the side of their parent trigger.\n\n- `start`: the menu's inline-start edge aligns with the trigger's inline-start edge\n- `end`: the menu's inline-end edge aligns with the trigger's inline-end edge",
+              "attribute": "inlinealign",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "getId"
+            }
+          ],
+          "attributes": [
+            {
+              "description": "Aligns the menu along the inline axis relative to the trigger. Applies to top-level\nmenus; nested submenus are always positioned to the side of their parent trigger.\n\n- `start`: the menu's inline-start edge aligns with the trigger's inline-start edge\n- `end`: the menu's inline-end edge aligns with the trigger's inline-end edge",
+              "name": "inlinealign",
+              "type": {
+                "text": "\"start\" | \"end\""
+              },
+              "default": "\"start\"",
+              "fieldName": "inlinealign"
+            },
+            {
+              "name": "disabled",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "label"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "use-dropdown",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UseDropdown",
+          "declaration": {
+            "name": "UseDropdown",
+            "module": "src/elements/use-dropdown/use-dropdown.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "use-dropdown",
+          "declaration": {
+            "name": "UseDropdown",
+            "module": "src/elements/use-dropdown/use-dropdown.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/elements/use-datetime-input/use-datetime-input.ts",
@@ -1448,115 +1591,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/elements/use-dropdown/use-dropdown.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "When the popover is opened the tabbable elements are found and indexed for\nkeyboard navigation. The first tabbable element is focused when the popover is opened. The\nfollowing selector is used to find tabbable elements:\n\n```css\n:is(\n  [role=\"menuitem\"],\n  [role=\"menuitemcheckbox\"],\n  [role=\"menuitemradio\"],\n  use-menu\n):not(:is(\n  [disabled],\n  [hidden],\n  [inert],\n  [aria-hidden=\"true\"]\n))\n```\n\nMenu items are not used for navigation, they are intended for related action\nitems that allows a user to manipulate a user interface or content. Read the\nWCAG guidance for more details:\n[https://www.w3.org/WAI/ARIA/apg/patterns/menubar/](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/)\n\nFor an icon-only trigger, omit `label` and set `aria-label` on `use-dropdown` itself — it is\nforwarded to the trigger button so the control still has an accessible name.",
-          "name": "UseDropdown",
-          "slots": [
-            {
-              "name": "default"
-            },
-            {
-              "name": "trigger-content"
-            },
-            {
-              "name": "trigger-label"
-            },
-            {
-              "name": "trigger-arrow"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "trigger",
-              "type": {
-                "text": "HTMLButtonElement | null"
-              },
-              "default": "null"
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "attribute": "disabled"
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "attribute": "label"
-            },
-            {
-              "kind": "field",
-              "name": "inlinealign",
-              "type": {
-                "text": "\"start\" | \"end\""
-              },
-              "default": "\"start\"",
-              "description": "Aligns the menu along the inline axis relative to the trigger. Applies to top-level\nmenus; nested submenus are always positioned to the side of their parent trigger.\n\n- `start`: the menu's inline-start edge aligns with the trigger's inline-start edge\n- `end`: the menu's inline-end edge aligns with the trigger's inline-end edge",
-              "attribute": "inlinealign",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "getId"
-            }
-          ],
-          "attributes": [
-            {
-              "description": "Aligns the menu along the inline axis relative to the trigger. Applies to top-level\nmenus; nested submenus are always positioned to the side of their parent trigger.\n\n- `start`: the menu's inline-start edge aligns with the trigger's inline-start edge\n- `end`: the menu's inline-end edge aligns with the trigger's inline-end edge",
-              "name": "inlinealign",
-              "type": {
-                "text": "\"start\" | \"end\""
-              },
-              "default": "\"start\"",
-              "fieldName": "inlinealign"
-            },
-            {
-              "name": "disabled",
-              "fieldName": "disabled"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "fieldName": "label"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "use-dropdown",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "UseDropdown",
-          "declaration": {
-            "name": "UseDropdown",
-            "module": "src/elements/use-dropdown/use-dropdown.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "use-dropdown",
-          "declaration": {
-            "name": "UseDropdown",
-            "module": "src/elements/use-dropdown/use-dropdown.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/elements/use-duration-input/use-duration-input.ts",
@@ -2813,7 +2847,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A standalone form-associated year-month picker.\nEmits ISO 8601 `YYYY-MM` values.",
+          "description": "A standalone form-associated year-month picker.\nEmits ISO 8601 `YYYY-MM` values.\n\nCustomize month rendering on an instance:\n```ts\nmonthPicker.renderMonth = ({ month, name }, html) =>\n  month === 12 ? html`${name} ❄️` : name;\n```\n\nOr override on a subclass to apply it to every instance, falling back to\n`super.renderMonth(...)` for months you don't want to customize:\n```ts\nclass MyMonthPicker extends UseMonthPicker {\n  renderMonth(data: { month: number; name: string }, html: LitHtml) {\n    if (data.month === 12) {\n      return html`${data.name} ❄️`;\n    }\n    return super.renderMonth(data, html);\n  }\n}\n```",
           "name": "UseMonthPicker",
           "cssParts": [
             {
@@ -2947,11 +2981,28 @@
               "description": "Navigate the view to the current real-world year."
             },
             {
-              "kind": "field",
+              "kind": "method",
               "name": "renderMonth",
-              "type": {
-                "text": "UseMonthPickerRenderMonth"
-              }
+              "return": {
+                "type": {
+                  "text": "TemplateResult | string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "data",
+                  "type": {
+                    "text": "{ month: number; name: string }"
+                  }
+                },
+                {
+                  "name": "_html",
+                  "type": {
+                    "text": "LitHtml"
+                  }
+                }
+              ],
+              "description": "See UseMonthPickerRenderMonth. Assigning a new function on an\ninstance (e.g. via `.renderMonth=${fn}` in a Lit template) after first\nrender does not schedule a re-render on its own — call `requestUpdate()`\nif needed.\n\nDeclared as a regular method rather than a class field so subclass\noverrides can call `super.renderMonth(data, html)` to fall back to the\ndefault (or a parent override's) rendering."
             }
           ],
           "events": [
@@ -3842,7 +3893,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A week-granularity date picker. Value format: YYYY-Www (ISO 8601 week).",
+          "description": "A week-granularity date picker. Value format: YYYY-Www (ISO 8601 week).\n\nCustomize day rendering on an instance:\n```ts\nweekPicker.renderDay = ({ day, date }, html) =>\n  date === \"2026-03-17\" ? html`<strong>${day}</strong>` : String(day);\n```\n\nOr override on a subclass to apply it to every instance, falling back to\n`super.renderDay(...)` for dates you don't want to customize:\n```ts\nclass MyWeekPicker extends UseWeekPicker {\n  renderDay(data: { day: number; date: string }, html: LitHtml) {\n    if (data.date === \"2026-03-17\") {\n      return html`<strong>${data.day}</strong>`;\n    }\n    return super.renderDay(data, html);\n  }\n}\n```",
           "name": "UseWeekPicker",
           "members": [
             {
@@ -4024,11 +4075,28 @@
               }
             },
             {
-              "kind": "field",
+              "kind": "method",
               "name": "renderDay",
-              "type": {
-                "text": "UseCalendarRenderDay"
+              "return": {
+                "type": {
+                  "text": "TemplateResult | string"
+                }
               },
+              "parameters": [
+                {
+                  "name": "data",
+                  "type": {
+                    "text": "{ day: number; date: string }"
+                  }
+                },
+                {
+                  "name": "_html",
+                  "type": {
+                    "text": "LitHtml"
+                  }
+                }
+              ],
+              "description": "See UseCalendarRenderDay. Assigning a new function on an\ninstance (e.g. via `.renderDay=${fn}` in a Lit template) after first\nrender does not schedule a re-render on its own — call `requestUpdate()`\nif needed.\n\nDeclared as a regular method rather than a class field so subclass\noverrides can call `super.renderDay(data, html)` to fall back to the\ndefault (or a parent override's) rendering.",
               "inheritedFrom": {
                 "name": "UseCalendarBase",
                 "module": "src/elements/use-calendar-base/use-calendar-base.ts"