@uniai-fe/uds-primitives 0.11.0 → 0.12.0

package/dist/styles.css

@@ -588,8 +588,6 @@
   --input-status-success-color: var(--color-primary-default);
   /* TimePicker tokens */
   --input-time-width: 100%;
-  --input-time-flex: 0 1 auto;
-  --input-time-layout-gap: var(--input-layout-gap);
   --input-time-height-small: var(--input-default-height-small);
   --input-time-height-medium: var(--input-default-height-medium);
   --input-time-height-large: var(--input-default-height-large);
@@ -598,29 +596,19 @@
   --input-time-padding-block: var(--input-default-padding-block);
   --input-time-secondary-padding-block: var(--input-secondary-padding-block);
   --input-time-table-padding-inline: var(--spacing-padding-4);
-  --input-time-radius: var(--input-default-radius-base);
+  --input-time-radius: var(--theme-radius-medium-3);
   --input-time-tertiary-radius: var(--input-tertiary-radius-base);
   --input-time-table-radius: var(--input-table-radius-base);
-  --input-time-field-gap: var(--spacing-gap-2);
-  --input-time-field-width: 2.4ch;
-  --input-time-period-field-width: 3.8ch;
+  --input-time-field-gap: 0;
+  --input-time-field-width: 2.7ch;
+  --input-time-field-middle-width: 2.2ch;
+  --input-time-period-field-width: 4.2ch;
   --input-time-field-height: 100%;
-  --input-time-field-y-offset: 2px;
-  --input-time-section-gap: var(--spacing-gap-1);
-  --input-time-section-button-size: 28px;
-  --input-time-section-button-radius: var(--theme-radius-medium-1);
-  --input-time-left-section-width: 44px;
-  --input-time-section-width: 56px;
-  --input-time-section-width-with-clear: 92px;
-  --input-time-section-edge-gap: var(--input-time-padding-inline);
-  --input-time-left-section-padding-offset: 44px;
-  --input-time-right-section-padding-offset: 64px;
-  --input-time-right-section-padding-offset-with-clear: 100px;
-  --input-time-table-section-padding-offset: 48px;
-  --input-time-table-clear-padding-offset: 56px;
-  --input-time-table-field-width: 2.4ch;
-  --input-time-table-period-field-width: 3.8ch;
   --input-time-icon-size: 24px;
+  --input-time-stepper-width: 28px;
+  --input-time-stepper-button-height: 28px;
+  --input-time-stepper-radius: var(--theme-radius-medium-3);
+  --input-time-stepper-icon-size: 16px;
   --input-time-text-color: var(--input-text-color);
   --input-time-text-disabled-color: var(--input-text-disabled-color);
   --input-time-placeholder-color: var(--input-placeholder-color);
@@ -660,32 +648,6 @@
   --input-time-secondary-surface-color: var(--input-secondary-surface-color);
   --input-time-surface-disabled-color: var(--input-surface-disabled-color);
   --input-time-table-surface-color: var(--input-table-surface-color);
-  --input-time-dropdown-padding: var(--spacing-padding-2);
-  --input-time-dropdown-radius: var(--theme-radius-large-1);
-  --input-time-dropdown-border-width: 1px;
-  --input-time-dropdown-border-color: var(--color-border-standard-cool-gray);
-  --input-time-dropdown-surface-color: var(--color-common-100);
-  --input-time-dropdown-shadow: 0px 4px 22px rgba(19, 22, 32, 0.12);
-  --input-time-dropdown-content-height: 200px;
-  --input-time-dropdown-group-gap: var(--spacing-gap-3);
-  --input-time-option-gap: var(--spacing-gap-1);
-  --input-time-scrollarea-width: 64px;
-  --input-time-scrollarea-gutter: 8px;
-  --input-time-option-min-width: 56px;
-  --input-time-option-height: 32px;
-  --input-time-option-radius: var(--theme-radius-medium-1);
-  --input-time-option-color: var(--color-label-standard);
-  --input-time-option-hover-color: var(--color-label-strong);
-  --input-time-option-active-color: var(--color-common-100);
-  --input-time-option-hover-surface-color: var(--color-neutral-95);
-  --input-time-option-active-surface-color: var(--color-primary-default);
-  --input-time-option-font-size: var(--font-body-xsmall-size);
-  --input-time-option-line-height: var(--font-body-xsmall-line-height);
-  --input-time-option-font-weight: var(--font-body-xsmall-weight);
-  --input-time-presets-label-color: var(--color-label-alternative);
-  --input-time-presets-label-size: var(--font-label-small-size);
-  --input-time-presets-label-line-height: var(--font-label-small-line-height);
-  --input-time-presets-label-weight: var(--font-label-small-weight);
   --theme-navigation-height: 86px;
   --theme-navigation-padding-inline: 32px;
   --theme-navigation-padding-block-start: 8px;
