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

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

@@ -0,0 +1,116 @@
+@import './_vars.css';
+
+frame-input-otp {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--frame-input-otp-gap);
+}
+
+.frame-input-otp__native {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+  caret-color: transparent;
+  color: transparent;
+  opacity: 0.01;
+  padding: 0;
+}
+
+.frame-input-otp__native:disabled {
+  background: transparent;
+  color: transparent;
+  opacity: 0.01;
+}
+
+.frame-input-otp__group {
+  position: relative;
+  z-index: 2;
+  display: inline-flex;
+  gap: var(--frame-input-otp-group-gap);
+  pointer-events: none;
+}
+
+.frame-input-otp__slot {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--frame-input-otp-slot-size);
+  block-size: var(--frame-input-otp-slot-size);
+  border: 1px solid var(--frame-input-otp-slot-border);
+  border-radius: 0;
+  background: var(--frame-input-otp-slot-bg);
+  color: var(--frame-input-otp-slot-color);
+  font-size: var(--frame-input-otp-slot-font-size);
+  font-weight: var(--frame-input-otp-slot-font-weight);
+  line-height: 1;
+  pointer-events: auto;
+  transition:
+    border-color 140ms ease,
+    box-shadow 140ms ease,
+    color 140ms ease,
+    opacity 140ms ease;
+}
+
+.frame-input-otp__slot:first-child {
+  border-start-start-radius: var(--frame-input-otp-slot-radius);
+  border-end-start-radius: var(--frame-input-otp-slot-radius);
+}
+
+.frame-input-otp__slot:last-child {
+  border-start-end-radius: var(--frame-input-otp-slot-radius);
+  border-end-end-radius: var(--frame-input-otp-slot-radius);
+}
+
+.frame-input-otp__slot + .frame-input-otp__slot {
+  margin-inline-start: -1px;
+}
+
+.frame-input-otp__slot[data-active] {
+  z-index: 1;
+  border-color: var(--frame-input-otp-slot-focus-border);
+  box-shadow: var(--frame-input-otp-slot-focus-shadow);
+}
+
+.frame-input-otp__slot[data-invalid],
+frame-input-otp[data-invalid] .frame-input-otp__slot {
+  border-color: var(--frame-input-otp-slot-invalid-border);
+  box-shadow: var(--frame-input-otp-slot-invalid-shadow);
+}
+
+.frame-input-otp__slot[data-disabled],
+frame-input-otp[data-disabled] .frame-input-otp__slot {
+  background: var(--frame-input-otp-slot-disabled-bg);
+  color: var(--frame-input-otp-slot-disabled-color);
+  opacity: var(--frame-input-otp-slot-disabled-opacity);
+}
+
+.frame-input-otp__slot-char--empty {
+  color: var(--frame-input-otp-slot-placeholder-color);
+}
+
+.frame-input-otp__separator {
+  position: relative;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--frame-input-otp-slot-size);
+  color: var(--frame-input-otp-separator-color);
+  pointer-events: none;
+}
+
+.frame-input-otp__separator::before {
+  content: '';
+  inline-size: var(--frame-input-otp-separator-size);
+  block-size: var(--frame-input-otp-separator-size);
+  border-radius: 999px;
+  background: currentColor;
+}

package/item/src/styles/_vars.css

