Initiated menu migration

components/lib/theme/aura/breadcrumb/index.js

@@ -0,0 +1,96 @@
+export default {
+    variables: {
+        colorScheme: {
+            root: {
+                background: '{surface.0}'
+            },
+            light: {
+                item: {
+                    textColor: '{surface.500}',
+                    textColorHover: '{surface.700}',
+                    iconColor: '{surface.400}'
+                },
+                separator: {
+                    color: '{surface.400}'
+                }
+            },
+            dark: {
+                root: {
+                    background: '{surface.900}'
+                },
+                item: {
+                    textColor: '{surface.400}',
+                    textColorHover: '{surface.0}',
+                    iconColor: '{surface.500}'
+                },
+                separator: {
+                    color: '{surface.500}'
+                }
+            }
+        }
+    },
+    css: `
+.p-breadcrumb {
+    background: var(-p-breadcrumb-background);
+    border: 0 none;
+    border-radius: 6px;
+    padding: 1rem;
+    overflow-x: auto;
+}
+
+.p-breadcrumb .p-breadcrumb-list {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+}
+
+.p-breadcrumb .p-menuitem-link {
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+}
+
+.p-breadcrumb .p-menuitem-separator {
+    display: flex;
+    align-items: center;
+}
+
+.p-breadcrumb::-webkit-scrollbar {
+    display: none;
+}
+
+.p-breadcrumb .p-menuitem-link {
+    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
+    border-radius: var(--p-rounded-base);
+    outline-color: transparent;
+}
+
+.p-breadcrumb .p-menuitem-link:focus-visible {
+    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
+    outline-offset: var(--p-focus-ring-offset);
+}
+
+.p-breadcrumb .p-menuitem-text {
+    color: var(--p-breadcrumb-item-text-color);
+    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
+    line-height: 1;
+}
+
+.p-breadcrumb .p-menuitem-text:hover {
+    color: var(--p-breadcrumb-item-text-color-hover);
+    line-height: 1;
+}
+
+.p-breadcrumb .p-menuitem-icon {
+    color: var(--p-breadcrumb-item-icon-color);
+}
+
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: var(--p-breadcrumb-separator-color);
+}   
+`
+};

components/lib/theme/aura/breadcrumb/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts"
+}

components/lib/theme/aura/contextmenu/index.js

