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

package/command/src/styles/_vars.css

@@ -1,37 +1,47 @@
-: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;
-}
+:root {
+  --frame-command-bg: var(--frame-surface);
+  --frame-command-color: var(--frame-surface-foreground);
+  --frame-command-border: var(--frame-border);
+  --frame-command-radius: 0px;
+  --frame-command-shadow: none;
+  --frame-command-input-height: 2.875rem;
+  --frame-command-input-padding-inline: 0.875rem;
+  --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.625rem 0.75rem 0;
+  --frame-command-list-gap: 0.125rem;
+  --frame-command-empty-padding: 2.25rem 1rem;
+  --frame-command-empty-color: var(--frame-muted-foreground);
+  --frame-command-group-heading-padding: 0.375rem 0 0.3125rem;
+  --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.125rem;
+  --frame-command-item-gap: 0.625rem;
+  --frame-command-item-padding: 0.375rem;
+  --frame-command-item-radius: 0px;
+  --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.5rem 0;
+  --frame-command-footer-border: var(--frame-frame-line-muted, var(--frame-border));
+  --frame-command-footer-color: var(--frame-muted-foreground);
+  --frame-command-footer-font-size: 0.8125rem;
+  --frame-command-footer-gap: 0.75rem;
+  --frame-command-footer-padding: 0.625rem 0 0;
+  --frame-command-footer-margin: 0.625rem 0 0;
+  --frame-command-footer-key-bg: var(--frame-muted);
+  --frame-command-footer-key-border: var(--frame-frame-line-muted, var(--frame-border));
+  --frame-command-footer-key-color: var(--frame-foreground);
+  --frame-command-footer-key-font-size: 0.75rem;
+  --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

@@ -1,171 +1,236 @@
-@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);
-  }
-}
+@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));
+  padding: 0.5rem;
+}
+
+[frCommandInput] {
+  box-sizing: border-box;
+  inline-size: 100%;
+  min-block-size: var(--frame-command-input-height, 2.75rem);
+  border: 1px solid var(--frame-command-input-border, var(--frame-border));
+  background: transparent;
+  color: var(--frame-command-input-color, var(--frame-foreground));
+  font: inherit;
+  font-size: var(--frame-command-input-font-size, 0.875rem);
+  outline: none;
+  padding-inline: var(--frame-command-input-padding-inline, 0.875rem);
+  transition:
+    border-color 140ms ease,
+    box-shadow 140ms ease;
+}
+
+[frCommandInput]:focus-visible {
+  border-color: var(--frame-frame-accent, var(--frame-ring));
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--frame-frame-accent, var(--frame-ring)) 22%, transparent);
+}
+
+[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.625rem 0 0);
+}
+
+[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] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--frame-command-group-heading-color, var(--frame-muted-foreground));
+  font-family: var(--frame-font-mono, ui-monospace, SFMono-Regular, Consolas, monospace), sans-serif;
+  font-size: var(--frame-command-group-heading-font-size, 0.75rem);
+  font-weight: var(--frame-command-group-heading-font-weight, 650);
+  letter-spacing: 0;
+  padding: var(--frame-command-group-heading-padding, 0.5rem 0 0.375rem);
+  text-transform: uppercase;
+}
+
+[frCommandGroupHeading]::after {
+  display: block;
+  flex: 1 1 auto;
+  block-size: 1px;
+  background: var(--frame-frame-line-muted, var(--frame-border));
+  content: "";
+}
+
+[frCommandItem] {
+  position: relative;
+  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: 1px solid transparent;
+  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;
+  transition:
+    background-color 140ms ease,
+    border-color 140ms ease,
+    color 140ms ease,
+    transform 140ms ease,
+    box-shadow 140ms ease;
+}
+
+[frCommandItem][data-highlighted],
+[frCommandItem]:where(:not(:disabled, [data-disabled])):hover {
+  background: var(--frame-command-item-highlighted-bg, var(--frame-accent));
+  border-color: var(--frame-frame-line-muted, var(--frame-border));
+  color: var(--frame-command-item-highlighted-color, var(--frame-accent-foreground));
+  transform: translate(-1px, -1px);
+  box-shadow: none;
+}
+
+[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;
+  border: 1px solid var(--frame-frame-line-muted, var(--frame-border));
+  background: var(--frame-muted);
+  color: var(--frame-command-shortcut-color, var(--frame-muted-foreground));
+  font-family: var(--frame-font-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
+  font-size: var(--frame-command-shortcut-font-size, 0.75rem);
+  letter-spacing: 0;
+  line-height: 1;
+  padding: 0.1875rem 0.3125rem;
+}
+
+[frCommandSeparator] {
+  block-size: 1px;
+  margin: var(--frame-command-separator-margin, 0.5rem 0);
+  background: var(--frame-command-separator-bg, var(--frame-border));
+}
+
+[frCommandFooter] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-around;
+  gap: var(--frame-command-footer-gap, 0.75rem);
+  border-block-start: 1px solid var(--frame-command-footer-border, var(--frame-border));
+  color: var(--frame-command-footer-color, var(--frame-muted-foreground));
+  font-size: var(--frame-command-footer-font-size, 0.8125rem);
+  margin: var(--frame-command-footer-margin, 0.625rem 0 0);
+  padding: var(--frame-command-footer-padding, 0.625rem 0 0);
+}
+
+[frCommandFooter] span {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+[frCommandFooter] kbd {
+  border: 1px solid var(--frame-command-footer-key-border, var(--frame-border));
+  background: var(--frame-command-footer-key-bg, var(--frame-muted));
+  color: var(--frame-command-footer-key-color, var(--frame-foreground));
+  font-family: var(--frame-font-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
+  font-size: var(--frame-command-footer-key-font-size, 0.75rem);
+  line-height: 1;
+  padding: 0.1875rem 0.3125rem;
+}
+
+.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/date-picker/src/styles/_vars.css

@@ -1,29 +1,30 @@
-: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);
-}
+: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: none;
+  --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-input-radius: var(--frame-radius-md);
+  --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);
+}