@frame-ui-ng/components 0.1.0-beta.0

package/combobox/src/styles/combobox.css

@@ -0,0 +1,285 @@
+@import './_vars.css';
+
+[frCombobox],
+frame-combobox,
+.frame-combobox__anchor{
+  display: inline-block;
+  width: 100%;
+  position: relative;
+}
+
+.frame-combobox__input,
+.frame-combobox__trigger,
+.frame-combobox__chips {
+  box-sizing: border-box;
+  width: 100%;
+  min-block-size: var(--frame-combobox-control-height);
+  border: 1px solid var(--frame-combobox-control-border);
+  border-radius: var(--frame-combobox-control-radius);
+  background: var(--frame-combobox-control-bg);
+  color: var(--frame-combobox-control-color);
+  font: inherit;
+  font-size: var(--frame-combobox-control-font-size);
+  outline: none;
+  transition:
+    background-color var(--frame-combobox-control-transition-duration) ease,
+    border-color var(--frame-combobox-control-transition-duration) ease,
+    box-shadow var(--frame-combobox-control-transition-duration) ease,
+    color var(--frame-combobox-control-transition-duration) ease;
+}
+
+[frCombobox][data-disabled],
+frame-combobox[data-disabled] {
+  cursor: not-allowed;
+}
+
+[frCombobox][data-disabled] .frame-combobox__input,
+[frCombobox][data-disabled] .frame-combobox__trigger,
+[frCombobox][data-disabled] .frame-combobox__chips,
+frame-combobox[data-disabled] .frame-combobox__input,
+frame-combobox[data-disabled] .frame-combobox__trigger,
+frame-combobox[data-disabled] .frame-combobox__chips {
+  background: var(--frame-combobox-control-disabled-bg);
+  color: var(--frame-combobox-control-disabled-color);
+  cursor: not-allowed;
+  opacity: var(--frame-combobox-control-disabled-opacity);
+}
+
+.frame-combobox__input,
+.frame-combobox__trigger {
+  padding-inline: var(--frame-combobox-control-padding-inline);
+}
+
+.frame-combobox__input:focus-visible,
+.frame-combobox__trigger:focus-visible,
+.frame-combobox__chips:focus-within {
+  border-color: var(--frame-combobox-control-focus-border);
+  box-shadow: var(--frame-combobox-control-focus-shadow);
+}
+
+.frame-combobox__input[aria-invalid='true'],
+.frame-combobox__chips[data-invalid],
+[frCombobox][data-invalid] .frame-combobox__trigger {
+  border-color: var(--frame-combobox-control-invalid-border);
+  box-shadow: var(--frame-combobox-control-invalid-shadow);
+}
+
+.frame-combobox__trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  text-align: start;
+}
+
+.frame-combobox__clear {
+  position: absolute;
+  right: var(--frame-combobox-clear-offset);
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: var(--frame-radius-sm);
+  background: transparent;
+  color: var(--frame-muted-foreground);
+  cursor: pointer;
+  font: inherit;
+}
+
+[frComboboxInput][data-has-value='false'] ~ .frame-combobox__clear {
+  opacity: 0;
+}
+
+.frame-combobox__panel {
+  box-sizing: border-box;
+  inline-size: 100%;
+  max-block-size: var(--frame-combobox-panel-max-height);
+  overflow: auto;
+  border: 1px solid var(--frame-combobox-panel-border);
+  border-radius: var(--frame-combobox-panel-radius);
+  background: var(--frame-combobox-panel-bg);
+  color: var(--frame-combobox-panel-color);
+  box-shadow: var(--frame-combobox-panel-shadow);
+  padding: var(--frame-combobox-panel-padding);
+  transform-origin: var(--frame-combobox-origin, top left);
+  animation: frame-combobox-enter var(--frame-combobox-motion-duration) var(--frame-combobox-motion-easing);
+  will-change: opacity, transform;
+}
+
+.frame-combobox-overlay--bottom .frame-combobox__panel {
+  --frame-combobox-enter-x: 0;
+  --frame-combobox-enter-y: calc(var(--frame-combobox-motion-distance) * -1);
+  --frame-combobox-origin: top left;
+}
+
+.frame-combobox-overlay--top .frame-combobox__panel {
+  --frame-combobox-enter-x: 0;
+  --frame-combobox-enter-y: var(--frame-combobox-motion-distance);
+  --frame-combobox-origin: bottom left;
+}
+
+.frame-combobox__list,
+.frame-combobox__collection,
+.frame-combobox__group {
+  display: grid;
+  gap: var(--frame-combobox-list-gap);
+}
+
+.frame-combobox__item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--frame-combobox-item-gap);
+  width: 100%;
+  min-block-size: var(--frame-combobox-item-height);
+  border: 0;
+  border-radius: var(--frame-combobox-item-radius);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  font-size: var(--frame-combobox-item-font-size);
+  line-height: 1;
+  padding: var(--frame-combobox-item-padding);
+  text-align: start;
+}
+
+.frame-combobox__item[data-hidden] {
+  display: none;
+}
+
+.frame-combobox__item[data-highlighted],
+.frame-combobox__item:hover {
+  background: var(--frame-accent);
+  color: var(--frame-accent-foreground);
+}
+
+.frame-combobox__item[disabled] {
+  cursor: not-allowed;
+  opacity: var(--frame-combobox-item-disabled-opacity);
+}
+
+.frame-combobox__item:not(:has([frComboboxItemIndicator], .frame-combobox__item-indicator))::before {
+  content: '✓';
+  position: absolute;
+  inset-inline-start: var(--frame-combobox-item-indicator-offset);
+  opacity: 0;
+}
+
+.frame-combobox__item:not(:has([frComboboxItemIndicator], .frame-combobox__item-indicator))[data-selected]::before {
+  opacity: 1;
+}
+
+.frame-combobox__item-indicator {
+  position: absolute;
+  inset-inline-start: var(--frame-combobox-item-indicator-offset);
+}
+
+.frame-combobox__item:not([data-selected]) .frame-combobox__item-indicator {
+  opacity: 0;
+}
+
+.frame-combobox__empty,
+.frame-combobox__label {
+  color: var(--frame-muted-foreground);
+  font-size: var(--frame-combobox-muted-font-size);
+  padding: var(--frame-combobox-muted-padding);
+}
+
+.frame-combobox__label {
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.frame-combobox__separator {
+  block-size: 1px;
+  margin: var(--frame-combobox-separator-margin);
+  background: var(--frame-combobox-separator-bg);
+}
+
+.frame-combobox__chips {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--frame-combobox-chips-gap);
+  padding: var(--frame-combobox-chips-padding);
+}
+
+.frame-combobox__value {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--frame-combobox-chips-gap);
+}
+
+.frame-combobox__chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--frame-combobox-chip-gap);
+  min-block-size: var(--frame-combobox-chip-height);
+  border: 1px solid transparent;
+  border-radius: var(--frame-combobox-chip-radius);
+  background: var(--frame-combobox-chip-bg);
+  color: var(--frame-combobox-chip-color);
+  box-sizing: border-box;
+  font-size: var(--frame-combobox-chip-font-size);
+  font-weight: var(--frame-combobox-chip-font-weight);
+  line-height: 1;
+  padding-block: var(--frame-combobox-chip-padding-block);
+  padding-inline: var(--frame-combobox-chip-padding-inline);
+  white-space: nowrap;
+}
+
+.frame-combobox__chip button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--frame-combobox-chip-remove-size);
+  block-size: var(--frame-combobox-chip-remove-size);
+  border: 0;
+  border-radius: var(--frame-combobox-chip-remove-radius);
+  background: var(--frame-combobox-chip-remove-bg);
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  line-height: 1;
+  padding: 0;
+}
+
+.frame-combobox__chip button:hover {
+  background: var(--frame-combobox-chip-remove-hover-bg);
+}
+
+.frame-combobox__chips-input {
+  flex: 1 1 var(--frame-combobox-chips-input-min-width);
+  min-inline-size: var(--frame-combobox-chips-input-min-width);
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  outline: none;
+  padding: var(--frame-combobox-chips-input-padding);
+}
+
+.frame-combobox__error {
+  color: var(--frame-combobox-error-color);
+  font-size: var(--frame-combobox-error-font-size);
+  line-height: 1.45;
+  margin: 0;
+}
+
+@keyframes frame-combobox-enter {
+  from {
+    opacity: 0;
+    transform: translate(var(--frame-combobox-enter-x, 0), var(--frame-combobox-enter-y, calc(var(--frame-combobox-motion-distance) * -1))) scale(var(--frame-combobox-motion-scale));
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}

package/command/src/styles/_vars.css

@@ -0,0 +1,37 @@
+:root {
+  --frame-command-bg: var(--frame-surface);
+  --frame-command-color: var(--frame-surface-foreground);
+  --frame-command-border: var(--frame-border);
+  --frame-command-radius: var(--frame-radius-lg);
+  --frame-command-shadow: 0 16px 48px rgb(0 0 0 / 0.14);
+  --frame-command-input-height: 3.25rem;
+  --frame-command-input-padding-inline: 1rem;
+  --frame-command-input-border: var(--frame-border);
+  --frame-command-input-color: var(--frame-foreground);
+  --frame-command-input-placeholder-color: var(--frame-muted-foreground);
+  --frame-command-list-max-height: 20rem;
+  --frame-command-list-padding: 0.5rem;
+  --frame-command-list-gap: 0.25rem;
+  --frame-command-empty-padding: 2.25rem 1rem;
+  --frame-command-empty-color: var(--frame-muted-foreground);
+  --frame-command-group-heading-padding: 0.5rem 0.5rem 0.375rem;
+  --frame-command-group-heading-color: var(--frame-muted-foreground);
+  --frame-command-group-heading-font-size: 0.75rem;
+  --frame-command-group-heading-font-weight: 650;
+  --frame-command-item-height: 2.5rem;
+  --frame-command-item-gap: 0.625rem;
+  --frame-command-item-padding: 0.5rem 0.625rem;
+  --frame-command-item-radius: var(--frame-radius-md);
+  --frame-command-item-font-size: 0.875rem;
+  --frame-command-item-highlighted-bg: var(--frame-accent);
+  --frame-command-item-highlighted-color: var(--frame-accent-foreground);
+  --frame-command-item-disabled-opacity: 0.5;
+  --frame-command-item-icon-size: 1rem;
+  --frame-command-shortcut-color: var(--frame-muted-foreground);
+  --frame-command-shortcut-font-size: 0.75rem;
+  --frame-command-separator-bg: var(--frame-border);
+  --frame-command-separator-margin: 0.375rem -0.5rem;
+  --frame-command-backdrop-bg: rgb(0 0 0 / 0.42);
+  --frame-command-backdrop-blur: 3px;
+  --frame-command-dialog-z-index: 1000;
+}

package/command/src/styles/command.css

@@ -0,0 +1,171 @@
+@import './_vars.css';
+
+[frCommand],
+frame-command {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid var(--frame-command-border, var(--frame-border));
+  border-radius: var(--frame-command-radius, var(--frame-radius-lg));
+  background: var(--frame-command-bg, var(--frame-surface));
+  box-shadow: var(--frame-command-shadow, none);
+  color: var(--frame-command-color, var(--frame-surface-foreground));
+}
+
+[frCommandInput] {
+  box-sizing: border-box;
+  inline-size: 100%;
+  min-block-size: var(--frame-command-input-height, 3.25rem);
+  border: 0;
+  border-block-end: 1px solid var(--frame-command-input-border, var(--frame-border));
+  background: transparent;
+  color: var(--frame-command-input-color, var(--frame-foreground));
+  font: inherit;
+  outline: none;
+  padding-inline: var(--frame-command-input-padding-inline, 1rem);
+}
+
+[frCommandInput]::placeholder {
+  color: var(--frame-command-input-placeholder-color, var(--frame-muted-foreground));
+}
+
+[frCommandInput]:disabled {
+  cursor: not-allowed;
+  opacity: 0.65;
+}
+
+[frCommandList] {
+  display: grid;
+  gap: var(--frame-command-list-gap, 0.25rem);
+  max-block-size: var(--frame-command-list-max-height, 20rem);
+  min-block-size: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  padding: var(--frame-command-list-padding, 0.5rem);
+}
+
+[frCommandEmpty] {
+  color: var(--frame-command-empty-color, var(--frame-muted-foreground));
+  font-size: 0.875rem;
+  padding: var(--frame-command-empty-padding, 2.25rem 1rem);
+  text-align: center;
+}
+
+[frCommandGroup] {
+  display: grid;
+  gap: var(--frame-command-list-gap, 0.25rem);
+}
+
+[frCommandGroup][data-hidden],
+[frCommandItem][data-hidden] {
+  display: none;
+}
+
+[frCommandGroupHeading] {
+  color: var(--frame-command-group-heading-color, var(--frame-muted-foreground));
+  font-size: var(--frame-command-group-heading-font-size, 0.75rem);
+  font-weight: var(--frame-command-group-heading-font-weight, 650);
+  letter-spacing: 0.04em;
+  padding: var(--frame-command-group-heading-padding, 0.5rem 0.5rem 0.375rem);
+  text-transform: uppercase;
+}
+
+[frCommandItem] {
+  display: flex;
+  align-items: center;
+  gap: var(--frame-command-item-gap, 0.625rem);
+  inline-size: 100%;
+  min-block-size: var(--frame-command-item-height, 2.5rem);
+  border: 0;
+  border-radius: var(--frame-command-item-radius, var(--frame-radius-md));
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  font-size: var(--frame-command-item-font-size, 0.875rem);
+  line-height: 1.2;
+  padding: var(--frame-command-item-padding, 0.5rem 0.625rem);
+  text-align: start;
+}
+
+[frCommandItem][data-highlighted],
+[frCommandItem]:where(:not(:disabled, [data-disabled])):hover {
+  background: var(--frame-command-item-highlighted-bg, var(--frame-accent));
+  color: var(--frame-command-item-highlighted-color, var(--frame-accent-foreground));
+}
+
+[frCommandItem]:where(:disabled, [data-disabled]) {
+  cursor: not-allowed;
+  opacity: var(--frame-command-item-disabled-opacity, 0.5);
+}
+
+[frCommandItemIcon] {
+  display: inline-flex;
+  inline-size: var(--frame-command-item-icon-size, 1rem);
+  block-size: var(--frame-command-item-icon-size, 1rem);
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+}
+
+[frCommandShortcut] {
+  margin-inline-start: auto;
+  color: var(--frame-command-shortcut-color, var(--frame-muted-foreground));
+  font-size: var(--frame-command-shortcut-font-size, 0.75rem);
+  letter-spacing: 0.08em;
+}
+
+[frCommandSeparator] {
+  block-size: 1px;
+  margin: var(--frame-command-separator-margin, 0.375rem -0.5rem);
+  background: var(--frame-command-separator-bg, var(--frame-border));
+}
+
+.cdk-overlay-backdrop.frame-command-dialog__backdrop {
+  backdrop-filter: blur(var(--frame-command-backdrop-blur, 3px));
+  background: var(--frame-command-backdrop-bg, rgb(0 0 0 / 0.42));
+}
+
+.cdk-global-overlay-wrapper:has(.frame-command-dialog__overlay-pane) {
+  z-index: var(--frame-command-dialog-z-index, 1000);
+}
+
+.frame-command-dialog__overlay-pane {
+  inline-size: min(calc(100vw - 2rem), 48rem);
+}
+
+.frame-command-dialog__overlay-pane .cdk-dialog-container {
+  display: contents;
+  outline: none;
+}
+
+.frame-command-dialog__overlay-pane .cdk-dialog-container > * {
+  display: block;
+  inline-size: 100%;
+}
+
+.frame-command-dialog__overlay-pane [frCommand],
+.frame-command-dialog__overlay-pane frame-command {
+  animation: frame-command-dialog-enter 160ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .frame-command-dialog__overlay-pane [frCommand],
+  .frame-command-dialog__overlay-pane frame-command {
+    animation: none;
+  }
+}
+
+@keyframes frame-command-dialog-enter {
+  from {
+    opacity: 0;
+    transform: translateY(10px) scale(0.98);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}

package/context-menu/src/styles/context-menu.css

@@ -0,0 +1,5 @@
+@import '../../../dropdown-menu/src/styles/dropdown-menu.css';
+
+[frContextMenuTrigger] {
+  touch-action: manipulation;
+}

package/date-picker/src/styles/_vars.css

@@ -0,0 +1,29 @@
+:root {
+  --frame-date-picker-trigger-height: 2.5rem;
+  --frame-date-picker-trigger-width: 17.5rem;
+  --frame-date-picker-trigger-padding: 0 0.75rem;
+  --frame-date-picker-trigger-gap: 0.5rem;
+  --frame-date-picker-trigger-radius: var(--frame-radius-md);
+  --frame-date-picker-trigger-bg: var(--frame-background);
+  --frame-date-picker-trigger-color: var(--frame-foreground);
+  --frame-date-picker-trigger-border: var(--frame-border);
+  --frame-date-picker-trigger-hover-border: color-mix(in srgb, var(--frame-ring) 42%, var(--frame-border));
+  --frame-date-picker-trigger-placeholder-color: var(--frame-muted-foreground);
+  --frame-date-picker-trigger-disabled-opacity: 0.5;
+  --frame-date-picker-trigger-invalid-border: var(--frame-destructive);
+  --frame-date-picker-trigger-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-ring) 26%, transparent);
+  --frame-date-picker-content-bg: var(--frame-surface);
+  --frame-date-picker-content-color: var(--frame-surface-foreground);
+  --frame-date-picker-content-border: var(--frame-border);
+  --frame-date-picker-content-radius: var(--frame-radius-lg);
+  --frame-date-picker-content-shadow: var(--frame-shadow-md);
+  --frame-date-picker-content-padding: 0.25rem;
+  --frame-date-picker-presets-border: var(--frame-border);
+  --frame-date-picker-preset-height: 2rem;
+  --frame-date-picker-preset-radius: var(--frame-radius-md);
+  --frame-date-picker-preset-hover-bg: var(--frame-muted);
+  --frame-date-picker-time-border: var(--frame-border);
+  --frame-date-picker-time-padding: 0.75rem;
+  --frame-date-picker-motion-duration: 140ms;
+  --frame-date-picker-motion-easing: cubic-bezier(0.16, 1, 0.3, 1);
+}