@@ -0,0 +1,172 @@
+export default {
+    variables: {
+        colorScheme: {
+            light: {
+                root: {
+                    background: '{surface.0}',
+                    borderColor: '{surface.200}',
+                    textColor: '{surface.700}'
+                },
+                item: {
+                    backgroundFocus: '{surface.100}',
+                    text: {
+                        color: '{surface.700}',
+                        colorFocus: '{surface.800}'
+                    },
+                    icon: {
+                        color: '{surface.400}',
+                        colorFocus: '{surface.500}'
+                    }
+                },
+                separator: {
+                    borderColor: '{surface.200}'
+                }
+            },
+            dark: {
+                root: {
+                    background: '{surface.900}',
+                    borderColor: '{surface.700}',
+                    textColor: '{surface.0}'
+                },
+                item: {
+                    backgroundFocus: '{surface.800}',
+                    text: {
+                        color: '{surface.0}',
+                        colorFocus: '{surface.0}'
+                    },
+                    icon: {
+                        color: '{surface.500}',
+                        colorFocus: '{surface.400}'
+                    }
+                },
+                separator: {
+                    borderColor: '{surface.700}'
+                }
+            }
+        }
+    },
+    css: `
+.p-contextmenu {
+    padding: 0.25rem 0.25rem;
+    background: var(--p-contextmenu-background);
+    color: var(--p-contextmenu-text-color);
+    border: 1px solid var(--p-contextmenu-border-color);
+    border-radius: var(--p-rounded-base);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+    min-width: 12.5rem;
+}
+
+.p-contextmenu ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.p-contextmenu-root-list {
+    outline: 0 none;
+}
+
+.p-contextmenu .p-submenu-list {
+    position: absolute;
+    min-width: 100%;
+    z-index: 1;
+    padding: 0.25rem 0.25rem;
+    background: var(--p-contextmenu-background);
+    color: var(--p-contextmenu-text-color);
+    border: 1px solid var(--p-contextmenu-border-color);
+    border-radius: var(--p-rounded-base);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+}
+
+.p-contextmenu .p-menuitem-link {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    overflow: hidden;
+    position: relative;
+    color: inherit;
+    padding: 0.5rem 0.75rem;
+    user-select: none;
+}
+
+.p-contextmenu .p-menuitem-text {
+    line-height: 1;
+}
+
+.p-contextmenu .p-menuitem {
+    position: relative;
+    margin: 2px 0;
+}
+
+.p-contextmenu .p-menuitem:first-child {
+    margin-top: 0;
+}
+.p-contextmenu .p-menuitem:last-child {
+    margin-bottom: 0;
+}
+
+.p-contextmenu .p-menuitem-content {
+    transition: background-color var(--p-transition-duration), color var(--p-transition-duration);
+    border-radius: var(--p-rounded-sm);
+    color: var(--p-contextmenu-item-text-color);
+}
+
+.p-contextmenu .p-menuitem-icon {
+    color: var(--p-contextmenu-item-icon-color);
+    margin-right: 0.5rem;
+}
+
+.p-contextmenu .p-submenu-icon {
+    color: var(--p-contextmenu-item-icon-color);
+    margin-left: auto;
+    font-size: 0.875rem;
+    width: 0.875rem;
+    height: 0.875rem;
+} 
+
+.p-contextmenu .p-menuitem.p-focus > .p-menuitem-content {
+    color: var(--p-contextmenu-item-text-color-focus);
+    background: var(--p-contextmenu-item-background-focus);
+}
+
+.p-contextmenu .p-menuitem.p-focus > .p-menuitem-content .p-menuitem-icon,
+.p-contextmenu .p-menuitem.p-focus > .p-menuitem-content .p-submenu-icon {
+    color: var(--p-contextmenu-item-icon-color-focus);
+}
+
+.p-contextmenu .p-menuitem:not(.p-disabled) > .p-menuitem-content:hover {
+    color: var(--p-contextmenu-item-text-color-focus);
+    background: var(--p-contextmenu-item-background-focus);
+}
+
+.p-contextmenu .p-menuitem:not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-icon, 
+.p-contextmenu .p-menuitem:not(.p-disabled) > .p-menuitem-content:hover .p-submenu-icon {
+    color: var(--p-contextmenu-item-icon-color-focus);
+}
+
+.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: var(--p-contextmenu-item-text-color-focus);
+    background: var(--p-contextmenu-item-background-focus);
+}
+
+.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-icon,
+.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-submenu-icon {
+    color: var(--p-contextmenu-item-icon-color-focus);
+}
+
+.p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid var(--p-contextmenu-separator-border-color);
+    margin: 2px 0;
+}
+
+.p-contextmenu-enter-from,
+.p-contextmenu-leave-active {
+    opacity: 0;
+}
+
+.p-contextmenu-enter-active {
+    transition: opacity 250ms;
+}
+`
+};

components/lib/theme/aura/contextmenu/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts"
+}

components/lib/theme/aura/dock/index.js