@@ -0,0 +1,34 @@
+:root {
+  --frame-item-gap: 0.875rem;
+  --frame-item-padding: 1rem;
+  --frame-item-radius: var(--frame-radius-lg);
+  --frame-item-bg: transparent;
+  --frame-item-color: var(--frame-foreground);
+  --frame-item-border: transparent;
+  --frame-item-outline-border: var(--frame-border);
+  --frame-item-muted-bg: var(--frame-muted);
+  --frame-item-hover-bg: var(--frame-accent);
+  --frame-item-hover-color: var(--frame-accent-foreground);
+  --frame-item-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-ring) 24%, transparent);
+  --frame-item-disabled-opacity: 0.5;
+  --frame-item-content-gap: 0.25rem;
+  --frame-item-header-gap: 0.625rem;
+  --frame-item-footer-gap: 0.5rem;
+  --frame-item-actions-gap: 0.5rem;
+  --frame-item-media-size: 2.5rem;
+  --frame-item-media-radius: var(--frame-radius-md);
+  --frame-item-media-bg: var(--frame-muted);
+  --frame-item-media-color: var(--frame-muted-foreground);
+  --frame-item-media-icon-size: 1.25rem;
+  --frame-item-title-color: var(--frame-foreground);
+  --frame-item-title-font-size: 0.9375rem;
+  --frame-item-title-font-weight: 600;
+  --frame-item-description-color: var(--frame-muted-foreground);
+  --frame-item-description-font-size: 0.875rem;
+  --frame-item-sm-padding: 0.75rem;
+  --frame-item-sm-media-size: 2rem;
+  --frame-item-sm-title-font-size: 0.875rem;
+  --frame-item-xs-padding: 0.5rem;
+  --frame-item-xs-media-size: 1.75rem;
+  --frame-item-xs-title-font-size: 0.8125rem;
+}

package/item/src/styles/item.css

@@ -0,0 +1,187 @@
+@import './_vars.css';
+
+[frItem],
+frame-item {
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--frame-item-gap);
+  width: 100%;
+  min-width: 0;
+  border: 1px solid var(--frame-item-border);
+  border-radius: var(--frame-item-radius);
+  background: var(--frame-item-bg);
+  color: var(--frame-item-color);
+  padding: var(--frame-item-padding);
+  text-align: start;
+  text-decoration: none;
+  transition:
+    background-color 140ms ease,
+    border-color 140ms ease,
+    box-shadow 140ms ease,
+    color 140ms ease,
+    opacity 140ms ease;
+}
+
+[frItem][data-variant='outline'],
+frame-item[data-variant='outline'] {
+  --frame-item-border: var(--frame-item-outline-border);
+}
+
+[frItem][data-variant='muted'],
+frame-item[data-variant='muted'] {
+  --frame-item-bg: var(--frame-item-muted-bg);
+}
+
+[frItem][data-size='sm'],
+frame-item[data-size='sm'] {
+  --frame-item-padding: var(--frame-item-sm-padding);
+  --frame-item-media-size: var(--frame-item-sm-media-size);
+  --frame-item-title-font-size: var(--frame-item-sm-title-font-size);
+}
+
+[frItem][data-size='xs'],
+frame-item[data-size='xs'] {
+  --frame-item-padding: var(--frame-item-xs-padding);
+  --frame-item-media-size: var(--frame-item-xs-media-size);
+  --frame-item-title-font-size: var(--frame-item-xs-title-font-size);
+}
+
+[frItem][data-interactive]:where(:not([data-disabled])):hover,
+frame-item[data-interactive]:where(:not([data-disabled])):hover {
+  background: var(--frame-item-hover-bg);
+  color: var(--frame-item-hover-color);
+}
+
+[frItem][data-interactive]:where(:not([data-disabled])):focus-visible,
+frame-item[data-interactive]:where(:not([data-disabled])):focus-visible {
+  outline: none;
+  box-shadow: var(--frame-item-focus-shadow);
+}
+
+[frItem][data-disabled],
+frame-item[data-disabled] {
+  cursor: not-allowed;
+  opacity: var(--frame-item-disabled-opacity);
+}
+
+.frame-item-group,
+[frItemGroup],
+frame-item-group {
+  display: grid;
+  gap: 0;
+  width: 100%;
+  border: 1px solid var(--frame-item-outline-border);
+  border-radius: var(--frame-item-radius);
+  overflow: hidden;
+}
+
+.frame-item-group > [frItem],
+.frame-item-group > frame-item,
+[frItemGroup] > [frItem],
+[frItemGroup] > frame-item,
+frame-item-group > [frItem],
+frame-item-group > frame-item {
+  border: 0;
+  border-radius: 0;
+}
+
+[frItemSeparator],
+frame-item-separator {
+  display: block;
+  height: 1px;
+  margin-inline: var(--frame-item-padding);
+  background: var(--frame-item-outline-border);
+}
+
+[frItemHeader],
+frame-item-header,
+[frItemFooter],
+frame-item-footer {
+  display: grid;
+  min-width: 0;
+}
+
+[frItemHeader],
+frame-item-header {
+  gap: var(--frame-item-header-gap);
+}
+
+[frItemFooter],
+frame-item-footer {
+  gap: var(--frame-item-footer-gap);
+}
+
+[frItemMedia],
+frame-item-media {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--frame-item-media-size);
+  block-size: var(--frame-item-media-size);
+  border-radius: var(--frame-item-media-radius);
+  color: var(--frame-item-media-color);
+  overflow: hidden;
+}
+
+[frItemMedia][data-variant='icon'],
+frame-item-media[data-variant='icon'] {
+  background: var(--frame-item-media-bg);
+}
+
+[frItemMedia][data-variant='image'],
+frame-item-media[data-variant='image'],
+[frItemMedia][data-variant='avatar'],
+frame-item-media[data-variant='avatar'] {
+  background: transparent;
+}
+
+[frItemMedia] > ng-icon,
+frame-item-media > ng-icon,
+[frItemMedia] > svg,
+frame-item-media > svg {
+  inline-size: var(--frame-item-media-icon-size);
+  block-size: var(--frame-item-media-icon-size);
+}
+
+[frItemMedia] img,
+frame-item-media img {
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+}
+
+[frItemContent],
+frame-item-content {
+  display: grid;
+  flex: 1 1 auto;
+  gap: var(--frame-item-content-gap);
+  min-width: 0;
+}
+
+[frItemTitle],
+frame-item-title {
+  color: var(--frame-item-title-color);
+  font-size: var(--frame-item-title-font-size);
+  font-weight: var(--frame-item-title-font-weight);
+  line-height: 1.25;
+  margin: 0;
+}
+
+[frItemDescription],
+frame-item-description {
+  color: var(--frame-item-description-color);
+  font-size: var(--frame-item-description-font-size);
+  line-height: 1.45;
+  margin: 0;
+}
+
+[frItemActions],
+frame-item-actions {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: var(--frame-item-actions-gap);
+  margin-inline-start: auto;
+}

