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

package/field/src/styles/_vars.css

@@ -0,0 +1,20 @@
+:root {
+  --frame-field-set-gap: 1.5rem;
+  --frame-field-group-gap: 1rem;
+  --frame-field-gap: 0.5rem;
+  --frame-field-content-gap: 0.375rem;
+  --frame-field-legend-color: var(--frame-foreground);
+  --frame-field-legend-font-size: 1rem;
+  --frame-field-legend-font-weight: 700;
+  --frame-field-label-font-size: 0.875rem;
+  --frame-field-label-font-weight: 600;
+  --frame-field-label-color: var(--frame-foreground);
+  --frame-field-description-color: var(--frame-muted-foreground);
+  --frame-field-description-font-size: 0.8125rem;
+  --frame-field-error-color: var(--frame-destructive);
+  --frame-field-error-font-size: 0.6125rem;
+  --frame-field-separator-gap: 0.75rem;
+  --frame-field-separator-color: var(--frame-muted-foreground);
+  --frame-field-separator-bg: var(--frame-border);
+  --frame-field-separator-font-size: 0.75rem;
+}

package/field/src/styles/field.css

@@ -0,0 +1,165 @@
+@import './_vars.css';
+
+.frame-field-set,
+[frFieldSet],
+fieldset[frFieldSet] {
+  display: grid;
+  gap: var(--frame-field-set-gap);
+  min-inline-size: 0;
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.frame-field-legend,
+[frFieldLegend],
+legend[frFieldLegend] {
+  color: var(--frame-field-legend-color);
+  font-size: var(--frame-field-legend-font-size);
+  font-weight: var(--frame-field-legend-font-weight);
+  line-height: 1.25;
+  margin: 0;
+  padding: 0;
+}
+
+.frame-field-legend[data-variant='label'],
+[frFieldLegend][data-variant='label'],
+legend[frFieldLegend][data-variant='label'] {
+  font-size: var(--frame-field-label-font-size);
+  font-weight: var(--frame-field-label-font-weight);
+}
+
+.frame-field-group,
+[frFieldGroup],
+frame-field-group {
+  display: grid;
+  gap: var(--frame-field-group-gap);
+  min-inline-size: 0;
+}
+
+.frame-field,
+[frField],
+frame-field {
+  display: grid;
+  gap: var(--frame-field-gap);
+  min-inline-size: 0;
+}
+
+.frame-field[data-orientation='horizontal'],
+[frField][data-orientation='horizontal'],
+frame-field[data-orientation='horizontal'] {
+  display: flex;
+  align-items: flex-start;
+}
+
+.frame-field-content,
+[frFieldContent],
+frame-field-content {
+  display: grid;
+  gap: var(--frame-field-content-gap);
+  min-inline-size: 0;
+}
+
+.frame-field-label,
+[frFieldLabel],
+label[frFieldLabel] {
+  color: var(--frame-field-label-color);
+  font-size: var(--frame-field-label-font-size);
+  font-weight: var(--frame-field-label-font-weight);
+  line-height: 1.3;
+}
+
+.frame-field-description,
+[frFieldDescription],
+frame-field-description {
+  color: var(--frame-field-description-color);
+  font-size: var(--frame-field-description-font-size);
+  line-height: 1.45;
+  margin: 0;
+  text-wrap: pretty;
+}
+
+.frame-field-error,
+[frFieldError],
+frame-field-error {
+  color: var(--frame-field-error-color);
+  font-size: var(--frame-field-error-font-size);
+  line-height: 1.45;
+  margin: 0;
+}
+
+.frame-field[data-invalid],
+[frField][data-invalid],
+frame-field[data-invalid] {
+  color: var(--frame-field-error-color);
+}
+
+.frame-field[data-invalid] .frame-field-label,
+.frame-field[data-invalid] [frFieldLabel],
+.frame-field[data-invalid] label[frFieldLabel],
+[frField][data-invalid] .frame-field-label,
+[frField][data-invalid] [frFieldLabel],
+[frField][data-invalid] label[frFieldLabel],
+frame-field[data-invalid] .frame-field-label,
+frame-field[data-invalid] [frFieldLabel],
+frame-field[data-invalid] label[frFieldLabel] {
+  color: var(--frame-field-error-color);
+}
+
+.frame-field[data-disabled],
+[frField][data-disabled],
+frame-field[data-disabled] {
+  opacity: 0.72;
+}
+
+.frame-field[data-disabled] .frame-field-label,
+.frame-field[data-disabled] [frFieldLabel],
+.frame-field[data-disabled] label[frFieldLabel],
+[frField][data-disabled] .frame-field-label,
+[frField][data-disabled] [frFieldLabel],
+[frField][data-disabled] label[frFieldLabel],
+frame-field[data-disabled] .frame-field-label,
+frame-field[data-disabled] [frFieldLabel],
+frame-field[data-disabled] label[frFieldLabel] {
+  cursor: not-allowed;
+}
+
+.frame-field-separator,
+[frFieldSeparator],
+frame-field-separator {
+  display: flex;
+  align-items: center;
+  gap: var(--frame-field-separator-gap);
+  color: var(--frame-field-separator-color);
+  font-size: var(--frame-field-separator-font-size);
+  line-height: 1;
+  text-transform: uppercase;
+}
+
+.frame-field-separator::before,
+.frame-field-separator::after,
+[frFieldSeparator]::before,
+[frFieldSeparator]::after,
+frame-field-separator::before,
+frame-field-separator::after {
+  content: '';
+  flex: 1 1 auto;
+  block-size: 1px;
+  background: var(--frame-field-separator-bg);
+}
+
+.frame-field-separator:empty,
+[frFieldSeparator]:empty,
+frame-field-separator:empty {
+  block-size: 1px;
+  background: var(--frame-field-separator-bg);
+}
+
+.frame-field-separator:empty::before,
+.frame-field-separator:empty::after,
+[frFieldSeparator]:empty::before,
+[frFieldSeparator]:empty::after,
+frame-field-separator:empty::before,
+frame-field-separator:empty::after {
+  content: none;
+}

package/hover-card/src/styles/_vars.css

@@ -0,0 +1,21 @@
+:root {
+  --frame-hover-card-content-width: 20rem;
+  --frame-hover-card-content-padding: 1rem;
+  --frame-hover-card-content-radius: var(--frame-radius-md);
+  --frame-hover-card-content-bg: var(--frame-surface);
+  --frame-hover-card-content-color: var(--frame-surface-foreground);
+  --frame-hover-card-content-border: var(--frame-border);
+  --frame-hover-card-content-shadow: var(--frame-shadow-md);
+  --frame-hover-card-content-gap: 0.75rem;
+  --frame-hover-card-title-color: var(--frame-foreground);
+  --frame-hover-card-title-font-size: 0.875rem;
+  --frame-hover-card-title-font-weight: 600;
+  --frame-hover-card-description-color: var(--frame-muted-foreground);
+  --frame-hover-card-description-font-size: 0.875rem;
+  --frame-hover-card-meta-color: var(--frame-muted-foreground);
+  --frame-hover-card-meta-font-size: 0.75rem;
+  --frame-hover-card-motion-duration: 140ms;
+  --frame-hover-card-motion-easing: cubic-bezier(0.16, 1, 0.3, 1);
+  --frame-hover-card-motion-distance: 0.25rem;
+  --frame-hover-card-motion-scale: 0.96;
+}

package/hover-card/src/styles/hover-card.css

@@ -0,0 +1,76 @@
+@import "./_vars.css";
+
+frame-hover-card {
+  display: inline-block;
+}
+
+.frame-hover-card__anchor {
+  display: inline-flex;
+}
+
+[frHoverCardTrigger] {
+  cursor: default;
+}
+
+.frame-hover-card__content {
+  display: grid;
+  gap: var(--frame-hover-card-content-gap);
+  width: var(--frame-hover-card-content-width);
+  max-width: min(var(--frame-hover-card-content-width), calc(100vw - 2rem));
+  border: 1px solid var(--frame-hover-card-content-border);
+  border-radius: var(--frame-hover-card-content-radius);
+  background: var(--frame-hover-card-content-bg);
+  box-shadow: var(--frame-hover-card-content-shadow);
+  color: var(--frame-hover-card-content-color);
+  padding: var(--frame-hover-card-content-padding);
+  outline: none;
+  transform-origin: var(--frame-hover-card-transform-origin, center);
+  animation: frame-hover-card-in var(--frame-hover-card-motion-duration) var(--frame-hover-card-motion-easing);
+}
+
+.frame-hover-card-overlay--top .frame-hover-card__content {
+  --frame-hover-card-transform-origin: bottom;
+}
+
+.frame-hover-card-overlay--right .frame-hover-card__content {
+  --frame-hover-card-transform-origin: left;
+}
+
+.frame-hover-card-overlay--bottom .frame-hover-card__content {
+  --frame-hover-card-transform-origin: top;
+}
+
+.frame-hover-card-overlay--left .frame-hover-card__content {
+  --frame-hover-card-transform-origin: right;
+}
+
+.frame-hover-card__title {
+  color: var(--frame-hover-card-title-color);
+  font-size: var(--frame-hover-card-title-font-size);
+  font-weight: var(--frame-hover-card-title-font-weight);
+  line-height: 1.2;
+}
+
+.frame-hover-card__description {
+  color: var(--frame-hover-card-description-color);
+  font-size: var(--frame-hover-card-description-font-size);
+  line-height: 1.45;
+}
+
+.frame-hover-card__meta {
+  color: var(--frame-hover-card-meta-color);
+  font-size: var(--frame-hover-card-meta-font-size);
+  line-height: 1.35;
+}
+
+@keyframes frame-hover-card-in {
+  from {
+    opacity: 0;
+    transform: translateY(var(--frame-hover-card-motion-distance)) scale(var(--frame-hover-card-motion-scale));
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}

package/input/src/styles/_vars.css

@@ -0,0 +1,65 @@
+:root {
+  --frame-input-field-gap: 0.5rem;
+  --frame-input-header-gap: 0.75rem;
+  --frame-input-field-group-gap: 1rem;
+  --frame-input-label-font-size: 0.875rem;
+  --frame-input-label-font-weight: 600;
+  --frame-input-description-color: var(--frame-muted-foreground);
+  --frame-input-description-font-size: 0.8125rem;
+  --frame-input-error-color: var(--frame-destructive);
+  --frame-input-error-font-size: 0.8125rem;
+  --frame-input-root-height: 2.5rem;
+  --frame-input-root-radius: var(--frame-radius-md);
+  --frame-input-root-bg: var(--frame-surface);
+  --frame-input-root-color: var(--frame-surface-foreground);
+  --frame-input-root-border: var(--frame-border);
+  --frame-input-root-font-size: 0.875rem;
+  --frame-input-root-padding-inline: 0.875rem;
+  --frame-input-root-placeholder-color: var(--frame-muted-foreground);
+  --frame-input-root-hover-border: color-mix(in srgb, var(--frame-border) 80%, var(--frame-foreground));
+  --frame-input-root-focus-border: color-mix(in srgb, var(--frame-ring) 70%, var(--frame-border));
+  --frame-input-root-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-ring) 22%, transparent);
+  --frame-input-root-invalid-border: color-mix(in srgb, var(--frame-destructive) 65%, var(--frame-border));
+  --frame-input-root-invalid-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-destructive) 14%, transparent);
+  --frame-input-root-disabled-opacity: 0.55;
+  --frame-input-root-disabled-bg: color-mix(in srgb, var(--frame-surface) 55%, var(--frame-muted));
+  --frame-input-root-disabled-border: color-mix(in srgb, var(--frame-border) 82%, var(--frame-muted));
+  --frame-input-root-disabled-color: color-mix(in srgb, var(--frame-surface-foreground) 52%, var(--frame-muted-foreground));
+  --frame-input-root-readonly-bg: color-mix(in srgb, var(--frame-surface) 80%, var(--frame-muted));
+  --frame-input-root-transition-duration: 150ms;
+  --frame-input-file-padding-block: 0.375rem;
+  --frame-input-file-button-radius: calc(var(--frame-radius-md) - 2px);
+  --frame-input-file-button-bg: color-mix(in srgb, var(--frame-surface) 80%, var(--frame-muted));
+  --frame-input-file-button-hover-bg: color-mix(in srgb, var(--frame-surface) 65%, var(--frame-muted));
+  --frame-input-file-button-font-size: 0.8125rem;
+  --frame-input-file-button-font-weight: 600;
+  --frame-input-file-button-margin-inline-end: 0.75rem;
+  --frame-input-file-button-padding: 0.45rem 0.75rem;
+  --frame-input-file-button-transition-duration: var(--frame-input-root-transition-duration);
+  --frame-input-badge-height: 1.5rem;
+  --frame-input-badge-padding-inline: 0.5rem;
+  --frame-input-badge-radius: 999px;
+  --frame-input-badge-border: color-mix(in srgb, var(--frame-primary) 24%, transparent);
+  --frame-input-badge-bg: color-mix(in srgb, var(--frame-primary) 12%, transparent);
+  --frame-input-badge-color: var(--frame-primary);
+  --frame-input-badge-font-size: 0.6875rem;
+  --frame-input-badge-font-weight: 700;
+  --frame-input-group-height: var(--frame-input-root-height);
+  --frame-input-group-radius: var(--frame-input-root-radius);
+  --frame-input-group-bg: var(--frame-input-root-bg);
+  --frame-input-group-border: var(--frame-input-root-border);
+  --frame-input-group-focus-border: var(--frame-input-root-focus-border);
+  --frame-input-group-focus-shadow: var(--frame-input-root-focus-shadow);
+  --frame-input-group-transition-duration: var(--frame-input-root-transition-duration);
+  --frame-input-group-disabled-bg: var(--frame-input-root-disabled-bg);
+  --frame-input-group-disabled-border: var(--frame-input-root-disabled-border);
+  --frame-input-group-disabled-color: var(--frame-input-root-disabled-color);
+  --frame-input-group-input-padding-inline: var(--frame-input-root-padding-inline);
+  --frame-input-group-addon-min-width: 2.5rem;
+  --frame-input-group-addon-bg: color-mix(in srgb, var(--frame-surface) 80%, var(--frame-muted));
+  --frame-input-group-addon-color: var(--frame-muted-foreground);
+  --frame-input-group-addon-padding-inline: 0.75rem;
+  --frame-input-group-addon-border: var(--frame-border);
+  --frame-input-group-text-font-size: 0.8125rem;
+  --frame-input-group-text-font-weight: 600;
+}