@@ -0,0 +1,179 @@
+export default {
+    variables: {
+        colorScheme: {
+            light: {},
+            dark: {}
+        }
+    },
+    css: `
+.p-dock {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    pointer-events: none;
+}
+
+.p-dock-list-container {
+    display: flex;
+    pointer-events: auto;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+}
+
+.p-dock-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    outline: 0 none;
+}
+
+.p-dock-item {
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    will-change: transform;
+    padding: 0.5rem;
+    border-radius: 6px;
+}
+
+p-dock-item.p-focus {
+    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
+    outline-offset: var(--p-focus-ring-offset);
+}
+
+.p-dock-link {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    overflow: hidden;
+    cursor: default;
+    width: 3rem;
+    height: 3rem;
+}
+
+.p-dock-item-second-prev,
+.p-dock-item-second-next {
+    transform: scale(1.2);
+}
+
+.p-dock-item-prev,
+.p-dock-item-next {
+    transform: scale(1.4);
+}
+
+.p-dock-item-current {
+    transform: scale(1.6);
+    z-index: 1;
+}
+
+.p-dock-top {
+    left: 0;
+    top: 0;
+    width: 100%;
+}
+
+.p-dock-top .p-dock-item {
+    transform-origin: center top;
+}
+
+.p-dock-bottom {
+    left: 0;
+    bottom: 0;
+    width: 100%;
+}
+
+.p-dock-bottom .p-dock-item {
+    transform-origin: center bottom;
+}
+
+.p-dock-right {
+    right: 0;
+    top: 0;
+    height: 100%;
+}
+
+.p-dock-right .p-dock-item {
+    transform-origin: center right;
+}
+
+.p-dock-right .p-dock-list {
+    flex-direction: column;
+}
+
+.p-dock-left {
+    left: 0;
+    top: 0;
+    height: 100%;
+}
+
+.p-dock-left .p-dock-item {
+    transform-origin: center left;
+}
+
+.p-dock-left .p-dock-list {
+    flex-direction: column;
+}
+
+.p-dock-top .p-dock-item-second-prev,
+.p-dock-top .p-dock-item-second-next,
+.p-dock-bottom .p-dock-item-second-prev,
+.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+}
+.p-dock-top .p-dock-item-prev,
+.p-dock-top .p-dock-item-next,
+.p-dock-bottom .p-dock-item-prev,
+.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+}
+.p-dock-top .p-dock-item-current,
+.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+}
+.p-dock-left .p-dock-item-second-prev,
+.p-dock-left .p-dock-item-second-next,
+.p-dock-right .p-dock-item-second-prev,
+.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+}
+.p-dock-left .p-dock-item-prev,
+.p-dock-left .p-dock-item-next,
+.p-dock-right .p-dock-item-prev,
+.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+}
+.p-dock-left .p-dock-item-current,
+.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+}
+.p-dock-mobile.p-dock-top .p-dock-list-container,
+.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+}
+.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list,
+.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+}
+.p-dock-mobile.p-dock-left .p-dock-list-container,
+.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+}
+.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list,
+.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+}
+.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+}
+`
+};

components/lib/theme/aura/dock/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts"
+}

components/lib/theme/aura/global.js

@@ -129,8 +129,8 @@ export default {
 }
 
 .p-component {
-    font-family: var(--font-family);
+    font-family: var(--p-font-family);
-    font-feature-settings: var(--font-feature-settings, normal);
+    font-feature-settings: var(--p-font-feature-settings, normal);
     font-size: 1rem;
     font-weight: normal;
 }