package/menubar/src/styles/_vars.css

@@ -0,0 +1,22 @@
+:root {
+  --frame-menubar-bg: var(--frame-surface);
+  --frame-menubar-color: var(--frame-surface-foreground);
+  --frame-menubar-border: var(--frame-border);
+  --frame-menubar-radius: var(--frame-radius-md);
+  --frame-menubar-padding: 0.25rem;
+  --frame-menubar-gap: 0.25rem;
+  --frame-menubar-shadow: none;
+  --frame-menubar-trigger-height: 2rem;
+  --frame-menubar-trigger-padding-x: 0.75rem;
+  --frame-menubar-trigger-gap: 0.375rem;
+  --frame-menubar-trigger-radius: calc(var(--frame-menubar-radius) - 0.125rem);
+  --frame-menubar-trigger-font-size: 0.875rem;
+  --frame-menubar-trigger-font-weight: 500;
+  --frame-menubar-trigger-bg: transparent;
+  --frame-menubar-trigger-color: var(--frame-menubar-color);
+  --frame-menubar-trigger-hover-bg: color-mix(in srgb, var(--frame-accent) 48%, transparent);
+  --frame-menubar-trigger-hover-color: var(--frame-menubar-color);
+  --frame-menubar-trigger-open-bg: var(--frame-accent);
+  --frame-menubar-trigger-open-color: var(--frame-accent-foreground);
+  --frame-menubar-trigger-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-ring) 24%, transparent);
+}

package/menubar/src/styles/menubar.css

