use-wc 1.0.0-pre.39 → 1.0.0-pre.40

package/dist/design-system.css

@@ -15,7 +15,9 @@
   }
 
   :is(button, a, details summary, use-widget):not([data-appear-as="native"]):focus-visible,
-  :is(input, textarea, select, use-date, use-time, use-datetime, use-duration):not([data-appear-as="native"]):focus,
+  :is(input, textarea, select, use-date-input, use-time-input, use-datetime-input, use-duration-input):not(
+      [data-appear-as="native"]
+    ):focus,
   input[type="file"]:not([data-appear-as="native"]):focus-visible,
   use-dropdown:not([data-appear-as="native"])::part(trigger):focus-visible,
   [data-appear-as="input"]:has(input:focus) {
@@ -26,14 +28,14 @@
 
   :is(
     input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"], [data-appear-as])),
-    select:not([data-appear-as="native"]),
+    select,
     textarea,
     [data-appear-as="input"],
-    use-date:not([data-appear-as="native"]),
-    use-time:not([data-appear-as="native"]),
-    use-datetime:not([data-appear-as="native"]),
-    use-duration:not([data-appear-as="native"])
-  ),
+    use-date-input,
+    use-time-input,
+    use-datetime-input,
+    use-duration-input
+  ):not([data-appear-as="native"]),
   use-listbox-input:not([data-appear-as="native"])::part(listbox) {
     border: var(--usewc-layout-input-border) var(--usewc-effect-input-border-style)
       var(--usewc-color-input-border-static);
@@ -479,10 +481,58 @@
 }
 
 @layer web-components {
+  /* Composite datetime control — host gets the single input wrapper appearance via the main
+     input styling block. The date and time sub-inputs live in shadow DOM and are reached via
+     ::part(date) and ::part(time) to override their internal layout. Segment inputs are
+     re-exported via exportparts so ::part(segment-input) reaches them too. */
+  use-datetime-input:not([data-appear-as="native"]) {
+    display: inline-flex;
+    align-items: center;
+    width: fit-content;
+    gap: var(--usewc-layout-input-gap-inline);
+    padding-inline: calc(var(--usewc-layout-input-padding-inline) - var(--usewc-layout-input-segment-padding-inline));
+
+    &::part(date),
+    &::part(time) {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--usewc-layout-input-segment-padding-inline);
+    }
+
+    &::part(segment-input) {
+      all: unset;
+      box-sizing: content-box;
+      appearance: none;
+      field-sizing: content;
+      background: var(--usewc-color-input-segment-background-static);
+      outline: none;
+      border-radius: var(--usewc-effect-input-border-radius);
+      min-width: 2ch;
+      width: fit-content;
+      text-align: end;
+      padding-inline: var(--usewc-layout-input-segment-padding-inline);
+      font-variant-numeric: tabular-nums;
+    }
+
+    &::part(segment-input-dayPeriod) {
+      text-align: center;
+      min-width: 2em;
+      padding-inline: 0;
+    }
+
+    &::part(segment-input):hover {
+      background: var(--usewc-color-input-segment-background-hover);
+    }
+
+    &::part(segment-input):focus,
+    &::selection {
+      background: var(--usewc-color-input-segment-background-focus);
+      color: var(--usewc-color-input-segment-text-focus);
+    }
+  }
+
   /* Segment based controls */
-  :is(use-date, use-time, use-datetime, use-duration):not([data-appear-as="native"]),
-  use-datetime::part(date),
-  use-datetime::part(time) {
+  :is(use-date-input, use-time-input):not([data-appear-as="native"]) {
     display: inline-flex;
     align-items: center;
     width: fit-content;
@@ -521,17 +571,43 @@
     }
   }
 
-  :is(use-datetime, use-duration):not([data-appear-as="native"]) {
+  use-duration-input:not([data-appear-as="native"]) {
+    display: inline-flex;
+    align-items: center;
+    width: fit-content;
     gap: var(--usewc-layout-input-gap-inline);
-  }
-
-  use-duration:not([data-appear-as="native"]) {
-    padding-inline-end: var(--usewc-layout-input-padding-inline);
+    padding-inline: calc(var(--usewc-layout-input-padding-inline) - var(--usewc-layout-input-segment-padding-inline));
 
     &::part(segment) {
       display: inline-flex;
+      align-items: center;
       gap: var(--usewc-layout-input-segment-padding-inline);
     }
+
+    &::part(segment-input) {
+      all: unset;
+      box-sizing: content-box;
+      appearance: none;
+      field-sizing: content;
+      background: var(--usewc-color-input-segment-background-static);
+      outline: none;
+      border-radius: var(--usewc-effect-input-border-radius);
+      min-width: 2ch;
+      width: fit-content;
+      text-align: end;
+      padding-inline: var(--usewc-layout-input-segment-padding-inline);
+      font-variant-numeric: tabular-nums;
+    }
+
+    &::part(segment-input):hover {
+      background: var(--usewc-color-input-segment-background-hover);
+    }
+
+    &::part(segment-input):focus,
+    &::selection {
+      background: var(--usewc-color-input-segment-background-focus);
+      color: var(--usewc-color-input-segment-text-focus);
+    }
   }
 
   select:not([data-appear-as="native"]),

package/dist/use-wc.mjs

@@ -367,9 +367,17 @@ let UseDateInput = class UseDateInput extends UseLocaleElement {
 		].join("-");
 		this.#internals.setFormValue(this.#internalValue);
 	}
+	#segmentMaximum = {
+		year: null,
+		month: 12,
+		day: 31
+	};
 	#handleSegmentInput(segment) {
 		return (event) => {
 			const target = event.target;
+			const maximum = this.#segmentMaximum[segment];
+			const numericValue = parseInt(target.value, 10);
+			if (maximum !== null && !isNaN(numericValue) && numericValue > maximum) target.value = String(maximum);
 			this.#valueData[segment] = target.value;
 			this.#updateInternalValue();
 		};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-wc",
-  "version": "1.0.0-pre.39",
+  "version": "1.0.0-pre.40",
   "private": false,
   "homepage": "https://usewc.com",
   "bugs": "https://github.com/dang-rabbits/use-wc/issues",