package/input/src/styles/input-group.css

@@ -0,0 +1,112 @@
+@import './_vars.css';
+
+.frame-input-group,
+[frInputGroup],
+frame-input-group {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  min-block-size: var(--frame-input-group-height);
+  border: 1px solid var(--frame-input-group-border);
+  border-radius: var(--frame-input-group-radius);
+  background: var(--frame-input-group-bg);
+  overflow: hidden;
+  transition:
+    border-color var(--frame-input-group-transition-duration) ease,
+    box-shadow var(--frame-input-group-transition-duration) ease,
+    background-color var(--frame-input-group-transition-duration) ease;
+}
+
+.frame-input-group:where(:focus-within),
+[frInputGroup]:where(:focus-within),
+frame-input-group:where(:focus-within) {
+  border-color: var(--frame-input-group-focus-border);
+  box-shadow: var(--frame-input-group-focus-shadow);
+}
+
+.frame-input-group:has([frInputGroupInput]:disabled),
+[frInputGroup]:has([frInputGroupInput]:disabled),
+frame-input-group:has([frInputGroupInput]:disabled) {
+  background: var(--frame-input-group-disabled-bg);
+  border-color: var(--frame-input-group-disabled-border);
+  opacity: var(--frame-input-root-disabled-opacity);
+}
+
+.frame-input-group__input,
+[frInputGroupInput] {
+  box-sizing: border-box;
+  flex: 1 1 0%;
+  width: auto;
+  min-width: 0;
+  min-block-size: 100%;
+  border: 0;
+  font-size: var(--frame-input-root-font-size);
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  padding-inline: var(--frame-input-group-input-padding-inline);
+  outline: none;
+}
+
+.frame-input-group__input:disabled,
+[frInputGroupInput]:disabled {
+  cursor: not-allowed;
+  color: var(--frame-input-group-disabled-color);
+}
+
+.frame-input-group__input:disabled::placeholder,
+[frInputGroupInput]:disabled::placeholder {
+  color: var(--frame-input-group-disabled-color);
+}
+
+.frame-input-group__input:focus-visible,
+[frInputGroupInput]:focus-visible {
+  border: 0;
+  box-shadow: none;
+}
+
+.frame-input-group__addon,
+[frInputGroupAddon],
+frame-input-group-addon {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  min-block-size: 100%;
+  min-inline-size: var(--frame-input-group-addon-min-width);
+  background: var(--frame-input-group-addon-bg);
+  color: var(--frame-input-group-addon-color);
+  padding-inline: var(--frame-input-group-addon-padding-inline);
+  white-space: nowrap;
+}
+
+.frame-input-group:has([frInputGroupInput]:disabled) .frame-input-group__addon,
+.frame-input-group:has([frInputGroupInput]:disabled) [frInputGroupAddon],
+[frInputGroup]:has([frInputGroupInput]:disabled) .frame-input-group__addon,
+[frInputGroup]:has([frInputGroupInput]:disabled) [frInputGroupAddon],
+frame-input-group:has([frInputGroupInput]:disabled) .frame-input-group__addon,
+frame-input-group:has([frInputGroupInput]:disabled) [frInputGroupAddon] {
+  color: var(--frame-input-group-disabled-color);
+}
+
+.frame-input-group__addon[data-align='inline-start'],
+[frInputGroupAddon][data-align='inline-start'],
+frame-input-group-addon[data-align='inline-start'] {
+  border-inline-end: 1px solid var(--frame-input-group-addon-border);
+}
+
+.frame-input-group__addon[data-align='inline-end'],
+[frInputGroupAddon][data-align='inline-end'],
+frame-input-group-addon[data-align='inline-end'] {
+  border-inline-start: 1px solid var(--frame-input-group-addon-border);
+}
+
+.frame-input-group__text,
+[frInputGroupText],
+frame-input-group-text {
+  font-size: var(--frame-input-group-text-font-size);
+  font-weight: var(--frame-input-group-text-font-weight);
+  line-height: 1;
+  white-space: nowrap;
+}