@@ -0,0 +1,70 @@
+@import './_vars.css';
+
+[frMenuBar],
+frame-menubar {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--frame-menubar-gap);
+  border: 1px solid var(--frame-menubar-border);
+  border-radius: var(--frame-menubar-radius);
+  background: var(--frame-menubar-bg);
+  color: var(--frame-menubar-color);
+  padding: var(--frame-menubar-padding);
+  box-shadow: var(--frame-menubar-shadow);
+}
+
+[frMenuBarMenu],
+frame-menubar-menu {
+  display: contents;
+}
+
+[frMenuBarTrigger],
+.frame-menubar__trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--frame-menubar-trigger-gap);
+  min-block-size: var(--frame-menubar-trigger-height);
+  border: 0;
+  border-radius: var(--frame-menubar-trigger-radius);
+  background: var(--frame-menubar-trigger-bg);
+  color: var(--frame-menubar-trigger-color);
+  padding-inline: var(--frame-menubar-trigger-padding-x);
+  font: inherit;
+  font-size: var(--frame-menubar-trigger-font-size);
+  font-weight: var(--frame-menubar-trigger-font-weight);
+  line-height: 1;
+  white-space: nowrap;
+  cursor: default;
+  transition:
+    background-color 140ms ease,
+    box-shadow 140ms ease,
+    color 140ms ease;
+}
+
+[frMenuBarTrigger]:where(:not(:disabled)):hover,
+.frame-menubar__trigger:where(:not(:disabled)):hover,
+[frMenuBarTrigger][data-state='open'],
+.frame-menubar__trigger[data-state='open'] {
+  background: var(--frame-menubar-trigger-hover-bg);
+  color: var(--frame-menubar-trigger-hover-color);
+}
+
+[frMenuBarTrigger][data-state='open'],
+.frame-menubar__trigger[data-state='open'] {
+  background: var(--frame-menubar-trigger-open-bg);
+  color: var(--frame-menubar-trigger-open-color);
+}
+
+[frMenuBarTrigger]:focus-visible,
+.frame-menubar__trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--frame-menubar-trigger-focus-shadow);
+}
+
+[frMenuBarTrigger]:disabled,
+.frame-menubar__trigger:disabled {
+  cursor: not-allowed;
+  opacity: var(--frame-dropdown-menu-item-disabled-opacity, 0.5);
+}

package/modal/src/styles/_vars.css

