@1money/component-ui 0.0.49 → 0.0.51

package/es/components/Navigation/interface.d.ts

@@ -0,0 +1,134 @@
+import type { ReactNode, ReactElement, MouseEvent, RefObject } from 'react';
+export interface NavigationItem {
+    /** Unique key for the item */
+    key?: string | number;
+    /** Display label */
+    label: ReactNode;
+    /** Icon — accepts IconName string or ReactNode */
+    icon?: ReactNode;
+    /** Suffix content rendered after the label (e.g., tag/badge) */
+    suffix?: ReactNode;
+    /** Link component wrapper (e.g., Next.js Link) or URL string */
+    link?: string | ReactElement;
+    /** Whether this item is currently active */
+    active?: boolean;
+    /** Whether this item is disabled */
+    disabled?: boolean;
+    /** Whether this item is hidden */
+    hidden?: boolean;
+    /** Click handler */
+    onClick?: (e: MouseEvent<HTMLElement>) => void;
+    /** Sub-menu items (Level 2) */
+    children?: Omit<NavigationItem, 'children' | 'defaultOpen' | 'onOpenChange'>[];
+    /** Whether sub-menu is open by default */
+    defaultOpen?: boolean;
+    /** Callback when sub-menu open state changes */
+    onOpenChange?: (open: boolean) => void;
+}
+export interface NavigationProps {
+    /** Ref to the root element */
+    ref?: RefObject<HTMLElement | null>;
+    /** CSS class prefix */
+    prefixCls?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Navigation menu items */
+    items: NavigationItem[];
+    /** Whether the navigation is collapsed */
+    collapsed?: boolean;
+    /** Default collapsed state (uncontrolled) */
+    defaultCollapsed?: boolean;
+    /** Whether collapse toggle is shown */
+    collapsible?: boolean;
+    /** Callback when collapsed state changes */
+    onCollapse?: (collapsed: boolean) => void;
+    /** Header content — defaults to built-in 1Money logo; pass null to hide */
+    header?: ReactNode;
+    /** Click handler for the default logo */
+    onLogoClick?: (e: MouseEvent<HTMLElement>) => void;
+    /** Company selector slot (below header) */
+    selector?: ReactNode;
+    /** Children rendered at bottom (e.g., settings, profile) */
+    children?: ReactNode;
+}
+export interface NavigationHandlers {
+    /** Toggle collapsed state */
+    toggle: () => void;
+    /** Set collapsed state directly */
+    collapse: (collapsed: boolean) => void;
+}
+export interface NavItem {
+    /** Unique key for the item */
+    key?: string | number;
+    /** Display label */
+    label: ReactNode;
+    /** Icon — accepts IconName string or ReactNode */
+    icon?: ReactNode;
+    /** Suffix content rendered after the label */
+    suffix?: ReactNode;
+    /** Link component wrapper or URL string */
+    link?: string | ReactElement;
+    /** Whether this item is currently active */
+    active?: boolean;
+    /** Whether this item is disabled */
+    disabled?: boolean;
+    /** Whether this item is hidden */
+    hidden?: boolean;
+    /** Nested child items — enables recursive multi-level nesting */
+    children?: NavItem[];
+    /** Whether children are expanded by default */
+    defaultOpen?: boolean;
+    /** Callback when expand state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Click handler */
+    onClick?: (e: MouseEvent<HTMLElement>) => void;
+}
+export interface NavProps {
+    /** Ref to the root element */
+    ref?: RefObject<HTMLElement | null>;
+    /** CSS class prefix */
+    prefixCls?: string;
+    /** Additional CSS classes for the root <nav> element */
+    className?: string;
+    /** Additional CSS classes for the inner content wrapper */
+    bodyCls?: string;
+    /** Navigation items — top-level items with children render as groups */
+    items: NavItem[];
+}
+export type NavigationStepperStepStatus = 'todo' | 'active' | 'done' | 'done-active';
+export interface NavigationStepperStep {
+    /** Unique key for the step */
+    key: string;
+    /** Display label */
+    label: ReactNode;
+    /** Step status — drives styling and trailing icon */
+    status: NavigationStepperStepStatus;
+    /** Whether the step is disabled */
+    disabled?: boolean;
+    /** Click handler */
+    onClick?: (step: NavigationStepperStep) => void;
+}
+export interface NavigationStepperProps {
+    /** Root element id */
+    id?: string;
+    /** Additional CSS classes for the root <aside> element */
+    className?: string;
+    /** CSS class prefix */
+    prefixCls?: string;
+    /** Additional CSS classes for the logo button */
+    logoCls?: string;
+    /** Additional CSS classes for the header container */
+    headerCls?: string;
+    /** Additional CSS classes for the steps list */
+    bodyCls?: string;
+    /** Additional CSS classes for the footer */
+    footerCls?: string;
+    /** Click handler for the logo button */
+    onLogoClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+    /** Whether to render the logo with the BETA tag */
+    betaLogo?: boolean;
+    /** Step items rendered in order */
+    steps: NavigationStepperStep[];
+    /** Optional footer content (e.g. auto-saved timestamp) */
+    footer?: ReactNode;
+}