package/date-picker/src/styles/date-picker.css

@@ -0,0 +1,177 @@
+@import './_vars.css';
+
+.frame-date-picker {
+  display: inline-block;
+  max-width: 100%;
+}
+
+.frame-date-picker__anchor {
+  display: inline-block;
+  max-width: 100%;
+}
+
+.frame-date-picker__trigger,
+.frame-date-picker__input-wrap {
+  box-sizing: border-box;
+  display: inline-flex;
+  min-block-size: var(--frame-date-picker-trigger-height);
+  inline-size: var(--frame-date-picker-trigger-width);
+  max-inline-size: 100%;
+  align-items: center;
+  gap: var(--frame-date-picker-trigger-gap);
+  border: 1px solid var(--frame-date-picker-trigger-border);
+  border-radius: var(--frame-date-picker-trigger-radius);
+  background: var(--frame-date-picker-trigger-bg);
+  color: var(--frame-date-picker-trigger-color);
+  padding: var(--frame-date-picker-trigger-padding);
+  transition:
+    border-color 150ms ease,
+    box-shadow 150ms ease,
+    opacity 150ms ease;
+}
+
+.frame-date-picker__trigger {
+  cursor: pointer;
+  font: inherit;
+  text-align: start;
+}
+
+.frame-date-picker__input-wrap {
+  cursor: text;
+}
+
+.frame-date-picker__input {
+  min-width: 0;
+  flex: 1 1 auto;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  outline: none;
+  padding: 0;
+}
+
+.frame-date-picker__input::placeholder,
+.frame-date-picker__trigger-label[data-placeholder] {
+  color: var(--frame-date-picker-trigger-placeholder-color);
+}
+
+.frame-date-picker__icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  color: var(--frame-date-picker-trigger-placeholder-color);
+  line-height: 1;
+}
+
+.frame-date-picker__trigger-label {
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.frame-date-picker__trigger:hover:not(:disabled),
+.frame-date-picker__input-wrap:focus-within,
+.frame-date-picker__input-wrap:hover {
+  border-color: var(--frame-date-picker-trigger-hover-border);
+}
+
+.frame-date-picker__trigger:focus-visible,
+.frame-date-picker__input-wrap:focus-within {
+  outline: none;
+  box-shadow: var(--frame-date-picker-trigger-focus-shadow);
+}
+
+.frame-date-picker[data-invalid] .frame-date-picker__trigger,
+.frame-date-picker[data-invalid] .frame-date-picker__input-wrap {
+  border-color: var(--frame-date-picker-trigger-invalid-border);
+}
+
+.frame-date-picker[data-disabled] {
+  opacity: var(--frame-date-picker-trigger-disabled-opacity);
+}
+
+.frame-date-picker[data-disabled] .frame-date-picker__trigger,
+.frame-date-picker[data-disabled] .frame-date-picker__input-wrap {
+  cursor: not-allowed;
+}
+
+.frame-date-picker__content {
+  box-sizing: border-box;
+  overflow: hidden;
+  border: 1px solid var(--frame-date-picker-content-border);
+  border-radius: var(--frame-date-picker-content-radius);
+  background: var(--frame-date-picker-content-bg);
+  color: var(--frame-date-picker-content-color);
+  box-shadow: var(--frame-date-picker-content-shadow);
+  padding: var(--frame-date-picker-content-padding);
+  animation: frame-date-picker-enter var(--frame-date-picker-motion-duration) var(--frame-date-picker-motion-easing);
+}
+
+.frame-date-picker__content .frame-calendar {
+  border: 0;
+  box-shadow: none;
+}
+
+.frame-date-picker__presets {
+  display: grid;
+  gap: 0.125rem;
+  border-block-end: 1px solid var(--frame-date-picker-presets-border);
+  padding: 0.25rem;
+}
+
+.frame-date-picker__preset {
+  min-block-size: var(--frame-date-picker-preset-height);
+  border: 0;
+  border-radius: var(--frame-date-picker-preset-radius);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  padding-inline: 0.5rem;
+  text-align: start;
+}
+
+.frame-date-picker__preset:hover,
+.frame-date-picker__preset:focus-visible {
+  background: var(--frame-date-picker-preset-hover-bg);
+  outline: none;
+}
+
+.frame-date-picker__time {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  border-block-start: 1px solid var(--frame-date-picker-time-border);
+  padding: var(--frame-date-picker-time-padding);
+}
+
+.frame-date-picker__time-label {
+  color: var(--frame-muted-foreground);
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.frame-date-picker__time-input {
+  min-block-size: 2rem;
+  border: 1px solid var(--frame-border);
+  border-radius: var(--frame-radius-md);
+  background: var(--frame-background);
+  color: var(--frame-foreground);
+  font: inherit;
+  padding-inline: 0.5rem;
+}
+
+@keyframes frame-date-picker-enter {
+  from {
+    opacity: 0;
+    transform: translateY(-0.25rem) scale(0.98);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}