package/input/src/styles/input.css

@@ -0,0 +1,163 @@
+@import './_vars.css';
+
+[frInputField],
+frame-input-field {
+  display: grid;
+  gap: var(--frame-input-field-gap);
+  width: 100%;
+}
+
+[frInputHeader],
+frame-input-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--frame-input-header-gap);
+}
+
+[frInputControl],
+frame-input-control {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+[frInputFieldGroup],
+frame-input-field-group {
+  display: grid;
+  gap: var(--frame-input-field-group-gap);
+}
+
+[frInputLabel],
+frame-input-label {
+  font-size: var(--frame-input-label-font-size);
+  font-weight: var(--frame-input-label-font-weight);
+  line-height: 1.3;
+}
+
+[frInputDescription],
+frame-input-description {
+  color: var(--frame-input-description-color);
+  font-size: var(--frame-input-description-font-size);
+  line-height: 1.45;
+  margin: 0;
+}
+
+[frInputError],
+frame-input-error {
+  color: var(--frame-input-error-color);
+  font-size: var(--frame-input-error-font-size);
+  line-height: 1.45;
+  margin: 0;
+}
+
+[frInput] {
+  box-sizing: border-box;
+  appearance: none;
+  -webkit-appearance: none;
+  width: 100%;
+  min-width: 0;
+  height: var(--frame-input-root-height);
+  border: 1px solid var(--frame-input-root-border);
+  border-radius: var(--frame-input-root-radius);
+  background: var(--frame-input-root-bg);
+  color: var(--frame-input-root-color);
+  box-shadow: none;
+  cursor: text;
+  font: inherit;
+  font-size: var(--frame-input-root-font-size);
+  line-height: 1.4;
+  margin: 0;
+  outline: none;
+  padding-block: 0;
+  padding-inline: var(--frame-input-root-padding-inline);
+  text-overflow: ellipsis;
+  transition:
+    background-color var(--frame-input-root-transition-duration) ease,
+    border-color var(--frame-input-root-transition-duration) ease,
+    box-shadow var(--frame-input-root-transition-duration) ease,
+    color var(--frame-input-root-transition-duration) ease,
+    opacity var(--frame-input-root-transition-duration) ease;
+}
+
+[frInput]::placeholder {
+  color: var(--frame-input-root-placeholder-color);
+}
+
+[frInput]:where(:not(:disabled)):hover {
+  border-color: var(--frame-input-root-hover-border);
+}
+
+[frInput]:focus-visible {
+  border-color: var(--frame-input-root-focus-border);
+  box-shadow: var(--frame-input-root-focus-shadow);
+}
+
+[frInput][aria-invalid='true'],
+[frInput].ng-invalid.ng-touched,
+[frInput].ng-invalid.ng-dirty {
+  border-color: var(--frame-input-root-invalid-border);
+  box-shadow: var(--frame-input-root-invalid-shadow);
+}
+
+[frInput]:disabled {
+  cursor: not-allowed;
+  background: var(--frame-input-root-disabled-bg);
+  border-color: var(--frame-input-root-disabled-border);
+  color: var(--frame-input-root-disabled-color);
+  opacity: var(--frame-input-root-disabled-opacity);
+}
+
+[frInput]:disabled::placeholder {
+  color: var(--frame-input-root-disabled-color);
+}
+
+[frInput]:read-only {
+  background: var(--frame-input-root-readonly-bg);
+}
+
+[frInput][type='file'] {
+  cursor: pointer;
+  padding-block: var(--frame-input-file-padding-block);
+}
+
+[frInput][type='file']::file-selector-button {
+  border: 1px solid var(--frame-border);
+  border-radius: var(--frame-input-file-button-radius);
+  background: var(--frame-input-file-button-bg);
+  color: var(--frame-foreground);
+  cursor: pointer;
+  font: inherit;
+  font-size: var(--frame-input-file-button-font-size);
+  font-weight: var(--frame-input-file-button-font-weight);
+  margin-inline-end: var(--frame-input-file-button-margin-inline-end);
+  padding: var(--frame-input-file-button-padding);
+  transition:
+    background-color var(--frame-input-file-button-transition-duration) ease,
+    border-color var(--frame-input-file-button-transition-duration) ease,
+    color var(--frame-input-file-button-transition-duration) ease;
+}
+
+[frInput][type='file']:where(:not(:disabled))::file-selector-button:hover {
+  background: var(--frame-input-file-button-hover-bg);
+  border-color: var(--frame-input-root-hover-border);
+}
+
+[frInputBadge],
+frame-input-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  /*min-inline-size: 2.5rem;*/
+  padding-inline: var(--frame-input-badge-padding-inline);
+  block-size: var(--frame-input-badge-height);
+  border-radius: var(--frame-input-badge-radius);
+  border: 1px solid var(--frame-input-badge-border);
+  background: var(--frame-input-badge-bg);
+  color: var(--frame-input-badge-color);
+  font-size: var(--frame-input-badge-font-size);
+  font-weight: var(--frame-input-badge-font-weight);
+  line-height: 1;
+  white-space: nowrap;
+}

