use-wc 1.0.0-pre.31 → 1.0.0-pre.32

package/custom-elements.json

@@ -403,12 +403,12 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/use-date/use-date.ts",
+      "path": "src/elements/use-date-input/use-date-input.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "Displays a date picker using segmented inputs for year, month, and day.\n\nUses browser locale for formatting and ARIA labels.",
-          "name": "UseDate",
+          "name": "UseDateInput",
           "members": [
             {
               "kind": "field",
@@ -510,25 +510,25 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "use-date",
+          "tagName": "use-date-input",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "UseDate",
+          "name": "UseDateInput",
           "declaration": {
-            "name": "UseDate",
-            "module": "src/elements/use-date/use-date.ts"
+            "name": "UseDateInput",
+            "module": "src/elements/use-date-input/use-date-input.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "use-date",
+          "name": "use-date-input",
           "declaration": {
-            "name": "UseDate",
-            "module": "src/elements/use-date/use-date.ts"
+            "name": "UseDateInput",
+            "module": "src/elements/use-date-input/use-date-input.ts"
           }
         }
       ]
@@ -1258,25 +1258,25 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/use-datetime/use-datetime.ts",
+      "path": "src/elements/use-datetime-input/use-datetime-input.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "Displays a date and time picker by combining `use-date` and `use-time`.\n\nThe value format is ISO 8601-like: `YYYY-MM-DDTHH:MM:SS.mmm`.",
-          "name": "UseDatetime",
+          "name": "UseDatetimeInput",
           "members": [
             {
               "kind": "field",
               "name": "dateElement",
               "type": {
-                "text": "UseDate"
+                "text": "UseDateInput"
               }
             },
             {
               "kind": "field",
               "name": "timeElement",
               "type": {
-                "text": "UseTime"
+                "text": "UseTimeInput"
               }
             },
             {
@@ -1454,25 +1454,25 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "use-datetime",
+          "tagName": "use-datetime-input",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "UseDatetime",
+          "name": "UseDatetimeInput",
           "declaration": {
-            "name": "UseDatetime",
-            "module": "src/elements/use-datetime/use-datetime.ts"
+            "name": "UseDatetimeInput",
+            "module": "src/elements/use-datetime-input/use-datetime-input.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "use-datetime",
+          "name": "use-datetime-input",
           "declaration": {
-            "name": "UseDatetime",
-            "module": "src/elements/use-datetime/use-datetime.ts"
+            "name": "UseDatetimeInput",
+            "module": "src/elements/use-datetime-input/use-datetime-input.ts"
           }
         }
       ]
@@ -1568,12 +1568,12 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/use-duration/use-duration.ts",
+      "path": "src/elements/use-duration-input/use-duration-input.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "Displays the parts of an ISO 8601 duration string using [`Intl.DurationFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DurationFormat).\n\nUses the [`duration-fns`](https://www.npmjs.com/package/duration-fns) library for parsing ISO 8601 values.\n\n<baseline-status featureId=\"intl-duration-format\"></baseline-status>",
-          "name": "UseDuration",
+          "name": "UseDurationInput",
           "members": [
             {
               "kind": "field",
@@ -1863,25 +1863,25 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "use-duration",
+          "tagName": "use-duration-input",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "UseDuration",
+          "name": "UseDurationInput",
           "declaration": {
-            "name": "UseDuration",
-            "module": "src/elements/use-duration/use-duration.ts"
+            "name": "UseDurationInput",
+            "module": "src/elements/use-duration-input/use-duration-input.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "use-duration",
+          "name": "use-duration-input",
           "declaration": {
-            "name": "UseDuration",
-            "module": "src/elements/use-duration/use-duration.ts"
+            "name": "UseDurationInput",
+            "module": "src/elements/use-duration-input/use-duration-input.ts"
           }
         }
       ]
@@ -2450,12 +2450,12 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/use-listbox/use-listbox.ts",
+      "path": "src/elements/use-listbox-input/use-listbox-input.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "UseListbox",
+          "name": "UseListboxInput",
           "slots": [
             {
               "description": "NodeList of `use-option` elements",
@@ -2581,25 +2581,25 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "use-listbox",
+          "tagName": "use-listbox-input",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "UseListbox",
+          "name": "UseListboxInput",
           "declaration": {
-            "name": "UseListbox",
-            "module": "src/elements/use-listbox/use-listbox.ts"
+            "name": "UseListboxInput",
+            "module": "src/elements/use-listbox-input/use-listbox-input.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "use-listbox",
+          "name": "use-listbox-input",
           "declaration": {
-            "name": "UseListbox",
-            "module": "src/elements/use-listbox/use-listbox.ts"
+            "name": "UseListboxInput",
+            "module": "src/elements/use-listbox-input/use-listbox-input.ts"
           }
         }
       ]
@@ -2944,7 +2944,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`use-option` is a custom element that represents an option in a `use-select` custom element.\n\nThe children of this element are the content of the option and must not contain any interactive elements.",
+          "description": "`use-option` is a custom element that represents an option in a `use-select-input` custom element.\n\nThe children of this element are the content of the option and must not contain any interactive elements.",
           "name": "UseOption",
           "slots": [
             {
@@ -3085,12 +3085,12 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/use-select/use-select.ts",
+      "path": "src/elements/use-select-input/use-select-input.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "## Multiple\n\nThe `use-listbox` provides an attribute for selecting multiple options.\n\n## Long term plan\n\nThis web component was built with the intent to be replaced by browser-native `base-select` support once it becomes baseline.\n\n<baseline-status featureId=\"customizable-select\"></baseline-status>",
-          "name": "UseSelect",
+          "description": "## Multiple\n\nThe `use-listbox-input` provides an attribute for selecting multiple options.\n\n## Long term plan\n\nThis web component was built with the intent to be replaced by browser-native `base-select` support once it becomes baseline.\n\n<baseline-status featureId=\"customizable-select\"></baseline-status>",
+          "name": "UseSelectInput",
           "slots": [
             {
               "description": "NodeList of `use-option` elements",
@@ -3197,37 +3197,37 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "use-select",
+          "tagName": "use-select-input",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "UseSelect",
+          "name": "UseSelectInput",
           "declaration": {
-            "name": "UseSelect",
-            "module": "src/elements/use-select/use-select.ts"
+            "name": "UseSelectInput",
+            "module": "src/elements/use-select-input/use-select-input.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "use-select",
+          "name": "use-select-input",
           "declaration": {
-            "name": "UseSelect",
-            "module": "src/elements/use-select/use-select.ts"
+            "name": "UseSelectInput",
+            "module": "src/elements/use-select-input/use-select-input.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/elements/use-time/use-time.ts",
+      "path": "src/elements/use-time-input/use-time-input.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "Displays time picker using [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat).\n\nAllows users to pick time values with proper localization and formatting.",
-          "name": "UseTime",
+          "name": "UseTimeInput",
           "members": [
             {
               "kind": "field",
@@ -3468,25 +3468,25 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "use-time",
+          "tagName": "use-time-input",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "UseTime",
+          "name": "UseTimeInput",
           "declaration": {
-            "name": "UseTime",
-            "module": "src/elements/use-time/use-time.ts"
+            "name": "UseTimeInput",
+            "module": "src/elements/use-time-input/use-time-input.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "use-time",
+          "name": "use-time-input",
           "declaration": {
-            "name": "UseTime",
-            "module": "src/elements/use-time/use-time.ts"
+            "name": "UseTimeInput",
+            "module": "src/elements/use-time-input/use-time-input.ts"
           }
         }
       ]
@@ -3643,7 +3643,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`use-option` is a custom element that represents an option in a `use-select` custom element.\n\nThe children of this element are the content of the option and must not contain any interactive elements.\n\n## To Do\n\n- [ ] When the parent is no longer disabled, update the items without their own `[disabled]`",
+          "description": "`use-option` is a custom element that represents an option in a `use-select-input` custom element.\n\nThe children of this element are the content of the option and must not contain any interactive elements.\n\n## To Do\n\n- [ ] When the parent is no longer disabled, update the items without their own `[disabled]`",
           "name": "UseTreeitem",
           "slots": [
             {

package/dist/use-wc.d.mts

@@ -47,7 +47,7 @@ type TemplateResult$1<T extends ResultType = ResultType> = UncompiledTemplateRes
 //#endregion
 //#region src/elements/use-option/use-option.d.ts
 /**
- * `use-option` is a custom element that represents an option in a `use-select` custom element.
+ * `use-option` is a custom element that represents an option in a `use-select-input` custom element.
  *
  * The children of this element are the content of the option and must not contain any interactive elements.
  *
@@ -80,13 +80,13 @@ declare global {
   }
 }
 //#endregion
-//#region src/elements/use-date/use-date.d.ts
+//#region src/elements/use-date-input/use-date-input.d.ts
 /**
  * Displays a date picker using segmented inputs for year, month, and day.
  *
  * Uses browser locale for formatting and ARIA labels.
  */
-declare class UseDate extends LitElement {
+declare class UseDateInput extends LitElement {
   #private;
   static formAssociated: boolean;
   static shadowRootOptions: {
@@ -120,7 +120,7 @@ declare class UseDate extends LitElement {
 }
 declare global {
   interface HTMLElementTagNameMap {
-    "use-date": UseDate;
+    "use-date-input": UseDateInput;
   }
 }
 //#endregion
@@ -188,7 +188,7 @@ declare global {
   }
 }
 //#endregion
-//#region src/elements/use-duration/use-duration.d.ts
+//#region src/elements/use-duration-input/use-duration-input.d.ts
 /**
  * Displays the parts of an ISO 8601 duration string using [`Intl.DurationFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DurationFormat).
  *
@@ -196,7 +196,7 @@ declare global {
  *
  * <baseline-status featureId="intl-duration-format"></baseline-status>
  */
-declare class UseDuration extends LitElement {
+declare class UseDurationInput extends LitElement {
   #private;
   static formAssociated: boolean;
   static shadowRootOptions: {
@@ -244,16 +244,16 @@ declare class UseDuration extends LitElement {
 }
 declare global {
   interface HTMLElementTagNameMap {
-    "use-duration": UseDuration;
+    "use-duration-input": UseDurationInput;
   }
 }
 //#endregion
-//#region src/elements/use-listbox/use-listbox.d.ts
+//#region src/elements/use-listbox-input/use-listbox-input.d.ts
 /**
  * @slot default NodeList of `use-option` elements
  * @slot arrow
  */
-declare class UseListbox extends LitElement {
+declare class UseListboxInput extends LitElement {
   #private;
   static formAssociated: boolean;
   static shadowRootOptions: {
@@ -294,15 +294,15 @@ declare class UseListbox extends LitElement {
 }
 declare global {
   interface HTMLElementTagNameMap {
-    "use-listbox": UseListbox;
+    "use-listbox-input": UseListboxInput;
   }
 }
 //#endregion
-//#region src/elements/use-select/use-select.d.ts
+//#region src/elements/use-select-input/use-select-input.d.ts
 /**
  * ## Multiple
  *
- * The `use-listbox` provides an attribute for selecting multiple options.
+ * The `use-listbox-input` provides an attribute for selecting multiple options.
  *
  * ## Long term plan
  *
@@ -313,7 +313,7 @@ declare global {
  * @slot default NodeList of `use-option` elements
  * @slot arrow
  */
-declare class UseSelect extends LitElement {
+declare class UseSelectInput extends LitElement {
   #private;
   static formAssociated: boolean;
   static shadowRootOptions: {
@@ -350,17 +350,17 @@ declare class UseSelect extends LitElement {
 }
 declare global {
   interface HTMLElementTagNameMap {
-    "use-select": UseSelect;
+    "use-select-input": UseSelectInput;
   }
 }
 //#endregion
-//#region src/elements/use-time/use-time.d.ts
+//#region src/elements/use-time-input/use-time-input.d.ts
 /**
  * Displays time picker using [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat).
  *
  * Allows users to pick time values with proper localization and formatting.
  */
-declare class UseTime extends LitElement {
+declare class UseTimeInput extends LitElement {
   #private;
   static formAssociated: boolean;
   static shadowRootOptions: {
@@ -403,13 +403,13 @@ declare class UseTime extends LitElement {
 }
 declare global {
   interface HTMLElementTagNameMap {
-    "use-time": UseTime;
+    "use-time-input": UseTimeInput;
   }
 }
 //#endregion
 //#region src/elements/use-treeitem/use-treeitem.d.ts
 /**
- * `use-option` is a custom element that represents an option in a `use-select` custom element.
+ * `use-option` is a custom element that represents an option in a `use-select-input` custom element.
  *
  * The children of this element are the content of the option and must not contain any interactive elements.
  *
@@ -908,13 +908,13 @@ declare global {
   }
 }
 //#endregion
-//#region src/elements/use-datetime/use-datetime.d.ts
+//#region src/elements/use-datetime-input/use-datetime-input.d.ts
 /**
  * Displays a date and time picker by combining `use-date` and `use-time`.
  *
  * The value format is ISO 8601-like: `YYYY-MM-DDTHH:MM:SS.mmm`.
  */
-declare class UseDatetime extends LitElement {
+declare class UseDatetimeInput extends LitElement {
   #private;
   static formAssociated: boolean;
   static shadowRootOptions: {
@@ -925,8 +925,8 @@ declare class UseDatetime extends LitElement {
     slotAssignment?: SlotAssignmentMode | undefined;
     delegatesFocus: boolean;
   };
-  dateElement: UseDate;
-  timeElement: UseTime;
+  dateElement: UseDateInput;
+  timeElement: UseTimeInput;
   constructor();
   get id(): string;
   set id(val: string);
@@ -979,4 +979,4 @@ declare global {
   }
 }
 //#endregion
-export { UseCalendarBase, UseCalendarRenderDay, UseDate, UseDatePicker, UseDatetime, UseDropdown, UseDuration, UseFocusgroup, UseListbox, UseMenu, UseMonthPicker, UseMonthPickerRenderMonth, UseOption, UseScrollarea, UseSelect, UseTime, UseTree, UseTreeitem, UseWeekPicker, UseWidget };
+export { UseCalendarBase, UseCalendarRenderDay, UseDateInput, UseDatePicker, UseDatetimeInput, UseDropdown, UseDurationInput, UseFocusgroup, UseListboxInput, UseMenu, UseMonthPicker, UseMonthPickerRenderMonth, UseOption, UseScrollarea, UseSelectInput, UseTimeInput, UseTree, UseTreeitem, UseWeekPicker, UseWidget };

package/dist/use-wc.mjs

@@ -218,8 +218,8 @@ function parseISOWeek(week) {
 	return monday;
 }
 //#endregion
-//#region src/elements/use-date/use-date.ts
-let UseDate = class UseDate extends LitElement {
+//#region src/elements/use-date-input/use-date-input.ts
+let UseDateInput = class UseDateInput extends LitElement {
 	static {
 		this.formAssociated = true;
 	}
@@ -406,20 +406,20 @@ let UseDate = class UseDate extends LitElement {
   `;
 	}
 };
-__decorate([query("input[part=\"segment-input segment-input-year\"]")], UseDate.prototype, "yearInput", void 0);
-__decorate([query("input[part=\"segment-input segment-input-month\"]")], UseDate.prototype, "monthInput", void 0);
-__decorate([query("input[part=\"segment-input segment-input-day\"]")], UseDate.prototype, "dayInput", void 0);
-__decorate([property({ type: Boolean })], UseDate.prototype, "disabled", null);
+__decorate([query("input[part=\"segment-input segment-input-year\"]")], UseDateInput.prototype, "yearInput", void 0);
+__decorate([query("input[part=\"segment-input segment-input-month\"]")], UseDateInput.prototype, "monthInput", void 0);
+__decorate([query("input[part=\"segment-input segment-input-day\"]")], UseDateInput.prototype, "dayInput", void 0);
+__decorate([property({ type: Boolean })], UseDateInput.prototype, "disabled", null);
 __decorate([property({
 	type: Boolean,
 	attribute: "readonly"
-})], UseDate.prototype, "readOnly", null);
-__decorate([property({ type: String })], UseDate.prototype, "value", null);
+})], UseDateInput.prototype, "readOnly", null);
+__decorate([property({ type: String })], UseDateInput.prototype, "value", null);
 __decorate([property({
 	type: String,
 	attribute: true
-})], UseDate.prototype, "locale", void 0);
-UseDate = __decorate([customElement("use-date")], UseDate);
+})], UseDateInput.prototype, "locale", void 0);
+UseDateInput = __decorate([customElement("use-date-input")], UseDateInput);
 //#endregion
 //#region src/elements/use-dropdown/use-dropdown.ts
 var _UseDropdown;
@@ -660,7 +660,7 @@ __decorate([property({ type: Boolean })], UseDropdown.prototype, "disabled", nul
 __decorate([property()], UseDropdown.prototype, "label", void 0);
 UseDropdown = _UseDropdown = __decorate([customElement("use-dropdown")], UseDropdown);
 //#endregion
-//#region src/elements/use-duration/use-duration.ts
+//#region src/elements/use-duration-input/use-duration-input.ts
 const ISO_DURATION_SEGMENTS = {
 	year: "years",
 	month: "months",
@@ -671,7 +671,7 @@ const ISO_DURATION_SEGMENTS = {
 	second: "seconds",
 	millisecond: "milliseconds"
 };
-let UseDuration = class UseDuration extends LitElement {
+let UseDurationInput = class UseDurationInput extends LitElement {
 	static {
 		this.formAssociated = true;
 	}
@@ -852,65 +852,65 @@ let UseDuration = class UseDuration extends LitElement {
   `;
 	}
 };
-__decorate([query("input[part=\"segment-input segment-input-year\"]")], UseDuration.prototype, "yearInput", void 0);
-__decorate([query("input[part=\"segment-input segment-input-month\"]")], UseDuration.prototype, "monthInput", void 0);
-__decorate([query("input[part=\"segment-input segment-input-week\"]")], UseDuration.prototype, "weekInput", void 0);
-__decorate([query("input[part=\"segment-input segment-input-day\"]")], UseDuration.prototype, "dayInput", void 0);
-__decorate([query("input[part=\"segment-input segment-input-hour\"]")], UseDuration.prototype, "hourInput", void 0);
-__decorate([query("input[part=\"segment-input segment-input-minute\"]")], UseDuration.prototype, "minuteInput", void 0);
-__decorate([query("input[part=\"segment-input segment-input-second\"]")], UseDuration.prototype, "secondInput", void 0);
-__decorate([query("input[part=\"segment-input segment-input-millisecond\"]")], UseDuration.prototype, "millisecondInput", void 0);
+__decorate([query("input[part=\"segment-input segment-input-year\"]")], UseDurationInput.prototype, "yearInput", void 0);
+__decorate([query("input[part=\"segment-input segment-input-month\"]")], UseDurationInput.prototype, "monthInput", void 0);
+__decorate([query("input[part=\"segment-input segment-input-week\"]")], UseDurationInput.prototype, "weekInput", void 0);
+__decorate([query("input[part=\"segment-input segment-input-day\"]")], UseDurationInput.prototype, "dayInput", void 0);
+__decorate([query("input[part=\"segment-input segment-input-hour\"]")], UseDurationInput.prototype, "hourInput", void 0);
+__decorate([query("input[part=\"segment-input segment-input-minute\"]")], UseDurationInput.prototype, "minuteInput", void 0);
+__decorate([query("input[part=\"segment-input segment-input-second\"]")], UseDurationInput.prototype, "secondInput", void 0);
+__decorate([query("input[part=\"segment-input segment-input-millisecond\"]")], UseDurationInput.prototype, "millisecondInput", void 0);
 __decorate([property({
 	type: Boolean,
 	attribute: true
-})], UseDuration.prototype, "years", void 0);
+})], UseDurationInput.prototype, "years", void 0);
 __decorate([property({
 	type: Boolean,
 	attribute: true
-})], UseDuration.prototype, "months", void 0);
+})], UseDurationInput.prototype, "months", void 0);
 __decorate([property({
 	type: Boolean,
 	attribute: true
-})], UseDuration.prototype, "weeks", void 0);
+})], UseDurationInput.prototype, "weeks", void 0);
 __decorate([property({
 	type: Boolean,
 	attribute: true
-})], UseDuration.prototype, "days", void 0);
+})], UseDurationInput.prototype, "days", void 0);
 __decorate([property({
 	type: Boolean,
 	attribute: true
-})], UseDuration.prototype, "hours", void 0);
+})], UseDurationInput.prototype, "hours", void 0);
 __decorate([property({
 	type: Boolean,
 	attribute: true
-})], UseDuration.prototype, "minutes", void 0);
+})], UseDurationInput.prototype, "minutes", void 0);
 __decorate([property({
 	type: Boolean,
 	attribute: true
-})], UseDuration.prototype, "seconds", void 0);
+})], UseDurationInput.prototype, "seconds", void 0);
 __decorate([property({
 	type: Boolean,
 	attribute: true
-})], UseDuration.prototype, "milliseconds", void 0);
-__decorate([property({ type: Boolean })], UseDuration.prototype, "disabled", null);
+})], UseDurationInput.prototype, "milliseconds", void 0);
+__decorate([property({ type: Boolean })], UseDurationInput.prototype, "disabled", null);
 __decorate([property({
 	type: Boolean,
 	attribute: "readonly"
-})], UseDuration.prototype, "readOnly", null);
-__decorate([property({ type: String })], UseDuration.prototype, "value", null);
+})], UseDurationInput.prototype, "readOnly", null);
+__decorate([property({ type: String })], UseDurationInput.prototype, "value", null);
 __decorate([property({
 	type: String,
 	attribute: true
-})], UseDuration.prototype, "locale", void 0);
+})], UseDurationInput.prototype, "locale", void 0);
 __decorate([property({
 	type: String,
 	attribute: true
-})], UseDuration.prototype, "format", void 0);
-UseDuration = __decorate([customElement("use-duration")], UseDuration);
+})], UseDurationInput.prototype, "format", void 0);
+UseDurationInput = __decorate([customElement("use-duration-input")], UseDurationInput);
 //#endregion