@@ -0,0 +1,18 @@
+:root {
+  --frame-modal-backdrop-blur: 3px;
+  --frame-modal-backdrop-bg: rgb(0 0 0 / 0.52);
+  --frame-modal-bg: var(--frame-background, #fff);
+  --frame-modal-border: var(--frame-border, #e5e7eb);
+  --frame-modal-color: var(--frame-foreground, #09090b);
+  --frame-modal-muted-color: var(--frame-muted-foreground, #71717a);
+  --frame-modal-radius: var(--frame-radius-lg, 0.75rem);
+  --frame-modal-shadow: 0 24px 80px rgb(0 0 0 / 0.18), 0 8px 24px rgb(0 0 0 / 0.12);
+  --frame-modal-padding: 1.5rem;
+  --frame-modal-gap: 1rem;
+  --frame-modal-scrollable-height: min(calc(100dvh - 2rem), 28rem);
+  --frame-modal-close-bg: transparent;
+  --frame-modal-close-color: var(--frame-muted-foreground, #71717a);
+  --frame-modal-close-hover-bg: var(--frame-muted, #f4f4f5);
+  --frame-modal-close-hover-color: var(--frame-foreground, #09090b);
+  --frame-modal-z-index: 1000;
+}

package/modal/src/styles/modal.css

@@ -0,0 +1,179 @@
+@import "./_vars.css";
+
+.cdk-overlay-backdrop.frame-modal__backdrop {
+  backdrop-filter: blur(var(--frame-modal-backdrop-blur));
+  background: var(--frame-modal-backdrop-bg);
+}
+
+.cdk-global-overlay-wrapper:has(.frame-modal__overlay-pane) {
+  z-index: var(--frame-modal-z-index);
+}
+
+.frame-modal__overlay-pane .cdk-dialog-container {
+  display: contents;
+  outline: none;
+}
+
+.frame-modal__panel {
+  position: relative;
+  display: flex;
+  max-height: min(calc(100dvh - 2rem), 42rem);
+  width: min(calc(100vw - 2rem), 32rem);
+  flex-direction: column;
+  gap: var(--frame-modal-gap);
+  overflow: hidden;
+  border: 1px solid var(--frame-modal-border);
+  border-radius: var(--frame-modal-radius);
+  background: var(--frame-modal-bg);
+  box-shadow: var(--frame-modal-shadow);
+  color: var(--frame-modal-color);
+  animation: frame-modal-enter 160ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.frame-modal__panel[data-size="sm"] {
+  width: min(calc(100vw - 2rem), 24rem);
+}
+
+.frame-modal__panel[data-size="lg"] {
+  width: min(calc(100vw - 2rem), 42rem);
+}
+
+.frame-modal__panel[data-size="xl"] {
+  width: min(calc(100vw - 2rem), 56rem);
+}
+
+.frame-modal__panel[data-size="full"] {
+  width: calc(100vw - 2rem);
+  height: calc(100dvh - 2rem);
+  max-height: calc(100dvh - 2rem);
+}
+
+.frame-modal__panel[data-scrollable] {
+  height: var(--frame-modal-scrollable-height);
+  min-height: 0;
+}
+
+.frame-modal__header,
+.frame-modal__body,
+.frame-modal__footer {
+  padding-inline: var(--frame-modal-padding);
+}
+
+.frame-modal__header {
+  display: grid;
+  flex: 0 0 auto;
+  gap: 0.375rem;
+  padding-block-start: var(--frame-modal-padding);
+  padding-inline-end: calc(var(--frame-modal-padding) + 2rem);
+}
+
+.frame-modal__body {
+  display: grid;
+  min-height: 0;
+  flex: 0 1 auto;
+  gap: 1rem;
+}
+
+.frame-modal__panel[data-scrollable] .frame-modal__body {
+  flex: 1 1 auto;
+  overflow: auto;
+  overscroll-behavior: contain;
+  padding-block-end: var(--frame-modal-padding);
+}
+
+.frame-modal__footer {
+  display: flex;
+  flex: 0 0 auto;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0.625rem;
+  padding-block-end: var(--frame-modal-padding);
+}
+
+.frame-modal__panel[data-sticky-footer] .frame-modal__footer {
+  flex: 0 0 auto;
+  border-block-start: 1px solid var(--frame-modal-border);
+  background: color-mix(in srgb, var(--frame-modal-bg) 92%, transparent);
+  padding-block-start: 1rem;
+  backdrop-filter: blur(12px);
+}
+
+.frame-modal__title {
+  margin: 0;
+  color: var(--frame-modal-color);
+  font-size: 1.125rem;
+  font-weight: 650;
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+}
+
+.frame-modal__description {
+  margin: 0;
+  color: var(--frame-modal-muted-color);
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.frame-modal__close {
+  position: absolute;
+  inset-block-start: 0.75rem;
+  inset-inline-end: 0.75rem;
+  display: inline-grid;
+  width: 2rem;
+  height: 2rem;
+  place-items: center;
+  border: 0;
+  border-radius: 999px;
+  background: var(--frame-modal-close-bg);
+  color: var(--frame-modal-close-color);
+  cursor: pointer;
+  font: inherit;
+  line-height: 1;
+  transition:
+    background-color 120ms ease,
+    color 120ms ease,
+    transform 120ms ease;
+}
+
+.frame-modal__close:hover {
+  background: var(--frame-modal-close-hover-bg);
+  color: var(--frame-modal-close-hover-color);
+}
+
+.frame-modal__close:active {
+  transform: scale(0.96);
+}
+
+.frame-modal__close:focus-visible,
+.frame-modal__close-control:focus-visible {
+  outline: 2px solid var(--frame-ring, currentColor);
+  outline-offset: 2px;
+}
+
+@media (max-width: 640px) {
+  .frame-modal__panel {
+    width: calc(100vw - 1rem);
+  }
+
+  .frame-modal__footer {
+    flex-direction: column-reverse;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .frame-modal__panel {
+    animation: none;
+  }
+}
+
+@keyframes frame-modal-enter {
+  from {
+    opacity: 0;
+    transform: translateY(10px) scale(0.98);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}

package/navigation-menu/src/styles/_vars.css

@@ -0,0 +1,45 @@
+:root {
+  --frame-navigation-menu-gap: 0.25rem;
+  --frame-navigation-menu-padding: 0.25rem;
+  --frame-navigation-menu-radius: var(--frame-radius-md);
+  --frame-navigation-menu-bg: transparent;
+  --frame-navigation-menu-color: var(--frame-foreground);
+  --frame-navigation-menu-trigger-height: 2.25rem;
+  --frame-navigation-menu-trigger-padding-x: 0.875rem;
+  --frame-navigation-menu-trigger-gap: 0.375rem;
+  --frame-navigation-menu-trigger-radius: calc(var(--frame-navigation-menu-radius) - 0.125rem);
+  --frame-navigation-menu-trigger-font-size: 0.875rem;
+  --frame-navigation-menu-trigger-font-weight: 500;
+  --frame-navigation-menu-trigger-bg: transparent;
+  --frame-navigation-menu-trigger-color: var(--frame-navigation-menu-color);
+  --frame-navigation-menu-trigger-hover-bg: var(--frame-accent);
+  --frame-navigation-menu-trigger-hover-color: var(--frame-accent-foreground);
+  --frame-navigation-menu-trigger-open-bg: var(--frame-accent);
+  --frame-navigation-menu-trigger-open-color: var(--frame-accent-foreground);
+  --frame-navigation-menu-trigger-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-ring) 24%, transparent);
+  --frame-navigation-menu-content-width: 36rem;
+  --frame-navigation-menu-content-gap: 0.25rem;
+  --frame-navigation-menu-link-gap: 0.25rem;
+  --frame-navigation-menu-link-padding: 0.75rem;
+  --frame-navigation-menu-link-radius: var(--frame-radius-md);
+  --frame-navigation-menu-link-bg: transparent;
+  --frame-navigation-menu-link-color: var(--frame-foreground);
+  --frame-navigation-menu-link-hover-bg: var(--frame-accent);
+  --frame-navigation-menu-link-hover-color: var(--frame-accent-foreground);
+  --frame-navigation-menu-link-active-bg: var(--frame-accent);
+  --frame-navigation-menu-link-active-color: var(--frame-accent-foreground);
+  --frame-navigation-menu-link-title-font-size: 0.875rem;
+  --frame-navigation-menu-link-title-font-weight: 600;
+  --frame-navigation-menu-link-description-color: var(--frame-muted-foreground);
+  --frame-navigation-menu-link-description-font-size: 0.8125rem;
+  --frame-navigation-menu-link-separator-color: var(--frame-border);
+  --frame-navigation-menu-link-separator-margin-y: 0.25rem;
+  --frame-navigation-menu-feature-bg: linear-gradient(135deg, var(--frame-muted), color-mix(in srgb, var(--frame-primary) 12%, var(--frame-surface)));
+  --frame-navigation-menu-feature-color: var(--frame-foreground);
+  --frame-navigation-menu-indicator-size: 0.625rem;
+  --frame-navigation-menu-indicator-bg: var(--frame-dropdown-menu-panel-bg, var(--frame-surface));
+  --frame-navigation-menu-viewport-radius: var(--frame-dropdown-menu-panel-radius, var(--frame-radius-md));
+  --frame-navigation-menu-viewport-border: var(--frame-dropdown-menu-panel-border, var(--frame-border));
+  --frame-navigation-menu-viewport-bg: var(--frame-dropdown-menu-panel-bg, var(--frame-surface));
+  --frame-navigation-menu-viewport-shadow: var(--frame-dropdown-menu-panel-shadow, var(--frame-shadow-md));
+}