@@ -995,6 +957,68 @@
   --table-td-text-size: 15px;
   --table-td-text-weight: var(--font-body-xsmall-weight);
   --table-td-text-line-height: var(--font-body-xsmall-line-height);
+  --time-picker-template-max-height: 800px;
+  --time-picker-template-viewport-gap: var(--spacing-gap-8);
+  --time-picker-template-padding: var(--spacing-padding-6);
+  --time-picker-template-gap: var(--spacing-gap-6);
+  --time-picker-template-section-gap: var(--spacing-gap-5);
+  --time-picker-template-text-color: var(--color-label-standard);
+  --time-picker-template-heading-size: var(--font-heading-small-size);
+  --time-picker-template-heading-line-height: var(
+    --font-heading-small-line-height
+  );
+  --time-picker-template-heading-weight: var(--font-heading-small-weight);
+  --time-picker-summary-height: 82px;
+  --time-picker-summary-padding-block: var(--spacing-padding-5);
+  --time-picker-summary-gap: var(--spacing-gap-3);
+  --time-picker-summary-radius: var(--theme-radius-large-2);
+  --time-picker-summary-surface-color: var(--color-surface-standard);
+  --time-picker-summary-border-color: var(--color-cool-gray-20);
+  --time-picker-summary-label-size: var(--font-body-xsmall-size);
+  --time-picker-summary-label-line-height: var(--font-body-xsmall-line-height);
+  --time-picker-summary-label-weight: var(--font-body-xsmall-weight);
+  --time-picker-summary-label-letter-spacing: var(
+    --font-body-xsmall-letter-spacing
+  );
+  --time-picker-summary-value-size: var(--font-heading-small-size);
+  --time-picker-summary-value-line-height: var(--font-body-large-line-height);
+  --time-picker-summary-value-weight: var(--font-heading-small-weight);
+  --time-picker-summary-value-letter-spacing: 0.2px;
+  --time-picker-option-gap: var(--spacing-gap-5);
+  --time-picker-option-height: var(--theme-size-medium-1);
+  --time-picker-option-border-width: 1px;
+  --time-picker-option-border-color: var(--color-border-standard-cool-gray);
+  --time-picker-option-radius: var(--theme-radius-medium-3);
+  --time-picker-option-surface-color: var(--color-common-100);
+  --time-picker-option-color: var(--color-label-standard);
+  --time-picker-option-selected-color: var(--color-primary-default);
+  --time-picker-option-selected-surface-color: var(--color-neutral-99);
+  --time-picker-option-font-size: var(--font-body-xsmall-size);
+  --time-picker-option-line-height: var(--font-body-xsmall-line-height);
+  --time-picker-period-height: var(--theme-size-medium-1);
+  --time-picker-period-padding: var(--spacing-padding-1);
+  --time-picker-period-radius: var(--theme-radius-large-1);
+  --time-picker-period-item-radius: var(--theme-radius-medium-4);
+  --time-picker-period-surface-color: var(--color-cool-gray-85);
+  --time-picker-period-item-surface-color: var(--color-common-100);
+  --time-picker-period-item-color: var(--color-label-standard);
+  --time-picker-period-item-shadow:
+    0 2px 8px rgba(0, 0, 0, 0.06), 0 0 4px rgba(0, 0, 0, 0.12);
+  --time-picker-period-item-font-size: var(--font-body-xsmall-size);
+  --time-picker-period-item-font-weight: var(--font-body-medium-weight);
+  --time-picker-period-item-line-height: var(--font-body-xsmall-line-height);
+  --time-picker-minute-stepper-height: var(--theme-size-medium-1);
+  --time-picker-minute-stepper-gap: var(--spacing-gap-13);
+  --time-picker-minute-stepper-radius: var(--theme-radius-large-1);
+  --time-picker-minute-stepper-surface-color: var(--color-cool-gray-85);
+  --time-picker-minute-control-size: var(--theme-size-small-2);
+  --time-picker-minute-value-size: var(--font-body-xsmall-size);
+  --time-picker-minute-value-line-height: var(--font-body-xsmall-line-height);
+  --time-picker-minute-value-weight: var(--font-body-medium-weight);
+  --time-picker-template-footer-gap: var(--spacing-gap-6);
+  --time-picker-clear-color: var(--color-error);
+  --time-picker-clear-size: var(--font-body-xsmall-size);
+  --time-picker-clear-line-height: var(--font-body-xsmall-line-height);
   --toast-stack-margin: var(--spacing-padding-7);
   --toast-stack-gap: var(--spacing-gap-3);
   --toast-stack-z-index: 10000;