-//#region src/elements/use-listbox/use-listbox.ts
+//#region src/elements/use-listbox-input/use-listbox-input.ts
 const FORM_DATA_KEY$2 = "__value";
-let UseListbox = class UseListbox extends LitElement {
+let UseListboxInput = class UseListboxInput extends LitElement {
 	static {
 		this.formAssociated = true;
 	}
@@ -1089,20 +1089,20 @@ let UseListbox = class UseListbox extends LitElement {
   `;
 	}
 };
-__decorate([property()], UseListbox.prototype, "name", void 0);
-__decorate([property()], UseListbox.prototype, "placeholder", void 0);
+__decorate([property()], UseListboxInput.prototype, "name", void 0);
+__decorate([property()], UseListboxInput.prototype, "placeholder", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true
-})], UseListbox.prototype, "multiple", void 0);
-__decorate([property({ type: Boolean })], UseListbox.prototype, "disabled", null);
-__decorate([queryAssignedElements({ selector: "use-option" })], UseListbox.prototype, "options", void 0);
-__decorate([query("[part=\"listbox\"]", true)], UseListbox.prototype, "listbox", void 0);
-UseListbox = __decorate([customElement("use-listbox")], UseListbox);
+})], UseListboxInput.prototype, "multiple", void 0);
+__decorate([property({ type: Boolean })], UseListboxInput.prototype, "disabled", null);
+__decorate([queryAssignedElements({ selector: "use-option" })], UseListboxInput.prototype, "options", void 0);
+__decorate([query("[part=\"listbox\"]", true)], UseListboxInput.prototype, "listbox", void 0);
+UseListboxInput = __decorate([customElement("use-listbox-input")], UseListboxInput);
 //#endregion
-//#region src/elements/use-select/use-select.ts
+//#region src/elements/use-select-input/use-select-input.ts
 const FORM_DATA_KEY$1 = "__value";
-let UseSelect = class UseSelect extends LitElement {
+let UseSelectInput = class UseSelectInput extends LitElement {
 	static {
 		this.formAssociated = true;
 	}
@@ -1327,15 +1327,15 @@ let UseSelect = class UseSelect extends LitElement {
   `;
 	}
 };
-__decorate([property()], UseSelect.prototype, "name", void 0);
-__decorate([property()], UseSelect.prototype, "placeholder", void 0);
-__decorate([property({ type: Boolean })], UseSelect.prototype, "disabled", null);
-__decorate([queryAssignedElements({ selector: "use-option" })], UseSelect.prototype, "options", void 0);
-__decorate([query("[part=\"trigger-label\"]", true)], UseSelect.prototype, "label", void 0);
-UseSelect = __decorate([customElement("use-select")], UseSelect);
+__decorate([property()], UseSelectInput.prototype, "name", void 0);
+__decorate([property()], UseSelectInput.prototype, "placeholder", void 0);
+__decorate([property({ type: Boolean })], UseSelectInput.prototype, "disabled", null);
+__decorate([queryAssignedElements({ selector: "use-option" })], UseSelectInput.prototype, "options", void 0);
+__decorate([query("[part=\"trigger-label\"]", true)], UseSelectInput.prototype, "label", void 0);
+UseSelectInput = __decorate([customElement("use-select-input")], UseSelectInput);
 //#endregion
-//#region src/elements/use-time/use-time.ts
-let UseTime = class UseTime extends LitElement {
+//#region src/elements/use-time-input/use-time-input.ts
+let UseTimeInput = class UseTimeInput extends LitElement {
 	static {
 		this.formAssociated = true;
 	}
@@ -1661,50 +1661,50 @@ let UseTime = class UseTime extends LitElement {
 __decorate([property({
 	type: Boolean,
 	attribute: true
-})], UseTime.prototype, "hours", void 0);
+})], UseTimeInput.prototype, "hours", void 0);
 __decorate([property({
 	type: Boolean,
 	attribute: true
-})], UseTime.prototype, "minutes", void 0);
+})], UseTimeInput.prototype, "minutes", void 0);
 __decorate([property({
 	type: Boolean,
 	attribute: true
-})], UseTime.prototype, "seconds", void 0);
+})], UseTimeInput.prototype, "seconds", void 0);
 __decorate([property({
 	type: Boolean,
 	attribute: true
-})], UseTime.prototype, "fractionalSeconds", void 0);
+})], UseTimeInput.prototype, "fractionalSeconds", void 0);
 __decorate([property({
 	type: Boolean,
 	attribute: true
-})], UseTime.prototype, "dayPeriod", void 0);
+})], UseTimeInput.prototype, "dayPeriod", void 0);
 __decorate([property({
 	type: String,
 	attribute: true
-})], UseTime.prototype, "hourFormat", void 0);
-__decorate([query("input[part=\"segment-input segment-input-hour\"]")], UseTime.prototype, "hourInput", void 0);
-__decorate([query("input[part=\"segment-input segment-input-minute\"]")], UseTime.prototype, "minuteInput", void 0);
-__decorate([query("input[part=\"segment-input segment-input-second\"]")], UseTime.prototype, "secondInput", void 0);
-__decorate([query("input[part=\"segment-input segment-input-fractionalSecond\"]")], UseTime.prototype, "fractionalSecondInput", void 0);
-__decorate([query("input[part=\"segment-input segment-input-dayPeriod\"]")], UseTime.prototype, "dayPeriodInput", void 0);
-__decorate([property({ type: Boolean })], UseTime.prototype, "disabled", null);
+})], UseTimeInput.prototype, "hourFormat", void 0);
+__decorate([query("input[part=\"segment-input segment-input-hour\"]")], UseTimeInput.prototype, "hourInput", void 0);
+__decorate([query("input[part=\"segment-input segment-input-minute\"]")], UseTimeInput.prototype, "minuteInput", void 0);
+__decorate([query("input[part=\"segment-input segment-input-second\"]")], UseTimeInput.prototype, "secondInput", void 0);
+__decorate([query("input[part=\"segment-input segment-input-fractionalSecond\"]")], UseTimeInput.prototype, "fractionalSecondInput", void 0);
+__decorate([query("input[part=\"segment-input segment-input-dayPeriod\"]")], UseTimeInput.prototype, "dayPeriodInput", void 0);
+__decorate([property({ type: Boolean })], UseTimeInput.prototype, "disabled", null);
 __decorate([property({
 	type: Boolean,
 	attribute: "readonly"
-})], UseTime.prototype, "readOnly", null);
+})], UseTimeInput.prototype, "readOnly", null);
 __decorate([property({
 	type: String,
 	attribute: true
-})], UseTime.prototype, "value", null);
+})], UseTimeInput.prototype, "value", null);
 __decorate([property({
 	type: String,
 	attribute: true
-})], UseTime.prototype, "locale", void 0);
+})], UseTimeInput.prototype, "locale", void 0);
 __decorate([property({
 	type: String,
 	attribute: true
-})], UseTime.prototype, "format", void 0);
-UseTime = __decorate([customElement("use-time")], UseTime);
+})], UseTimeInput.prototype, "format", void 0);
+UseTimeInput = __decorate([customElement("use-time-input")], UseTimeInput);
 //#endregion
 //#region src/elements/use-treeitem/use-treeitem.ts
 var _UseTreeitem;
