@operato/context 2.0.0-alpha.99 → 2.0.0-beta.1

package/CHANGELOG.md

@@ -3,6 +3,468 @@
 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.1](https://github.com/hatiolab/operato/compare/v2.0.0-beta.0...v2.0.0-beta.1) (2024-06-03)
+
+**Note:** Version bump only for package @operato/context
+
+
+
+
+
+## [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/context
+
+
+
+
+
+## [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/context
+
+
+
+
+
+## [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/context
+
+
+
+
+
+## [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/context
+
+
+
+
+
+## [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/context
+
+
+
+
+
+## [2.0.0-alpha.152](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.151...v2.0.0-alpha.152) (2024-05-30)
+
+
+### :bug: Bug Fix
+
+* theming style - background-color ([48a0fe4](https://github.com/hatiolab/operato/commit/48a0fe49a533ae1fbd7931a2951b6a68e9c39b01))
+
+
+
+## [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/context
+
+
+
+
+
+## [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 ([2d85145](https://github.com/hatiolab/operato/commit/2d8514510e4dd88d3ff0652e0b22c9992cabce5c))
+* md3 ([55b7496](https://github.com/hatiolab/operato/commit/55b7496ea46a6b65ac6ab71bc1be7c89d1ba91e5))
+
+
+### :bug: Bug Fix
+
+* context style ([d3cac99](https://github.com/hatiolab/operato/commit/d3cac9909a61befa05ec30331a32e2de6d39ba5e))
+
+
+### :mega: Other
+
+* context sample stories ([0e34d5a](https://github.com/hatiolab/operato/commit/0e34d5a40ff7cad78c8eda591d2bd0f88c80fcf4))
+
+
+
+## [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/context
+
+
+
+
+
+## [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/context
+
+
+
+
+
+## [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/context
+
+
+
+
+
+## [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/context
+
+
+
+
+
+## [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/context
+
+
+
+
+
+## [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/context
+
+
+
+
+
+## [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/context
+
+
+
+
+
+## [2.0.0-alpha.138](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.137...v2.0.0-alpha.138) (2024-05-15)
+
+**Note:** Version bump only for package @operato/context
+
+
+
+
+
+## [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/context
+
+
+
+
+
+## [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/context
+
+
+
+
+
+## [2.0.0-alpha.135](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.134...v2.0.0-alpha.135) (2024-05-14)
+
+
+### :bug: Bug Fix
+
+* lit-element의 textContext 에 직접 값을 치환하는 경우 발생하는 문제 ([e614a69](https://github.com/hatiolab/operato/commit/e614a69194d18d582345bdbd5c4b101e4a531348))
+
+
+
+## [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/context
+
+
+
+
+
+## [2.0.0-alpha.133](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.132...v2.0.0-alpha.133) (2024-05-12)
+
+**Note:** Version bump only for package @operato/context
+
+
+
+
+
+## [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/context
+
+
+
+
+
+## [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/context
+
+
+
+
+
+## [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/context
+
+
+
+
+
+## [2.0.0-alpha.128](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.127...v2.0.0-alpha.128) (2024-05-08)
+
+
+### :bug: Bug Fix
+
+* add padding to ox-context-page-toolbar to accommodate button shadow ([79431a0](https://github.com/hatiolab/operato/commit/79431a03f01230a1bff2f9b62c031c38812d32b2))
+
+
+
+## [2.0.0-alpha.126](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.125...v2.0.0-alpha.126) (2024-05-08)
+
+
+### :rocket: New Features
+
+* prevent button reaction during executing previous user action ([fceb956](https://github.com/hatiolab/operato/commit/fceb95601e62e7fd3ff92231788a37dd3d57eb41))
+
+
+
+## [2.0.0-alpha.125](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.124...v2.0.0-alpha.125) (2024-05-08)
+
+
+### :rocket: New Features
+
+* prevent button reaction during executing previous user action ([d613706](https://github.com/hatiolab/operato/commit/d6137066f81c8598a9711e584ad8ead6e1cf1c5d))
+
+
+
+## [2.0.0-alpha.124](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.123...v2.0.0-alpha.124) (2024-05-08)
+
+
+### :rocket: New Features
+
+* prevent button reaction during executing previous user action ([370a6c5](https://github.com/hatiolab/operato/commit/370a6c57267ad2a127311996cc393c25ad0b424c))
+
+
+
+## [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/context
+
+
+
+
+
+## [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/context
+
+
+
+
+
+## [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/context
+
+
+
+
+
+## [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/context
+
+
+
+
+
+## [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/context
+
+
+
+
+
+## [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/context
+
+
+
+
+
+## [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/context
+
+
+
+
+
+## [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/context
+
+
+
+
+
+## [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/context
+
+
+
+
+
+## [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/context
+
+
+
+
+
+## [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/context
+
+
+
+
+
+## [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/context
+
+
+
+
+
+## [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/context
+
+
+
+
+
+## [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/context
+
+
+
+
+
+## [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/context
+
+
+
+
+
+## [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/context
+
+
+
+
+
+## [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/context
+
+
+
+
+
+## [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/context
+
+
+
+
+
+## [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/context
+
+
+
+
+
+## [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/context
+
+
+
+
+
+## [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/context
+
+
+
+
+
+## [2.0.0-alpha.100](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.99...v2.0.0-alpha.100) (2024-04-21)
+
+**Note:** Version bump only for package @operato/context
+
+
+
+
+
 ## [2.0.0-alpha.99](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.98...v2.0.0-alpha.99) (2024-04-21)
 
 **Note:** Version bump only for package @operato/context

package/dist/src/layouts/ox-context-page-toolbar.js

@@ -12,12 +12,14 @@ let ContextPageToolbar = class ContextPageToolbar extends connect(store)(LitElem
         :host {
           display: flex;
           flex-direction: row-reverse;
+          gap: var(--spacing-medium);
+
           position: relative;
 
           justify-content: end;
           align-items: center;
 
-          --context-action-bar-button-margin: 0px;
+          --context-action-bar-button-margin: var(--spacing-none);
           --context-action-bar-more-button-border-radius: 2px;
 
           --md-icon-size: 20px;
@@ -28,29 +30,29 @@ let ContextPageToolbar = class ContextPageToolbar extends connect(store)(LitElem
           flex-direction: row;
 
           align-items: center;
-          gap: var(--padding-narrow);
-        }
-
-        * {
-          cursor: pointer;
+          gap: var(--spacing-small);
         }
 
         md-icon {
-          background-color: var(--button-background-color, #fafbfc);
-          border: 1px solid rgba(var(--primary-color-rgb), 0.5);
-          border-radius: var(--button-border-radius);
-          padding: var(--iconbtn-padding, 4px);
+          background-color: var(--md-sys-color-primary-container);
+          border: 1px solid var(--md-sys-color-outline);
+          border-radius: var(--md-sys-shape-corner-small);
+          padding: var(--spacing-small);
 
-          color: var(--primary-color);
+          color: var(--md-sys-color-primary);
 
           &:hover {
-            background-color: var(--primary-color);
+            background-color: var(--md-sys-color-primary);
 
-            color: var(--theme-white-color);
+            color: var(--md-sys-color-secondary-container);
           }
         }
 
         @media screen and (max-width: 460px) {
+          :host {
+            gap: 0;
+          }
+
           :host > div {
             gap: 0;
           }

package/dist/src/layouts/ox-context-page-toolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-context-page-toolbar.js","sourceRoot":"","sources":["../../../src/layouts/ox-context-page-toolbar.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,OAAO,EAAE,MAAM,KAAK,CAAA;AACpE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAgB,MAAM,mBAAmB,CAAA;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAA;AAEtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAG/B,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;IAChE,MAAM,KAAK,MAAM;QACf,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAmDF;SACF,CAAA;IACH,CAAC;IASD,MAAM;QACJ,IAAI,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAA;QAC9E,IAAI,KAAK,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE;YAC3C,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC;gBACxD,OAAO,IAAI,CAAA;YACb,CAAC;QACH,CAAC,CAAC,CAAA;QAEF,IAAI,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,aAAa,CAAC,SAAS,CAAC,CAAA;QAClF,IAAI,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,aAAa,CAAC,KAAK,CAAC,CAAA;QAC3E,IAAI,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,aAAa,CAAC,MAAM,CAAC,CAAA;QAC7E,IAAI,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,aAAa,CAAC,IAAI,CAAC,CAAA;QACzE,IAAI,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,aAAa,CAAC,QAAQ,CAAC,CAAA;QAEhF,OAAO,IAAI,CAAA;QACP,aAAa,CAAC,MAAM,GAAG,CAAC;YACxB,CAAC,CAAC,IAAI,CAAA,uBAAuB,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,QAAQ;YACxF,CAAC,CAAC,OAAO;QACT,UAAU,CAAC,MAAM,GAAG,CAAC;YACrB,CAAC,CAAC,IAAI,CAAA,mBAAmB,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,QAAQ;YACjF,CAAC,CAAC,OAAO;QACT,WAAW,CAAC,MAAM,GAAG,CAAC;YACtB,CAAC,CAAC,IAAI,CAAA,oBAAoB,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,QAAQ;YACnF,CAAC,CAAC,OAAO;QACT,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA,kBAAkB,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;QAC9G,YAAY,CAAC,MAAM,GAAG,CAAC;YACvB,CAAC,CAAC,IAAI,CAAA,sBAAsB,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,QAAQ;YACtF,CAAC,CAAC,OAAO;KACZ,CAAA;IACH,CAAC;IAED,YAAY,CAAC,KAAU;;QACrB,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;YAClB,IAAI,CAAC,KAAK,GAAG,MAAA,KAAK,CAAC,OAAO,0CAAE,KAAK,CAAA;QACnC,CAAC;IACH,CAAC;CACF,CAAA;AA3C6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAAa;AACb;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;iDAIvB;AA/DQ,kBAAkB;IAD9B,aAAa,CAAC,yBAAyB,CAAC;GAC5B,kBAAkB,CAqG9B","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, TemplateResult, nothing } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { TOOL_POSITION } from '@operato/layout'\nimport { store } from '@operato/shell'\n\n@customElement('ox-context-page-toolbar')\nexport class ContextPageToolbar extends connect(store)(LitElement) {\n  static get styles() {\n    return [\n      css`\n        :host {\n          display: flex;\n          flex-direction: row-reverse;\n          position: relative;\n\n          justify-content: end;\n          align-items: center;\n\n          --context-action-bar-button-margin: 0px;\n          --context-action-bar-more-button-border-radius: 2px;\n\n          --md-icon-size: 20px;\n        }\n\n        :host > div {\n          display: flex;\n          flex-direction: row;\n\n          align-items: center;\n          gap: var(--padding-narrow);\n        }\n\n        * {\n          cursor: pointer;\n        }\n\n        md-icon {\n          background-color: var(--button-background-color, #fafbfc);\n          border: 1px solid rgba(var(--primary-color-rgb), 0.5);\n          border-radius: var(--button-border-radius);\n          padding: var(--iconbtn-padding, 4px);\n\n          color: var(--primary-color);\n\n          &:hover {\n            background-color: var(--primary-color);\n\n            color: var(--theme-white-color);\n          }\n        }\n\n        @media screen and (max-width: 460px) {\n          :host > div {\n            gap: 0;\n          }\n\n          md-icon {\n            border-radius: 0;\n          }\n        }\n      `\n    ]\n  }\n\n  @property({ type: Object }) context: any\n  @property({ type: Array }) tools?: {\n    position: TOOL_POSITION\n    template: TemplateResult\n    context?: string\n  }[]\n\n  render() {\n    let contextKeys = Object.keys(this.context).filter(key => !!this.context[key])\n    let tools = (this.tools || []).filter(tool => {\n      if (!tool.context || contextKeys.includes(tool.context)) {\n        return tool\n      }\n    })\n\n    let frontEndTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT_END)\n    let frontTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT)\n    let centerTools = tools.filter(tool => tool.position == TOOL_POSITION.CENTER)\n    let rearTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR)\n    let rearEndTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR_END)\n\n    return html`\n      ${frontEndTools.length > 0\n        ? html`<div id=\"front-end\">${frontEndTools.map(tool => html` ${tool.template} `)}</div>`\n        : nothing}\n      ${frontTools.length > 0\n        ? html`<div id=\"front\">${frontTools.map(tool => html` ${tool.template} `)}</div>`\n        : nothing}\n      ${centerTools.length > 0\n        ? html`<div id=\"center\">${centerTools.map(tool => html` ${tool.template} `)}</div>`\n        : nothing}\n      ${rearTools.length > 0 ? html`<div id=\"rear\">${rearTools.map(tool => html` ${tool.template} `)}</div>` : nothing}\n      ${rearEndTools.length > 0\n        ? html`<div id=\"rear-end\">${rearEndTools.map(tool => html` ${tool.template} `)}</div>`\n        : nothing}\n    `\n  }\n\n  stateChanged(state: any) {\n    if (state.context) {\n      this.tools = state.context?.tools\n    }\n  }\n}\n"]}
+{"version":3,"file":"ox-context-page-toolbar.js","sourceRoot":"","sources":["../../../src/layouts/ox-context-page-toolbar.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, TemplateResult, nothing } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { TOOL_POSITION } from '@operato/layout'\nimport { store } from '@operato/shell'\n\n@customElement('ox-context-page-toolbar')\nexport class ContextPageToolbar extends connect(store)(LitElement) {\n  static get styles() {\n    return [\n      css`\n        :host {\n          display: flex;\n          flex-direction: row-reverse;\n          gap: var(--spacing-medium);\n\n          position: relative;\n\n          justify-content: end;\n          align-items: center;\n\n          --context-action-bar-button-margin: var(--spacing-none);\n          --context-action-bar-more-button-border-radius: 2px;\n\n          --md-icon-size: 20px;\n        }\n\n        :host > div {\n          display: flex;\n          flex-direction: row;\n\n          align-items: center;\n          gap: var(--spacing-small);\n        }\n\n        md-icon {\n          background-color: var(--md-sys-color-primary-container);\n          border: 1px solid var(--md-sys-color-outline);\n          border-radius: var(--md-sys-shape-corner-small);\n          padding: var(--spacing-small);\n\n          color: var(--md-sys-color-primary);\n\n          &:hover {\n            background-color: var(--md-sys-color-primary);\n\n            color: var(--md-sys-color-secondary-container);\n          }\n        }\n\n        @media screen and (max-width: 460px) {\n          :host {\n            gap: 0;\n          }\n\n          :host > div {\n            gap: 0;\n          }\n\n          md-icon {\n            border-radius: 0;\n          }\n        }\n      `\n    ]\n  }\n\n  @property({ type: Object }) context: any\n  @property({ type: Array }) tools?: {\n    position: TOOL_POSITION\n    template: TemplateResult\n    context?: string\n  }[]\n\n  render() {\n    let contextKeys = Object.keys(this.context).filter(key => !!this.context[key])\n    let tools = (this.tools || []).filter(tool => {\n      if (!tool.context || contextKeys.includes(tool.context)) {\n        return tool\n      }\n    })\n\n    let frontEndTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT_END)\n    let frontTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT)\n    let centerTools = tools.filter(tool => tool.position == TOOL_POSITION.CENTER)\n    let rearTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR)\n    let rearEndTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR_END)\n\n    return html`\n      ${frontEndTools.length > 0\n        ? html`<div id=\"front-end\">${frontEndTools.map(tool => html` ${tool.template} `)}</div>`\n        : nothing}\n      ${frontTools.length > 0\n        ? html`<div id=\"front\">${frontTools.map(tool => html` ${tool.template} `)}</div>`\n        : nothing}\n      ${centerTools.length > 0\n        ? html`<div id=\"center\">${centerTools.map(tool => html` ${tool.template} `)}</div>`\n        : nothing}\n      ${rearTools.length > 0 ? html`<div id=\"rear\">${rearTools.map(tool => html` ${tool.template} `)}</div>` : nothing}\n      ${rearEndTools.length > 0\n        ? html`<div id=\"rear-end\">${rearEndTools.map(tool => html` ${tool.template} `)}</div>`\n        : nothing}\n    `\n  }\n\n  stateChanged(state: any) {\n    if (state.context) {\n      this.tools = state.context?.tools\n    }\n  }\n}\n"]}

package/dist/src/layouts/ox-context-toolbar.d.ts

@@ -12,7 +12,7 @@ export declare class ContextToolbar extends ContextToolbar_base {
     private context;
     private tools?;
     private container;
-    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
     updated(changes: PropertyValues<this>): void;
     stateChanged(state: any): void;
 }

package/dist/src/layouts/ox-context-toolbar.js

@@ -12,7 +12,8 @@ let ContextToolbar = class ContextToolbar extends connect(store)(LitElement) {
         :host {
           display: flex;
 
-          background-color: var(--context-toolbar-background-color);
+          color: var(--context-toolbar-background-color, var(--md-sys-color-on-secondary-container));
+          background-color: var(--context-toolbar-background-color, var(--md-sys-color-secondary-container));
           box-shadow: var(--context-toolbar-shadow-line);
 
           padding: 0;
@@ -29,8 +30,8 @@ let ContextToolbar = class ContextToolbar extends connect(store)(LitElement) {
 
           justify-content: space-between;
 
-          gap: var(--padding-narrow);
-          padding: 6px 10px;
+          gap: var(--spacing-medium);
+          padding: var(--spacing-small) var(--spacing-medium);
 
           &:not(:has(> *)) {
             padding: 0;
@@ -48,33 +49,32 @@ let ContextToolbar = class ContextToolbar extends connect(store)(LitElement) {
 
           #front-end md-icon,
           #front md-icon {
-            background-color: var(--context-toolbar-function-button-background-color);
-            border: var(--context-toolbar-function-button-border);
-            color: var(--context-toolbar-function-button-color);
+            background-color: var(--md-sys-color-secondary-container);
+            border: var(--context-toolbar-function-button-border, none);
+            color: var(--md-sys-color-secondary-fixed);
           }
 
           #front-end md-icon {
-            background-color: var(--primary-color);
+            background-color: var(--md-sys-color-on-primary-container);
           }
           #front-end md-icon:hover {
-            background-color: var(--context-toolbar-function-button-background-color);
+            background-color: var(--md-sys-color-primary);
           }
           #front md-icon:hover {
-            background-color: var(--context-toolbar-function-button-hover-background-color);
+            background-color: var(--md-sys-color-secondary);
           }
 
           md-icon {
-            background-color: var(--button-background-color, #fafbfc);
-            border: 1px solid rgba(var(--primary-color-rgb), 0.5);
-            border-radius: var(--button-border-radius);
-            padding: var(--iconbtn-padding, 2px);
+            background-color: var(--md-sys-color-primary-container);
+            border: 1px solid var(--md-sys-color-outline);
+            border-radius: var(--md-sys-shape-corner-small);
+            padding: var(--spacing-small);
 
-            color: var(--primary-color);
+            color: var(--md-sys-color-primary);
 
             &:hover {
-              background-color: var(--primary-color);
-
-              color: var(--theme-white-color);
+              background-color: var(--md-sys-color-primary);
+              color: var(--md-sys-color-secondary-container);
             }
           }
 
@@ -83,23 +83,19 @@ let ContextToolbar = class ContextToolbar extends connect(store)(LitElement) {
           }
 
           div md-icon:first-child {
-            border-top-left-radius: var(--context-toolbar-function-button-radius);
-            border-bottom-left-radius: var(--context-toolbar-function-button-radius);
+            border-top-left-radius: var(--md-sys-shape-corner-small);
+            border-bottom-left-radius: var(--md-sys-shape-corner-small);
           }
 
           div md-icon:last-child {
-            border-top-right-radius: var(--context-toolbar-function-button-radius);
-            border-bottom-right-radius: var(--context-toolbar-function-button-radius);
+            border-top-right-radius: var(--md-sys-shape-corner-small);
+            border-bottom-right-radius: var(--md-sys-shape-corner-small);
           }
 
           #center {
             flex: 1;
             justify-content: end;
           }
-
-          * {
-            cursor: pointer;
-          }
         }
 
         @media only screen and (max-width: 460px) {