@@ -163,8 +163,8 @@ export default {
 }
 
 .p-link {
-    font-family: var(--font-family);
+    font-family: var(--p-font-family);
-    font-feature-settings: var(--font-feature-settings, normal);
+    font-feature-settings: var(--p-font-feature-settings, normal);
     font-size: 1rem;
     border-radius: 6px;
     outline-color: transparent;

components/lib/theme/aura/index.js

@@ -2,23 +2,30 @@ import accordion from 'primevue/theme/aura/accordion';
 import avatar from 'primevue/theme/aura/avatar';
 import badge from 'primevue/theme/aura/badge';
 import blockui from 'primevue/theme/aura/blockui';
+import breadcrumb from 'primevue/theme/aura/breadcrumb';
 import card from 'primevue/theme/aura/card';
 import carousel from 'primevue/theme/aura/carousel';
 import chip from 'primevue/theme/aura/chip';
 import confirmdialog from 'primevue/theme/aura/confirmdialog';
 import confirmpopup from 'primevue/theme/aura/confirmpopup';
+import contextmenu from 'primevue/theme/aura/contextmenu';
 import dialog from 'primevue/theme/aura/dialog';
 import divider from 'primevue/theme/aura/divider';
+import dock from 'primevue/theme/aura/dock';
 import fieldset from 'primevue/theme/aura/fieldset';
 import galleria from 'primevue/theme/aura/galleria';
 import global from 'primevue/theme/aura/global';
 import image from 'primevue/theme/aura/image';
 import inlinemessage from 'primevue/theme/aura/inlinemessage';
 import inplace from 'primevue/theme/aura/inplace';
+import megamenu from 'primevue/theme/aura/megamenu';
+import menu from 'primevue/theme/aura/menu';
+import menubar from 'primevue/theme/aura/menubar';
 import message from 'primevue/theme/aura/message';
 import metergroup from 'primevue/theme/aura/metergroup';
 import overlaypanel from 'primevue/theme/aura/overlaypanel';
 import panel from 'primevue/theme/aura/panel';
+import panelmenu from 'primevue/theme/aura/panelmenu';
 import progressbar from 'primevue/theme/aura/progressbar';
 import progressspinner from 'primevue/theme/aura/progressspinner';
 import scrollpanel from 'primevue/theme/aura/scrollpanel';
@@ -26,9 +33,12 @@ import scrolltop from 'primevue/theme/aura/scrolltop';
 import sidebar from 'primevue/theme/aura/sidebar';
 import skeleton from 'primevue/theme/aura/skeleton';
 import splitter from 'primevue/theme/aura/splitter';
+import steps from 'primevue/theme/aura/steps';
+import tabmenu from 'primevue/theme/aura/tabmenu';
 import tabview from 'primevue/theme/aura/tabview';
 import tag from 'primevue/theme/aura/tag';
 import terminal from 'primevue/theme/aura/terminal';
+import tieredmenu from 'primevue/theme/aura/tieredmenu';
 import toast from 'primevue/theme/aura/toast';
 import toolbar from 'primevue/theme/aura/toolbar';
 import tooltip from 'primevue/theme/aura/tooltip';
@@ -147,15 +157,21 @@ export default {
         avatar,
         badge,
         blockui,
+        breadcrumb,
         card,
         carousel,
         chip,
         confirmdialog,
         confirmpopup,
+        contextmenu,
         dialog,
         divider,
+        dock,
         fieldset,
         galleria,
+        megamenu,
+        menu,
+        menubar,
         message,
         metergroup,
         image,
@@ -163,6 +179,7 @@ export default {
         inplace,
         overlaypanel,
         panel,
+        panelmenu,
         progressbar,
         progressspinner,
         scrollpanel,
@@ -170,7 +187,10 @@ export default {
         skeleton,
         sidebar,
         splitter,
+        steps,
+        tabmenu,
         tabview,
+        tieredmenu,
         tag,
         terminal,
         toast,

components/lib/theme/aura/megamenu/index.js

@@ -0,0 +1,11 @@
+export default {
+    variables: {
+        colorScheme: {
+            light: {},
+            dark: {},
+        },
+    },
+    css: `
+
+`,
+};

components/lib/theme/aura/megamenu/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts"
+}

components/lib/theme/aura/menu/index.js

@@ -0,0 +1,144 @@
+export default {
+    variables: {
+        colorScheme: {
+            light: {
+                root: {
+                    background: '{surface.0}',
+                    borderColor: '{surface.200}',
+                    textColor: '{surface.700}'
+                },
+                item: {
+                    backgroundFocus: '{surface.100}',
+                    text: {
+                        color: '{surface.700}',
+                        colorFocus: '{surface.800}'
+                    },
+                    icon: {
+                        color: '{surface.400}',
+                        colorFocus: '{surface.500}'
+                    }
+                },
+                submenuHeader: {
+                    textColor: '{surface.400}'
+                },
+                separator: {
+                    borderColor: '{surface.200}'
+                }
+            },
+            dark: {
+                root: {
+                    background: '{surface.900}',
+                    borderColor: '{surface.700}',
+                    textColor: '{surface.0}'
+                },
+                item: {
+                    backgroundFocus: '{surface.800}',
+                    text: {
+                        color: '{surface.0}',
+                        colorFocus: '{surface.0}'
+                    },
+                    icon: {
+                        color: '{surface.500}',
+                        colorFocus: '{surface.400}'
+                    }
+                },
+                submenuHeader: {
+                    textColor: '{surface.500}'
+                },
+                separator: {
+                    borderColor: '{surface.700}'
+                }
+            }
+        }
+    },
+    css: `
+.p-menu {
+    padding: 0.25rem 0.25rem;
+    background: var(--p-menu-background);
+    color: var(--p-menu-text-color);
+    border: 1px solid var(--p-menu-border-color);
+    border-radius: var(--p-rounded-base);
+    min-width: 12.5rem;
+}
+
+.p-menu ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.p-menu .p-menuitem {
+    margin: 2px 0;
+}
+
+.p-menu .p-menuitem:first-child {
+    margin-top: 0;
+}
+
+.p-menu .p-menuitem:last-child {
+    margin-bottom: 0;
+}
+
+.p-menu .p-menuitem-link {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    overflow: hidden;
+    position: relative;
+    color: inherit;
+    padding: 0.5rem 0.75rem;
+    user-select: none;
+}
+
+.p-menu .p-menuitem-text {
+    line-height: 1;
+}
+
+.p-menu .p-menuitem-content {
+    transition: background-color var(--p-transition-duration), color var(--p-transition-duration);
+    border-radius: var(--p-rounded-sm);
+    color: var(--p-menu-item-text-color);
+}
+
+.p-menu .p-menuitem-icon {
+    color: var(--p-menu-item-icon-color);
+    margin-right: 0.5rem;
+}
+
+.p-menu .p-menuitem.p-focus .p-menuitem-content {
+    color: var(--p-menu-item-text-color-focus);
+    background: var(--p-menu-item-background-focus);
+}
+
+.p-menu .p-menuitem.p-focus .p-menuitem-icon {
+    color: var(--p-menu-item-icon-color-focus);
+}
+
+.p-menu .p-menuitem:not(.p-disabled) .p-menuitem-content:hover {
+    color: var(--p-menu-item-text-color-focus);
+    background: var(--p-menu-item-background-focus);
+}
+
+.p-menu .p-menuitem:not(.p-disabled) .p-menuitem-content:hover .p-menuitem-icon, 
+.p-menu .p-menuitem:not(.p-disabled) .p-menuitem-content:hover .p-submenu-icon {
+    color: var(--p-menu-item-icon-color-focus);
+}
+
+.p-menu.p-menu-overlay {
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+}
+
+.p-menu .p-submenu-header {
+    margin: 0;
+    padding: 0.5rem 0.75rem;
+    color: var(--p-menu-submenu-header-text-color);
+    font-weight: 600;
+}
+
+.p-menu .p-menuitem-separator {
+    border-top: 1px solid var(--p-menu-separator-border-color);
+    margin: 2px 0;
+}
+`
+};

components/lib/theme/aura/menu/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts"
+}

components/lib/theme/aura/menubar/index.js

@@ -0,0 +1,298 @@
+export default {
+    variables: {
+        colorScheme: {
+            light: {
+                root: {
+                    background: '{surface.0}',
+                    borderColor: '{surface.200}',
+                    textColor: '{surface.700}'
+                },
+                item: {
+                    backgroundFocus: '{surface.100}',
+                    text: {
+                        color: '{surface.700}',
+                        colorFocus: '{surface.800}'
+                    },
+                    icon: {
+                        color: '{surface.400}',
+                        colorFocus: '{surface.500}'
+                    }
+                },
+                separator: {
+                    borderColor: '{surface.200}'
+                },
+                toggleIcon: {
+                    color: '{surface.500}',
+                    colorHover: '{surface.600}',
+                    backgroundHover: '{surface.100}'
+                }
+            },
+            dark: {
+                root: {
+                    background: '{surface.900}',
+                    borderColor: '{surface.700}',
+                    textColor: '{surface.0}'
+                },
+                item: {
+                    backgroundFocus: '{surface.800}',
+                    text: {
+                        color: '{surface.0}',
+                        colorFocus: '{surface.0}'
+                    },
+                    icon: {
+                        color: '{surface.500}',
+                        colorFocus: '{surface.400}'
+                    }
+                },
+                separator: {
+                    borderColor: '{surface.700}'
+                },
+                toggleIcon: {
+                    color: '{surface.400}',
+                    colorHover: '{surface.300}',
+                    backgroundHover: '{surface.800}'
+                }
+            }
+        }
+    },
+    css: `
+.p-menubar {
+    display: flex;
+    align-items: center;
+    padding: 0.5rem 0.5rem;
+    background: var(--p-menubar-background);
+    color: var(--p-menubar-text-color);
+    border: 1px solid var(--p-menubar-border-color);
+    border-radius: var(--p-rounded-base);
+}
+
+.p-menubar ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.p-menubar .p-menuitem-link {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    overflow: hidden;
+    position: relative;
+    color: inherit;
+    padding: 0.5rem 0.75rem;
+    user-select: none;
+}
+
+.p-menubar .p-menuitem-text {
+    line-height: 1;
+}
+
+.p-menubar-root-list {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    outline: 0 none;
+}
+
+.p-menubar-root-list > .p-menuitem-active > .p-submenu-list {
+    display: block;
+}
+
+.p-menubar .p-menuitem-content {
+    transition: background-color var(--p-transition-duration), color var(--p-transition-duration);
+    border-radius: var(--p-rounded-sm);
+    color: var(--p-menubar-item-text-color);
+}
+
+.p-menubar .p-menuitem-icon {
+    color: var(--p-menubar-item-icon-color);
+    margin-right: 0.5rem;
+}
+
+.p-menubar .p-menuitem.p-focus > .p-menuitem-content {
+    color: var(--p-menubar-item-text-color-focus);
+    background: var(--p-menubar-item-background-focus);
+}
+
+.p-menubar .p-menuitem.p-focus > .p-menuitem-content .p-menuitem-icon,
+.p-menubar .p-menuitem.p-focus > .p-menuitem-content .p-submenu-icon {
+    color: var(--p-menubar-item-icon-color-focus);
+}
+
+.p-menubar .p-menuitem:not(.p-disabled) > .p-menuitem-content:hover {
+    color: var(--p-menubar-item-text-color-focus);
+    background: var(--p-menubar-item-background-focus);
+}
+
+.p-menubar .p-menuitem:not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-icon, 
+.p-menubar .p-menuitem:not(.p-disabled) > .p-menuitem-content:hover .p-submenu-icon {
+    color: var(--p-menubar-item-icon-color-focus);
+}
+
+.p-menubar .p-menuitem-active > .p-menuitem-content {
+    color: var(--p-menubar-item-text-color-focus);
+    background: var(--p-menubar-item-background-focus);
+}
+
+.p-menubar .p-menuitem-active > .p-menuitem-content .p-menuitem-icon,
+.p-menubar .p-menuitem-active > .p-menuitem-content .p-submenu-icon {
+    color: var(--p-menubar-item-icon-color-focus);
+}
+
+.p-menubar .p-submenu-icon {
+    color: var(--p-menubar-item-icon-color);
+    margin-left: auto;
+    font-size: 0.875rem;
+    width: 0.875rem;
+    height: 0.875rem;
+}
+
+.p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-submenu-icon {
+    margin-left: 0.5rem;
+}
+
+.p-menubar .p-submenu-list {
+    display: none;
+    position: absolute;
+    min-width: 12.5rem;
+    z-index: 1;
+    padding: 0.25rem 0.25rem;
+    background: var(--p-menubar-background);
+    color: var(--p-menubar-text-color);
+    border: 1px solid var(--p-menubar-border-color);
+    border-radius: var(--p-rounded-base);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+}
+
+.p-menubar .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid var(--p-menubar-separator-border-color);
+    margin: 2px 0;
+}
+
+.p-menubar .p-submenu-list .p-menuitem {
+    position: relative;
+    margin: 2px 0;
+}
+
+.p-menubar .p-submenu-list .p-menuitem:first-child {
+    margin-top: 0;
+}
+
+.p-menubar .p-submenu-list .p-menuitem:last-child {
+    margin-bottom: 0;
+}
+
+.p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list {
+    display: block;
+    left: 100%;
+    top: 0;
+}
+
+.p-menubar .p-menubar-end {
+    margin-left: auto;
+    align-self: center;
+}
+
+.p-menubar-button {
+    display: none;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    width: 1.75rem;
+    height: 1.75rem;
+    position: relative;
+    color: var(--p-menubar-toggle-icon-color);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
+    outline-color: transparent;
+}
+
+.p-menubar-button:hover {
+    color: var(--p-menubar-toggle-icon-color-hover);
+    background: var(--p-menubar-toggle-icon-background-hover);
+}
+
+.p-menubar-button:focus-visible {
+    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
+    outline-offset: var(--p-focus-ring-offset);
+}
+
+.p-menubar-mobile {
+    position: relative;
+}
+
+.p-menubar-mobile .p-menubar-button {
+    display: flex;
+}
+
+.p-menubar-mobile .p-menubar-root-list {
+    position: absolute;
+    display: none;
+    width: 100%;
+    padding: 0.25rem 0.25rem;
+    background: var(--p-menubar-background);
+    border: 1px solid var(--p-menubar-border-color);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+}
+
+.p-menubar-mobile-active .p-menubar-root-list {
+    display: flex;
+    flex-direction: column;
+    top: 100%;
+    left: 0;
+    z-index: 1;
+}
+
+.p-menubar-mobile .p-menubar-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+}
+
+.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #e2e8f0;
+    margin: 2px 0;
+}
+
+.p-menubar-mobile .p-menubar-root-list > .p-menuitem {
+    position: relative;
+    margin: 2px 0;
+}
+
+.p-menubar-mobile .p-menubar-root-list > .p-menuitem:first-child {
+    margin-top: 0;
+}
+
+.p-menubar-mobile .p-menubar-root-list > .p-menuitem:last-child {
+    margin-bottom: 0;
+}
+
+.p-menubar-mobile .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+}
+
+.p-menubar-mobile .p-menubar-root-list > .p-menuitem-active > .p-menuitem-content .p-submenu-icon {
+    transform: rotate(-180deg);
+}
+
+.p-menubar-mobile .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+}
+
+.p-menubar-mobile  .p-menuitem-active > .p-menuitem-content .p-submenu-icon {
+    transform: rotate(-90deg);
+}
+
+.p-menubar-mobile .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+    padding-left: 1rem;
+}
+`
+};

components/lib/theme/aura/menubar/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts"
+}

components/lib/theme/aura/panelmenu/index.js

@@ -0,0 +1,11 @@
+export default {
+    variables: {
+        colorScheme: {
+            light: {},
+            dark: {},
+        },
+    },
+    css: `
+
+`,
+};

components/lib/theme/aura/panelmenu/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts"
+}