package/input-otp/src/styles/_vars.css

@@ -0,0 +1,21 @@
+:root {
+  --frame-input-otp-gap: 0.5rem;
+  --frame-input-otp-group-gap: 0;
+  --frame-input-otp-slot-size: 2.5rem;
+  --frame-input-otp-slot-radius: var(--frame-input-root-radius);
+  --frame-input-otp-slot-bg: var(--frame-input-root-bg);
+  --frame-input-otp-slot-color: var(--frame-input-root-color);
+  --frame-input-otp-slot-border: var(--frame-input-root-border);
+  --frame-input-otp-slot-font-size: 1rem;
+  --frame-input-otp-slot-font-weight: 500;
+  --frame-input-otp-slot-focus-border: var(--frame-input-root-focus-border);
+  --frame-input-otp-slot-focus-shadow: var(--frame-input-root-focus-shadow);
+  --frame-input-otp-slot-invalid-border: var(--frame-input-root-invalid-border);
+  --frame-input-otp-slot-invalid-shadow: var(--frame-input-root-invalid-shadow);
+  --frame-input-otp-slot-disabled-bg: var(--frame-input-root-disabled-bg);
+  --frame-input-otp-slot-disabled-color: var(--frame-input-root-disabled-color);
+  --frame-input-otp-slot-disabled-opacity: var(--frame-input-root-disabled-opacity);
+  --frame-input-otp-slot-placeholder-color: var(--frame-input-root-placeholder-color);
+  --frame-input-otp-separator-color: var(--frame-muted-foreground);
+  --frame-input-otp-separator-size: 0.375rem;
+}