package/es/components/Navigation/interface.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29tcG9uZW50cy9OYXZpZ2F0aW9uL2ludGVyZmFjZS5qcyIsIm5hbWVzIjpbXSwic291cmNlUm9vdCI6Ii4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYyIsInNvdXJjZXMiOlsiY29tcG9uZW50cy9OYXZpZ2F0aW9uL2ludGVyZmFjZS5qcyJdLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQge307Il0sIm1hcHBpbmdzIjoiQUFBQSIsImlnbm9yZUxpc3QiOltdfQ==

package/es/components/Navigation/style/Nav.css

@@ -0,0 +1,158 @@
+/**
+  * Retrieves the spacing value for a given token key.
+  *
+  * @param {string} $key - The spacing token key (e.g., '100', '200').
+  * @return {length|null} The computed spacing value or null if the key is invalid.
+  * @example
+  *   .element {
+  *     padding: om-spacing-token('200'); // Returns 8px if $om-sys-spacing-unit is 4px
+  *   }
+  */
+/**
+  * Computes the spacing value based on a token key or a direct length value.
+  *
+  * @param {string|length} $value - The spacing token key (e.g., '100') or a direct length value (e.g., '16px').
+  * @return {length} The computed spacing value.
+  * @example
+  *   .element {
+  *     margin: om-spacing-value('300'); // Returns 12px if $om-sys-spacing-unit is 4px
+  *     padding: om-spacing-value(16px); // Returns 16px
+  *     gap: om-spacing-value(2); // Returns 8px if $om-sys-spacing-unit is 4px
+  *   }
+  */
+.om-component-ui-nav {
+  display: flex;
+  flex-direction: column;
+  width: 280px;
+  height: 100%;
+  padding: var(--om-spacing-1000, 40px) var(--om-spacing-400, 16px) var(--om-spacing-600, 24px);
+  background-color: var(--om-bg-default, #fff);
+  border-right: 1px solid var(--om-border-neutral, #e3e4e4);
+}
+.om-component-ui-nav-content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  overflow-y: auto;
+}
+.om-component-ui-nav-divider {
+  height: 1px;
+  background-color: var(--om-border-neutral, #e3e4e4);
+}
+.om-component-ui-nav-group {
+  display: flex;
+  flex-direction: column;
+}
+.om-component-ui-nav-group-header {
+  display: flex;
+  align-items: center;
+  min-height: var(--om-component-height-md, 40px);
+  padding: var(--om-spacing-200, 8px) var(--om-spacing-400, 16px);
+  color: var(--om-text-default-secondary, #404042);
+  border-radius: var(--om-radius-300, 12px);
+}
+.om-component-ui-nav-group-header-content {
+  display: flex;
+  flex: 1;
+  gap: var(--om-spacing-200, 8px);
+  align-items: center;
+  min-width: 0;
+}
+.om-component-ui-nav-group-header-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  color: var(--om-icon-default-secondary, #404042);
+}
+.om-component-ui-nav-group-header-label {
+  flex: 1;
+  min-width: 0;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+.om-component-ui-nav-group-header .om-component-ui-typography {
+  color: inherit;
+}
+.om-component-ui-nav-item-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+.om-component-ui-nav-item {
+  display: flex;
+  gap: var(--om-spacing-600, 24px);
+  align-items: center;
+  width: 100%;
+  min-height: var(--om-component-height-md, 40px);
+  padding: var(--om-spacing-200, 8px) var(--om-spacing-400, 16px);
+  padding-left: calc(var(--om-spacing-400, 16px) + var(--om-nav-indent, 0) * var(--om-spacing-600, 24px));
+  color: var(--om-text-default-secondary, #404042);
+  background-color: transparent;
+  border: none;
+  border-radius: var(--om-radius-300, 12px);
+  cursor: pointer;
+}
+.om-component-ui-nav-item .om-component-ui-typography {
+  color: inherit;
+}
+.om-component-ui-nav-item[data-depth="1"]:hover:not(:disabled) {
+  color: var(--om-text-brand, #073387);
+}
+.om-component-ui-nav-item:not([data-depth="1"]):hover:not(:disabled) {
+  color: var(--om-text-default, #131313);
+}
+.om-component-ui-nav-item-content {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  min-width: 0;
+}
+.om-component-ui-nav-item-label {
+  flex: 1;
+  min-width: 0;
+  white-space: normal;
+  text-align: left;
+  overflow-wrap: anywhere;
+}
+.om-component-ui-nav-item-suffix {
+  flex-shrink: 0;
+}
+.om-component-ui-nav-item-arrow {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  color: var(--om-icon-default-secondary, #404042);
+  transition: transform 200ms ease-in-out;
+}
+.om-component-ui-nav-item-arrow-open {
+  transform: rotate(-180deg);
+}
+.om-component-ui-nav-item-link {
+  display: flex;
+  color: inherit;
+  text-decoration: none;
+}
+.om-component-ui-nav-item-active {
+  color: var(--om-text-brand, #073387);
+}
+.om-component-ui-nav-item-disabled {
+  color: var(--om-text-disabled, #bbbdc1);
+  cursor: not-allowed;
+}
+.om-component-ui-nav-item-disabled:hover {
+  color: var(--om-text-disabled, #bbbdc1);
+}
+.om-component-ui-nav-submenu {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 200ms ease-in-out;
+}
+.om-component-ui-nav-submenu-open {
+  grid-template-rows: 1fr;
+}
+.om-component-ui-nav-submenu-inner {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}

package/es/components/Navigation/style/Navigation.css

@@ -0,0 +1,373 @@
+/**
+  * Retrieves the spacing value for a given token key.
+  *
+  * @param {string} $key - The spacing token key (e.g., '100', '200').
+  * @return {length|null} The computed spacing value or null if the key is invalid.
+  * @example
+  *   .element {
+  *     padding: om-spacing-token('200'); // Returns 8px if $om-sys-spacing-unit is 4px
+  *   }
+  */
+/**
+  * Computes the spacing value based on a token key or a direct length value.
+  *
+  * @param {string|length} $value - The spacing token key (e.g., '100') or a direct length value (e.g., '16px').
+  * @return {length} The computed spacing value.
+  * @example
+  *   .element {
+  *     margin: om-spacing-value('300'); // Returns 12px if $om-sys-spacing-unit is 4px
+  *     padding: om-spacing-value(16px); // Returns 16px
+  *     gap: om-spacing-value(2); // Returns 8px if $om-sys-spacing-unit is 4px
+  *   }
+  */
+.om-component-ui-navigation {
+  display: flex;
+  flex-direction: column;
+  gap: var(--om-spacing-600, 24px);
+  width: 280px;
+  height: 100vh;
+  padding: var(--om-spacing-1000, 40px) var(--om-spacing-400, 16px) var(--om-spacing-600, 24px);
+  background-color: var(--om-bg-default, #fff);
+  border-right: 1px solid var(--om-border-neutral, #e3e4e4);
+  transition: width 150ms ease-in-out;
+}
+.om-component-ui-navigation-header {
+  display: flex;
+  align-items: center;
+  padding: 0 var(--om-spacing-200, 8px);
+}
+.om-component-ui-navigation-selector {
+  display: flex;
+  gap: var(--om-spacing-600, 24px);
+  align-items: center;
+  height: 40px;
+  padding: var(--om-spacing-200, 8px) var(--om-spacing-300, 12px);
+  background-color: var(--om-bg-default-secondary, #f8f8f8);
+  border-radius: var(--om-radius-300, 12px);
+  cursor: pointer;
+}
+.om-component-ui-navigation-nav {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--om-spacing-600, 24px);
+  min-height: 0;
+  overflow: hidden;
+  overflow-y: auto;
+}
+.om-component-ui-navigation-menu {
+  display: flex;
+  flex-direction: column;
+  gap: var(--om-spacing-100, 4px);
+}
+.om-component-ui-navigation-item-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--om-spacing-100, 4px);
+  width: 100%;
+}
+.om-component-ui-navigation-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: var(--om-spacing-200, 8px) var(--om-spacing-400, 16px);
+  color: var(--om-text-default-secondary, #404042);
+  background-color: transparent;
+  border: none;
+  border-radius: var(--om-radius-300, 12px);
+  cursor: pointer;
+}
+.om-component-ui-navigation-item-content {
+  display: flex;
+  flex: 1;
+  gap: var(--om-spacing-200, 8px);
+  align-items: center;
+  min-width: 0;
+}
+.om-component-ui-navigation-item:hover:not(:disabled) {
+  background-color: var(--om-bg-default-hover, #f0f0f0);
+}
+.om-component-ui-navigation-item-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  color: var(--om-icon-default-secondary, #404042);
+}
+.om-component-ui-navigation-item-label {
+  flex: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-align: left;
+  text-overflow: ellipsis;
+}
+.om-component-ui-navigation-item .om-component-ui-typography {
+  color: inherit;
+}
+.om-component-ui-navigation-item-suffix {
+  flex-shrink: 0;
+}
+.om-component-ui-navigation-item-link {
+  display: flex;
+  color: inherit;
+  text-decoration: none;
+}
+.om-component-ui-navigation-item-arrow {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  color: var(--om-icon-default-secondary, #404042);
+  transition: transform 200ms ease-in-out;
+}
+.om-component-ui-navigation-item-arrow-open {
+  transform: rotate(-180deg);
+}
+.om-component-ui-navigation-item-expandable .om-component-ui-navigation-item-content {
+  flex: 1;
+}
+.om-component-ui-navigation-item-active {
+  color: var(--om-text-default, #131313);
+  background-color: var(--om-bg-brand-tertiary, #edf2f9);
+}
+.om-component-ui-navigation-item-active .om-component-ui-navigation-item-icon {
+  color: var(--om-icon-default, #131313);
+}
+.om-component-ui-navigation-item-active:hover:not(:disabled) {
+  background-color: var(--om-bg-brand-tertiary-hover, #dde6f4);
+}
+.om-component-ui-navigation-item-disabled {
+  color: var(--om-text-disabled, #bbbdc1);
+  cursor: not-allowed;
+}
+.om-component-ui-navigation-item-disabled .om-component-ui-navigation-item-icon {
+  color: var(--om-icon-disabled, #d1d2d2);
+}
+.om-component-ui-navigation-item-disabled .om-component-ui-navigation-item-arrow {
+  color: var(--om-icon-disabled, #d1d2d2);
+}
+.om-component-ui-navigation-item-disabled:hover {
+  background-color: transparent;
+}
+.om-component-ui-navigation-submenu {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 200ms ease-in-out;
+}
+.om-component-ui-navigation-submenu-open {
+  grid-template-rows: 1fr;
+}
+.om-component-ui-navigation-submenu-inner {
+  display: flex;
+  flex-direction: column;
+  gap: var(--om-spacing-100, 4px);
+  overflow: hidden;
+}
+.om-component-ui-navigation-submenu-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: var(--om-spacing-200, 8px) var(--om-spacing-400, 16px) var(--om-spacing-200, 8px) var(--om-spacing-1000, 40px);
+  color: var(--om-text-default-secondary, #404042);
+  background-color: transparent;
+  border: none;
+  border-radius: var(--om-radius-300, 12px);
+  cursor: pointer;
+}
+.om-component-ui-navigation-submenu-item .om-component-ui-typography {
+  color: inherit;
+}
+.om-component-ui-navigation-submenu-item:hover:not(:disabled) {
+  background-color: var(--om-bg-default-hover, #f0f0f0);
+}
+.om-component-ui-navigation-submenu-item-active {
+  color: var(--om-text-default, #131313);
+  background-color: var(--om-bg-brand-tertiary, #edf2f9);
+}
+.om-component-ui-navigation-submenu-item-active .om-component-ui-navigation-item-icon {
+  color: var(--om-icon-default, #131313);
+}
+.om-component-ui-navigation-submenu-item-active:hover:not(:disabled) {
+  background-color: var(--om-bg-brand-tertiary-hover, #dde6f4);
+}
+.om-component-ui-navigation-submenu-item-disabled {
+  color: var(--om-text-disabled, #bbbdc1);
+  cursor: not-allowed;
+}
+.om-component-ui-navigation-submenu-item-disabled .om-component-ui-navigation-item-icon {
+  color: var(--om-icon-disabled, #d1d2d2);
+}
+.om-component-ui-navigation-submenu-item-disabled:hover {
+  background-color: transparent;
+}
+.om-component-ui-navigation-collapsed-submenu-panel.om-trigger-panel {
+  margin-top: -12px;
+  padding: 0;
+  background-color: transparent;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+}
+.om-component-ui-navigation-collapsed-submenu {
+  display: flex;
+  flex-direction: column;
+  min-width: 196px;
+  padding: 0;
+  background-color: var(--om-bg-default-secondary, #f8f8f8);
+  border-radius: var(--om-radius-300, 12px);
+  box-shadow: 0 10px 22px 0 rgba(0, 0, 0, 0.1);
+}
+.om-component-ui-navigation-collapsed-submenu-item {
+  display: flex;
+  gap: var(--om-spacing-200, 8px);
+  align-items: center;
+  width: 100%;
+  padding: var(--om-spacing-300, 12px) var(--om-spacing-300, 12px);
+  color: var(--om-text-default-secondary, #404042);
+  background-color: transparent;
+  border: none;
+  border-radius: var(--om-radius-300, 12px);
+  cursor: pointer;
+}
+.om-component-ui-navigation-collapsed-submenu-item .om-component-ui-typography {
+  color: inherit;
+}
+.om-component-ui-navigation-collapsed-submenu-item:hover:not(:disabled) {
+  background-color: var(--om-bg-default-hover, #f0f0f0);
+}
+.om-component-ui-navigation-collapsed-submenu-item-active {
+  color: var(--om-text-default, #131313);
+  background-color: var(--om-bg-neutral-tertiary, #f0f0f0);
+}
+.om-component-ui-navigation-collapsed-submenu-item-active .om-component-ui-navigation-item-icon {
+  color: var(--om-icon-default, #131313);
+}
+.om-component-ui-navigation-collapsed-submenu-item-disabled {
+  color: var(--om-text-disabled, #bbbdc1);
+  cursor: not-allowed;
+}
+.om-component-ui-navigation-collapsed-submenu-item-disabled .om-component-ui-navigation-item-icon {
+  color: var(--om-icon-disabled, #d1d2d2);
+}
+.om-component-ui-navigation-collapsed-submenu-item-disabled:hover {
+  background-color: transparent;
+}
+.om-component-ui-navigation-collapsed-submenu-divider {
+  height: 1px;
+  margin: 0 var(--om-spacing-300, 12px);
+  background-color: var(--om-border-neutral, #e3e4e4);
+}
+.om-component-ui-navigation-settings {
+  display: flex;
+  flex-direction: column;
+  gap: var(--om-spacing-100, 4px);
+  margin-top: auto;
+  overflow: clip;
+}
+.om-component-ui-navigation-divider {
+  height: 1px;
+  margin: 0 var(--om-spacing-300, 12px);
+  background-color: var(--om-border-neutral, #e3e4e4);
+}
+.om-component-ui-navigation-collapse-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  padding: var(--om-spacing-200, 8px);
+  color: var(--om-icon-default-secondary, #404042);
+  background-color: var(--om-bg-default-secondary, #f8f8f8);
+  border: none;
+  border-radius: var(--om-radius-300, 12px);
+  cursor: pointer;
+}
+.om-component-ui-navigation-collapse-toggle:hover {
+  background-color: var(--om-bg-default-secondary-hover, #e3e4e4);
+}
+.om-component-ui-navigation-collapsed-item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--om-spacing-100, 4px);
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: var(--om-spacing-200, 8px);
+  color: var(--om-text-default-secondary, #404042);
+  font-size: inherit;
+  background-color: transparent;
+  border: none;
+  border-radius: var(--om-radius-300, 12px);
+  cursor: pointer;
+}
+.om-component-ui-navigation-collapsed-item .om-component-ui-typography {
+  color: inherit;
+}
+.om-component-ui-navigation-collapsed-item:hover:not(:disabled) {
+  background-color: var(--om-bg-neutral-tertiary, #f0f0f0);
+}
+.om-component-ui-navigation-collapsed-item-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  color: var(--om-icon-default-secondary, #404042);
+}
+.om-component-ui-navigation-collapsed-item-label {
+  width: 100%;
+  text-align: center;
+  overflow-wrap: break-word;
+}
+.om-component-ui-navigation-collapsed-item-active {
+  color: var(--om-text-default, #131313);
+  background-color: var(--om-bg-brand-tertiary, #edf2f9);
+}
+.om-component-ui-navigation-collapsed-item-active .om-component-ui-navigation-collapsed-item-icon {
+  color: var(--om-icon-default, #131313);
+}
+.om-component-ui-navigation-collapsed-item-active:hover:not(:disabled) {
+  background-color: var(--om-bg-brand-tertiary-hover, #dde6f4);
+}
+.om-component-ui-navigation-collapsed-item-disabled {
+  color: var(--om-text-disabled, #bbbdc1);
+  cursor: not-allowed;
+}
+.om-component-ui-navigation-collapsed-item-disabled .om-component-ui-navigation-collapsed-item-icon {
+  color: var(--om-icon-disabled, #d1d2d2);
+}
+.om-component-ui-navigation-collapsed-item-disabled:hover {
+  background-color: transparent;
+}
+.om-component-ui-navigation-collapsed {
+  align-items: center;
+  width: 84px;
+  padding: var(--om-spacing-1000, 40px) var(--om-spacing-100, 4px) var(--om-spacing-600, 24px);
+}
+.om-component-ui-navigation-collapsed .om-component-ui-navigation-header {
+  justify-content: center;
+  padding: 0;
+}
+.om-component-ui-navigation-collapsed .om-component-ui-navigation-selector {
+  flex-direction: column;
+  gap: var(--om-spacing-100, 4px);
+  align-items: center;
+  justify-content: center;
+  height: auto;
+  padding: var(--om-spacing-200, 8px);
+}
+.om-component-ui-navigation-collapsed .om-component-ui-navigation-nav {
+  align-items: center;
+  width: 100%;
+}
+.om-component-ui-navigation-collapsed .om-component-ui-navigation-menu {
+  gap: var(--om-spacing-200, 8px);
+  align-items: center;
+  width: 100%;
+}
+.om-component-ui-navigation-collapsed .om-component-ui-navigation-settings {
+  gap: var(--om-spacing-200, 8px);
+  align-items: center;
+  width: 100%;
+}
+.om-component-ui-navigation-collapsed .om-component-ui-navigation-divider {
+  margin: 0 var(--om-spacing-100, 4px);
+}