@@ -5124,195 +5148,45 @@ figure.chip {
 
 .input-time {
   display: flex;
-  flex-direction: column;
-  gap: var(--input-time-layout-gap);
   width: var(--input-time-width);
-  flex: var(--input-time-flex);
   min-width: 0;
+  color: var(--input-time-text-color);
 }
 .input-time:where([data-width="auto"]) {
-  --input-time-width: auto;
-  --input-time-flex: 0 1 auto;
+  width: auto;
 }
 .input-time:where([data-width="fill"]) {
-  --input-time-width: auto;
-  --input-time-flex: 1 1 0%;
-}
-.input-time:where([data-width="full"]),
-.input-time:where([data-block="true"]) {
-  --input-time-width: 100%;
-  --input-time-flex: 0 0 100%;
-}
-.input-time:where([data-width="fit"]) {
-  --input-time-width: fit-content;
-  --input-time-flex: 0 0 auto;
-}
-.input-time:where([data-width="custom"]) {
-  --input-time-flex: 0 0 auto;
+  flex: 1 1 0%;
+  width: auto;
 }
-.input-time:where([data-priority="table"]) {
-  display: block;
-  --input-time-width: 100%;
-  height: 100%;
+.input-time:where([data-width="full"]) {
+  width: 100%;
 }
-
-.input-time-picker,
-.input-time-wrapper {
+.input-time:where([data-block="true"]) {
   width: 100%;
 }
-
-.input-time-wrapper {
-  position: relative;
+.input-time:where([data-width="fit"]) {
+  width: fit-content;
 }
 
-.input-time-input {
-  box-sizing: border-box;
-  width: 100%;
+.input-time-trigger-input {
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+  min-width: 0;
   min-height: var(--input-time-height-medium);
+  padding: var(--input-time-padding-block) var(--input-time-padding-inline);
   border: var(--input-time-border-width) solid var(--input-time-border-color);
   border-radius: var(--input-time-radius);
   background-color: var(--input-time-surface-color);
-  color: var(--input-time-text-color);
-  padding: var(--input-time-padding-block) var(--input-time-padding-inline);
-  box-shadow: none;
-  transition:
-    border-color 0.15s ease,
-    background-color 0.15s ease;
-}
-
-.input-time:where([data-icon-position="left"]) .input-time-input {
-  padding-inline-start: var(--input-time-left-section-padding-offset);
-}
-.input-time:where([data-icon-position="left"]):where([data-has-clear="true"])
-  .input-time-input {
-  padding-inline-end: var(--input-time-right-section-padding-offset);
-}
-
-.input-time:where([data-icon-position="right"]) .input-time-input {
-  padding-inline-end: var(--input-time-right-section-padding-offset);
-}
-.input-time:where([data-icon-position="right"]):where([data-clearable="true"])
-  .input-time-input {
-  padding-inline-end: var(--input-time-right-section-padding-offset-with-clear);
-}
-
-.input-time:where([data-size="small"]) .input-time-input {
-  min-height: var(--input-time-height-small);
-  --input-time-font-size: var(--input-time-text-small-size);
-  --input-time-line-height: var(--input-time-text-small-line-height);
-  --input-time-font-weight: var(--input-time-text-small-weight);
-  --input-time-letter-spacing: var(--input-time-text-small-letter-spacing);
-}
-
-.input-time:where([data-size="large"]) .input-time-input {
-  min-height: var(--input-time-height-large);
-  --input-time-font-size: var(--input-time-text-large-size);
-  --input-time-line-height: var(--input-time-text-large-line-height);
-  --input-time-font-weight: var(--input-time-text-large-weight);
-  --input-time-letter-spacing: var(--input-time-text-large-letter-spacing);
-}
-
-.input-time:where([data-priority="secondary"]) .input-time-input {
-  border: none;
-  border-bottom: var(--input-time-border-width) solid
-    var(--input-time-border-color);
-  border-radius: 0;
-  background-color: var(--input-time-secondary-surface-color);
-  padding-inline: 0;
-  padding-block: var(--input-time-secondary-padding-block);
-}
-
-.input-time:where([data-priority="tertiary"]) .input-time-input {
-  min-height: var(--input-time-tertiary-height);
-  border-radius: var(--input-time-tertiary-radius);
-}
-
-.input-time:where([data-priority="table"]) {
-  height: 100%;
-}
-.input-time:where([data-priority="table"]) .input-time-picker,
-.input-time:where([data-priority="table"]) .input-time-wrapper,
-.input-time:where([data-priority="table"]) .input-time-input {
-  height: 100%;
-}
-.input-time:where([data-priority="table"]) .input-time-input {
-  min-height: var(--input-time-height-small);
-  border-color: var(--input-time-table-border-color);
-  border-radius: var(--input-time-table-radius);
-  background-color: var(--input-time-table-surface-color);
-  padding-inline: var(--input-time-table-padding-inline);
-  --input-time-font-size: var(--input-time-table-text-size);
-  --input-time-line-height: var(--input-time-table-text-line-height);
-  --input-time-font-weight: var(--input-time-table-text-weight);
-}
-.input-time:where([data-priority="table"]):where([data-icon-position="left"])
-  .input-time-input {
-  padding-inline-start: var(--input-time-table-section-padding-offset);
-}
-.input-time:where([data-priority="table"]):where([data-icon-position="right"])
-  .input-time-input {
-  padding-inline-end: var(--input-time-right-section-padding-offset);
-}
-.input-time:where([data-priority="table"]):where([data-has-clear="true"])
-  .input-time-input {
-  padding-inline-end: var(--input-time-table-clear-padding-offset);
-}
-.input-time:where([data-priority="table"]) .input-time-fields-group {
-  --input-time-field-y-offset: 0px;
-}
-.input-time:where([data-priority="table"]) .input-time-field {
-  --input-time-field-width: var(--input-time-table-field-width);
-}
-.input-time:where([data-priority="table"]) .input-time-field:where(select) {
-  --input-time-period-field-width: var(--input-time-table-period-field-width);
-}
-
-.input-time:where([data-state="active"]) .input-time-input {
-  border-color: var(--input-time-border-active-color);
-  border-width: var(--input-time-border-width-emphasis);
-}
-
-.input-time:where([data-state="success"]) .input-time-input {
-  border-color: var(--input-time-border-success-color);
-  border-width: var(--input-time-border-width-emphasis);
-}
-
-.input-time:where([data-state="error"]) .input-time-input {
-  border-color: var(--input-time-border-error-color);
-  border-width: var(--input-time-border-width-emphasis);
-}
-
-.input-time:where([data-state="disabled"]) .input-time-input,
-.input-time:where([data-readonly="true"]) .input-time-input {
-  border-color: var(--input-time-border-disabled-color);
-  background-color: var(--input-time-surface-disabled-color);
-}
-
-.input-time:where([data-priority="secondary"][data-state="active"])
-  .input-time-input,
-.input-time:where([data-priority="secondary"][data-state="success"])
-  .input-time-input,
-.input-time:where([data-priority="secondary"][data-state="error"])
-  .input-time-input {
-  border-bottom-width: var(--input-time-border-width-emphasis);
-}
-
-.input-time-fields-root {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  width: 100%;
-  color: var(--input-time-text-color);
 }
 
 .input-time-fields-group {
   display: flex;
   align-items: center;
-  gap: var(--input-time-field-gap);
-  height: 100%;
+  flex: 1 1 auto;
   min-width: 0;
-  color: var(--input-time-text-color);
-  transform: translateY(var(--input-time-field-y-offset));
+  gap: var(--input-time-field-gap);
 }
 .input-time-fields-group > span {
   color: var(--input-time-separator-color);
@@ -5327,6 +5201,7 @@ figure.chip {
   height: var(--input-time-field-height);
   padding: 0;
   border: 0;
+  outline: none;
   background-color: transparent;
   color: var(--input-time-text-color);
   caret-color: var(--input-time-text-color);
@@ -5335,163 +5210,168 @@ figure.chip {
   font-weight: var(--input-time-font-weight);
   letter-spacing: var(--input-time-letter-spacing);
   text-align: center;
-  outline: none;
-  box-shadow: none;
+}
+.input-time-field:first-child {
+  text-align: right;
+}
+.input-time-field:last-of-type {
+  text-align: left;
+}
+.input-time-field:not(:first-child):not(:last-of-type) {
+  width: var(--input-time-field-middle-width);
+  min-width: var(--input-time-field-middle-width);
 }
 .input-time-field::placeholder {
   color: var(--input-time-placeholder-color);
 }
-.input-time-field:disabled {
-  color: var(--input-time-text-disabled-color);
-  cursor: default;
-}
 
-.input-time-field:where(select) {
+.input-time-period-field {
   width: var(--input-time-period-field-width);
-  min-width: var(--input-time-period-field-width);
+  height: var(--input-time-field-height);
+  padding: 0;
+  border: 0;
+  outline: none;
   appearance: none;
-  text-align-last: center;
+  background-color: transparent;
+  color: var(--input-time-text-color);
+  font-size: var(--input-time-font-size);
+  text-align: center;
 }
 
-.input-time-section {
-  box-sizing: border-box;
-  position: absolute;
-  z-index: 1;
-  top: 0;
-  bottom: 0;
+.input-time-icon-button {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--input-time-section-width);
-}
-.input-time-section:where([data-position="left"]) {
-  left: 0;
-  width: var(--input-time-left-section-width);
-}
-.input-time-section:where([data-position="right"]) {
-  right: 0;
-  justify-content: flex-end;
-  padding-inline-end: var(--input-time-section-edge-gap);
+  flex: 0 0 var(--input-time-icon-size);
+  width: var(--input-time-icon-size);
+  height: var(--input-time-icon-size);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  color: var(--input-time-icon-color);
+  cursor: pointer;
 }
-
-.input-time:where([data-icon-position="right"][data-clearable="true"])
-  .input-time-section:where([data-position="right"]) {
-  width: var(--input-time-section-width-with-clear);
+.input-time-icon-button svg {
+  display: block;
+  width: 100%;
+  height: 100%;
 }
 
-.input-time-section-group {
+.input-time-stepper {
   display: flex;
-  align-items: center;
-  gap: var(--input-time-section-gap);
+  flex: 0 0 var(--input-time-stepper-width);
+  flex-direction: column;
+  align-self: stretch;
 }
 
-.input-time-section-button {
+.input-time-stepper-button {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--input-time-section-button-size);
-  height: var(--input-time-section-button-size);
+  flex: 0 0 var(--input-time-stepper-button-height);
+  min-height: 0;
   margin: 0;
   padding: 0;
-  border: 0;
-  border-radius: var(--input-time-section-button-radius);
-  background-color: transparent;
-  color: var(--input-time-icon-color);
+  border: var(--input-time-border-width) solid var(--input-time-border-color);
+  border-left: 0;
+  background-color: var(--input-time-surface-color);
+  color: var(--input-time-text-color);
   cursor: pointer;
 }
-.input-time-section-button:where([aria-disabled="true"]) {
-  color: var(--input-time-icon-disabled-color);
-  cursor: default;
+.input-time-stepper-button:first-child {
+  border-radius: 0 var(--input-time-stepper-radius) 0 0;
 }
-
-.input-time-icon-graphic,
-.input-time-section-button svg {
-  display: flex;
-  width: var(--input-time-icon-size);
-  height: var(--input-time-icon-size);
+.input-time-stepper-button:last-child {
+  border-top: 0;
+  border-radius: 0 0 var(--input-time-stepper-radius) 0;
+}
+.input-time-stepper-button svg {
+  display: block;
+  width: var(--input-time-stepper-icon-size);
+  height: var(--input-time-stepper-icon-size);
 }
 
-.input-time-dropdown {
-  position: absolute;
-  z-index: 20;
-  box-sizing: border-box;
-  max-height: calc(
-    var(--input-time-dropdown-content-height) +
-      var(--input-time-dropdown-padding) + var(--input-time-dropdown-padding)
-  );
-  padding: var(--input-time-dropdown-padding);
-  border: var(--input-time-dropdown-border-width) solid
-    var(--input-time-dropdown-border-color);
-  border-radius: var(--input-time-dropdown-radius);
-  background-color: var(--input-time-dropdown-surface-color);
-  box-shadow: var(--input-time-dropdown-shadow);
-  overflow: hidden;
+.input-time:where([data-active-unit]) .input-time-trigger-input {
+  border-radius: var(--input-time-radius) 0 0 var(--input-time-radius);
 }
 
-.input-time-scrollarea {
-  position: relative;
-  min-width: var(--input-time-scrollarea-width);
-  height: var(--input-time-dropdown-content-height);
-  max-height: var(--input-time-dropdown-content-height);
-  overflow: hidden;
+.input-time:where([data-size="small"]) .input-time-trigger-input {
+  min-height: var(--input-time-height-small);
+}
+.input-time:where([data-size="small"]) .input-time-field {
+  font-size: var(--input-time-text-small-size);
+  line-height: var(--input-time-text-small-line-height);
+  font-weight: var(--input-time-text-small-weight);
 }
 
-.input-time-scrollarea .mantine-ScrollArea-viewport {
-  box-sizing: border-box;
-  height: 100%;
-  max-height: var(--input-time-dropdown-content-height);
-  padding-inline-end: var(--input-time-scrollarea-gutter);
-  scrollbar-gutter: stable;
-  overflow: auto;
+.input-time:where([data-size="large"]) .input-time-trigger-input {
+  min-height: var(--input-time-height-large);
+}
+.input-time:where([data-size="large"]) .input-time-field {
+  font-size: var(--input-time-text-large-size);
+  line-height: var(--input-time-text-large-line-height);
+  font-weight: var(--input-time-text-large-weight);
 }
 
-.input-time-controls-list-group {
-  display: flex;
-  gap: var(--input-time-dropdown-group-gap);
-  max-height: var(--input-time-dropdown-content-height);
-  overflow: hidden;
+.input-time:where([data-priority="secondary"]) .input-time-trigger-input {
+  border: 0;
+  border-bottom: var(--input-time-border-width) solid
+    var(--input-time-border-color);
+  border-radius: 0;
+  background-color: var(--input-time-secondary-surface-color);
+  padding-inline: 0;
 }
 
-.input-time-controls-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--input-time-option-gap);
-  width: var(--input-time-option-min-width);
+.input-time:where([data-priority="tertiary"]) .input-time-trigger-input {
+  min-height: var(--input-time-tertiary-height);
+  border-radius: var(--input-time-tertiary-radius);
 }
 
-.input-time-option,
-.input-time-preset-option {
-  width: var(--input-time-option-min-width);
-  min-width: var(--input-time-option-min-width);
-  height: var(--input-time-option-height);
-  border-radius: var(--input-time-option-radius);
-  color: var(--input-time-option-color);
-  font-size: var(--input-time-option-font-size);
-  line-height: var(--input-time-option-line-height);
-  font-weight: var(--input-time-option-font-weight);
+.input-time:where([data-priority="table"]) {
+  width: 100%;
+  height: 100%;
 }
-.input-time-option:where([data-active]),
-.input-time-preset-option:where([data-active]) {
-  background-color: var(--input-time-option-active-surface-color);
-  color: var(--input-time-option-active-color);
+.input-time:where([data-priority="table"]) .input-time-trigger-input {
+  min-height: var(--input-time-height-small);
+  height: 100%;
+  padding-inline: var(--input-time-table-padding-inline);
+  border-color: var(--input-time-table-border-color);
+  border-radius: var(--input-time-table-radius);
+  background-color: var(--input-time-table-surface-color);
 }
-.input-time-option:hover:where(:not([data-active])),
-.input-time-preset-option:hover:where(:not([data-active])) {
-  background-color: var(--input-time-option-hover-surface-color);
-  color: var(--input-time-option-hover-color);
+.input-time:where([data-priority="table"]) .input-time-field {
+  font-size: var(--input-time-table-text-size);
+  line-height: var(--input-time-table-text-line-height);
+  font-weight: var(--input-time-table-text-weight);
 }
 
-.input-time-presets-group {
-  display: flex;
-  flex-direction: column;
-  gap: var(--input-time-option-gap);
+.input-time:where([data-state="success"]) .input-time-trigger-input {
+  border-color: var(--input-time-border-success-color);
+  border-width: var(--input-time-border-width-emphasis);
+}
+
+.input-time:where([data-state="error"]) .input-time-trigger-input {
+  border-color: var(--input-time-border-error-color);
+  border-width: var(--input-time-border-width-emphasis);
+}
+
+.input-time:where([data-state="disabled"]) .input-time-trigger-input {
+  border-color: var(--input-time-border-disabled-color);
+  background-color: var(--input-time-surface-disabled-color);
+}
+.input-time:where([data-state="disabled"]) .input-time-field {
+  color: var(--input-time-text-disabled-color);
+  cursor: default;
+}
+.input-time:where([data-state="disabled"]) .input-time-icon-button {
+  color: var(--input-time-icon-disabled-color);
+  cursor: default;
 }
 
-.input-time-presets-group-label {
-  color: var(--input-time-presets-label-color);
-  font-size: var(--input-time-presets-label-size);
-  line-height: var(--input-time-presets-label-line-height);
-  font-weight: var(--input-time-presets-label-weight);
+.input-time:where([data-readonly="true"]) .input-time-trigger-input {
+  border-color: var(--input-time-border-disabled-color);
+  background-color: var(--input-time-surface-disabled-color);
 }
 
 .input-address-container {
@@ -7598,6 +7478,169 @@ figure.chip {
   line-height: var(--table-td-text-line-height);
 }
 
+.time-picker-template {
+  display: flex;
+  flex-direction: column;
+  max-height: min(
+    var(--time-picker-template-max-height),
+    100vh - var(--time-picker-template-viewport-gap)
+  );
+  overflow-y: auto;
+  gap: var(--time-picker-template-gap);
+  padding: var(--time-picker-template-padding);
+  color: var(--time-picker-template-text-color);
+}
+
+.time-picker-summary {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: var(--time-picker-summary-gap);
+  height: var(--time-picker-summary-height);
+  padding-block: var(--time-picker-summary-padding-block);
+  border: var(--time-picker-option-border-width) solid
+    var(--time-picker-summary-border-color);
+  border-radius: var(--time-picker-summary-radius);
+  background-color: var(--time-picker-summary-surface-color);
+  color: var(--time-picker-summary-border-color);
+  text-align: center;
+}
+.time-picker-summary span {
+  font-size: var(--time-picker-summary-label-size);
+  line-height: var(--time-picker-summary-label-line-height);
+  font-weight: var(--time-picker-summary-label-weight);
+  letter-spacing: var(--time-picker-summary-label-letter-spacing);
+}
+.time-picker-summary strong {
+  font-size: var(--time-picker-summary-value-size);
+  line-height: var(--time-picker-summary-value-line-height);
+  font-weight: var(--time-picker-summary-value-weight);
+  letter-spacing: var(--time-picker-summary-value-letter-spacing);
+}
+
+.time-picker-template-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--time-picker-template-section-gap);
+}
+.time-picker-template-section h3 {
+  margin: 0;
+  font-size: var(--time-picker-template-heading-size);
+  line-height: var(--time-picker-template-heading-line-height);
+  font-weight: var(--time-picker-template-heading-weight);
+}
+
+.time-picker-period-control.segmented-control {
+  --segmented-height: var(--time-picker-period-height);
+  --segmented-padding: var(--time-picker-period-padding);
+  --segmented-radius: var(--time-picker-period-radius);
+  --segmented-bg: var(--time-picker-period-surface-color);
+  --segmented-indicator-bg: var(--time-picker-period-item-surface-color);
+  --segmented-indicator-shadow: var(--time-picker-period-item-shadow);
+  --segmented-label-color: var(--time-picker-period-item-color);
+  --segmented-label-active-color: var(--time-picker-period-item-color);
+  --segmented-gap: 0px;
+  --segmented-item-font-size: var(--time-picker-period-item-font-size);
+  --segmented-item-font-weight: var(--time-picker-period-item-font-weight);
+  --segmented-item-line-height: var(--time-picker-period-item-line-height);
+  width: 100%;
+  height: var(--time-picker-period-height);
+  border-radius: var(--time-picker-period-radius);
+}
+.time-picker-period-control.segmented-control .segmented-control-indicator,
+.time-picker-period-control.segmented-control .segmented-control-button {
+  border-radius: var(--time-picker-period-item-radius);
+}
+.time-picker-period-control.segmented-control .segmented-control-list {
+  width: 100%;
+  height: 100%;
+}
+.time-picker-period-control.segmented-control .segmented-control-item {
+  display: flex;
+  flex: 1;
+}
+.time-picker-period-control.segmented-control .segmented-control-button {
+  height: 100%;
+}
+.time-picker-period-control.segmented-control .segmented-control-label {
+  letter-spacing: 0;
+}
+
+.time-picker-option-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--time-picker-option-gap);
+}
+
+.time-picker-option {
+  min-width: 0;
+  height: var(--time-picker-option-height);
+  padding: 0;
+  border: var(--time-picker-option-border-width) solid
+    var(--time-picker-option-border-color);
+  border-radius: var(--time-picker-option-radius);
+  background-color: var(--time-picker-option-surface-color);
+  color: var(--time-picker-option-color);
+  font-size: var(--time-picker-option-font-size);
+  line-height: var(--time-picker-option-line-height);
+  cursor: pointer;
+}
+.time-picker-option:where([aria-pressed="true"]) {
+  border-color: var(--time-picker-option-selected-color);
+  background-color: var(--time-picker-option-selected-surface-color);
+  color: var(--time-picker-option-selected-color);
+}
+
+.time-picker-minute-stepper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--time-picker-minute-stepper-gap);
+  height: var(--time-picker-minute-stepper-height);
+  border-radius: var(--time-picker-minute-stepper-radius);
+  background-color: var(--time-picker-minute-stepper-surface-color);
+  text-align: center;
+}
+.time-picker-minute-stepper strong {
+  font-size: var(--time-picker-minute-value-size);
+  line-height: var(--time-picker-minute-value-line-height);
+  font-weight: var(--time-picker-minute-value-weight);
+}
+.time-picker-minute-stepper button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--time-picker-minute-control-size);
+  height: var(--time-picker-minute-control-size);
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  cursor: pointer;
+}
+.time-picker-minute-stepper button svg {
+  width: 100%;
+  height: 100%;
+}
+
+.time-picker-template-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--time-picker-template-footer-gap);
+}
+
+.time-picker-clear-action {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  color: var(--time-picker-clear-color);
+  font-size: var(--time-picker-clear-size);
+  line-height: var(--time-picker-clear-line-height);
+  cursor: pointer;
+}
+
 .toast-stack {
   --toast-stack-translate-x: 0;
   --toast-stack-translate-y: 0;