@operato/menu 2.0.0-alpha.99 → 2.0.0-beta.0

package/CHANGELOG.md

@@ -3,6 +3,438 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.0-beta.0](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.158...v2.0.0-beta.0) (2024-06-01)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.158](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.157...v2.0.0-alpha.158) (2024-06-01)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.157](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.156...v2.0.0-alpha.157) (2024-06-01)
+
+
+### :bug: Bug Fix
+
+* theming styles ([118fe71](https://github.com/hatiolab/operato/commit/118fe711fd86d89453f97320bf9fef1e51b4ac23))
+
+
+
+## [2.0.0-alpha.156](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.155...v2.0.0-alpha.156) (2024-06-01)
+
+
+### :bug: Bug Fix
+
+* theming styles ([3b282c2](https://github.com/hatiolab/operato/commit/3b282c21d93af03bacc5aa40027591e005f1a067))
+
+
+
+## [2.0.0-alpha.155](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.154...v2.0.0-alpha.155) (2024-06-01)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.154](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.153...v2.0.0-alpha.154) (2024-06-01)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.153](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.152...v2.0.0-alpha.153) (2024-05-31)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.152](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.151...v2.0.0-alpha.152) (2024-05-30)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.151](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.150...v2.0.0-alpha.151) (2024-05-30)
+
+
+### :bug: Bug Fix
+
+* theming styles ([c5f59c2](https://github.com/hatiolab/operato/commit/c5f59c2e55a36eedf9056bcf2187c218556ded3e))
+
+
+
+## [2.0.0-alpha.150](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.149...v2.0.0-alpha.150) (2024-05-30)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.149](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.148...v2.0.0-alpha.149) (2024-05-30)
+
+
+### :bug: Bug Fix
+
+* styles ([9ec269b](https://github.com/hatiolab/operato/commit/9ec269b18bc82a931083137214fb6e3017201107))
+
+
+
+## [2.0.0-alpha.148](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.147...v2.0.0-alpha.148) (2024-05-30)
+
+
+### :rocket: New Features
+
+* md3 ([55b7496](https://github.com/hatiolab/operato/commit/55b7496ea46a6b65ac6ab71bc1be7c89d1ba91e5))
+
+
+### :sparkles: Styling
+
+* menu theme ([84c219d](https://github.com/hatiolab/operato/commit/84c219dd69770f57168c70a8f5ee4a189c9f7e4a))
+* menu theme ([9325844](https://github.com/hatiolab/operato/commit/93258447801275e147a518dc81fa4f113b2e7c16))
+
+
+
+## [2.0.0-alpha.146](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.145...v2.0.0-alpha.146) (2024-05-29)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.145](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.144...v2.0.0-alpha.145) (2024-05-28)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.143](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.142...v2.0.0-alpha.143) (2024-05-23)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.142](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.141...v2.0.0-alpha.142) (2024-05-21)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.141](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.140...v2.0.0-alpha.141) (2024-05-17)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.140](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.139...v2.0.0-alpha.140) (2024-05-17)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.139](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.138...v2.0.0-alpha.139) (2024-05-16)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.138](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.137...v2.0.0-alpha.138) (2024-05-15)
+
+
+### :rocket: New Features
+
+* ox-menu-portrait 에 text-overflow: ellipsis 적용 ([76d8752](https://github.com/hatiolab/operato/commit/76d8752775ac7eea3816ccb1ef6891a1ca0a2548))
+
+
+
+## [2.0.0-alpha.137](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.136...v2.0.0-alpha.137) (2024-05-15)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.136](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.135...v2.0.0-alpha.136) (2024-05-14)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.134](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.133...v2.0.0-alpha.134) (2024-05-13)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.133](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.132...v2.0.0-alpha.133) (2024-05-12)
+
+
+### :bug: Bug Fix
+
+* md-icon filled styling coding pattern ([ad8ea59](https://github.com/hatiolab/operato/commit/ad8ea59b38bbc8e60fb08b2bc82efa30e94154c1))
+
+
+
+## [2.0.0-alpha.132](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.131...v2.0.0-alpha.132) (2024-05-11)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.131](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.130...v2.0.0-alpha.131) (2024-05-11)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.129](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.128...v2.0.0-alpha.129) (2024-05-08)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.124](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.123...v2.0.0-alpha.124) (2024-05-08)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.123](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.122...v2.0.0-alpha.123) (2024-05-07)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.122](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.121...v2.0.0-alpha.122) (2024-05-06)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.121](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.120...v2.0.0-alpha.121) (2024-05-05)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.120](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.119...v2.0.0-alpha.120) (2024-05-05)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.119](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.118...v2.0.0-alpha.119) (2024-05-04)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.118](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.117...v2.0.0-alpha.118) (2024-05-04)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.117](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.116...v2.0.0-alpha.117) (2024-05-04)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.116](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.115...v2.0.0-alpha.116) (2024-05-04)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.115](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.114...v2.0.0-alpha.115) (2024-05-04)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.114](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.113...v2.0.0-alpha.114) (2024-05-04)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.113](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.112...v2.0.0-alpha.113) (2024-05-02)
+
+
+### :rocket: New Features
+
+* add multi-lingual label for ox-menu-xxxx ([87a08f8](https://github.com/hatiolab/operato/commit/87a08f8502d80231a286b1d87f48e2887844abc8))
+
+
+
+## [2.0.0-alpha.112](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.111...v2.0.0-alpha.112) (2024-05-02)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.111](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.110...v2.0.0-alpha.111) (2024-05-02)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.110](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.109...v2.0.0-alpha.110) (2024-05-02)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.109](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.108...v2.0.0-alpha.109) (2024-05-02)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.108](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.107...v2.0.0-alpha.108) (2024-05-02)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.107](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.106...v2.0.0-alpha.107) (2024-05-01)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.106](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.105...v2.0.0-alpha.106) (2024-04-26)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.105](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.104...v2.0.0-alpha.105) (2024-04-26)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.104](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.103...v2.0.0-alpha.104) (2024-04-26)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.103](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.102...v2.0.0-alpha.103) (2024-04-26)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.102](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.101...v2.0.0-alpha.102) (2024-04-22)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.101](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.100...v2.0.0-alpha.101) (2024-04-21)
+
+
+### :bug: Bug Fix
+
+* menu style ([2a7df37](https://github.com/hatiolab/operato/commit/2a7df37e37c0bb6b0eff9bafcaf5acb6d3eaae6d))
+
+
+
+## [2.0.0-alpha.100](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.99...v2.0.0-alpha.100) (2024-04-21)
+
+
+### :bug: Bug Fix
+
+* menu style ([6ff625c](https://github.com/hatiolab/operato/commit/6ff625cdd817869551445cad7d4b01f17243be2a))
+
+
+
 ## [2.0.0-alpha.99](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.98...v2.0.0-alpha.99) (2024-04-21)
 
 

package/dist/src/menu-landscape-styles.js

@@ -2,7 +2,7 @@ import { css } from 'lit';
 export const MenuLandscapeStyles = css `
   :host {
     overflow-x: auto;
-    background-color: var(--secondary-text-color);
+    background-color: var(--md-sys-color-on-secondary-container);
     --focus-anchor-color: #e6ffa2;
   }
 
@@ -37,7 +37,7 @@ export const MenuLandscapeStyles = css `
     flex: 1;
     list-style: none;
     overflow-y: hidden;
-    background-color: var(--primary-color);
+    background-color: var(--md-sys-color-on-primary-container);
     margin: 0;
     padding: 0;
     border-left: var(--border-dark-color);
@@ -53,7 +53,7 @@ export const MenuLandscapeStyles = css `
     padding: var(--padding-default) var(--padding-default) var(--padding-narrow) var(--padding-wide);
     text-decoration: none;
     font: normal 14px var(--theme-font);
-    color: var(--theme-white-color);
+    color: var(--md-sys-color-surface);
     text-transform: capitalize;
 
     overflow: hidden;
@@ -72,7 +72,7 @@ export const MenuLandscapeStyles = css `
     top: -1px;
     width: 5px;
     height: 5px;
-    border: 1px solid var(--theme-white-color);
+    border: 1px solid var(--md-sys-color-surface);
     border-radius: 50%;
     background-color: transparent;
     margin-right: 3px;
@@ -85,7 +85,7 @@ export const MenuLandscapeStyles = css `
   }
 
   [description] {
-    background-color: var(--primary-color);
+    background-color: var(--md-sys-color-on-primary-container);
     margin: 0;
     padding: var(--padding-default) 0;
     border-left: 1px solid rgba(0, 0, 0, 0.1);

package/dist/src/menu-landscape-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-landscape-styles.js","sourceRoot":"","sources":["../../src/menu-landscape-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkJrC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const MenuLandscapeStyles = css`\n  :host {\n    overflow-x: auto;\n    background-color: var(--secondary-text-color);\n    --focus-anchor-color: #e6ffa2;\n  }\n\n  :host > div {\n    overflow-x: auto;\n  }\n\n  :host > div > ul {\n    display: flex;\n    flex-direction: row;\n    list-style: none;\n    margin: auto;\n    padding: 0;\n    border: var(--border-dark-color);\n    border-width: 0 1px;\n    max-width: 1250px;\n  }\n\n  :host > div > ul > li {\n    flex: 1;\n\n    display: flex;\n    flex-direction: column;\n  }\n  :host > div > ul > li > a {\n    display: none;\n    font-weight: bold;\n    font-size: var(--fontsize-large);\n  }\n\n  ul[submenus] {\n    flex: 1;\n    list-style: none;\n    overflow-y: hidden;\n    background-color: var(--primary-color);\n    margin: 0;\n    padding: 0;\n    border-left: var(--border-dark-color);\n  }\n\n  ul[submenus] li {\n    min-width: 120px;\n    max-width: 180px;\n  }\n\n  a {\n    display: block;\n    padding: var(--padding-default) var(--padding-default) var(--padding-narrow) var(--padding-wide);\n    text-decoration: none;\n    font: normal 14px var(--theme-font);\n    color: var(--theme-white-color);\n    text-transform: capitalize;\n\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  a:hover {\n    font-weight: bold;\n  }\n\n  ul[submenus] a::before {\n    content: '';\n    display: inline-block;\n    position: relative;\n    top: -1px;\n    width: 5px;\n    height: 5px;\n    border: 1px solid var(--theme-white-color);\n    border-radius: 50%;\n    background-color: transparent;\n    margin-right: 3px;\n  }\n  ul[submenus] a:hover,\n  ul[submenus] li[active] a {\n    background-color: rgba(var(--secondary-color-rgb), 0.3);\n    color: var(--focus-anchor-color);\n    font-weight: bold;\n  }\n\n  [description] {\n    background-color: var(--primary-color);\n    margin: 0;\n    padding: var(--padding-default) 0;\n    border-left: 1px solid rgba(0, 0, 0, 0.1);\n    color: var(--focus-anchor-color);\n    font-size: 11px;\n  }\n  [description] md-icon {\n    background-color: rgba(0, 0, 0, 0.15);\n    margin-right: 4px;\n    padding: var(--padding-narrow);\n    border-radius: 0 5px 5px 0;\n    float: left;\n    font-size: 26px;\n  }\n\n  @media only screen and (max-width: 460px) {\n    :host {\n      min-width: 100vw;\n    }\n    :host > div {\n      display: initial;\n    }\n    :host > div > ul {\n      flex-direction: column;\n    }\n    a {\n      padding: var(--padding-wide);\n      font: normal 15px var(--theme-font);\n    }\n    li[active] ul {\n      border-bottom: 2px solid rgba(0, 0, 0, 0.1);\n    }\n    li li a {\n      display: block;\n      padding: var(--padding-wide) var(--padding-default) var(--padding-wide) 35px;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      font: normal 14px var(--theme-font);\n    }\n    li li[active] a {\n      font: bold 14px var(--theme-font);\n    }\n    :host > div > ul > li > a {\n      display: block;\n    }\n    :host > div > ul > li > a md-icon {\n      font-size: 1em;\n      position: relative;\n      top: 2px;\n    }\n    [description] {\n      display: none;\n    }\n    ul[submenus] a:hover,\n    ul[submenus] li[active] a {\n      background-color: rgba(var(--secondary-color-rgb), 0.3);\n    }\n  }\n`\n"]}
+{"version":3,"file":"menu-landscape-styles.js","sourceRoot":"","sources":["../../src/menu-landscape-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkJrC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const MenuLandscapeStyles = css`\n  :host {\n    overflow-x: auto;\n    background-color: var(--md-sys-color-on-secondary-container);\n    --focus-anchor-color: #e6ffa2;\n  }\n\n  :host > div {\n    overflow-x: auto;\n  }\n\n  :host > div > ul {\n    display: flex;\n    flex-direction: row;\n    list-style: none;\n    margin: auto;\n    padding: 0;\n    border: var(--border-dark-color);\n    border-width: 0 1px;\n    max-width: 1250px;\n  }\n\n  :host > div > ul > li {\n    flex: 1;\n\n    display: flex;\n    flex-direction: column;\n  }\n  :host > div > ul > li > a {\n    display: none;\n    font-weight: bold;\n    font-size: var(--fontsize-large);\n  }\n\n  ul[submenus] {\n    flex: 1;\n    list-style: none;\n    overflow-y: hidden;\n    background-color: var(--md-sys-color-on-primary-container);\n    margin: 0;\n    padding: 0;\n    border-left: var(--border-dark-color);\n  }\n\n  ul[submenus] li {\n    min-width: 120px;\n    max-width: 180px;\n  }\n\n  a {\n    display: block;\n    padding: var(--padding-default) var(--padding-default) var(--padding-narrow) var(--padding-wide);\n    text-decoration: none;\n    font: normal 14px var(--theme-font);\n    color: var(--md-sys-color-surface);\n    text-transform: capitalize;\n\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  a:hover {\n    font-weight: bold;\n  }\n\n  ul[submenus] a::before {\n    content: '';\n    display: inline-block;\n    position: relative;\n    top: -1px;\n    width: 5px;\n    height: 5px;\n    border: 1px solid var(--md-sys-color-surface);\n    border-radius: 50%;\n    background-color: transparent;\n    margin-right: 3px;\n  }\n  ul[submenus] a:hover,\n  ul[submenus] li[active] a {\n    background-color: rgba(var(--secondary-color-rgb), 0.3);\n    color: var(--focus-anchor-color);\n    font-weight: bold;\n  }\n\n  [description] {\n    background-color: var(--md-sys-color-on-primary-container);\n    margin: 0;\n    padding: var(--padding-default) 0;\n    border-left: 1px solid rgba(0, 0, 0, 0.1);\n    color: var(--focus-anchor-color);\n    font-size: 11px;\n  }\n  [description] md-icon {\n    background-color: rgba(0, 0, 0, 0.15);\n    margin-right: 4px;\n    padding: var(--padding-narrow);\n    border-radius: 0 5px 5px 0;\n    float: left;\n    font-size: 26px;\n  }\n\n  @media only screen and (max-width: 460px) {\n    :host {\n      min-width: 100vw;\n    }\n    :host > div {\n      display: initial;\n    }\n    :host > div > ul {\n      flex-direction: column;\n    }\n    a {\n      padding: var(--padding-wide);\n      font: normal 15px var(--theme-font);\n    }\n    li[active] ul {\n      border-bottom: 2px solid rgba(0, 0, 0, 0.1);\n    }\n    li li a {\n      display: block;\n      padding: var(--padding-wide) var(--padding-default) var(--padding-wide) 35px;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      font: normal 14px var(--theme-font);\n    }\n    li li[active] a {\n      font: bold 14px var(--theme-font);\n    }\n    :host > div > ul > li > a {\n      display: block;\n    }\n    :host > div > ul > li > a md-icon {\n      font-size: 1em;\n      position: relative;\n      top: 2px;\n    }\n    [description] {\n      display: none;\n    }\n    ul[submenus] a:hover,\n    ul[submenus] li[active] a {\n      background-color: rgba(var(--secondary-color-rgb), 0.3);\n    }\n  }\n`\n"]}

package/dist/src/menu-portrait-styles.js

@@ -5,6 +5,7 @@ export const MenuPortraitStyles = css `
     overflow-y: auto;
     flex-direction: column;
     height: 100%;
+    background-color: var(--md-sys-color-on-primary);
   }
 
   :host > ul {
@@ -13,15 +14,15 @@ export const MenuPortraitStyles = css `
 
   ul {
     list-style: none;
-    margin: 0;
-    padding: 0;
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
   }
 
   [group-label] {
-    padding: 25px 0 var(--padding-narrow) var(--padding-wide);
+    padding: var(--spacing-huge) var(--spacing-none) var(--spacing-small) var(--spacing-large);
     border-bottom: var(--border-dark-color);
-    font: bold 12px var(--theme-font);
-    color: rgba(var(--primary-color-rgb), 0.9);
+    font: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)) 12px var(--theme-font);
+    color: var(--md-sys-color-primary);
     text-transform: uppercase;
   }
 
@@ -29,10 +30,11 @@ export const MenuPortraitStyles = css `
     display: flex;
     align-items: center;
     border-bottom: 1px solid rgba(0, 0, 0, 0.07);
-    padding: var(--padding-default) var(--padding-default) var(--padding-default) var(--padding-wide);
+    padding: var(--spacing-medium);
+    padding-left: var(--spacing-large);
     text-decoration: none;
-    font: normal 14px var(--theme-font);
-    color: var(--secondary-color);
+    font: normal var(--md-sys-typescale-label-large-size, 0.875rem) var(--theme-font);
+    color: var(--md-sys-color-on-surface-variant);
     text-transform: capitalize;
 
     overflow: hidden;
@@ -41,7 +43,7 @@ export const MenuPortraitStyles = css `
   }
 
   a:hover {
-    color: var(--primary-color);
+    color: var(--md-sys-color-primary);
     font-weight: bold;
   }
 
@@ -50,14 +52,19 @@ export const MenuPortraitStyles = css `
   }
 
   a md-icon {
-    --md-icon-size: 20px;
-    margin-right: var(--margin-narrow);
-    color: rgba(var(--secondary-color-rgb), 0.7);
+    --md-icon-size: var(--icon-size-tiny);
+    opacity: 0.7;
+    margin-right: var(--spacing-small);
+    color: var(--md-sys-color-primary);
+  }
+
+  md-icon[filled] {
+    font-variation-settings: 'FILL' 1;
   }
 
   a [submenu-button] {
-    --md-icon-size: 20px;
-    max-height: 20px;
+    --md-icon-size: var(--icon-size-tiny);
+    max-height: 1em;
     margin-left: auto;
   }
 
@@ -65,32 +72,42 @@ export const MenuPortraitStyles = css `
     content: 'chevron_right';
   }
 
+  a > span {
+    flex: 1;
+    display: block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
   li[active] > a [submenu-button]::before {
     content: 'expand_more';
   }
 
   li[active] > a {
-    border-left: 3px solid var(--primary-color);
+    color: var(--md-sys-color-on-primary-container);
     font-weight: bold;
-    color: var(--primary-color);
+    border-left: 3px solid var(--md-sys-color-on-primary-container);
   }
 
   li li a {
-    padding: 7px 0 7px 35px;
+    padding: var(--spacing-medium);
+    padding-left: var(--spacing-huge);
     font: normal 13px var(--theme-font);
-    color: var(--secondary-color);
+    color: var(--md-sys-color-on-surface-variant);
   }
 
   li li[active] a {
-    background-color: rgba(var(--primary-color-rgb), 0.15);
-    font: bold 13px var(--theme-font);
-    color: var(--primary-color);
+    background-color: var(--md-sys-color-primary-container);
+    font: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500))
+      var(--md-sys-typescale-label-large-size, 0.875rem) var(--theme-font);
+    color: var(--md-sys-color-primary);
   }
 
   li > ul {
     overflow-y: hidden;
     max-height: 0;
-    background-color: #f6f6f6;
+    background-color: var(--md-sys-color-surface-container-low);
 
     transition-property: all;
     transition-duration: 0.7s;
@@ -110,10 +127,11 @@ export const MenuPortraitStyles = css `
 
   a [badge] {
     margin-left: auto;
-    background-color: var(--primary-background-color);
-    color: white;
-    border-radius: 999em;
-    padding: 0px 6px;
+    background-color: var(--md-sys-color-primary);
+    border-radius: var(--md-sys-shape-corner-full);
+    padding: 0 var(--spacing-small);
+    color: var(--md-sys-color-on-primary);
+    font-size: 0.9em;
   }
 
   @media only screen and (max-width: 460px) {
@@ -122,21 +140,23 @@ export const MenuPortraitStyles = css `
     }
 
     a {
-      padding: var(--padding-wide);
+      padding: var(--spacing-large);
       font: normal 15px var(--theme-font);
     }
 
     li li a {
       display: block;
-      padding: var(--padding-wide) var(--padding-default) var(--padding-wide) 35px;
+      padding: var(--spacing-medium);
+      padding-left: var(--spacing-huge);
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      font: normal 14px var(--theme-font);
+      font: normal var(--md-sys-typescale-label-large-size, 0.875rem) var(--theme-font);
     }
 
     li li[active] a {
-      font: bold 14px var(--theme-font);
+      font: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500))
+        var(--md-sys-typescale-label-large-size, 0.875rem) var(--theme-font);
     }
   }
 `;

package/dist/src/menu-portrait-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-portrait-styles.js","sourceRoot":"","sources":["../../src/menu-portrait-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4IpC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const MenuPortraitStyles = css`\n  :host {\n    display: flex;\n    overflow-y: auto;\n    flex-direction: column;\n    height: 100%;\n  }\n\n  :host > ul {\n    margin-block-end: 1.5em;\n  }\n\n  ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n\n  [group-label] {\n    padding: 25px 0 var(--padding-narrow) var(--padding-wide);\n    border-bottom: var(--border-dark-color);\n    font: bold 12px var(--theme-font);\n    color: rgba(var(--primary-color-rgb), 0.9);\n    text-transform: uppercase;\n  }\n\n  a {\n    display: flex;\n    align-items: center;\n    border-bottom: 1px solid rgba(0, 0, 0, 0.07);\n    padding: var(--padding-default) var(--padding-default) var(--padding-default) var(--padding-wide);\n    text-decoration: none;\n    font: normal 14px var(--theme-font);\n    color: var(--secondary-color);\n    text-transform: capitalize;\n\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  a:hover {\n    color: var(--primary-color);\n    font-weight: bold;\n  }\n\n  a * {\n    vertical-align: middle;\n  }\n\n  a md-icon {\n    --md-icon-size: 20px;\n    margin-right: var(--margin-narrow);\n    color: rgba(var(--secondary-color-rgb), 0.7);\n  }\n\n  a [submenu-button] {\n    --md-icon-size: 20px;\n    max-height: 20px;\n    margin-left: auto;\n  }\n\n  a [submenu-button]::before {\n    content: 'chevron_right';\n  }\n\n  li[active] > a [submenu-button]::before {\n    content: 'expand_more';\n  }\n\n  li[active] > a {\n    border-left: 3px solid var(--primary-color);\n    font-weight: bold;\n    color: var(--primary-color);\n  }\n\n  li li a {\n    padding: 7px 0 7px 35px;\n    font: normal 13px var(--theme-font);\n    color: var(--secondary-color);\n  }\n\n  li li[active] a {\n    background-color: rgba(var(--primary-color-rgb), 0.15);\n    font: bold 13px var(--theme-font);\n    color: var(--primary-color);\n  }\n\n  li > ul {\n    overflow-y: hidden;\n    max-height: 0;\n    background-color: #f6f6f6;\n\n    transition-property: all;\n    transition-duration: 0.7s;\n  }\n\n  li[active] > ul {\n    max-height: 500px;\n  }\n\n  li[active] > ul[settled] {\n    overflow-y: auto;\n  }\n\n  li li a::before {\n    margin-right: var(--margin-narrow);\n  }\n\n  a [badge] {\n    margin-left: auto;\n    background-color: var(--primary-background-color);\n    color: white;\n    border-radius: 999em;\n    padding: 0px 6px;\n  }\n\n  @media only screen and (max-width: 460px) {\n    :host {\n      min-width: 100vw;\n    }\n\n    a {\n      padding: var(--padding-wide);\n      font: normal 15px var(--theme-font);\n    }\n\n    li li a {\n      display: block;\n      padding: var(--padding-wide) var(--padding-default) var(--padding-wide) 35px;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      font: normal 14px var(--theme-font);\n    }\n\n    li li[active] a {\n      font: bold 14px var(--theme-font);\n    }\n  }\n`\n"]}
+{"version":3,"file":"menu-portrait-styles.js","sourceRoot":"","sources":["../../src/menu-portrait-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgKpC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const MenuPortraitStyles = css`\n  :host {\n    display: flex;\n    overflow-y: auto;\n    flex-direction: column;\n    height: 100%;\n    background-color: var(--md-sys-color-on-primary);\n  }\n\n  :host > ul {\n    margin-block-end: 1.5em;\n  }\n\n  ul {\n    list-style: none;\n    margin: var(--spacing-none);\n    padding: var(--spacing-none);\n  }\n\n  [group-label] {\n    padding: var(--spacing-huge) var(--spacing-none) var(--spacing-small) var(--spacing-large);\n    border-bottom: var(--border-dark-color);\n    font: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)) 12px var(--theme-font);\n    color: var(--md-sys-color-primary);\n    text-transform: uppercase;\n  }\n\n  a {\n    display: flex;\n    align-items: center;\n    border-bottom: 1px solid rgba(0, 0, 0, 0.07);\n    padding: var(--spacing-medium);\n    padding-left: var(--spacing-large);\n    text-decoration: none;\n    font: normal var(--md-sys-typescale-label-large-size, 0.875rem) var(--theme-font);\n    color: var(--md-sys-color-on-surface-variant);\n    text-transform: capitalize;\n\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  a:hover {\n    color: var(--md-sys-color-primary);\n    font-weight: bold;\n  }\n\n  a * {\n    vertical-align: middle;\n  }\n\n  a md-icon {\n    --md-icon-size: var(--icon-size-tiny);\n    opacity: 0.7;\n    margin-right: var(--spacing-small);\n    color: var(--md-sys-color-primary);\n  }\n\n  md-icon[filled] {\n    font-variation-settings: 'FILL' 1;\n  }\n\n  a [submenu-button] {\n    --md-icon-size: var(--icon-size-tiny);\n    max-height: 1em;\n    margin-left: auto;\n  }\n\n  a [submenu-button]::before {\n    content: 'chevron_right';\n  }\n\n  a > span {\n    flex: 1;\n    display: block;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  li[active] > a [submenu-button]::before {\n    content: 'expand_more';\n  }\n\n  li[active] > a {\n    color: var(--md-sys-color-on-primary-container);\n    font-weight: bold;\n    border-left: 3px solid var(--md-sys-color-on-primary-container);\n  }\n\n  li li a {\n    padding: var(--spacing-medium);\n    padding-left: var(--spacing-huge);\n    font: normal 13px var(--theme-font);\n    color: var(--md-sys-color-on-surface-variant);\n  }\n\n  li li[active] a {\n    background-color: var(--md-sys-color-primary-container);\n    font: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500))\n      var(--md-sys-typescale-label-large-size, 0.875rem) var(--theme-font);\n    color: var(--md-sys-color-primary);\n  }\n\n  li > ul {\n    overflow-y: hidden;\n    max-height: 0;\n    background-color: var(--md-sys-color-surface-container-low);\n\n    transition-property: all;\n    transition-duration: 0.7s;\n  }\n\n  li[active] > ul {\n    max-height: 500px;\n  }\n\n  li[active] > ul[settled] {\n    overflow-y: auto;\n  }\n\n  li li a::before {\n    margin-right: var(--margin-narrow);\n  }\n\n  a [badge] {\n    margin-left: auto;\n    background-color: var(--md-sys-color-primary);\n    border-radius: var(--md-sys-shape-corner-full);\n    padding: 0 var(--spacing-small);\n    color: var(--md-sys-color-on-primary);\n    font-size: 0.9em;\n  }\n\n  @media only screen and (max-width: 460px) {\n    :host {\n      min-width: 100vw;\n    }\n\n    a {\n      padding: var(--spacing-large);\n      font: normal 15px var(--theme-font);\n    }\n\n    li li a {\n      display: block;\n      padding: var(--spacing-medium);\n      padding-left: var(--spacing-huge);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      font: normal var(--md-sys-typescale-label-large-size, 0.875rem) var(--theme-font);\n    }\n\n    li li[active] a {\n      font: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500))\n        var(--md-sys-typescale-label-large-size, 0.875rem) var(--theme-font);\n    }\n  }\n`\n"]}