@@ -3922,8 +3922,8 @@ __decorate([property({ type: Boolean })], UseMonthPicker.prototype, "disabled",
 __decorate([property({ type: String })], UseMonthPicker.prototype, "value", null);
 UseMonthPicker = __decorate([customElement("use-month-picker")], UseMonthPicker);
 //#endregion
-//#region src/elements/use-datetime/use-datetime.ts
-let UseDatetime = class UseDatetime extends LitElement {
+//#region src/elements/use-datetime-input/use-datetime-input.ts
+let UseDatetimeInput = class UseDatetimeInput extends LitElement {
 	static {
 		this.formAssociated = true;
 	}
@@ -4003,7 +4003,7 @@ let UseDatetime = class UseDatetime extends LitElement {
 	}
 	render() {
 		return html`
-      <use-date
+      <use-date-input
         part="date"
         value=${this.#dateValue}
         .disabled=${this.disabled}
@@ -4011,8 +4011,8 @@ let UseDatetime = class UseDatetime extends LitElement {
         .locale=${this.locale}
         @input=${this.#handleInput}
         exportparts="segment-input, segment-literal"
-      ></use-date>
-      <use-time
+      ></use-date-input>
+      <use-time-input
         part="time"
         value=${this.#timeValue}
         .disabled=${this.disabled}
@@ -4026,7 +4026,7 @@ let UseDatetime = class UseDatetime extends LitElement {
         .hourFormat=${this.hourFormat}
         @input=${this.#handleInput}
         exportparts="segment-input, segment-literal, segment-input-dayPeriod"
-      ></use-time>
+      ></use-time-input>
     `;
 	}
 	static {
@@ -4039,43 +4039,43 @@ let UseDatetime = class UseDatetime extends LitElement {
   `;
 	}
 };
-__decorate([query("use-date", true)], UseDatetime.prototype, "dateElement", void 0);
-__decorate([query("use-time", true)], UseDatetime.prototype, "timeElement", void 0);
-__decorate([property({ type: Boolean })], UseDatetime.prototype, "disabled", null);
+__decorate([query("use-date-input", true)], UseDatetimeInput.prototype, "dateElement", void 0);
+__decorate([query("use-time-input", true)], UseDatetimeInput.prototype, "timeElement", void 0);
+__decorate([property({ type: Boolean })], UseDatetimeInput.prototype, "disabled", null);
 __decorate([property({
 	type: Boolean,
 	attribute: "readonly"
-})], UseDatetime.prototype, "readOnly", null);
+})], UseDatetimeInput.prototype, "readOnly", null);
 __decorate([property({
 	type: String,
 	attribute: true
-})], UseDatetime.prototype, "locale", void 0);
+})], UseDatetimeInput.prototype, "locale", void 0);
 __decorate([property({
 	type: Boolean,
 	attribute: true
-})], UseDatetime.prototype, "hours", void 0);
+})], UseDatetimeInput.prototype, "hours", void 0);
 __decorate([property({
 	type: Boolean,
 	attribute: true
-})], UseDatetime.prototype, "minutes", void 0);
+})], UseDatetimeInput.prototype, "minutes", void 0);
 __decorate([property({
 	type: Boolean,
 	attribute: true
-})], UseDatetime.prototype, "seconds", void 0);
+})], UseDatetimeInput.prototype, "seconds", void 0);
 __decorate([property({
 	type: Boolean,
 	attribute: true
-})], UseDatetime.prototype, "fractionalSeconds", void 0);
+})], UseDatetimeInput.prototype, "fractionalSeconds", void 0);
 __decorate([property({
 	type: Boolean,
 	attribute: true
-})], UseDatetime.prototype, "dayPeriod", void 0);
+})], UseDatetimeInput.prototype, "dayPeriod", void 0);
 __decorate([property({
 	type: String,
 	attribute: true
-})], UseDatetime.prototype, "hourFormat", void 0);
-__decorate([property({ type: String })], UseDatetime.prototype, "value", null);
-UseDatetime = __decorate([customElement("use-datetime")], UseDatetime);
+})], UseDatetimeInput.prototype, "hourFormat", void 0);
+__decorate([property({ type: String })], UseDatetimeInput.prototype, "value", null);
+UseDatetimeInput = __decorate([customElement("use-datetime-input")], UseDatetimeInput);
 //#endregion
 //#region src/elements/use-scrollarea/use-scrollarea.ts
 let UseScrollarea = class UseScrollarea extends LitElement {
@@ -4135,4 +4135,4 @@ let UseScrollarea = class UseScrollarea extends LitElement {
 };
 UseScrollarea = __decorate([customElement("use-scrollarea")], UseScrollarea);
 //#endregion
-export { UseCalendarBase, UseDate, UseDatePicker, UseDatetime, UseDropdown, UseDuration, UseFocusgroup, UseListbox, UseMenu, UseMonthPicker, UseOption, UseScrollarea, UseSelect, UseTime, UseTree, UseTreeitem, UseWeekPicker, UseWidget };
+export { UseCalendarBase, UseDateInput, UseDatePicker, UseDatetimeInput, UseDropdown, UseDurationInput, UseFocusgroup, UseListboxInput, UseMenu, UseMonthPicker, UseOption, UseScrollarea, UseSelectInput, UseTimeInput, UseTree, UseTreeitem, UseWeekPicker, UseWidget };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-wc",
-  "version": "1.0.0-pre.31",
+  "version": "1.0.0-pre.32",
   "private": false,
   "homepage": "https://usewc.com",
   "bugs": "https://github.com/dang-rabbits/use-wc/issues",
@@ -23,11 +23,11 @@
     "./package.json": "./package.json"
   },
   "scripts": {
-    "build": "tsc && npm run analyze && vp pack",
+    "pack": "tsc && vp run analyze && vp pack",
     "preview": "vp preview",
     "analyze": "custom-elements-manifest analyze",
     "storybook": "storybook dev -p ${PORT:-6006}",
-    "build-storybook": "npm run build && npm run analyze && storybook build",
+    "build": "vp run pack && storybook build",
     "test": "vp test",
     "check": "vp check ./src",
     "prepare": "vp config"

package/vscode.html-custom-data.json

@@ -3,7 +3,7 @@
   "version": 1.1,
   "tags": [
     {
-      "name": "use-date",
+      "name": "use-date-input",
       "description": "Displays a date picker using segmented inputs for year, month, and day.\n\nUses browser locale for formatting and ARIA labels.\n---\n",
       "attributes": [
         { "name": "disabled", "values": [] },
@@ -53,7 +53,7 @@
       "references": []
     },
     {
-      "name": "use-datetime",
+      "name": "use-datetime-input",
       "description": "Displays a date and time picker by combining `use-date` and `use-time`.\n\nThe value format is ISO 8601-like: `YYYY-MM-DDTHH:MM:SS.mmm`.\n---\n",
       "attributes": [
         { "name": "disabled", "values": [] },
@@ -82,7 +82,7 @@
       "references": []
     },
     {
-      "name": "use-duration",
+      "name": "use-duration-input",
       "description": "Displays the parts of an ISO 8601 duration string using [`Intl.DurationFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DurationFormat).\n\nUses the [`duration-fns`](https://www.npmjs.com/package/duration-fns) library for parsing ISO 8601 values.\n\n<baseline-status featureId=\"intl-duration-format\"></baseline-status>\n---\n",
       "attributes": [
         { "name": "years", "values": [] },
@@ -179,7 +179,7 @@
       "references": []
     },
     {
-      "name": "use-listbox",
+      "name": "use-listbox-input",
       "description": "\n---\n\n\n### **Events:**\n - **use-change**\n\n### **Slots:**\n - **default** - NodeList of `use-option` elements\n- **arrow** - undefined",
       "attributes": [
         { "name": "name", "values": [] },
@@ -242,7 +242,7 @@
     },
     {
       "name": "use-option",
-      "description": "`use-option` is a custom element that represents an option in a `use-select` custom element.\n\nThe children of this element are the content of the option and must not contain any interactive elements.\n---\n\n\n### **Slots:**\n - **selected-indicator** - undefined\n- _default_ - undefined",
+      "description": "`use-option` is a custom element that represents an option in a `use-select-input` custom element.\n\nThe children of this element are the content of the option and must not contain any interactive elements.\n---\n\n\n### **Slots:**\n - **selected-indicator** - undefined\n- _default_ - undefined",
       "attributes": [
         { "name": "selected", "values": [] },
         { "name": "disabled", "values": [] },
@@ -257,8 +257,8 @@
       "references": []
     },
     {
-      "name": "use-select",
-      "description": "## Multiple\n\nThe `use-listbox` provides an attribute for selecting multiple options.\n\n## Long term plan\n\nThis web component was built with the intent to be replaced by browser-native `base-select` support once it becomes baseline.\n\n<baseline-status featureId=\"customizable-select\"></baseline-status>\n---\n\n\n### **Slots:**\n - **default** - NodeList of `use-option` elements\n- **arrow** - undefined",
+      "name": "use-select-input",
+      "description": "## Multiple\n\nThe `use-listbox-input` provides an attribute for selecting multiple options.\n\n## Long term plan\n\nThis web component was built with the intent to be replaced by browser-native `base-select` support once it becomes baseline.\n\n<baseline-status featureId=\"customizable-select\"></baseline-status>\n---\n\n\n### **Slots:**\n - **default** - NodeList of `use-option` elements\n- **arrow** - undefined",
       "attributes": [
         { "name": "name", "values": [] },
         { "name": "placeholder", "values": [] },
@@ -267,7 +267,7 @@
       "references": []
     },
     {
-      "name": "use-time",
+      "name": "use-time-input",
       "description": "Displays time picker using [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat).\n\nAllows users to pick time values with proper localization and formatting.\n---\n\n\n### **Events:**\n - **input**",
       "attributes": [
         { "name": "hours", "values": [] },
@@ -307,7 +307,7 @@
     },
     {
       "name": "use-treeitem",
-      "description": "`use-option` is a custom element that represents an option in a `use-select` custom element.\n\nThe children of this element are the content of the option and must not contain any interactive elements.\n\n## To Do\n\n- [ ] When the parent is no longer disabled, update the items without their own `[disabled]`\n---\n\n\n### **Slots:**\n - **selected-indicator** - undefined\n- _default_ - undefined",
+      "description": "`use-option` is a custom element that represents an option in a `use-select-input` custom element.\n\nThe children of this element are the content of the option and must not contain any interactive elements.\n\n## To Do\n\n- [ ] When the parent is no longer disabled, update the items without their own `[disabled]`\n---\n\n\n### **Slots:**\n - **selected-indicator** - undefined\n- _default_ - undefined",
       "attributes": [
         { "name": "selected", "values": [] },
         { "name": "disabled", "values": [] },