components/lib/theme/aura/steps/index.js

@@ -0,0 +1,11 @@
+export default {
+    variables: {
+        colorScheme: {
+            light: {},
+            dark: {},
+        },
+    },
+    css: `
+
+`,
+};

components/lib/theme/aura/steps/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts"
+}

components/lib/theme/aura/tabmenu/index.js

@@ -0,0 +1,11 @@
+export default {
+    variables: {
+        colorScheme: {
+            light: {},
+            dark: {},
+        },
+    },
+    css: `
+
+`,
+};

components/lib/theme/aura/tabmenu/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts"
+}

components/lib/theme/aura/tieredmenu/index.js

@@ -0,0 +1,175 @@
+export default {
+    variables: {
+        colorScheme: {
+            light: {
+                root: {
+                    background: '{surface.0}',
+                    borderColor: '{surface.200}',
+                    textColor: '{surface.700}'
+                },
+                item: {
+                    backgroundFocus: '{surface.100}',
+                    text: {
+                        color: '{surface.700}',
+                        colorFocus: '{surface.800}'
+                    },
+                    icon: {
+                        color: '{surface.400}',
+                        colorFocus: '{surface.500}'
+                    }
+                },
+                separator: {
+                    borderColor: '{surface.200}'
+                }
+            },
+            dark: {
+                root: {
+                    background: '{surface.900}',
+                    borderColor: '{surface.700}',
+                    textColor: '{surface.0}'
+                },
+                item: {
+                    backgroundFocus: '{surface.800}',
+                    text: {
+                        color: '{surface.0}',
+                        colorFocus: '{surface.0}'
+                    },
+                    icon: {
+                        color: '{surface.500}',
+                        colorFocus: '{surface.400}'
+                    }
+                },
+                separator: {
+                    borderColor: '{surface.700}'
+                }
+            }
+        }
+    },
+    css: `
+.p-tieredmenu {
+    padding: 0.25rem 0.25rem;
+    background: var(--p-tieredmenu-background);
+    color: var(--p-tieredmenu-text-color);
+    border: 1px solid var(--p-tieredmenu-border-color);
+    border-radius: var(--p-rounded-base);
+    min-width: 12.5rem;
+}
+
+.p-tieredmenu ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.p-tieredmenu-root-list {
+    outline: 0 none;
+}
+
+.p-tieredmenu .p-submenu-list {
+    position: absolute;
+    min-width: 100%;
+    z-index: 1;
+    padding: 0.25rem 0.25rem;
+    background: var(--p-tieredmenu-background);
+    color: var(--p-tieredmenu-text-color);
+    border: 1px solid var(--p-tieredmenu-border-color);
+    border-radius: var(--p-rounded-base);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+}
+
+.p-tieredmenu .p-menuitem-link {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    overflow: hidden;
+    position: relative;
+    color: inherit;
+    padding: 0.5rem 0.75rem;
+    user-select: none;
+}
+
+.p-tieredmenu .p-menuitem-text {
+    line-height: 1;
+}
+
+.p-tieredmenu .p-menuitem {
+    position: relative;
+    margin: 2px 0;
+}
+
+.p-tieredmenu .p-menuitem:first-child {
+    margin-top: 0;
+}
+.p-tieredmenu .p-menuitem:last-child {
+    margin-bottom: 0;
+}
+
+.p-tieredmenu .p-menuitem-content {
+    transition: background-color var(--p-transition-duration), color var(--p-transition-duration);
+    border-radius: var(--p-rounded-sm);
+    color: var(--p-tieredmenu-item-text-color);
+}
+
+.p-tieredmenu .p-menuitem-icon {
+    color: var(--p-tieredmenu-item-icon-color);
+    margin-right: 0.5rem;
+}
+
+.p-tieredmenu .p-submenu-icon {
+    color: var(--p-tieredmenu-item-icon-color);
+    margin-left: auto;
+    font-size: 0.875rem;
+    width: 0.875rem;
+    height: 0.875rem;
+} 
+
+.p-tieredmenu .p-menuitem.p-focus > .p-menuitem-content {
+    color: var(--p-tieredmenu-item-text-color-focus);
+    background: var(--p-tieredmenu-item-background-focus);
+}
+
+.p-tieredmenu .p-menuitem.p-focus > .p-menuitem-content .p-menuitem-icon,
+.p-tieredmenu .p-menuitem.p-focus > .p-menuitem-content .p-submenu-icon {
+    color: var(--p-tieredmenu-item-icon-color-focus);
+}
+
+.p-tieredmenu .p-menuitem:not(.p-disabled) > .p-menuitem-content:hover {
+    color: var(--p-tieredmenu-item-text-color-focus);
+    background: var(--p-tieredmenu-item-background-focus);
+}
+
+.p-tieredmenu .p-menuitem:not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-icon, 
+.p-tieredmenu .p-menuitem:not(.p-disabled) > .p-menuitem-content:hover .p-submenu-icon {
+    color: var(--p-tieredmenu-item-icon-color-focus);
+}
+
+.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: var(--p-tieredmenu-item-text-color-focus);
+    background: var(--p-tieredmenu-item-background-focus);
+}
+
+.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-icon,
+.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-submenu-icon {
+    color: var(--p-tieredmenu-item-icon-color-focus);
+}
+
+.p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid var(--p-tieredmenu-separator-border-color);
+    margin: 2px 0;
+}
+
+.p-tieredmenu.p-tieredmenu-overlay {
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+}
+
+.p-tieredmenu-enter-from,
+.p-tieredmenu-leave-active {
+    opacity: 0;
+}
+
+.p-tieredmenu-enter-active {
+    transition: opacity 250ms;
+}
+`
+};

components/lib/theme/aura/tieredmenu/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts"
+}