@omicronenergy/oscd-shell 0.0.11 → 0.0.12

package/dist/landing-page/landing-page.js

@@ -55,13 +55,13 @@ LandingPage.styles = css `
     }
 
     .heading {
-      color: var(--oscd-base3);
+      color: var(--landing-heading-color);
       text-align: center;
-      font-family: 'Roboto';
-      font-size: 50px;
-      font-style: normal;
-      font-weight: 600;
-      line-height: normal;
+      font-family: var(--landing-heading-font-family);
+      font-size: var(--landing-heading-size);
+      font-style: var(--landing-heading-style);
+      font-weight: var(--landing-heading-weight);
+      line-height: var(--landing-heading-line-height);
 
       margin-block-start: 64px;
       margin-block-end: 8px;
@@ -70,36 +70,36 @@ LandingPage.styles = css `
     }
 
     .sub-heading {
-      color: var(--oscd-base3);
+      color: var(--landing-subheading-color);
       text-align: center;
-      font-family: Roboto;
-      font-size: 16.909px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 65.194px; /* 385.56% */
+      font-family: var(--landing-subheading-font-family);
+      font-size: var(--landing-subheading-size);
+      font-style: var(--landing-subheading-style);
+      font-weight: var(--landing-subheading-weight);
+      line-height: var(--landing-subheading-line-height);
 
       margin-block-end: 168px;
     }
 
     .menu-plugins-grid {
-      width: 60%;
+      width: var(--landing-grid-width);
       display: flex;
       flex-wrap: wrap;
-      gap: 95px;
+      gap: var(--landing-grid-gap);
       justify-content: center;
       margin: 0 auto;
       padding: 16px 0;
     }
 
     .menu-plugin-item {
-      --md-text-button-container-shape: 2px;
+      --md-text-button-container-shape: var(--landing-card-radius);
       display: flex;
       flex-direction: row;
       align-items: center;
       text-align: center;
       padding: 8px;
-      color: var(--oscd-base3);
-      background: var(--oscd-primary);
+      color: var(--landing-card-text-color);
+      background: var(--landing-card-background);
       transition: background-color 0.3s;
       cursor: pointer;
     }
@@ -109,19 +109,19 @@ LandingPage.styles = css `
     }
 
     .menu-plugin-item-content {
-      color: var(--oscd-base3);
-      width: 240px;
-      height: 180px;
+      color: var(--landing-card-text-color);
+      width: var(--landing-card-width);
+      height: var(--landing-card-height);
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       gap: 24px;
-      font-family: 'Roboto';
+      font-family: var(--landing-heading-font-family);
     }
 
     .menu-plugin-item-content oscd-icon {
-      --md-icon-size: 54px;
+      --md-icon-size: var(--landing-card-icon-size);
     }
 
     .menu-plugin-item-content span {
@@ -139,7 +139,7 @@ LandingPage.styles = css `
       height: 50px;
       background: linear-gradient(
         to top left,
-        var(--omicron-yellow) 50%,
+        var(--landing-card-corner-accent) 50%,
         transparent 50%
       );
     }

package/dist/landing-page/landing-page.js.map

@@ -1 +1 @@
-{"version":3,"file":"landing-page.js","sourceRoot":"","sources":["../../src/landing-page/landing-page.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,yCAAyC,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,iDAAiD,CAAC;AAIjF,OAAO,EAAE,aAAa,EAAE,MAAM,mDAAmD,CAAC;AAQ3E,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,mBAAmB,CAAC,UAAU,CAAC;IAAzD;;QAOL,gBAAgB;QAGhB,YAAO,GAAW,EAAE,CAAC;QAGrB,eAAU,GAAW,EAAE,CAAC;QAExB,gBAAW,GAAkB,EAAE,CAAC;IAuIlC,CAAC;IAlIC,MAAM;QACJ,OAAO,IAAI,CAAA;4BACa,IAAI,CAAC,OAAO;gCACR,IAAI,CAAC,UAAU;;UAErC,IAAI,CAAC,WAAW,CAAC,GAAG,CACpB,MAAM,CAAC,EAAE,CACP,IAAI,CAAA;;uBAEO,GAAG,EAAE;YACZ,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,oBAAoB,EAAE;gBACpC,MAAM,EAAE,EAAE,MAAM,EAAE;gBAClB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CACH,CAAC;QACJ,CAAC;;;;6BAIc,MAAM,CAAC,IAAI;wBAChB,MAAM,CAAC,IAAI;;;iCAGF,CACxB;;KAEJ,CAAC;IACJ,CAAC;;AAhDM,0BAAc,GAAG;IACtB,WAAW,EAAE,QAAQ;IACrB,kBAAkB,EAAE,cAAc;IAClC,gBAAgB,EAAE,aAAa;CAChC,AAJoB,CAInB;AA8CK,kBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkGlB,AAlGY,CAkGX;AA3IF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACN;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACH;AAExB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;gDACM;AAGhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CACvB;AAlBR,WAAW;IADvB,SAAS,EAAE;GACC,WAAW,CAsJvB","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';\nimport { localized } from '@lit/localize';\n\nimport { OscdIcon } from '@omicronenergy/oscd-ui/icon/OscdIcon.js';\nimport { OscdTextButton } from '@omicronenergy/oscd-ui/button/OscdTextButton.js';\n\nimport { PluginEntry } from '../oscd-shell.js';\nimport { LocaleTag } from '../localization.js';\nimport { OscdElevation } from '@omicronenergy/oscd-ui/elevation/OscdElevation.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'landing-page': LandingPage;\n  }\n}\n@localized()\nexport class LandingPage extends ScopedElementsMixin(LitElement) {\n  static scopedElements = {\n    'oscd-icon': OscdIcon,\n    'oscd-text-button': OscdTextButton,\n    'oscd-elevation': OscdElevation,\n  };\n\n  /* Properties */\n\n  @property({ type: String })\n  heading: string = '';\n\n  @property({ type: String })\n  subHeading: string = '';\n  @property({ type: Array })\n  menuPlugins: PluginEntry[] = [];\n\n  @property({ type: String, reflect: true })\n  locale!: LocaleTag;\n\n  render() {\n    return html`\n      <h1 class=\"heading\">${this.heading}</h1>\n      <h2 class=\"sub-heading\">${this.subHeading}</h2>\n      <div class=\"menu-plugins-grid\">\n        ${this.menuPlugins.map(\n          plugin =>\n            html`<oscd-text-button\n              class=\"menu-plugin-item\"\n              @click=${() => {\n                this.dispatchEvent(\n                  new CustomEvent('menu-plugin-select', {\n                    detail: { plugin },\n                    bubbles: true,\n                    composed: true,\n                  }),\n                );\n              }}\n            >\n              <oscd-elevation></oscd-elevation>\n              <div class=\"menu-plugin-item-content\">\n                <oscd-icon>${plugin.icon}</oscd-icon>\n                <span>${plugin.name}</span>\n                <div class=\"menu-plugin-item-corner-wedge\"></div>\n              </div>\n            </oscd-text-button> `,\n        )}\n      </div>\n    `;\n  }\n\n  static styles = css`\n    .host {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      justify-content: center;\n      gap: 8px;\n    }\n\n    .heading {\n      color: var(--oscd-base3);\n      text-align: center;\n      font-family: 'Roboto';\n      font-size: 50px;\n      font-style: normal;\n      font-weight: 600;\n      line-height: normal;\n\n      margin-block-start: 64px;\n      margin-block-end: 8px;\n\n      --md-icon-size: 50px;\n    }\n\n    .sub-heading {\n      color: var(--oscd-base3);\n      text-align: center;\n      font-family: Roboto;\n      font-size: 16.909px;\n      font-style: normal;\n      font-weight: 400;\n      line-height: 65.194px; /* 385.56% */\n\n      margin-block-end: 168px;\n    }\n\n    .menu-plugins-grid {\n      width: 60%;\n      display: flex;\n      flex-wrap: wrap;\n      gap: 95px;\n      justify-content: center;\n      margin: 0 auto;\n      padding: 16px 0;\n    }\n\n    .menu-plugin-item {\n      --md-text-button-container-shape: 2px;\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      text-align: center;\n      padding: 8px;\n      color: var(--oscd-base3);\n      background: var(--oscd-primary);\n      transition: background-color 0.3s;\n      cursor: pointer;\n    }\n\n    .menu-plugin-item:hover {\n      --md-elevation-level: 2;\n    }\n\n    .menu-plugin-item-content {\n      color: var(--oscd-base3);\n      width: 240px;\n      height: 180px;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: 24px;\n      font-family: 'Roboto';\n    }\n\n    .menu-plugin-item-content oscd-icon {\n      --md-icon-size: 54px;\n    }\n\n    .menu-plugin-item-content span {\n      font-size: 16px;\n      font-style: normal;\n      font-weight: 500;\n      line-height: 22px; /* 135% */\n    }\n\n    .menu-plugin-item-corner-wedge {\n      position: absolute;\n      bottom: 0;\n      right: 0;\n      width: 50px;\n      height: 50px;\n      background: linear-gradient(\n        to top left,\n        var(--omicron-yellow) 50%,\n        transparent 50%\n      );\n    }\n  `;\n}\n"]}
+{"version":3,"file":"landing-page.js","sourceRoot":"","sources":["../../src/landing-page/landing-page.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,yCAAyC,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,iDAAiD,CAAC;AAIjF,OAAO,EAAE,aAAa,EAAE,MAAM,mDAAmD,CAAC;AAQ3E,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,mBAAmB,CAAC,UAAU,CAAC;IAAzD;;QAOL,gBAAgB;QAGhB,YAAO,GAAW,EAAE,CAAC;QAGrB,eAAU,GAAW,EAAE,CAAC;QAExB,gBAAW,GAAkB,EAAE,CAAC;IAuIlC,CAAC;IAlIC,MAAM;QACJ,OAAO,IAAI,CAAA;4BACa,IAAI,CAAC,OAAO;gCACR,IAAI,CAAC,UAAU;;UAErC,IAAI,CAAC,WAAW,CAAC,GAAG,CACpB,MAAM,CAAC,EAAE,CACP,IAAI,CAAA;;uBAEO,GAAG,EAAE;YACZ,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,oBAAoB,EAAE;gBACpC,MAAM,EAAE,EAAE,MAAM,EAAE;gBAClB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CACH,CAAC;QACJ,CAAC;;;;6BAIc,MAAM,CAAC,IAAI;wBAChB,MAAM,CAAC,IAAI;;;iCAGF,CACxB;;KAEJ,CAAC;IACJ,CAAC;;AAhDM,0BAAc,GAAG;IACtB,WAAW,EAAE,QAAQ;IACrB,kBAAkB,EAAE,cAAc;IAClC,gBAAgB,EAAE,aAAa;CAChC,AAJoB,CAInB;AA8CK,kBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkGlB,AAlGY,CAkGX;AA3IF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACN;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACH;AAExB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;gDACM;AAGhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CACvB;AAlBR,WAAW;IADvB,SAAS,EAAE;GACC,WAAW,CAsJvB","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';\nimport { localized } from '@lit/localize';\n\nimport { OscdIcon } from '@omicronenergy/oscd-ui/icon/OscdIcon.js';\nimport { OscdTextButton } from '@omicronenergy/oscd-ui/button/OscdTextButton.js';\n\nimport { PluginEntry } from '../oscd-shell.js';\nimport { LocaleTag } from '../localization.js';\nimport { OscdElevation } from '@omicronenergy/oscd-ui/elevation/OscdElevation.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'landing-page': LandingPage;\n  }\n}\n@localized()\nexport class LandingPage extends ScopedElementsMixin(LitElement) {\n  static scopedElements = {\n    'oscd-icon': OscdIcon,\n    'oscd-text-button': OscdTextButton,\n    'oscd-elevation': OscdElevation,\n  };\n\n  /* Properties */\n\n  @property({ type: String })\n  heading: string = '';\n\n  @property({ type: String })\n  subHeading: string = '';\n  @property({ type: Array })\n  menuPlugins: PluginEntry[] = [];\n\n  @property({ type: String, reflect: true })\n  locale!: LocaleTag;\n\n  render() {\n    return html`\n      <h1 class=\"heading\">${this.heading}</h1>\n      <h2 class=\"sub-heading\">${this.subHeading}</h2>\n      <div class=\"menu-plugins-grid\">\n        ${this.menuPlugins.map(\n          plugin =>\n            html`<oscd-text-button\n              class=\"menu-plugin-item\"\n              @click=${() => {\n                this.dispatchEvent(\n                  new CustomEvent('menu-plugin-select', {\n                    detail: { plugin },\n                    bubbles: true,\n                    composed: true,\n                  }),\n                );\n              }}\n            >\n              <oscd-elevation></oscd-elevation>\n              <div class=\"menu-plugin-item-content\">\n                <oscd-icon>${plugin.icon}</oscd-icon>\n                <span>${plugin.name}</span>\n                <div class=\"menu-plugin-item-corner-wedge\"></div>\n              </div>\n            </oscd-text-button> `,\n        )}\n      </div>\n    `;\n  }\n\n  static styles = css`\n    .host {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      justify-content: center;\n      gap: 8px;\n    }\n\n    .heading {\n      color: var(--landing-heading-color);\n      text-align: center;\n      font-family: var(--landing-heading-font-family);\n      font-size: var(--landing-heading-size);\n      font-style: var(--landing-heading-style);\n      font-weight: var(--landing-heading-weight);\n      line-height: var(--landing-heading-line-height);\n\n      margin-block-start: 64px;\n      margin-block-end: 8px;\n\n      --md-icon-size: 50px;\n    }\n\n    .sub-heading {\n      color: var(--landing-subheading-color);\n      text-align: center;\n      font-family: var(--landing-subheading-font-family);\n      font-size: var(--landing-subheading-size);\n      font-style: var(--landing-subheading-style);\n      font-weight: var(--landing-subheading-weight);\n      line-height: var(--landing-subheading-line-height);\n\n      margin-block-end: 168px;\n    }\n\n    .menu-plugins-grid {\n      width: var(--landing-grid-width);\n      display: flex;\n      flex-wrap: wrap;\n      gap: var(--landing-grid-gap);\n      justify-content: center;\n      margin: 0 auto;\n      padding: 16px 0;\n    }\n\n    .menu-plugin-item {\n      --md-text-button-container-shape: var(--landing-card-radius);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      text-align: center;\n      padding: 8px;\n      color: var(--landing-card-text-color);\n      background: var(--landing-card-background);\n      transition: background-color 0.3s;\n      cursor: pointer;\n    }\n\n    .menu-plugin-item:hover {\n      --md-elevation-level: 2;\n    }\n\n    .menu-plugin-item-content {\n      color: var(--landing-card-text-color);\n      width: var(--landing-card-width);\n      height: var(--landing-card-height);\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: 24px;\n      font-family: var(--landing-heading-font-family);\n    }\n\n    .menu-plugin-item-content oscd-icon {\n      --md-icon-size: var(--landing-card-icon-size);\n    }\n\n    .menu-plugin-item-content span {\n      font-size: 16px;\n      font-style: normal;\n      font-weight: 500;\n      line-height: 22px; /* 135% */\n    }\n\n    .menu-plugin-item-corner-wedge {\n      position: absolute;\n      bottom: 0;\n      right: 0;\n      width: 50px;\n      height: 50px;\n      background: linear-gradient(\n        to top left,\n        var(--landing-card-corner-accent) 50%,\n        transparent 50%\n      );\n    }\n  `;\n}\n"]}

package/dist/menus/files-menu.js

@@ -62,11 +62,11 @@ FilesMenu.styles = css `
 
     :host oscd-text-button {
       --md-text-button-label-text-line-height: normal;
-      --md-text-button-label-text-family: 'Roboto';
-      --md-text-button-label-text-weight: 500;
-      --md-text-button-label-text-size: 18px;
+      --md-text-button-label-text-family: var(--file-menu-text-font-family);
+      --md-text-button-label-text-weight: var(--file-menu-text-weight);
+      --md-text-button-label-text-size: var(--file-menu-text-size);
       --md-text-button-label-text-style: normal;
-      --md-sys-color-primary: var(--oscd-base3);
+      --md-sys-color-primary: var(--file-menu-text-color);
       display: inline;
     }
 
@@ -75,12 +75,23 @@ FilesMenu.styles = css `
     }
 
     oscd-menu {
-      min-width: 350px;
-      padding: 12px;
+      min-width: var(--plugins-menu-min-width);
+      padding: var(--plugins-menu-padding);
+      --md-menu-container-color: var(--plugins-menu-container-color);
     }
 
     oscd-menu-item {
       width: 100%;
+      --md-menu-item-label-text-color: var(--plugins-menu-item-label-color);
+      --md-menu-item-leading-icon-color: var(
+        --plugins-menu-item-leading-icon-color
+      );
+      --md-menu-item-selected-container-color: var(
+        --plugins-menu-item-selected-container-color
+      );
+      --md-menu-item-selected-label-text-color: var(
+        --plugins-menu-item-selected-label-color
+      );
     }
   `;
 __decorate([

package/dist/menus/files-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"files-menu.js","sourceRoot":"","sources":["../../src/menus/files-menu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,yCAAyC,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,6CAA6C,CAAC;AAC3E,OAAO,EAAE,cAAc,EAAE,MAAM,iDAAiD,CAAC;AAU1E,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,mBAAmB,CAAC,UAAU,CAAC;IAAvD;;QAQL,gBAAgB;QAGhB,iBAAY,GAAa,EAAE,CAAC;IAkF9B,CAAC;IArEC,MAAM;QACJ,OAAO,IAAI,CAAA;;;mBAGI,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;;;YAG7B,IAAI,CAAC,eAAe;;;;;;;;;;;UAWtB,IAAI,CAAC,YAAY,CAAC,GAAG,CACrB,IAAI,CAAC,EAAE,CACL,IAAI,CAAA;uBACO,GAAG,EAAE;YACZ,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;gBACxB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE,EAAE,IAAI,EAAE;aACjB,CAAC,CACH,CAAC;QACJ,CAAC;0BACW,IAAI,CAAC,eAAe,KAAK,IAAI;iBACtC,IAAI;cACP,CACL;;KAEJ,CAAC;IACJ,CAAC;;AA3DM,wBAAc,GAAG;IACtB,kBAAkB,EAAE,cAAc;IAClC,WAAW,EAAE,QAAQ;IACrB,WAAW,EAAE,QAAQ;IACrB,gBAAgB,EAAE,YAAY;CAC/B,AALoB,CAKnB;AAwDK,gBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BlB,AA9BY,CA8BX;AAjFF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;+CACE;AAG5B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDACS;AAGpC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCACvB;AAKnB;IADC,KAAK,CAAC,WAAW,CAAC;uCACH;AAtBL,SAAS;IADrB,SAAS,EAAE;GACC,SAAS,CA6FrB","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';\nimport { localized } from '@lit/localize';\n\nimport { OscdIcon } from '@omicronenergy/oscd-ui/icon/OscdIcon.js';\nimport { OscdMenu } from '@omicronenergy/oscd-ui/menu/OscdMenu.js';\nimport { OscdMenuItem } from '@omicronenergy/oscd-ui/menu/OscdMenuItem.js';\nimport { OscdTextButton } from '@omicronenergy/oscd-ui/button/OscdTextButton.js';\n\nimport { LocaleTag } from '../localization.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'files-menu': FilesMenu;\n  }\n}\n@localized()\nexport class FilesMenu extends ScopedElementsMixin(LitElement) {\n  static scopedElements = {\n    'oscd-text-button': OscdTextButton,\n    'oscd-icon': OscdIcon,\n    'oscd-menu': OscdMenu,\n    'oscd-menu-item': OscdMenuItem,\n  };\n\n  /* Properties */\n\n  @property({ type: Array })\n  editableDocs: string[] = [];\n\n  @property({ type: String })\n  selectedDocName: string | undefined;\n\n  @property({ type: String, reflect: true })\n  locale!: LocaleTag;\n\n  /* Queries */\n\n  @query('#fileMenu')\n  menu!: OscdMenu;\n\n  render() {\n    return html`\n      <oscd-text-button\n          id=\"fileMenuButton\"\n          @click=${() => this.menu.show()}\n          trailing-icon\n          >\n          ${this.selectedDocName}\n          <oscd-icon slot=\"icon\">code</oscd-icon></oscd-filled-icon-button\n        >\n      </oscd-text-button>\n\n      <oscd-menu\n        fixed\n        id=\"fileMenu\"\n        anchor=\"fileMenuButton\"\n        corner=\"BOTTOM_END\"\n      >\n        ${this.editableDocs.map(\n          name =>\n            html`<oscd-menu-item\n              @click=${() => {\n                this.dispatchEvent(\n                  new CustomEvent('change', {\n                    bubbles: true,\n                    composed: true,\n                    detail: { name },\n                  }),\n                );\n              }}\n              ?selected=${this.selectedDocName === name}\n              >${name}</oscd-menu-item\n            >`,\n        )}\n      </oscd-menu>\n    `;\n  }\n\n  static styles = css`\n    :host {\n      position: relative;\n      display: flex;\n      align-items: center;\n      gap: 4px;\n    }\n\n    :host oscd-text-button {\n      --md-text-button-label-text-line-height: normal;\n      --md-text-button-label-text-family: 'Roboto';\n      --md-text-button-label-text-weight: 500;\n      --md-text-button-label-text-size: 18px;\n      --md-text-button-label-text-style: normal;\n      --md-sys-color-primary: var(--oscd-base3);\n      display: inline;\n    }\n\n    :host oscd-text-button oscd-icon {\n      transform: rotate(90deg);\n    }\n\n    oscd-menu {\n      min-width: 350px;\n      padding: 12px;\n    }\n\n    oscd-menu-item {\n      width: 100%;\n    }\n  `;\n}\n"]}
+{"version":3,"file":"files-menu.js","sourceRoot":"","sources":["../../src/menus/files-menu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,yCAAyC,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,6CAA6C,CAAC;AAC3E,OAAO,EAAE,cAAc,EAAE,MAAM,iDAAiD,CAAC;AAU1E,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,mBAAmB,CAAC,UAAU,CAAC;IAAvD;;QAQL,gBAAgB;QAGhB,iBAAY,GAAa,EAAE,CAAC;IA6F9B,CAAC;IAhFC,MAAM;QACJ,OAAO,IAAI,CAAA;;;mBAGI,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;;;YAG7B,IAAI,CAAC,eAAe;;;;;;;;;;;UAWtB,IAAI,CAAC,YAAY,CAAC,GAAG,CACrB,IAAI,CAAC,EAAE,CACL,IAAI,CAAA;uBACO,GAAG,EAAE;YACZ,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;gBACxB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE,EAAE,IAAI,EAAE;aACjB,CAAC,CACH,CAAC;QACJ,CAAC;0BACW,IAAI,CAAC,eAAe,KAAK,IAAI;iBACtC,IAAI;cACP,CACL;;KAEJ,CAAC;IACJ,CAAC;;AA3DM,wBAAc,GAAG;IACtB,kBAAkB,EAAE,cAAc;IAClC,WAAW,EAAE,QAAQ;IACrB,WAAW,EAAE,QAAQ;IACrB,gBAAgB,EAAE,YAAY;CAC/B,AALoB,CAKnB;AAwDK,gBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyClB,AAzCY,CAyCX;AA5FF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;+CACE;AAG5B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDACS;AAGpC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCACvB;AAKnB;IADC,KAAK,CAAC,WAAW,CAAC;uCACH;AAtBL,SAAS;IADrB,SAAS,EAAE;GACC,SAAS,CAwGrB","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';\nimport { localized } from '@lit/localize';\n\nimport { OscdIcon } from '@omicronenergy/oscd-ui/icon/OscdIcon.js';\nimport { OscdMenu } from '@omicronenergy/oscd-ui/menu/OscdMenu.js';\nimport { OscdMenuItem } from '@omicronenergy/oscd-ui/menu/OscdMenuItem.js';\nimport { OscdTextButton } from '@omicronenergy/oscd-ui/button/OscdTextButton.js';\n\nimport { LocaleTag } from '../localization.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'files-menu': FilesMenu;\n  }\n}\n@localized()\nexport class FilesMenu extends ScopedElementsMixin(LitElement) {\n  static scopedElements = {\n    'oscd-text-button': OscdTextButton,\n    'oscd-icon': OscdIcon,\n    'oscd-menu': OscdMenu,\n    'oscd-menu-item': OscdMenuItem,\n  };\n\n  /* Properties */\n\n  @property({ type: Array })\n  editableDocs: string[] = [];\n\n  @property({ type: String })\n  selectedDocName: string | undefined;\n\n  @property({ type: String, reflect: true })\n  locale!: LocaleTag;\n\n  /* Queries */\n\n  @query('#fileMenu')\n  menu!: OscdMenu;\n\n  render() {\n    return html`\n      <oscd-text-button\n          id=\"fileMenuButton\"\n          @click=${() => this.menu.show()}\n          trailing-icon\n          >\n          ${this.selectedDocName}\n          <oscd-icon slot=\"icon\">code</oscd-icon></oscd-filled-icon-button\n        >\n      </oscd-text-button>\n\n      <oscd-menu\n        fixed\n        id=\"fileMenu\"\n        anchor=\"fileMenuButton\"\n        corner=\"BOTTOM_END\"\n      >\n        ${this.editableDocs.map(\n          name =>\n            html`<oscd-menu-item\n              @click=${() => {\n                this.dispatchEvent(\n                  new CustomEvent('change', {\n                    bubbles: true,\n                    composed: true,\n                    detail: { name },\n                  }),\n                );\n              }}\n              ?selected=${this.selectedDocName === name}\n              >${name}</oscd-menu-item\n            >`,\n        )}\n      </oscd-menu>\n    `;\n  }\n\n  static styles = css`\n    :host {\n      position: relative;\n      display: flex;\n      align-items: center;\n      gap: 4px;\n    }\n\n    :host oscd-text-button {\n      --md-text-button-label-text-line-height: normal;\n      --md-text-button-label-text-family: var(--file-menu-text-font-family);\n      --md-text-button-label-text-weight: var(--file-menu-text-weight);\n      --md-text-button-label-text-size: var(--file-menu-text-size);\n      --md-text-button-label-text-style: normal;\n      --md-sys-color-primary: var(--file-menu-text-color);\n      display: inline;\n    }\n\n    :host oscd-text-button oscd-icon {\n      transform: rotate(90deg);\n    }\n\n    oscd-menu {\n      min-width: var(--plugins-menu-min-width);\n      padding: var(--plugins-menu-padding);\n      --md-menu-container-color: var(--plugins-menu-container-color);\n    }\n\n    oscd-menu-item {\n      width: 100%;\n      --md-menu-item-label-text-color: var(--plugins-menu-item-label-color);\n      --md-menu-item-leading-icon-color: var(\n        --plugins-menu-item-leading-icon-color\n      );\n      --md-menu-item-selected-container-color: var(\n        --plugins-menu-item-selected-container-color\n      );\n      --md-menu-item-selected-label-text-color: var(\n        --plugins-menu-item-selected-label-color\n      );\n    }\n  `;\n}\n"]}

package/dist/menus/plugins-menu.js

@@ -79,25 +79,38 @@ PluginsMenu.styles = css `
     }
 
     img {
-      height: 34.4px;
-      width: auto;
+      height: var(--app-bar-app-icon-height);
+      width: var(--app-bar-app-icon-width);
     }
 
     :host h1.app-title {
-      font-family: Roboto;
-      font-size: 22.114px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: normal;
+      font-family: var(--app-bar-title-text-font-family);
+      font-size: var(--app-bar-title-text-font-size);
+      font-style: var(--app-bar-title-text-font-style);
+      font-weight: var(--app-bar-title-text-font-weight);
+      line-height: var(--app-bar-title-text-line-height);
+      letter-spacing: var(--app-bar-title-text-letter-spacing);
+      color: var(--app-bar-title-text-color);
       display: inline;
     }
     oscd-menu {
-      min-width: 350px;
-      padding: 12px;
+      min-width: var(--plugins-menu-min-width);
+      padding: var(--plugins-menu-padding);
+      --md-menu-container-color: var(--plugins-menu-container-color);
     }
 
     oscd-menu-item {
       width: 100%;
+      --md-menu-item-label-text-color: var(--plugins-menu-item-label-color);
+      --md-menu-item-leading-icon-color: var(
+        --plugins-menu-item-leading-icon-color
+      );
+      --md-menu-item-selected-container-color: var(
+        --plugins-menu-item-selected-container-color
+      );
+      --md-menu-item-selected-label-text-color: var(
+        --plugins-menu-item-selected-label-color
+      );
     }
   `;
 __decorate([

package/dist/menus/plugins-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"plugins-menu.js","sourceRoot":"","sources":["../../src/menus/plugins-menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';\nimport { localized, msg } from '@lit/localize';\n\nimport { OscdFilledIconButton } from '@omicronenergy/oscd-ui/iconbutton/OscdFilledIconButton.js';\nimport { OscdIcon } from '@omicronenergy/oscd-ui/icon/OscdIcon.js';\nimport { OscdMenu } from '@omicronenergy/oscd-ui/menu/OscdMenu.js';\nimport { OscdMenuItem } from '@omicronenergy/oscd-ui/menu/OscdMenuItem.js';\n\nimport { LocaleTag, Translation } from '../localization.js';\nimport { PluginEntry } from '../oscd-shell.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'plugin-menu': PluginsMenu;\n  }\n}\n\n@localized()\nexport class PluginsMenu extends ScopedElementsMixin(LitElement) {\n  static scopedElements = {\n    'oscd-filled-icon-button': OscdFilledIconButton,\n    'oscd-icon': OscdIcon,\n    'oscd-menu': OscdMenu,\n    'oscd-menu-item': OscdMenuItem,\n  };\n\n  /* Properties */\n  @property({ type: Array })\n  editableDocs: string[] = [];\n\n  @property({ type: Array })\n  menuPlugins: PluginEntry[] = [];\n\n  @property({ type: String })\n  appIcon!: string;\n\n  @property({ type: String })\n  appTitle!: string;\n\n  @property({ type: String, reflect: true })\n  locale!: LocaleTag;\n\n  @property({ type: String, reflect: true })\n  open = () => {\n    this.menu.show();\n  };\n\n  /* Queries */\n  @query('oscd-menu')\n  menu!: OscdMenu;\n\n  renderMenuItem(plugin: PluginEntry, disabled: boolean) {\n    return html`\n      <oscd-menu-item\n        .disabled=${disabled}\n        @click=${() => {\n          this.dispatchEvent(\n            new CustomEvent('menu-plugin-select', {\n              detail: { plugin },\n              bubbles: true,\n              composed: true,\n            }),\n          );\n          this.menu.close();\n        }}\n      >\n        <oscd-icon slot=\"start\">${plugin.icon}</oscd-icon>\n        <div slot=\"headline\">\n          ${plugin.translations?.[this.locale as Translation] || plugin.name}\n        </div>\n      </oscd-menu-item>\n    `;\n  }\n\n  render() {\n    return html`\n      ${this.appIcon ? html`<img src=${this.appIcon} alt=\"logo\" />` : nothing}\n      <h1 class=\"app-title\">${this.appTitle}</h1>\n      <oscd-filled-icon-button\n        id=\"menu-button\"\n        aria-label=\"${msg('Menu')}\"\n        @click=${async () => {\n          if (this.menu.open) {\n            this.menu.close();\n          } else {\n            this.menu.show();\n          }\n        }}\n        ><oscd-icon>arrow_drop_down_circle</oscd-icon></oscd-filled-icon-button\n      >\n      <oscd-menu\n        quick\n        anchor=\"menu-button\"\n        menuCorner=\"START_END\"\n        anchorCorner=\"START_END\"\n      >\n        ${this.menuPlugins.map(plugin =>\n          this.renderMenuItem(\n            plugin,\n            !!(plugin.requireDoc && (this.editableDocs ?? []).length === 0),\n          ),\n        )}\n      </oscd-menu>\n    `;\n  }\n\n  static styles = css`\n    :host {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n    }\n\n    img {\n      height: 34.4px;\n      width: auto;\n    }\n\n    :host h1.app-title {\n      font-family: Roboto;\n      font-size: 22.114px;\n      font-style: normal;\n      font-weight: 400;\n      line-height: normal;\n      display: inline;\n    }\n    oscd-menu {\n      min-width: 350px;\n      padding: 12px;\n    }\n\n    oscd-menu-item {\n      width: 100%;\n    }\n  `;\n}\n"]}
+{"version":3,"file":"plugins-menu.js","sourceRoot":"","sources":["../../src/menus/plugins-menu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,yCAAyC,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,2DAA2D,CAAC;AACjG,OAAO,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,6CAA6C,CAAC;AAYpE,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,mBAAmB,CAAC,UAAU,CAAC;IAAzD;;QAQL,gBAAgB;QAEhB,iBAAY,GAAa,EAAE,CAAC;QAG5B,gBAAW,GAAkB,EAAE,CAAC;QAYhC,SAAI,GAAG,GAAG,EAAE;YACV,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;QACnB,CAAC,CAAC;IAuGJ,CAAC;IAjGC,cAAc,CAAC,MAAmB,EAAE,QAAiB;QACnD,OAAO,IAAI,CAAA;;oBAEK,QAAQ;iBACX,GAAG,EAAE;YACZ,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,oBAAoB,EAAE;gBACpC,MAAM,EAAE,EAAE,MAAM,EAAE;gBAClB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CACH,CAAC;YACF,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;QACpB,CAAC;;kCAEyB,MAAM,CAAC,IAAI;;YAEjC,MAAM,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,MAAqB,CAAC,IAAI,MAAM,CAAC,IAAI;;;KAGvE,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA,YAAY,IAAI,CAAC,OAAO,gBAAgB,CAAC,CAAC,CAAC,OAAO;8BAC/C,IAAI,CAAC,QAAQ;;;sBAGrB,GAAG,CAAC,MAAM,CAAC;iBAChB,KAAK,IAAI,EAAE;YAClB,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;gBACnB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YACpB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACnB,CAAC;QACH,CAAC;;;;;;;;;UASC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAC9B,IAAI,CAAC,cAAc,CACjB,MAAM,EACN,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,CAChE,CACF;;KAEJ,CAAC;IACJ,CAAC;;AArFM,0BAAc,GAAG;IACtB,yBAAyB,EAAE,oBAAoB;IAC/C,WAAW,EAAE,QAAQ;IACrB,WAAW,EAAE,QAAQ;IACrB,gBAAgB,EAAE,YAAY;CAC/B,AALoB,CAKnB;AAkFK,kBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyClB,AAzCY,CAyCX;AAvHF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;iDACE;AAG5B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;gDACM;AAGhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACV;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACT;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CACvB;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAGxC;AAIF;IADC,KAAK,CAAC,WAAW,CAAC;yCACH;AA/BL,WAAW;IADvB,SAAS,EAAE;GACC,WAAW,CAkIvB","sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';\nimport { localized, msg } from '@lit/localize';\n\nimport { OscdFilledIconButton } from '@omicronenergy/oscd-ui/iconbutton/OscdFilledIconButton.js';\nimport { OscdIcon } from '@omicronenergy/oscd-ui/icon/OscdIcon.js';\nimport { OscdMenu } from '@omicronenergy/oscd-ui/menu/OscdMenu.js';\nimport { OscdMenuItem } from '@omicronenergy/oscd-ui/menu/OscdMenuItem.js';\n\nimport { LocaleTag, Translation } from '../localization.js';\nimport { PluginEntry } from '../oscd-shell.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'plugin-menu': PluginsMenu;\n  }\n}\n\n@localized()\nexport class PluginsMenu extends ScopedElementsMixin(LitElement) {\n  static scopedElements = {\n    'oscd-filled-icon-button': OscdFilledIconButton,\n    'oscd-icon': OscdIcon,\n    'oscd-menu': OscdMenu,\n    'oscd-menu-item': OscdMenuItem,\n  };\n\n  /* Properties */\n  @property({ type: Array })\n  editableDocs: string[] = [];\n\n  @property({ type: Array })\n  menuPlugins: PluginEntry[] = [];\n\n  @property({ type: String })\n  appIcon!: string;\n\n  @property({ type: String })\n  appTitle!: string;\n\n  @property({ type: String, reflect: true })\n  locale!: LocaleTag;\n\n  @property({ type: String, reflect: true })\n  open = () => {\n    this.menu.show();\n  };\n\n  /* Queries */\n  @query('oscd-menu')\n  menu!: OscdMenu;\n\n  renderMenuItem(plugin: PluginEntry, disabled: boolean) {\n    return html`\n      <oscd-menu-item\n        .disabled=${disabled}\n        @click=${() => {\n          this.dispatchEvent(\n            new CustomEvent('menu-plugin-select', {\n              detail: { plugin },\n              bubbles: true,\n              composed: true,\n            }),\n          );\n          this.menu.close();\n        }}\n      >\n        <oscd-icon slot=\"start\">${plugin.icon}</oscd-icon>\n        <div slot=\"headline\">\n          ${plugin.translations?.[this.locale as Translation] || plugin.name}\n        </div>\n      </oscd-menu-item>\n    `;\n  }\n\n  render() {\n    return html`\n      ${this.appIcon ? html`<img src=${this.appIcon} alt=\"logo\" />` : nothing}\n      <h1 class=\"app-title\">${this.appTitle}</h1>\n      <oscd-filled-icon-button\n        id=\"menu-button\"\n        aria-label=\"${msg('Menu')}\"\n        @click=${async () => {\n          if (this.menu.open) {\n            this.menu.close();\n          } else {\n            this.menu.show();\n          }\n        }}\n        ><oscd-icon>arrow_drop_down_circle</oscd-icon></oscd-filled-icon-button\n      >\n      <oscd-menu\n        quick\n        anchor=\"menu-button\"\n        menuCorner=\"START_END\"\n        anchorCorner=\"START_END\"\n      >\n        ${this.menuPlugins.map(plugin =>\n          this.renderMenuItem(\n            plugin,\n            !!(plugin.requireDoc && (this.editableDocs ?? []).length === 0),\n          ),\n        )}\n      </oscd-menu>\n    `;\n  }\n\n  static styles = css`\n    :host {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n    }\n\n    img {\n      height: var(--app-bar-app-icon-height);\n      width: var(--app-bar-app-icon-width);\n    }\n\n    :host h1.app-title {\n      font-family: var(--app-bar-title-text-font-family);\n      font-size: var(--app-bar-title-text-font-size);\n      font-style: var(--app-bar-title-text-font-style);\n      font-weight: var(--app-bar-title-text-font-weight);\n      line-height: var(--app-bar-title-text-line-height);\n      letter-spacing: var(--app-bar-title-text-letter-spacing);\n      color: var(--app-bar-title-text-color);\n      display: inline;\n    }\n    oscd-menu {\n      min-width: var(--plugins-menu-min-width);\n      padding: var(--plugins-menu-padding);\n      --md-menu-container-color: var(--plugins-menu-container-color);\n    }\n\n    oscd-menu-item {\n      width: 100%;\n      --md-menu-item-label-text-color: var(--plugins-menu-item-label-color);\n      --md-menu-item-leading-icon-color: var(\n        --plugins-menu-item-leading-icon-color\n      );\n      --md-menu-item-selected-container-color: var(\n        --plugins-menu-item-selected-container-color\n      );\n      --md-menu-item-selected-label-text-color: var(\n        --plugins-menu-item-selected-label-color\n      );\n    }\n  `;\n}\n"]}

package/dist/oscd-shell-design-tokens.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Single source of truth for oscd-shell design tokens.
+ *
+ * This block contains:
+ * 1) Internal base tokens and fallbacks
+ * 2) Public token -> internal token mappings
+ *
+ * Keep this as an all-or-nothing layer so mappings can safely reference
+ * internal base tokens (e.g. --oscd-base*).
+ */
+export declare const oscdShellDesignTokens: import("lit").CSSResult;

package/dist/oscd-shell-design-tokens.js

@@ -0,0 +1,312 @@
+import { css } from 'lit';
+/**
+ * Single source of truth for oscd-shell design tokens.
+ *
+ * This block contains:
+ * 1) Internal base tokens and fallbacks
+ * 2) Public token -> internal token mappings
+ *
+ * Keep this as an all-or-nothing layer so mappings can safely reference
+ * internal base tokens (e.g. --oscd-base*).
+ */
+export const oscdShellDesignTokens = css `
+  /* Internal base theme tokens and defaults */
+  * {
+    --oscd-primary: var(--oscd-theme-primary, #0b335b);
+    --oscd-secondary: var(--oscd-theme-secondary, #2485e5);
+    --oscd-base03: var(--oscd-theme-base03, #121417);
+    --oscd-base02: var(--oscd-theme-base02, #1a1e23);
+    --oscd-base01: var(--oscd-theme-base01, #3d4651);
+    --oscd-base00: var(--oscd-theme-base00, #46505d);
+    --oscd-base0: var(--oscd-theme-base0, #8b97a7);
+    --oscd-base1: var(--oscd-theme-base1, #96a1b0);
+    --oscd-base2: var(--oscd-theme-base2, #f3f5f6);
+    --oscd-base3: var(--oscd-theme-base3, white);
+    --oscd-error: var(--oscd-theme-error, #dc322f);
+    --oscd-warning: var(--oscd-theme-warning, #b58900);
+    --oscd-text-font: var(--oscd-theme-text-font, 'Roboto');
+    --oscd-text-font-mono: var(--oscd-theme-text-font-mono, 'Roboto Mono');
+    --oscd-icon-font: var(--oscd-theme-icon-font, 'Material Symbols Outlined');
+
+    /* Fallbacks for Material Design variables */
+    --md-sys-color-primary: var(--oscd-primary);
+    --md-sys-color-on-primary: var(--oscd-base3);
+    --md-sys-color-secondary: var(--oscd-secondary);
+    --md-sys-color-on-secondary: var(--oscd-base3);
+    --md-sys-color-secondary-container: var(--oscd-base2);
+    --md-sys-color-surface: var(--oscd-base3);
+    --md-sys-color-on-surface: var(--oscd-base00);
+    --md-sys-color-surface-variant: var(--oscd-base3);
+    --md-sys-color-on-surface-variant: var(--oscd-base00);
+    --md-sys-color-surface-bright: var(--oscd-base2);
+    --md-sys-color-surface-container: var(--oscd-base3);
+    --md-sys-color-surface-container-high: var(--oscd-base3);
+    --md-sys-color-surface-container-highest: var(--oscd-base3);
+    --md-sys-color-outline-variant: var(--oscd-primary);
+    --md-sys-color-scrim: #000000;
+    --md-sys-color-error: var(--oscd-error);
+    --md-sys-color-on-error: var(--oscd-base3);
+    --md-icon-button-disabled-icon-color: var(--oscd-base3);
+    /* --md-menu-item-selected-label-text-color: var(--oscd-base01); */
+    --md-icon-button-disabled-icon-color: var(--oscd-base3);
+
+    /* MDC Theme Colors
+     * Needed for supporting any pluggins still using the depricated MWC Components
+     */
+    --mdc-theme-primary: var(--oscd-primary);
+    --mdc-theme-secondary: var(--oscd-secondary);
+    --mdc-theme-background: var(--oscd-base3);
+    --mdc-theme-surface: var(--oscd-base3);
+    --mdc-theme-on-primary: var(--oscd-base2);
+    --mdc-theme-on-secondary: var(--oscd-base2);
+    --mdc-theme-on-background: var(--oscd-base00);
+    --mdc-theme-on-surface: var(--oscd-base00);
+    --mdc-theme-text-primary-on-background: var(--oscd-base01);
+    --mdc-theme-text-secondary-on-background: var(--oscd-base00);
+    --mdc-theme-text-icon-on-background: var(--oscd-base00);
+    --mdc-theme-error: var(--oscd-error);
+    --mdc-button-disabled-ink-color: var(--oscd-base1);
+    --mdc-drawer-heading-ink-color: var(--oscd-base00);
+    --mdc-dialog-heading-ink-color: var(--oscd-base00);
+    --mdc-text-field-fill-color: var(--oscd-base2);
+    --mdc-text-field-disabled-fill-color: var(--oscd-base3);
+    --mdc-text-field-ink-color: var(--oscd-base00);
+    --mdc-text-field-label-ink-color: var(--oscd-base00);
+    --mdc-text-field-idle-line-color: var(--oscd-base00);
+    --mdc-text-field-hover-line-color: var(--oscd-base02);
+    --mdc-select-fill-color: var(--oscd-base2);
+    --mdc-select-disabled-fill-color: var(--oscd-base3);
+    --mdc-select-ink-color: var(--oscd-base00);
+    --mdc-select-label-ink-color: var(--oscd-base00);
+    --mdc-select-idle-line-color: var(--oscd-base00);
+    --mdc-select-hover-line-color: var(--oscd-base02);
+    --mdc-select-dropdown-icon-color: var(--oscd-base01);
+    --mdc-typography-font-family: var(--oscd-text-font);
+    --mdc-icon-font: var(--oscd-icon-font);
+    --mdc-theme-text-disabled-on-light: rgba(255, 255, 255, 0.38);
+  }
+
+  * {
+    --app-bar-height: 54px;
+    --side-panel-width: 280px;
+
+    --md-sys-color-primary: var(--oscd-primary);
+    --md-sys-color-on-primary: var(--oscd-base3);
+
+    --md-sys-color-secondary-container: var(--oscd-base2);
+
+    --md-sys-color-surface: var(--oscd-base3);
+    --md-sys-color-on-surface: var(--oscd-base00);
+  }
+
+  /*
+   * Public token -> internal token mappings
+   *
+   * Example pattern:
+   * --internal-variable-name: var(--oscd-shell-public-token, <default>);
+   */
+  * {
+    /* App bar */
+    --app-bar-color: var(--oscd-shell-app-bar-color, var(--oscd-base3));
+    --app-bar-background-color: var(
+      --oscd-shell-app-bar-background-color,
+      var(--oscd-primary)
+    );
+    --app-bar-height: var(--oscd-shell-app-bar-height, 54px);
+    --app-bar-small-height: var(--oscd-shell-app-bar-small-height, 48px);
+    --app-bar-elevation: var(
+      --oscd-shell-app-bar-elevation,
+      var(--md-sys-elevation-level-2)
+    );
+    --app-bar-app-icon-height: var(--oscd-shell-app-bar-icon-height, 34.4px);
+    --app-bar-app-icon-width: var(--oscd-shell-app-bar-icon-width, auto);
+    --app-bar-title-text-font-family: var(
+      --oscd-shell-app-bar-title-font-family,
+      var(--oscd-text-font)
+    );
+    --app-bar-title-text-color: var(
+      --oscd-shell-app-bar-title-color,
+      var(--app-bar-color)
+    );
+    --app-bar-title-text-font-size: var(
+      --oscd-shell-app-bar-title-font-size,
+      22.114px
+    );
+    --app-bar-title-text-font-weight: var(
+      --oscd-shell-app-bar-title-font-weight,
+      400
+    );
+    --app-bar-title-text-font-style: var(
+      --oscd-shell-app-bar-title-font-style,
+      normal
+    );
+    --app-bar-title-text-line-height: var(
+      --oscd-shell-app-bar-title-line-height,
+      normal
+    );
+    --app-bar-title-text-letter-spacing: var(
+      --oscd-shell-app-bar-title-letter-spacing,
+      inherit
+    );
+    --app-bar-action-icon-size: var(
+      --oscd-shell-app-bar-action-icon-size,
+      24px
+    );
+    --app-bar-action-icon-color: var(
+      --oscd-shell-app-bar-action-icon-color,
+      var(--md-sys-color-on-primary)
+    );
+
+    /* Bridge to oscd-ui app bar tokens */
+    --oscd-app-bar-color: var(--app-bar-color);
+    --oscd-app-bar-background-color: var(--app-bar-background-color);
+    --oscd-app-bar-elevation: var(--app-bar-elevation);
+    --oscd-app-bar-title-font-family: var(--app-bar-title-text-font-family);
+    --oscd-app-bar-title-font-size: var(--app-bar-title-text-font-size);
+    --oscd-app-bar-title-font-weight: var(--app-bar-title-text-font-weight);
+    --oscd-app-bar-title-line-height: var(--app-bar-title-text-line-height);
+
+    /* Files menu */
+    --file-menu-text-font-family: var(
+      --oscd-shell-file-menu-text-font-family,
+      var(--oscd-text-font)
+    );
+    --file-menu-text-size: var(--oscd-shell-file-menu-text-size, 18px);
+    --file-menu-text-weight: var(--oscd-shell-file-menu-text-weight, 500);
+    --file-menu-text-color: var(
+      --oscd-shell-file-menu-text-color,
+      var(--oscd-base3)
+    );
+
+    /* Plugins menu */
+    --plugins-menu-min-width: var(--oscd-shell-plugins-menu-min-width, 350px);
+    --plugins-menu-padding: var(--oscd-shell-plugins-menu-padding, 12px);
+    --plugins-menu-container-color: var(
+      --oscd-shell-plugins-menu-container-color,
+      var(--oscd-base3)
+    );
+    --plugins-menu-item-label-color: var(
+      --oscd-shell-plugins-menu-item-label-color,
+      var(--oscd-base00)
+    );
+    --plugins-menu-item-leading-icon-color: var(
+      --oscd-shell-plugins-menu-item-leading-icon-color,
+      var(--oscd-base00)
+    );
+    --plugins-menu-item-selected-container-color: var(
+      --oscd-shell-plugins-menu-item-selected-container-color,
+      var(--oscd-base2)
+    );
+    --plugins-menu-item-selected-label-color: var(
+      --oscd-shell-plugins-menu-item-selected-label-color,
+      var(--oscd-base00)
+    );
+
+    /* Editor plugins panel */
+    --editor-plugins-panel-width: var(
+      --oscd-shell-editor-plugins-panel-width,
+      280px
+    );
+    --editor-plugins-panel-collapsed-width: var(
+      --oscd-shell-editor-plugins-panel-width,
+      280px
+    );
+    --editor-plugins-panel-padding-top: var(
+      --oscd-shell-editor-plugins-panel-padding-top,
+      20px
+    );
+    --editor-plugins-panel-item-leading-space: var(
+      --oscd-shell-editor-plugins-panel-item-leading-space,
+      22px
+    );
+    --editor-plugins-panel-item-trailing-space: var(
+      --oscd-shell-editor-plugins-panel-item-trailing-space,
+      10px
+    );
+    --editor-plugins-panel-item-icon-size: var(
+      --oscd-shell-editor-plugins-panel-item-icon-size,
+      28px
+    );
+    --editor-plugins-panel-item-text-color: var(
+      --oscd-shell-editor-plugins-panel-item-text-color,
+      var(--oscd-base3)
+    );
+    --editor-plugins-panel-item-icon-color: var(
+      --oscd-shell-editor-plugins-panel-item-icon-color,
+      var(--oscd-base3)
+    );
+    --editor-plugins-panel-item-active-bg: var(
+      --oscd-shell-editor-plugins-panel-item-active-bg,
+      var(--oscd-primary)
+    );
+    --side-panel-width: var(--editor-plugins-panel-width);
+
+    /* Main editor container */
+    --editor-background-color: var(
+      --oscd-shell-editor-background-color,
+      var(--oscd-base3)
+    );
+    --editor-padding: var(--oscd-shell-editor-padding, 8px);
+
+    /* Landing page */
+    --landing-heading-color: var(
+      --oscd-shell-landing-heading-color,
+      var(--oscd-base3)
+    );
+    --landing-heading-font-family: var(
+      --oscd-shell-landing-heading-font-family,
+      var(--oscd-text-font)
+    );
+    --landing-heading-size: var(--oscd-shell-landing-heading-size, 50px);
+    --landing-heading-style: var(--oscd-shell-landing-heading-style, normal);
+    --landing-heading-weight: var(--oscd-shell-landing-heading-weight, 600);
+    --landing-heading-line-height: var(
+      --oscd-shell-landing-heading-line-height,
+      normal
+    );
+
+    --landing-subheading-color: var(
+      --oscd-shell-landing-subheading-color,
+      var(--oscd-base3)
+    );
+    --landing-subheading-font-family: var(
+      --oscd-shell-landing-subheading-font-family,
+      var(--oscd-text-font)
+    );
+    --landing-subheading-size: var(
+      --oscd-shell-landing-subheading-size,
+      16.909px
+    );
+    --landing-subheading-style: var(
+      --oscd-shell-landing-subheading-style,
+      normal
+    );
+    --landing-subheading-weight: var(
+      --oscd-shell-landing-subheading-weight,
+      400
+    );
+    --landing-subheading-line-height: var(
+      --oscd-shell-landing-subheading-line-height,
+      65.194px
+    );
+    --landing-grid-width: var(--oscd-shell-landing-grid-width, 60%);
+    --landing-grid-gap: var(--oscd-shell-landing-grid-gap, 95px);
+    --landing-card-width: var(--oscd-shell-landing-card-width, 240px);
+    --landing-card-height: var(--oscd-shell-landing-card-height, 180px);
+    --landing-card-background: var(
+      --oscd-shell-landing-card-background,
+      var(--oscd-primary)
+    );
+    --landing-card-text-color: var(
+      --oscd-shell-landing-card-text-color,
+      var(--oscd-base3)
+    );
+    --landing-card-radius: var(--oscd-shell-landing-card-radius, 2px);
+    --landing-card-icon-size: var(--oscd-shell-landing-card-icon-size, 54px);
+    --landing-card-corner-accent: var(
+      --oscd-shell-landing-card-corner-accent,
+      var(--omicron-yellow)
+    );
+  }
+`;
+//# sourceMappingURL=oscd-shell-design-tokens.js.map

package/dist/oscd-shell-design-tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"oscd-shell-design-tokens.js","sourceRoot":"","sources":["../src/oscd-shell-design-tokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2SvC,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Single source of truth for oscd-shell design tokens.\n *\n * This block contains:\n * 1) Internal base tokens and fallbacks\n * 2) Public token -> internal token mappings\n *\n * Keep this as an all-or-nothing layer so mappings can safely reference\n * internal base tokens (e.g. --oscd-base*).\n */\nexport const oscdShellDesignTokens = css`\n  /* Internal base theme tokens and defaults */\n  * {\n    --oscd-primary: var(--oscd-theme-primary, #0b335b);\n    --oscd-secondary: var(--oscd-theme-secondary, #2485e5);\n    --oscd-base03: var(--oscd-theme-base03, #121417);\n    --oscd-base02: var(--oscd-theme-base02, #1a1e23);\n    --oscd-base01: var(--oscd-theme-base01, #3d4651);\n    --oscd-base00: var(--oscd-theme-base00, #46505d);\n    --oscd-base0: var(--oscd-theme-base0, #8b97a7);\n    --oscd-base1: var(--oscd-theme-base1, #96a1b0);\n    --oscd-base2: var(--oscd-theme-base2, #f3f5f6);\n    --oscd-base3: var(--oscd-theme-base3, white);\n    --oscd-error: var(--oscd-theme-error, #dc322f);\n    --oscd-warning: var(--oscd-theme-warning, #b58900);\n    --oscd-text-font: var(--oscd-theme-text-font, 'Roboto');\n    --oscd-text-font-mono: var(--oscd-theme-text-font-mono, 'Roboto Mono');\n    --oscd-icon-font: var(--oscd-theme-icon-font, 'Material Symbols Outlined');\n\n    /* Fallbacks for Material Design variables */\n    --md-sys-color-primary: var(--oscd-primary);\n    --md-sys-color-on-primary: var(--oscd-base3);\n    --md-sys-color-secondary: var(--oscd-secondary);\n    --md-sys-color-on-secondary: var(--oscd-base3);\n    --md-sys-color-secondary-container: var(--oscd-base2);\n    --md-sys-color-surface: var(--oscd-base3);\n    --md-sys-color-on-surface: var(--oscd-base00);\n    --md-sys-color-surface-variant: var(--oscd-base3);\n    --md-sys-color-on-surface-variant: var(--oscd-base00);\n    --md-sys-color-surface-bright: var(--oscd-base2);\n    --md-sys-color-surface-container: var(--oscd-base3);\n    --md-sys-color-surface-container-high: var(--oscd-base3);\n    --md-sys-color-surface-container-highest: var(--oscd-base3);\n    --md-sys-color-outline-variant: var(--oscd-primary);\n    --md-sys-color-scrim: #000000;\n    --md-sys-color-error: var(--oscd-error);\n    --md-sys-color-on-error: var(--oscd-base3);\n    --md-icon-button-disabled-icon-color: var(--oscd-base3);\n    /* --md-menu-item-selected-label-text-color: var(--oscd-base01); */\n    --md-icon-button-disabled-icon-color: var(--oscd-base3);\n\n    /* MDC Theme Colors\n     * Needed for supporting any pluggins still using the depricated MWC Components\n     */\n    --mdc-theme-primary: var(--oscd-primary);\n    --mdc-theme-secondary: var(--oscd-secondary);\n    --mdc-theme-background: var(--oscd-base3);\n    --mdc-theme-surface: var(--oscd-base3);\n    --mdc-theme-on-primary: var(--oscd-base2);\n    --mdc-theme-on-secondary: var(--oscd-base2);\n    --mdc-theme-on-background: var(--oscd-base00);\n    --mdc-theme-on-surface: var(--oscd-base00);\n    --mdc-theme-text-primary-on-background: var(--oscd-base01);\n    --mdc-theme-text-secondary-on-background: var(--oscd-base00);\n    --mdc-theme-text-icon-on-background: var(--oscd-base00);\n    --mdc-theme-error: var(--oscd-error);\n    --mdc-button-disabled-ink-color: var(--oscd-base1);\n    --mdc-drawer-heading-ink-color: var(--oscd-base00);\n    --mdc-dialog-heading-ink-color: var(--oscd-base00);\n    --mdc-text-field-fill-color: var(--oscd-base2);\n    --mdc-text-field-disabled-fill-color: var(--oscd-base3);\n    --mdc-text-field-ink-color: var(--oscd-base00);\n    --mdc-text-field-label-ink-color: var(--oscd-base00);\n    --mdc-text-field-idle-line-color: var(--oscd-base00);\n    --mdc-text-field-hover-line-color: var(--oscd-base02);\n    --mdc-select-fill-color: var(--oscd-base2);\n    --mdc-select-disabled-fill-color: var(--oscd-base3);\n    --mdc-select-ink-color: var(--oscd-base00);\n    --mdc-select-label-ink-color: var(--oscd-base00);\n    --mdc-select-idle-line-color: var(--oscd-base00);\n    --mdc-select-hover-line-color: var(--oscd-base02);\n    --mdc-select-dropdown-icon-color: var(--oscd-base01);\n    --mdc-typography-font-family: var(--oscd-text-font);\n    --mdc-icon-font: var(--oscd-icon-font);\n    --mdc-theme-text-disabled-on-light: rgba(255, 255, 255, 0.38);\n  }\n\n  * {\n    --app-bar-height: 54px;\n    --side-panel-width: 280px;\n\n    --md-sys-color-primary: var(--oscd-primary);\n    --md-sys-color-on-primary: var(--oscd-base3);\n\n    --md-sys-color-secondary-container: var(--oscd-base2);\n\n    --md-sys-color-surface: var(--oscd-base3);\n    --md-sys-color-on-surface: var(--oscd-base00);\n  }\n\n  /*\n   * Public token -> internal token mappings\n   *\n   * Example pattern:\n   * --internal-variable-name: var(--oscd-shell-public-token, <default>);\n   */\n  * {\n    /* App bar */\n    --app-bar-color: var(--oscd-shell-app-bar-color, var(--oscd-base3));\n    --app-bar-background-color: var(\n      --oscd-shell-app-bar-background-color,\n      var(--oscd-primary)\n    );\n    --app-bar-height: var(--oscd-shell-app-bar-height, 54px);\n    --app-bar-small-height: var(--oscd-shell-app-bar-small-height, 48px);\n    --app-bar-elevation: var(\n      --oscd-shell-app-bar-elevation,\n      var(--md-sys-elevation-level-2)\n    );\n    --app-bar-app-icon-height: var(--oscd-shell-app-bar-icon-height, 34.4px);\n    --app-bar-app-icon-width: var(--oscd-shell-app-bar-icon-width, auto);\n    --app-bar-title-text-font-family: var(\n      --oscd-shell-app-bar-title-font-family,\n      var(--oscd-text-font)\n    );\n    --app-bar-title-text-color: var(\n      --oscd-shell-app-bar-title-color,\n      var(--app-bar-color)\n    );\n    --app-bar-title-text-font-size: var(\n      --oscd-shell-app-bar-title-font-size,\n      22.114px\n    );\n    --app-bar-title-text-font-weight: var(\n      --oscd-shell-app-bar-title-font-weight,\n      400\n    );\n    --app-bar-title-text-font-style: var(\n      --oscd-shell-app-bar-title-font-style,\n      normal\n    );\n    --app-bar-title-text-line-height: var(\n      --oscd-shell-app-bar-title-line-height,\n      normal\n    );\n    --app-bar-title-text-letter-spacing: var(\n      --oscd-shell-app-bar-title-letter-spacing,\n      inherit\n    );\n    --app-bar-action-icon-size: var(\n      --oscd-shell-app-bar-action-icon-size,\n      24px\n    );\n    --app-bar-action-icon-color: var(\n      --oscd-shell-app-bar-action-icon-color,\n      var(--md-sys-color-on-primary)\n    );\n\n    /* Bridge to oscd-ui app bar tokens */\n    --oscd-app-bar-color: var(--app-bar-color);\n    --oscd-app-bar-background-color: var(--app-bar-background-color);\n    --oscd-app-bar-elevation: var(--app-bar-elevation);\n    --oscd-app-bar-title-font-family: var(--app-bar-title-text-font-family);\n    --oscd-app-bar-title-font-size: var(--app-bar-title-text-font-size);\n    --oscd-app-bar-title-font-weight: var(--app-bar-title-text-font-weight);\n    --oscd-app-bar-title-line-height: var(--app-bar-title-text-line-height);\n\n    /* Files menu */\n    --file-menu-text-font-family: var(\n      --oscd-shell-file-menu-text-font-family,\n      var(--oscd-text-font)\n    );\n    --file-menu-text-size: var(--oscd-shell-file-menu-text-size, 18px);\n    --file-menu-text-weight: var(--oscd-shell-file-menu-text-weight, 500);\n    --file-menu-text-color: var(\n      --oscd-shell-file-menu-text-color,\n      var(--oscd-base3)\n    );\n\n    /* Plugins menu */\n    --plugins-menu-min-width: var(--oscd-shell-plugins-menu-min-width, 350px);\n    --plugins-menu-padding: var(--oscd-shell-plugins-menu-padding, 12px);\n    --plugins-menu-container-color: var(\n      --oscd-shell-plugins-menu-container-color,\n      var(--oscd-base3)\n    );\n    --plugins-menu-item-label-color: var(\n      --oscd-shell-plugins-menu-item-label-color,\n      var(--oscd-base00)\n    );\n    --plugins-menu-item-leading-icon-color: var(\n      --oscd-shell-plugins-menu-item-leading-icon-color,\n      var(--oscd-base00)\n    );\n    --plugins-menu-item-selected-container-color: var(\n      --oscd-shell-plugins-menu-item-selected-container-color,\n      var(--oscd-base2)\n    );\n    --plugins-menu-item-selected-label-color: var(\n      --oscd-shell-plugins-menu-item-selected-label-color,\n      var(--oscd-base00)\n    );\n\n    /* Editor plugins panel */\n    --editor-plugins-panel-width: var(\n      --oscd-shell-editor-plugins-panel-width,\n      280px\n    );\n    --editor-plugins-panel-collapsed-width: var(\n      --oscd-shell-editor-plugins-panel-width,\n      280px\n    );\n    --editor-plugins-panel-padding-top: var(\n      --oscd-shell-editor-plugins-panel-padding-top,\n      20px\n    );\n    --editor-plugins-panel-item-leading-space: var(\n      --oscd-shell-editor-plugins-panel-item-leading-space,\n      22px\n    );\n    --editor-plugins-panel-item-trailing-space: var(\n      --oscd-shell-editor-plugins-panel-item-trailing-space,\n      10px\n    );\n    --editor-plugins-panel-item-icon-size: var(\n      --oscd-shell-editor-plugins-panel-item-icon-size,\n      28px\n    );\n    --editor-plugins-panel-item-text-color: var(\n      --oscd-shell-editor-plugins-panel-item-text-color,\n      var(--oscd-base3)\n    );\n    --editor-plugins-panel-item-icon-color: var(\n      --oscd-shell-editor-plugins-panel-item-icon-color,\n      var(--oscd-base3)\n    );\n    --editor-plugins-panel-item-active-bg: var(\n      --oscd-shell-editor-plugins-panel-item-active-bg,\n      var(--oscd-primary)\n    );\n    --side-panel-width: var(--editor-plugins-panel-width);\n\n    /* Main editor container */\n    --editor-background-color: var(\n      --oscd-shell-editor-background-color,\n      var(--oscd-base3)\n    );\n    --editor-padding: var(--oscd-shell-editor-padding, 8px);\n\n    /* Landing page */\n    --landing-heading-color: var(\n      --oscd-shell-landing-heading-color,\n      var(--oscd-base3)\n    );\n    --landing-heading-font-family: var(\n      --oscd-shell-landing-heading-font-family,\n      var(--oscd-text-font)\n    );\n    --landing-heading-size: var(--oscd-shell-landing-heading-size, 50px);\n    --landing-heading-style: var(--oscd-shell-landing-heading-style, normal);\n    --landing-heading-weight: var(--oscd-shell-landing-heading-weight, 600);\n    --landing-heading-line-height: var(\n      --oscd-shell-landing-heading-line-height,\n      normal\n    );\n\n    --landing-subheading-color: var(\n      --oscd-shell-landing-subheading-color,\n      var(--oscd-base3)\n    );\n    --landing-subheading-font-family: var(\n      --oscd-shell-landing-subheading-font-family,\n      var(--oscd-text-font)\n    );\n    --landing-subheading-size: var(\n      --oscd-shell-landing-subheading-size,\n      16.909px\n    );\n    --landing-subheading-style: var(\n      --oscd-shell-landing-subheading-style,\n      normal\n    );\n    --landing-subheading-weight: var(\n      --oscd-shell-landing-subheading-weight,\n      400\n    );\n    --landing-subheading-line-height: var(\n      --oscd-shell-landing-subheading-line-height,\n      65.194px\n    );\n    --landing-grid-width: var(--oscd-shell-landing-grid-width, 60%);\n    --landing-grid-gap: var(--oscd-shell-landing-grid-gap, 95px);\n    --landing-card-width: var(--oscd-shell-landing-card-width, 240px);\n    --landing-card-height: var(--oscd-shell-landing-card-height, 180px);\n    --landing-card-background: var(\n      --oscd-shell-landing-card-background,\n      var(--oscd-primary)\n    );\n    --landing-card-text-color: var(\n      --oscd-shell-landing-card-text-color,\n      var(--oscd-base3)\n    );\n    --landing-card-radius: var(--oscd-shell-landing-card-radius, 2px);\n    --landing-card-icon-size: var(--oscd-shell-landing-card-icon-size, 54px);\n    --landing-card-corner-accent: var(\n      --oscd-shell-landing-card-corner-accent,\n      var(--omicron-yellow)\n    );\n  }\n`;\n"]}

package/dist/oscd-shell.d.ts

@@ -95,7 +95,7 @@ export declare class OscdShell extends OscdShell_base {
     renderOffScreenPlugins(): import("lit-html").TemplateResult<1>;
     renderDefaultLandingPage(): import("lit-html").TemplateResult<1>;
     render(): import("lit-html").TemplateResult<1>;
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/oscd-shell.js

@@ -12,6 +12,7 @@ import { EditorPluginsPanel } from './side-panel/editor-plugins-panel.js';
 import { PluginsMenu } from './menus/plugins-menu.js';
 import { LandingPage } from './landing-page/landing-page.js';
 import { FilesMenu } from './menus/files-menu.js';
+import { oscdShellDesignTokens } from './oscd-shell-design-tokens.js';
 import { OscdAppBar } from '@omicronenergy/oscd-ui/app-bar/OscdAppBar.js';
 import { OscdIcon } from '@omicronenergy/oscd-ui/icon/OscdIcon.js';
 let OscdShell = class OscdShell extends ScopedElementsMixin(LitElement) {
@@ -347,184 +348,83 @@ OscdShell.scopedElements = {
     'editor-plugins-panel': EditorPluginsPanel,
     'landing-page': LandingPage,
 };
-OscdShell.styles = css `
-    /* Theme variables with default values */
-    * {
-      --oscd-primary: var(--oscd-theme-primary, #0b335b);
-      --oscd-secondary: var(--oscd-theme-secondary, #2485e5);
-      --oscd-base03: var(--oscd-theme-base03, #121417);
-      --oscd-base02: var(--oscd-theme-base02, #1a1e23);
-      --oscd-base01: var(--oscd-theme-base01, #3d4651);
-      --oscd-base00: var(--oscd-theme-base00, #46505d);
-      --oscd-base0: var(--oscd-theme-base0, #8b97a7);
-      --oscd-base1: var(--oscd-theme-base1, #96a1b0);
-      --oscd-base2: var(--oscd-theme-base2, #f3f5f6);
-      --oscd-base3: var(--oscd-theme-base3, white);
-      --oscd-error: var(--oscd-theme-error, #dc322f);
-      --oscd-warning: var(--oscd-theme-warning, #b58900);
-      --oscd-text-font: var(--oscd-theme-text-font, 'Roboto');
-      --oscd-text-font-mono: var(--oscd-theme-text-font-mono, 'Roboto Mono');
-      --oscd-icon-font: var(
-        --oscd-theme-icon-font,
-        'Material Symbols Outlined'
-      );
+OscdShell.styles = [
+    oscdShellDesignTokens,
+    css `
+      :host {
+        height: 100%;
+        display: grid;
+        grid-template-rows: min-content 1fr;
+        grid-template-columns: 1fr;
+        grid-template-areas:
+          'header'
+          'main';
+      }
 
-      /* Fallbacks for Material Design variables */
-      --md-sys-color-primary: var(--oscd-primary);
-      --md-sys-color-on-primary: var(--oscd-base3);
-      --md-sys-color-secondary: var(--oscd-secondary);
-      --md-sys-color-on-secondary: var(--oscd-base3);
-      --md-sys-color-secondary-container: var(--oscd-base2);
-      --md-sys-color-surface: var(--oscd-base3);
-      --md-sys-color-on-surface: var(--oscd-base00);
-      --md-sys-color-surface-variant: var(--oscd-base3);
-      --md-sys-color-on-surface-variant: var(--oscd-base00);
-      --md-sys-color-surface-bright: var(--oscd-base2);
-      --md-sys-color-surface-container: var(--oscd-base3);
-      --md-sys-color-surface-container-high: var(--oscd-base3);
-      --md-sys-color-surface-container-highest: var(--oscd-base3);
-      --md-sys-color-outline-variant: var(--oscd-primary);
-      --md-sys-color-scrim: #000000;
-      --md-sys-color-error: var(--oscd-error);
-      --md-sys-color-on-error: var(--oscd-base3);
-      --md-icon-button-disabled-icon-color: var(--oscd-base3);
-      /* --md-menu-item-selected-label-text-color: var(--oscd-base01); */
-      --md-icon-button-disabled-icon-color: var(--oscd-base3);
+      oscd-app-bar {
+        grid-area: header;
+        box-shadow: var(--md-sys-elevation-level-2);
+        z-index: 10;
+      }
 
-      /* MDC Theme Colors 
-       * Needed for supporting any pluggins still using the depricated MWC Components
-       */
-      --mdc-theme-primary: var(--oscd-primary);
-      --mdc-theme-secondary: var(--oscd-secondary);
-      --mdc-theme-background: var(--oscd-base3);
-      --mdc-theme-surface: var(--oscd-base3);
-      --mdc-theme-on-primary: var(--oscd-base2);
-      --mdc-theme-on-secondary: var(--oscd-base3);
-      --mdc-theme-on-background: var(--oscd-base00);
-      --mdc-theme-on-surface: var(--oscd-base00);
-      --mdc-theme-text-primary-on-background: var(--oscd-base01);
-      --mdc-theme-text-secondary-on-background: var(--oscd-base3);
-      --mdc-theme-text-icon-on-background: var(--oscd-base3);
-      --mdc-theme-error: var(--oscd-error);
-      --mdc-button-disabled-ink-color: var(--oscd-base1);
-      --mdc-drawer-heading-ink-color: var(--oscd-base00);
-      --mdc-dialog-heading-ink-color: var(--oscd-base00);
-      --mdc-text-field-fill-color: var(--oscd-base2);
-      --mdc-text-field-ink-color: var(--oscd-base02);
-      --mdc-text-field-label-ink-color: var(--oscd-base01);
-      --mdc-text-field-idle-line-color: var(--oscd-base00);
-      --mdc-text-field-hover-line-color: var(--oscd-base02);
-      --mdc-select-fill-color: var(--oscd-base2);
-      --mdc-select-ink-color: var(--oscd-base02);
-      --mdc-select-label-ink-color: var(--oscd-base01);
-      --mdc-select-idle-line-color: var(--oscd-base00);
-      --mdc-select-hover-line-color: var(--oscd-base02);
-      --mdc-select-dropdown-icon-color: var(--oscd-base01);
-      --mdc-typography-font-family: var(--oscd-text-font);
-      --mdc-icon-font: var(--oscd-icon-font);
-      --mdc-theme-text-disabled-on-light: rgba(255, 255, 255, 0.38);
-    }
-
-    * {
-      --app-bar-height: 54px;
-      --side-panel-width: 280px;
-
-      --md-sys-color-primary: var(--oscd-primary);
-      --md-sys-color-on-primary: var(--oscd-base3);
-
-      --md-sys-color-secondary-container: var(--oscd-base2);
-
-      --md-sys-color-surface: var(--oscd-base3);
-      --md-sys-color-on-surface: var(--oscd-base00);
-    }
+      oscd-app-bar * {
+        --md-filled-icon-button-disabled-container-opacity: var(
+          --app-bar-action-icon-disabled-container-opacity,
+          0
+        );
+        --md-filled-icon-button-disabled-icon-color: var(
+          --app-bar-action-icon-disabled-color,
+          var(--md-sys-color-on-primary)
+        );
+        --md-filled-icon-button-icon-size: var(--app-bar-action-icon-size);
+        --md-filled-icon-button-icon-color: var(--app-bar-action-icon-color);
+      }
 
-    :host {
-      height: 100%;
-      display: grid;
-      grid-template-rows: min-content 1fr;
-      grid-template-columns: 1fr;
-      grid-template-areas:
-        'header'
-        'main';
-    }
+      main {
+        grid-area: main;
+        display: grid;
+        grid-template-columns: var(--side-panel-width) 1fr;
+        grid-template-areas: 'sidebar editor';
+        overflow: hidden;
+      }
 
-    oscd-app-bar {
-      grid-area: header;
-      box-shadow: var(--md-sys-elevation-level-2);
-      z-index: 10;
-    }
+      /* Side panel collapsed state */
+      main.sidebar-collapsed {
+        grid-template-columns: 0 1fr;
+      }
 
-    main {
-      grid-area: main;
-      display: grid;
-      grid-template-columns: var(--side-panel-width) 1fr;
-      grid-template-areas: 'sidebar editor';
-      overflow: hidden;
-    }
+      section.editors-side-panel-section {
+        grid-area: sidebar;
+        overflow-y: auto;
+        overflow-x: hidden;
+        transition: transform 0.3s ease-in-out;
+      }
 
-    /* Side panel collapsed state */
-    main.sidebar-collapsed {
-      grid-template-columns: 0 1fr;
-    }
+      /* Hide side panel when collapsed */
+      main.sidebar-collapsed section.editors-side-panel-section {
+        transform: translateX(-100%);
+      }
 
-    section.editors-side-panel-section {
-      grid-area: sidebar;
-      overflow-y: auto;
-      overflow-x: hidden;
-      transition: transform 0.3s ease-in-out;
-    }
+      section.editor-container {
+        grid-area: editor;
+        background-color: var(--editor-background-color);
+        padding: var(--editor-padding);
+        overflow: auto;
+        position: relative;
+      }
 
-    /* Hide side panel when collapsed */
-    main.sidebar-collapsed section.editors-side-panel-section {
-      transform: translateX(-100%);
-    }
-
-    section.editor-container {
-      grid-area: editor;
-      background-color: var(--oscd-base3);
-      padding: 8px;
-      overflow: auto;
-      position: relative;
-    }
-
-    .off-screen-plugin-container {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 0;
-      height: 0;
-      overflow: hidden;
-      margin: 0;
-      padding: 0;
-    }
-
-    oscd-navigation-drawer-header {
-      --md-list-item-supporting-text-color: var(--md-sys-color-on-surface);
-    }
-
-    oscd-app-bar * {
-      --md-filled-icon-button-disabled-container-opacity: 0;
-      --md-filled-icon-button-disabled-icon-color: var(
-        --md-sys-color-on-primary
-      );
-    }
-
-    .edit-dialog-remove-button {
-      --md-text-button-icon-color: var(--oscd-error);
-      --md-text-button-label-text-color: var(--oscd-error);
-      --md-text-button-focus-label-text-color: var(--oscd-error);
-      --md-text-button-focus-icon-color: var(--oscd-error);
-      --md-text-button-hover-label-text-color: var(--oscd-error);
-      --md-text-button-hover-state-layer-color: var(--oscd-error);
-      --md-text-button-hover-icon-color: var(--oscd-error);
-      --md-text-button-pressed-label-text-color: var(--oscd-error);
-      --md-text-button-pressed-state-layer-color: var(--oscd-error);
-      --md-text-button-pressed-icon-color: var(--oscd-error);
-    }
-    #title {
-      position: relative;
-    }
-  `;
+      .off-screen-plugin-container {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 0;
+        height: 0;
+        overflow: hidden;
+        margin: 0;
+        padding: 0;
+      }
+    `,
+];
 __decorate([
     property({ type: String })
 ], OscdShell.prototype, "appIcon", void 0);

package/dist/oscd-shell.js.map

@@ -1 +1 @@
-{"version":3,"file":"oscd-shell.js","sourceRoot":"","sources":["../src/oscd-shell.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport {\n  customElement,\n  property,\n  query,\n  queryAssignedNodes,\n  state,\n} from 'lit/decorators.js';\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';\nimport { localized, msg } from '@lit/localize';\nimport { html as staticHtml, unsafeStatic } from 'lit/static-html.js';\n\nimport { OscdFilledIconButton } from '@omicronenergy/oscd-ui/iconbutton/OscdFilledIconButton.js';\nimport { XMLEditor } from '@omicronenergy/oscd-editor';\nimport { EditEventV2, OpenEvent } from '@openscd/oscd-api';\n\nimport { loadSourcedPlugins } from './utils/plugin-utils.js';\nimport {\n  getLocale,\n  LocaleTag,\n  setLocale,\n  Translations,\n} from './localization.js';\nimport { EditorPluginsPanel } from './side-panel/editor-plugins-panel.js';\nimport { PluginsMenu } from './menus/plugins-menu.js';\nimport { LandingPage } from './landing-page/landing-page.js';\nimport { RenameEvent, CloseEvent } from './foundation/events.js';\nimport { FilesMenu } from './menus/files-menu.js';\nimport { OscdAppBar } from '@omicronenergy/oscd-ui/app-bar/OscdAppBar.js';\nimport { OscdIcon } from '@omicronenergy/oscd-ui/icon/OscdIcon.js';\n\nexport type PluginEntry = {\n  name: string;\n  translations?: Translations;\n  tagName: string;\n  icon: string;\n  requireDoc?: boolean;\n};\n\nexport type SourcedPluginEntry = {\n  name: string;\n  translations?: Translations;\n  src: string;\n  icon: string;\n  requireDoc?: boolean;\n};\nexport type PluginSet<P = PluginEntry> = {\n  menu: P[];\n  editor: P[];\n  background: P[];\n};\n\n@localized()\n@customElement('oscd-shell')\nexport class OscdShell extends ScopedElementsMixin(LitElement) {\n  static scopedElements = {\n    'oscd-app-bar': OscdAppBar,\n    'oscd-filled-icon-button': OscdFilledIconButton,\n    'oscd-icon': OscdIcon,\n    'files-menu': FilesMenu,\n    'plugins-menu': PluginsMenu,\n    'editor-plugins-panel': EditorPluginsPanel,\n    'landing-page': LandingPage,\n  };\n\n  /*\n   * Properties\n   */\n\n  /**\n   * Url to the app icon displayed in the app bar\n   */\n  @property({ type: String })\n  appIcon: string = '';\n\n  @property({ type: String })\n  appTitle: string = 'OpenSCD';\n\n  @property({ type: String })\n  landingPageHeading: string = 'Welcome to OpenSCD';\n\n  @property({ type: String })\n  landingPageSubHeading: string =\n    'Open Source IEC-61850-6 SCL Editing Platform';\n\n  /** The file endings of editable files */\n  @property({ type: Array, reflect: true }) editable = [\n    'cid',\n    'icd',\n    'iid',\n    'scd',\n    'sed',\n    'ssd',\n  ];\n\n  @property({ type: String, reflect: true })\n  get locale() {\n    return getLocale() as LocaleTag;\n  }\n\n  set locale(tag: LocaleTag) {\n    try {\n      if (tag) {\n        setLocale(tag);\n      }\n    } catch {\n      // don't change locale if tag is invalid\n    }\n  }\n\n  _plugins: PluginSet = { menu: [], editor: [], background: [] };\n\n  @property({ type: Object })\n  get plugins(): PluginSet {\n    return this._plugins;\n  }\n\n  set plugins(\n    plugins: Partial<PluginSet<Partial<PluginEntry | SourcedPluginEntry>>>,\n  ) {\n    this._plugins = Object.entries(plugins).reduce(\n      (acc, [pluginType, kind]) => {\n        const convertedPlugins = loadSourcedPlugins(kind, this.registry!);\n        acc[pluginType as keyof PluginSet] = convertedPlugins;\n        return acc;\n      },\n      { menu: [], editor: [], background: [] } as PluginSet,\n    );\n  }\n\n  /*\n   * States\n   */\n  @state()\n  get canRedo(): boolean {\n    return this.xmlEditor.future.length >= 1;\n  }\n\n  @state()\n  get canUndo(): boolean {\n    return this.xmlEditor.past.length >= 1;\n  }\n\n  @state()\n  get editor() {\n    return this.plugins.editor[this.editorIndex]?.tagName ?? '';\n  }\n\n  @state()\n  private editorIndex = 0;\n\n  @state()\n  /** The `XMLDocument` currently being edited */\n  get doc(): XMLDocument {\n    return this.docs[this.docName];\n  }\n\n  /** The name of the [[`doc`]] currently being edited */\n  @property({ type: String, reflect: true })\n  docName = '';\n\n  /** The set of `XMLDocument`s currently loaded */\n  private _docs: Record<string, XMLDocument> = {};\n\n  @state()\n  get docs(): Record<string, XMLDocument> {\n    return this._docs;\n  }\n\n  set docs(newDocs: Record<string, XMLDocument>) {\n    this._docs = newDocs;\n    this.onDocsChanged();\n  }\n\n  @state()\n  docVersion: number = -1;\n\n  @state()\n  get editableDocs(): string[] {\n    return Object.keys(this.docs).filter(name => this.isEditable(name));\n  }\n\n  @state()\n  get last(): number {\n    return this.xmlEditor.past.length - 1;\n  }\n\n  @state()\n  xmlEditor: XMLEditor = new XMLEditor();\n\n  /*\n   * All Queries\n   */\n\n  @query('plugins-menu')\n  pluginsMenu!: PluginsMenu;\n\n  @query('editor-plugins-panel')\n  editorPluginsPanel!: EditorPluginsPanel;\n\n  @queryAssignedNodes({ slot: 'landing-page' })\n  private _landingPageNodes?: NodeListOf<HTMLElement>;\n\n  /*\n   * Constructor & life cycle methods\n   */\n  constructor() {\n    super();\n    // Catch all edits (from commits AND events) and trigger an update\n    this.xmlEditor.subscribe(() => {\n      this.docVersion += 1;\n    });\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    document.addEventListener('keydown', this.handleKeyPress);\n    this.addEventListener('oscd-open', this.handleOpenDoc);\n    this.addEventListener('oscd-rename', this.handleRenameDoc);\n    this.addEventListener('oscd-close', this.handleCloseDoc);\n    this.addEventListener('oscd-edit-v2', this.handleEditV2);\n    this.addEventListener('oscd-undo', this.handleUndo);\n    this.addEventListener('oscd-redo', this.handleRedo);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    // Remove event listeners\n    document.removeEventListener('keydown', this.handleKeyPress);\n    this.removeEventListener('oscd-open', this.handleOpenDoc);\n    this.removeEventListener('oscd-rename', this.handleRenameDoc);\n    this.removeEventListener('oscd-edit-v2', this.handleEditV2);\n    this.removeEventListener('oscd-undo', this.handleUndo);\n    this.removeEventListener('oscd-redo', this.handleRedo);\n    this.removeEventListener('oscd-close', this.handleCloseDoc);\n  }\n\n  /*\n   * Event Handlers\n   */\n\n  handleOpenDoc = ({ detail: { docName, doc } }: OpenEvent) => {\n    this.docs = {\n      ...this.docs,\n      [docName]: doc,\n    };\n    if (this.isEditable(docName)) {\n      this.docName = docName;\n    }\n    this.requestUpdate();\n  };\n\n  handleRenameDoc = (customEvent: RenameEvent) => {\n    const { oldName, newName } = customEvent.detail;\n    if (!this.docs[oldName] || newName === oldName || this.docs[newName]) {\n      return;\n    }\n    const doc = this.docs[oldName];\n    delete this.docs[oldName];\n    this.docs = {\n      ...this.docs,\n      [newName]: doc,\n    };\n    this.docName = newName;\n  };\n\n  handleEditV2 = (event: EditEventV2) => {\n    const { edit, title, squash } = event.detail;\n    this.xmlEditor.commit(edit, { title, squash });\n  };\n\n  handleCloseDoc = (event: CloseEvent) => {\n    const docName = event.detail.docName as string;\n    delete this.docs[docName];\n    if (this.docName === docName) {\n      this.docName = this.editableDocs[0] || '';\n    }\n  };\n\n  handleUndo = () => {\n    this.undo();\n  };\n\n  handleRedo = () => {\n    this.redo();\n  };\n\n  private handleKeyPress = (e: KeyboardEvent) => {\n    if (!e.ctrlKey) {\n      return;\n    }\n    if (!Object.prototype.hasOwnProperty.call(this.hotkeys, e.key)) {\n      return;\n    }\n    this.hotkeys[e.key]!.call(this);\n    e.preventDefault();\n  };\n\n  handleOpenPluginMenu = () => {\n    this.pluginsMenu.open();\n  };\n\n  /** Undo the last `n` [[Edit]]s committed */\n  undo = (n = 1) => {\n    if (!this.canUndo || n < 1) {\n      return;\n    }\n    this.xmlEditor.undo();\n    if (n > 1) {\n      this.undo(n - 1);\n    }\n    this.requestUpdate();\n  };\n\n  /** Redo the last `n` [[Edit]]s that have been undone */\n  redo = (n = 1) => {\n    if (!this.canRedo || n < 1) {\n      return;\n    }\n    this.xmlEditor.redo();\n    if (n > 1) {\n      this.redo(n - 1);\n    }\n    this.requestUpdate();\n  };\n\n  private hotkeys: Partial<Record<string, () => void>> = {\n    m: this.handleOpenPluginMenu,\n    z: this.undo,\n    y: this.redo,\n    Z: this.redo,\n  };\n\n  isEditable(docName: string): boolean {\n    return !!this.editable.find(ext =>\n      docName.toLowerCase().endsWith(`.${ext}`),\n    );\n  }\n\n  onDocsChanged() {\n    this.docVersion += 1;\n  }\n\n  renderPlugin(tagName: string) {\n    const tag = unsafeStatic(tagName);\n    return staticHtml`<${tag} \n              .locale=\"${this.locale}\"\n              .docName=\"${this.docName}\"\n              .doc=${this.doc}\n              .docs=${this.docs} \n              .editCount=${this.docVersion}\n              .docVersion=${this.docVersion}\n              .editor=${this.xmlEditor}>\n            </${tag}>`;\n  }\n\n  onMenuPluginSelect(customEvent: CustomEvent) {\n    const plugin = customEvent.detail.plugin as PluginEntry;\n    if (plugin.tagName) {\n      this.shadowRoot!.querySelector<\n        HTMLElement & { run: () => Promise<void> }\n      >(plugin.tagName)!.run?.();\n    }\n  }\n\n  renderOffScreenPlugins() {\n    return html`\n      <section class=\"off-screen-plugin-container\" aria-hidden=\"true\">\n        <div class=\"menu-plugins\">\n          ${this.plugins.menu\n            .filter(plugin => !plugin.requireDoc || !!this.docName)\n            .map(plugin => this.renderPlugin(plugin.tagName))}\n        </div>\n        <div class=\"background-plugins\">\n          ${this.plugins.background\n            .filter(plugin => !plugin.requireDoc || !!this.docName)\n            .map(plugin => this.renderPlugin(plugin.tagName))}\n        </div>\n      </section>\n    `;\n  }\n\n  renderDefaultLandingPage() {\n    return html`\n      <landing-page\n        heading=${this.landingPageHeading}\n        subHeading=${this.landingPageSubHeading}\n        .menuPlugins=${this.plugins.menu.filter(\n          plugin => !plugin.requireDoc || !!this.docName,\n        )}\n        .locale=${this.locale}\n        @menu-plugin-select=${(event: CustomEvent) =>\n          this.onMenuPluginSelect(event)}\n      >\n      </landing-page>\n    `;\n  }\n\n  render() {\n    const hasCustomLandingPage = !!this._landingPageNodes?.length;\n    if (this.editableDocs.length === 0) {\n      return html` <slot\n          name=\"landing-page\"\n          @slotchange=${() => this.requestUpdate()}\n        ></slot>\n        ${!hasCustomLandingPage ? this.renderDefaultLandingPage() : nothing}\n        ${this.renderOffScreenPlugins()}`;\n    }\n\n    return html` <oscd-app-bar>\n        <plugins-menu\n          slot=\"alignStart\"\n          appTitle=${this.appTitle}\n          appIcon=${this.appIcon}\n          .editableDocs=${this.editableDocs}\n          .menuPlugins=${this.plugins.menu}\n          .locale=${this.locale}\n          @menu-plugin-select=${(event: CustomEvent) =>\n            this.onMenuPluginSelect(event)}\n        ></plugins-menu>\n\n        <files-menu\n          slot=\"alignMiddle\"\n          .selectedDocName=${this.docName}\n          .editableDocs=${this.editableDocs}\n          .locale=${this.locale}\n          @change=${(event: CustomEvent) => {\n            const name = event.detail.name as string;\n            this.docName = name;\n          }}\n        ></files-menu>\n\n        <div slot=\"alignEnd\">\n          <oscd-filled-icon-button\n            aria-label=\"${msg('Undo')}\"\n            ?disabled=${!this.canUndo}\n            @click=${async () => {\n              this.dispatchEvent(\n                new CustomEvent('oscd-undo', {\n                  bubbles: true,\n                  composed: true,\n                }),\n              );\n            }}\n            ><oscd-icon>undo</oscd-icon></oscd-filled-icon-button\n          >\n          <oscd-filled-icon-button\n            aria-label=\"${msg('Redo')}\"\n            ?disabled=${!this.canRedo}\n            @click=${async () => {\n              this.dispatchEvent(\n                new CustomEvent('oscd-redo', {\n                  bubbles: true,\n                  composed: true,\n                }),\n              );\n            }}\n            ><oscd-icon>redo</oscd-icon></oscd-filled-icon-button\n          >\n        </div>\n      </oscd-app-bar>\n\n      <main>\n        <section class=\"editors-side-panel-section\">\n          <editor-plugins-panel\n            .editors=${this.plugins.editor}\n            .editorIndex=${this.editorIndex}\n            .locale=${this.locale}\n            @editor-select=${(e: CustomEvent) => {\n              this.editorIndex = e.detail.index;\n            }}\n          ></editor-plugins-panel>\n        </section>\n\n        <section class=\"editor-container\">\n          ${this.editor ? this.renderPlugin(this.editor) : nothing}\n        </section>\n\n        ${this.renderOffScreenPlugins()}\n      </main>`;\n  }\n\n  static styles = css`\n    /* Theme variables with default values */\n    * {\n      --oscd-primary: var(--oscd-theme-primary, #0b335b);\n      --oscd-secondary: var(--oscd-theme-secondary, #2485e5);\n      --oscd-base03: var(--oscd-theme-base03, #121417);\n      --oscd-base02: var(--oscd-theme-base02, #1a1e23);\n      --oscd-base01: var(--oscd-theme-base01, #3d4651);\n      --oscd-base00: var(--oscd-theme-base00, #46505d);\n      --oscd-base0: var(--oscd-theme-base0, #8b97a7);\n      --oscd-base1: var(--oscd-theme-base1, #96a1b0);\n      --oscd-base2: var(--oscd-theme-base2, #f3f5f6);\n      --oscd-base3: var(--oscd-theme-base3, white);\n      --oscd-error: var(--oscd-theme-error, #dc322f);\n      --oscd-warning: var(--oscd-theme-warning, #b58900);\n      --oscd-text-font: var(--oscd-theme-text-font, 'Roboto');\n      --oscd-text-font-mono: var(--oscd-theme-text-font-mono, 'Roboto Mono');\n      --oscd-icon-font: var(\n        --oscd-theme-icon-font,\n        'Material Symbols Outlined'\n      );\n\n      /* Fallbacks for Material Design variables */\n      --md-sys-color-primary: var(--oscd-primary);\n      --md-sys-color-on-primary: var(--oscd-base3);\n      --md-sys-color-secondary: var(--oscd-secondary);\n      --md-sys-color-on-secondary: var(--oscd-base3);\n      --md-sys-color-secondary-container: var(--oscd-base2);\n      --md-sys-color-surface: var(--oscd-base3);\n      --md-sys-color-on-surface: var(--oscd-base00);\n      --md-sys-color-surface-variant: var(--oscd-base3);\n      --md-sys-color-on-surface-variant: var(--oscd-base00);\n      --md-sys-color-surface-bright: var(--oscd-base2);\n      --md-sys-color-surface-container: var(--oscd-base3);\n      --md-sys-color-surface-container-high: var(--oscd-base3);\n      --md-sys-color-surface-container-highest: var(--oscd-base3);\n      --md-sys-color-outline-variant: var(--oscd-primary);\n      --md-sys-color-scrim: #000000;\n      --md-sys-color-error: var(--oscd-error);\n      --md-sys-color-on-error: var(--oscd-base3);\n      --md-icon-button-disabled-icon-color: var(--oscd-base3);\n      /* --md-menu-item-selected-label-text-color: var(--oscd-base01); */\n      --md-icon-button-disabled-icon-color: var(--oscd-base3);\n\n      /* MDC Theme Colors \n       * Needed for supporting any pluggins still using the depricated MWC Components\n       */\n      --mdc-theme-primary: var(--oscd-primary);\n      --mdc-theme-secondary: var(--oscd-secondary);\n      --mdc-theme-background: var(--oscd-base3);\n      --mdc-theme-surface: var(--oscd-base3);\n      --mdc-theme-on-primary: var(--oscd-base2);\n      --mdc-theme-on-secondary: var(--oscd-base3);\n      --mdc-theme-on-background: var(--oscd-base00);\n      --mdc-theme-on-surface: var(--oscd-base00);\n      --mdc-theme-text-primary-on-background: var(--oscd-base01);\n      --mdc-theme-text-secondary-on-background: var(--oscd-base3);\n      --mdc-theme-text-icon-on-background: var(--oscd-base3);\n      --mdc-theme-error: var(--oscd-error);\n      --mdc-button-disabled-ink-color: var(--oscd-base1);\n      --mdc-drawer-heading-ink-color: var(--oscd-base00);\n      --mdc-dialog-heading-ink-color: var(--oscd-base00);\n      --mdc-text-field-fill-color: var(--oscd-base2);\n      --mdc-text-field-ink-color: var(--oscd-base02);\n      --mdc-text-field-label-ink-color: var(--oscd-base01);\n      --mdc-text-field-idle-line-color: var(--oscd-base00);\n      --mdc-text-field-hover-line-color: var(--oscd-base02);\n      --mdc-select-fill-color: var(--oscd-base2);\n      --mdc-select-ink-color: var(--oscd-base02);\n      --mdc-select-label-ink-color: var(--oscd-base01);\n      --mdc-select-idle-line-color: var(--oscd-base00);\n      --mdc-select-hover-line-color: var(--oscd-base02);\n      --mdc-select-dropdown-icon-color: var(--oscd-base01);\n      --mdc-typography-font-family: var(--oscd-text-font);\n      --mdc-icon-font: var(--oscd-icon-font);\n      --mdc-theme-text-disabled-on-light: rgba(255, 255, 255, 0.38);\n    }\n\n    * {\n      --app-bar-height: 54px;\n      --side-panel-width: 280px;\n\n      --md-sys-color-primary: var(--oscd-primary);\n      --md-sys-color-on-primary: var(--oscd-base3);\n\n      --md-sys-color-secondary-container: var(--oscd-base2);\n\n      --md-sys-color-surface: var(--oscd-base3);\n      --md-sys-color-on-surface: var(--oscd-base00);\n    }\n\n    :host {\n      height: 100%;\n      display: grid;\n      grid-template-rows: min-content 1fr;\n      grid-template-columns: 1fr;\n      grid-template-areas:\n        'header'\n        'main';\n    }\n\n    oscd-app-bar {\n      grid-area: header;\n      box-shadow: var(--md-sys-elevation-level-2);\n      z-index: 10;\n    }\n\n    main {\n      grid-area: main;\n      display: grid;\n      grid-template-columns: var(--side-panel-width) 1fr;\n      grid-template-areas: 'sidebar editor';\n      overflow: hidden;\n    }\n\n    /* Side panel collapsed state */\n    main.sidebar-collapsed {\n      grid-template-columns: 0 1fr;\n    }\n\n    section.editors-side-panel-section {\n      grid-area: sidebar;\n      overflow-y: auto;\n      overflow-x: hidden;\n      transition: transform 0.3s ease-in-out;\n    }\n\n    /* Hide side panel when collapsed */\n    main.sidebar-collapsed section.editors-side-panel-section {\n      transform: translateX(-100%);\n    }\n\n    section.editor-container {\n      grid-area: editor;\n      background-color: var(--oscd-base3);\n      padding: 8px;\n      overflow: auto;\n      position: relative;\n    }\n\n    .off-screen-plugin-container {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 0;\n      height: 0;\n      overflow: hidden;\n      margin: 0;\n      padding: 0;\n    }\n\n    oscd-navigation-drawer-header {\n      --md-list-item-supporting-text-color: var(--md-sys-color-on-surface);\n    }\n\n    oscd-app-bar * {\n      --md-filled-icon-button-disabled-container-opacity: 0;\n      --md-filled-icon-button-disabled-icon-color: var(\n        --md-sys-color-on-primary\n      );\n    }\n\n    .edit-dialog-remove-button {\n      --md-text-button-icon-color: var(--oscd-error);\n      --md-text-button-label-text-color: var(--oscd-error);\n      --md-text-button-focus-label-text-color: var(--oscd-error);\n      --md-text-button-focus-icon-color: var(--oscd-error);\n      --md-text-button-hover-label-text-color: var(--oscd-error);\n      --md-text-button-hover-state-layer-color: var(--oscd-error);\n      --md-text-button-hover-icon-color: var(--oscd-error);\n      --md-text-button-pressed-label-text-color: var(--oscd-error);\n      --md-text-button-pressed-state-layer-color: var(--oscd-error);\n      --md-text-button-pressed-icon-color: var(--oscd-error);\n    }\n    #title {\n      position: relative;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'oscd-shell': OscdShell;\n  }\n}\n"]}
+{"version":3,"file":"oscd-shell.js","sourceRoot":"","sources":["../src/oscd-shell.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport {\n  customElement,\n  property,\n  query,\n  queryAssignedNodes,\n  state,\n} from 'lit/decorators.js';\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';\nimport { localized, msg } from '@lit/localize';\nimport { html as staticHtml, unsafeStatic } from 'lit/static-html.js';\n\nimport { OscdFilledIconButton } from '@omicronenergy/oscd-ui/iconbutton/OscdFilledIconButton.js';\nimport { XMLEditor } from '@omicronenergy/oscd-editor';\nimport { EditEventV2, OpenEvent } from '@openscd/oscd-api';\n\nimport { loadSourcedPlugins } from './utils/plugin-utils.js';\nimport {\n  getLocale,\n  LocaleTag,\n  setLocale,\n  Translations,\n} from './localization.js';\nimport { EditorPluginsPanel } from './side-panel/editor-plugins-panel.js';\nimport { PluginsMenu } from './menus/plugins-menu.js';\nimport { LandingPage } from './landing-page/landing-page.js';\nimport { RenameEvent, CloseEvent } from './foundation/events.js';\nimport { FilesMenu } from './menus/files-menu.js';\nimport { oscdShellDesignTokens } from './oscd-shell-design-tokens.js';\nimport { OscdAppBar } from '@omicronenergy/oscd-ui/app-bar/OscdAppBar.js';\nimport { OscdIcon } from '@omicronenergy/oscd-ui/icon/OscdIcon.js';\n\nexport type PluginEntry = {\n  name: string;\n  translations?: Translations;\n  tagName: string;\n  icon: string;\n  requireDoc?: boolean;\n};\n\nexport type SourcedPluginEntry = {\n  name: string;\n  translations?: Translations;\n  src: string;\n  icon: string;\n  requireDoc?: boolean;\n};\nexport type PluginSet<P = PluginEntry> = {\n  menu: P[];\n  editor: P[];\n  background: P[];\n};\n\n@localized()\n@customElement('oscd-shell')\nexport class OscdShell extends ScopedElementsMixin(LitElement) {\n  static scopedElements = {\n    'oscd-app-bar': OscdAppBar,\n    'oscd-filled-icon-button': OscdFilledIconButton,\n    'oscd-icon': OscdIcon,\n    'files-menu': FilesMenu,\n    'plugins-menu': PluginsMenu,\n    'editor-plugins-panel': EditorPluginsPanel,\n    'landing-page': LandingPage,\n  };\n\n  /*\n   * Properties\n   */\n\n  /**\n   * Url to the app icon displayed in the app bar\n   */\n  @property({ type: String })\n  appIcon: string = '';\n\n  @property({ type: String })\n  appTitle: string = 'OpenSCD';\n\n  @property({ type: String })\n  landingPageHeading: string = 'Welcome to OpenSCD';\n\n  @property({ type: String })\n  landingPageSubHeading: string =\n    'Open Source IEC-61850-6 SCL Editing Platform';\n\n  /** The file endings of editable files */\n  @property({ type: Array, reflect: true }) editable = [\n    'cid',\n    'icd',\n    'iid',\n    'scd',\n    'sed',\n    'ssd',\n  ];\n\n  @property({ type: String, reflect: true })\n  get locale() {\n    return getLocale() as LocaleTag;\n  }\n\n  set locale(tag: LocaleTag) {\n    try {\n      if (tag) {\n        setLocale(tag);\n      }\n    } catch {\n      // don't change locale if tag is invalid\n    }\n  }\n\n  _plugins: PluginSet = { menu: [], editor: [], background: [] };\n\n  @property({ type: Object })\n  get plugins(): PluginSet {\n    return this._plugins;\n  }\n\n  set plugins(\n    plugins: Partial<PluginSet<Partial<PluginEntry | SourcedPluginEntry>>>,\n  ) {\n    this._plugins = Object.entries(plugins).reduce(\n      (acc, [pluginType, kind]) => {\n        const convertedPlugins = loadSourcedPlugins(kind, this.registry!);\n        acc[pluginType as keyof PluginSet] = convertedPlugins;\n        return acc;\n      },\n      { menu: [], editor: [], background: [] } as PluginSet,\n    );\n  }\n\n  /*\n   * States\n   */\n  @state()\n  get canRedo(): boolean {\n    return this.xmlEditor.future.length >= 1;\n  }\n\n  @state()\n  get canUndo(): boolean {\n    return this.xmlEditor.past.length >= 1;\n  }\n\n  @state()\n  get editor() {\n    return this.plugins.editor[this.editorIndex]?.tagName ?? '';\n  }\n\n  @state()\n  private editorIndex = 0;\n\n  @state()\n  /** The `XMLDocument` currently being edited */\n  get doc(): XMLDocument {\n    return this.docs[this.docName];\n  }\n\n  /** The name of the [[`doc`]] currently being edited */\n  @property({ type: String, reflect: true })\n  docName = '';\n\n  /** The set of `XMLDocument`s currently loaded */\n  private _docs: Record<string, XMLDocument> = {};\n\n  @state()\n  get docs(): Record<string, XMLDocument> {\n    return this._docs;\n  }\n\n  set docs(newDocs: Record<string, XMLDocument>) {\n    this._docs = newDocs;\n    this.onDocsChanged();\n  }\n\n  @state()\n  docVersion: number = -1;\n\n  @state()\n  get editableDocs(): string[] {\n    return Object.keys(this.docs).filter(name => this.isEditable(name));\n  }\n\n  @state()\n  get last(): number {\n    return this.xmlEditor.past.length - 1;\n  }\n\n  @state()\n  xmlEditor: XMLEditor = new XMLEditor();\n\n  /*\n   * All Queries\n   */\n\n  @query('plugins-menu')\n  pluginsMenu!: PluginsMenu;\n\n  @query('editor-plugins-panel')\n  editorPluginsPanel!: EditorPluginsPanel;\n\n  @queryAssignedNodes({ slot: 'landing-page' })\n  private _landingPageNodes?: NodeListOf<HTMLElement>;\n\n  /*\n   * Constructor & life cycle methods\n   */\n  constructor() {\n    super();\n    // Catch all edits (from commits AND events) and trigger an update\n    this.xmlEditor.subscribe(() => {\n      this.docVersion += 1;\n    });\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    document.addEventListener('keydown', this.handleKeyPress);\n    this.addEventListener('oscd-open', this.handleOpenDoc);\n    this.addEventListener('oscd-rename', this.handleRenameDoc);\n    this.addEventListener('oscd-close', this.handleCloseDoc);\n    this.addEventListener('oscd-edit-v2', this.handleEditV2);\n    this.addEventListener('oscd-undo', this.handleUndo);\n    this.addEventListener('oscd-redo', this.handleRedo);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    // Remove event listeners\n    document.removeEventListener('keydown', this.handleKeyPress);\n    this.removeEventListener('oscd-open', this.handleOpenDoc);\n    this.removeEventListener('oscd-rename', this.handleRenameDoc);\n    this.removeEventListener('oscd-edit-v2', this.handleEditV2);\n    this.removeEventListener('oscd-undo', this.handleUndo);\n    this.removeEventListener('oscd-redo', this.handleRedo);\n    this.removeEventListener('oscd-close', this.handleCloseDoc);\n  }\n\n  /*\n   * Event Handlers\n   */\n\n  handleOpenDoc = ({ detail: { docName, doc } }: OpenEvent) => {\n    this.docs = {\n      ...this.docs,\n      [docName]: doc,\n    };\n    if (this.isEditable(docName)) {\n      this.docName = docName;\n    }\n    this.requestUpdate();\n  };\n\n  handleRenameDoc = (customEvent: RenameEvent) => {\n    const { oldName, newName } = customEvent.detail;\n    if (!this.docs[oldName] || newName === oldName || this.docs[newName]) {\n      return;\n    }\n    const doc = this.docs[oldName];\n    delete this.docs[oldName];\n    this.docs = {\n      ...this.docs,\n      [newName]: doc,\n    };\n    this.docName = newName;\n  };\n\n  handleEditV2 = (event: EditEventV2) => {\n    const { edit, title, squash } = event.detail;\n    this.xmlEditor.commit(edit, { title, squash });\n  };\n\n  handleCloseDoc = (event: CloseEvent) => {\n    const docName = event.detail.docName as string;\n    delete this.docs[docName];\n    if (this.docName === docName) {\n      this.docName = this.editableDocs[0] || '';\n    }\n  };\n\n  handleUndo = () => {\n    this.undo();\n  };\n\n  handleRedo = () => {\n    this.redo();\n  };\n\n  private handleKeyPress = (e: KeyboardEvent) => {\n    if (!e.ctrlKey) {\n      return;\n    }\n    if (!Object.prototype.hasOwnProperty.call(this.hotkeys, e.key)) {\n      return;\n    }\n    this.hotkeys[e.key]!.call(this);\n    e.preventDefault();\n  };\n\n  handleOpenPluginMenu = () => {\n    this.pluginsMenu.open();\n  };\n\n  /** Undo the last `n` [[Edit]]s committed */\n  undo = (n = 1) => {\n    if (!this.canUndo || n < 1) {\n      return;\n    }\n    this.xmlEditor.undo();\n    if (n > 1) {\n      this.undo(n - 1);\n    }\n    this.requestUpdate();\n  };\n\n  /** Redo the last `n` [[Edit]]s that have been undone */\n  redo = (n = 1) => {\n    if (!this.canRedo || n < 1) {\n      return;\n    }\n    this.xmlEditor.redo();\n    if (n > 1) {\n      this.redo(n - 1);\n    }\n    this.requestUpdate();\n  };\n\n  private hotkeys: Partial<Record<string, () => void>> = {\n    m: this.handleOpenPluginMenu,\n    z: this.undo,\n    y: this.redo,\n    Z: this.redo,\n  };\n\n  isEditable(docName: string): boolean {\n    return !!this.editable.find(ext =>\n      docName.toLowerCase().endsWith(`.${ext}`),\n    );\n  }\n\n  onDocsChanged() {\n    this.docVersion += 1;\n  }\n\n  renderPlugin(tagName: string) {\n    const tag = unsafeStatic(tagName);\n    return staticHtml`<${tag} \n              .locale=\"${this.locale}\"\n              .docName=\"${this.docName}\"\n              .doc=${this.doc}\n              .docs=${this.docs} \n              .editCount=${this.docVersion}\n              .docVersion=${this.docVersion}\n              .editor=${this.xmlEditor}>\n            </${tag}>`;\n  }\n\n  onMenuPluginSelect(customEvent: CustomEvent) {\n    const plugin = customEvent.detail.plugin as PluginEntry;\n    if (plugin.tagName) {\n      this.shadowRoot!.querySelector<\n        HTMLElement & { run: () => Promise<void> }\n      >(plugin.tagName)!.run?.();\n    }\n  }\n\n  renderOffScreenPlugins() {\n    return html`\n      <section class=\"off-screen-plugin-container\" aria-hidden=\"true\">\n        <div class=\"menu-plugins\">\n          ${this.plugins.menu\n            .filter(plugin => !plugin.requireDoc || !!this.docName)\n            .map(plugin => this.renderPlugin(plugin.tagName))}\n        </div>\n        <div class=\"background-plugins\">\n          ${this.plugins.background\n            .filter(plugin => !plugin.requireDoc || !!this.docName)\n            .map(plugin => this.renderPlugin(plugin.tagName))}\n        </div>\n      </section>\n    `;\n  }\n\n  renderDefaultLandingPage() {\n    return html`\n      <landing-page\n        heading=${this.landingPageHeading}\n        subHeading=${this.landingPageSubHeading}\n        .menuPlugins=${this.plugins.menu.filter(\n          plugin => !plugin.requireDoc || !!this.docName,\n        )}\n        .locale=${this.locale}\n        @menu-plugin-select=${(event: CustomEvent) =>\n          this.onMenuPluginSelect(event)}\n      >\n      </landing-page>\n    `;\n  }\n\n  render() {\n    const hasCustomLandingPage = !!this._landingPageNodes?.length;\n    if (this.editableDocs.length === 0) {\n      return html` <slot\n          name=\"landing-page\"\n          @slotchange=${() => this.requestUpdate()}\n        ></slot>\n        ${!hasCustomLandingPage ? this.renderDefaultLandingPage() : nothing}\n        ${this.renderOffScreenPlugins()}`;\n    }\n\n    return html` <oscd-app-bar>\n        <plugins-menu\n          slot=\"alignStart\"\n          appTitle=${this.appTitle}\n          appIcon=${this.appIcon}\n          .editableDocs=${this.editableDocs}\n          .menuPlugins=${this.plugins.menu}\n          .locale=${this.locale}\n          @menu-plugin-select=${(event: CustomEvent) =>\n            this.onMenuPluginSelect(event)}\n        ></plugins-menu>\n\n        <files-menu\n          slot=\"alignMiddle\"\n          .selectedDocName=${this.docName}\n          .editableDocs=${this.editableDocs}\n          .locale=${this.locale}\n          @change=${(event: CustomEvent) => {\n            const name = event.detail.name as string;\n            this.docName = name;\n          }}\n        ></files-menu>\n\n        <div slot=\"alignEnd\">\n          <oscd-filled-icon-button\n            aria-label=\"${msg('Undo')}\"\n            ?disabled=${!this.canUndo}\n            @click=${async () => {\n              this.dispatchEvent(\n                new CustomEvent('oscd-undo', {\n                  bubbles: true,\n                  composed: true,\n                }),\n              );\n            }}\n            ><oscd-icon>undo</oscd-icon></oscd-filled-icon-button\n          >\n          <oscd-filled-icon-button\n            aria-label=\"${msg('Redo')}\"\n            ?disabled=${!this.canRedo}\n            @click=${async () => {\n              this.dispatchEvent(\n                new CustomEvent('oscd-redo', {\n                  bubbles: true,\n                  composed: true,\n                }),\n              );\n            }}\n            ><oscd-icon>redo</oscd-icon></oscd-filled-icon-button\n          >\n        </div>\n      </oscd-app-bar>\n\n      <main>\n        <section class=\"editors-side-panel-section\">\n          <editor-plugins-panel\n            .editors=${this.plugins.editor}\n            .editorIndex=${this.editorIndex}\n            .locale=${this.locale}\n            @editor-select=${(e: CustomEvent) => {\n              this.editorIndex = e.detail.index;\n            }}\n          ></editor-plugins-panel>\n        </section>\n\n        <section class=\"editor-container\">\n          ${this.editor ? this.renderPlugin(this.editor) : nothing}\n        </section>\n\n        ${this.renderOffScreenPlugins()}\n      </main>`;\n  }\n\n  static styles = [\n    oscdShellDesignTokens,\n    css`\n      :host {\n        height: 100%;\n        display: grid;\n        grid-template-rows: min-content 1fr;\n        grid-template-columns: 1fr;\n        grid-template-areas:\n          'header'\n          'main';\n      }\n\n      oscd-app-bar {\n        grid-area: header;\n        box-shadow: var(--md-sys-elevation-level-2);\n        z-index: 10;\n      }\n\n      oscd-app-bar * {\n        --md-filled-icon-button-disabled-container-opacity: var(\n          --app-bar-action-icon-disabled-container-opacity,\n          0\n        );\n        --md-filled-icon-button-disabled-icon-color: var(\n          --app-bar-action-icon-disabled-color,\n          var(--md-sys-color-on-primary)\n        );\n        --md-filled-icon-button-icon-size: var(--app-bar-action-icon-size);\n        --md-filled-icon-button-icon-color: var(--app-bar-action-icon-color);\n      }\n\n      main {\n        grid-area: main;\n        display: grid;\n        grid-template-columns: var(--side-panel-width) 1fr;\n        grid-template-areas: 'sidebar editor';\n        overflow: hidden;\n      }\n\n      /* Side panel collapsed state */\n      main.sidebar-collapsed {\n        grid-template-columns: 0 1fr;\n      }\n\n      section.editors-side-panel-section {\n        grid-area: sidebar;\n        overflow-y: auto;\n        overflow-x: hidden;\n        transition: transform 0.3s ease-in-out;\n      }\n\n      /* Hide side panel when collapsed */\n      main.sidebar-collapsed section.editors-side-panel-section {\n        transform: translateX(-100%);\n      }\n\n      section.editor-container {\n        grid-area: editor;\n        background-color: var(--editor-background-color);\n        padding: var(--editor-padding);\n        overflow: auto;\n        position: relative;\n      }\n\n      .off-screen-plugin-container {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 0;\n        height: 0;\n        overflow: hidden;\n        margin: 0;\n        padding: 0;\n      }\n    `,\n  ];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'oscd-shell': OscdShell;\n  }\n}\n"]}

package/dist/side-panel/editor-plugins-panel.js

@@ -71,12 +71,12 @@ EditorPluginsPanel.scopedElements = {
 };
 EditorPluginsPanel.styles = css `
     :host {
-      width: 76px;
-      height: calc(100% - 20px);
+      width: var(--editor-plugins-panel-width);
+      height: calc(100% - var(--editor-plugins-panel-padding-top));
       display: grid;
       grid-template-rows: 1fr auto;
       min-height: 0;
-      padding-top: 20px;
+      padding-top: var(--editor-plugins-panel-padding-top);
       transition: width 0.1s ease-in-out;
       overflow-y: auto;
       overflow-x: hidden;
@@ -84,16 +84,24 @@ EditorPluginsPanel.styles = css `
 
     .editors-list {
       min-height: 0;
-      --md-list-item-leading-space: 22px;
-      --md-list-item-trailing-space: 10px;
-      --md-icon-size: 28px;
+      --md-list-item-leading-space: var(
+        --editor-plugins-panel-item-leading-space
+      );
+      --md-list-item-trailing-space: var(
+        --editor-plugins-panel-item-trailing-space
+      );
+      --md-icon-size: var(--editor-plugins-panel-item-icon-size);
       --md-list-container-color: rgba(0, 0, 0, 0);
-      --md-list-item-label-text-color: var(--oscd-base3);
-      --md-list-item-leading-icon-color: var(--oscd-base3);
+      --md-list-item-label-text-color: var(
+        --editor-plugins-panel-item-text-color
+      );
+      --md-list-item-leading-icon-color: var(
+        --editor-plugins-panel-item-icon-color
+      );
     }
 
     .editors-list .active {
-      background-color: var(--oscd-primary);
+      background-color: var(--editor-plugins-panel-item-active-bg);
     }
 
     .editors-list oscd-list-item span {
@@ -110,20 +118,28 @@ EditorPluginsPanel.styles = css `
     }
 
     .toggle-button {
-      --md-icon-color: var(--oscd-base3);
-      --md-icon-button-icon-size: 32px;
-      --md-icon-button-hover-state-layer-color: var(--oscd-base3);
+      --md-icon-color: var(--editor-plugins-panel-item-icon-color);
+      --md-icon-button-icon-size: var(--editor-plugins-panel-item-icon-size);
+      --md-icon-button-hover-state-layer-color: var(
+        --editor-plugins-panel-item-icon-color
+      );
       --md-icon-button-hover-state-layer-opacity: 0.08;
-      --md-icon-button-icon-color: var(--oscd-base3);
-      --md-icon-button-hover-icon-color: var(--oscd-base3);
-      --md-icon-button-focus-icon-color: var(--oscd-base3);
-      --md-icon-button-pressed-icon-color: var(--oscd-base3);
+      --md-icon-button-icon-color: var(--editor-plugins-panel-item-icon-color);
+      --md-icon-button-hover-icon-color: var(
+        --editor-plugins-panel-item-icon-color
+      );
+      --md-icon-button-focus-icon-color: var(
+        --editor-plugins-panel-item-icon-color
+      );
+      --md-icon-button-pressed-icon-color: var(
+        --editor-plugins-panel-item-icon-color
+      );
       --md-icon-button-state-layer-height: 48px;
       --md-icon-button-state-layer-width: 48px;
     }
 
     :host([expanded]) {
-      width: var(--side-panel-width, 240px);
+      width: var(--editor-plugins-panel-width);
     }
 
     /* :host([expanded]) .footer {

package/dist/side-panel/editor-plugins-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"editor-plugins-panel.js","sourceRoot":"","sources":["../../src/side-panel/editor-plugins-panel.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';\nimport { localized } from '@lit/localize';\n\nimport { OscdIconButton } from '@omicronenergy/oscd-ui/iconbutton/OscdIconButton.js';\nimport { OscdIcon } from '@omicronenergy/oscd-ui/icon/OscdIcon.js';\nimport { OscdList } from '@omicronenergy/oscd-ui/list/OscdList.js';\nimport { OscdListItem } from '@omicronenergy/oscd-ui/list/OscdListItem.js';\n\nimport { LocaleTag, Translation } from '../localization.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { PluginEntry } from '../oscd-shell.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'editor-plugins-panel': EditorPluginsPanel;\n  }\n}\n\n@localized()\nexport class EditorPluginsPanel extends ScopedElementsMixin(LitElement) {\n  static scopedElements = {\n    'oscd-icon-button': OscdIconButton,\n    'oscd-icon': OscdIcon,\n    'oscd-list': OscdList,\n    'oscd-list-item': OscdListItem,\n  };\n\n  @property({ type: Array })\n  editors: PluginEntry[] = [];\n\n  @property({ type: Number })\n  editorIndex = 0;\n\n  @property({ type: String })\n  locale!: LocaleTag;\n\n  // eslint-disable-next-line class-methods-use-this\n  @property({ type: Boolean, reflect: true })\n  get expanded() {\n    const expandedStr = localStorage.getItem('editorsPanel.expanded');\n    return expandedStr === 'false' ? false : true;\n  }\n  // eslint-disable-next-line class-methods-use-this\n  set expanded(expanded: boolean) {\n    localStorage.setItem('editorsPanel.expanded', String(expanded));\n  }\n\n  render() {\n    return html`\n      <oscd-list class=\"editors-list\" role=\"tablist\">\n        ${this.editors.map(\n          (editor, index) =>\n            html`<oscd-list-item\n              class=${classMap({ active: this.editorIndex === index })}\n              type=\"button\"\n              @click=${() => {\n                this.dispatchEvent(\n                  new CustomEvent('editor-select', {\n                    detail: { editor, index },\n                    bubbles: true,\n                    composed: true,\n                  }),\n                );\n              }}\n            >\n              <oscd-icon slot=\"start\">${editor.icon}</oscd-icon>\n              ${this.expanded\n                ? html`<span\n                    >${editor.translations?.[this.locale as Translation] ||\n                    editor.name}</span\n                  >`\n                : nothing}\n            </oscd-list-item>`,\n        )}\n      </oscd-list>\n      <div class=\"footer\">\n        <oscd-icon-button\n          class=\"toggle-button\"\n          @click=${() => {\n            this.expanded = !this.expanded;\n          }}\n        >\n          <oscd-icon\n            >${this.expanded\n              ? 'left_panel_close'\n              : 'left_panel_open'}</oscd-icon\n          ></oscd-icon-button\n        >\n      </div>\n    `;\n  }\n\n  static styles = css`\n    :host {\n      width: 76px;\n      height: calc(100% - 20px);\n      display: grid;\n      grid-template-rows: 1fr auto;\n      min-height: 0;\n      padding-top: 20px;\n      transition: width 0.1s ease-in-out;\n      overflow-y: auto;\n      overflow-x: hidden;\n    }\n\n    .editors-list {\n      min-height: 0;\n      --md-list-item-leading-space: 22px;\n      --md-list-item-trailing-space: 10px;\n      --md-icon-size: 28px;\n      --md-list-container-color: rgba(0, 0, 0, 0);\n      --md-list-item-label-text-color: var(--oscd-base3);\n      --md-list-item-leading-icon-color: var(--oscd-base3);\n    }\n\n    .editors-list .active {\n      background-color: var(--oscd-primary);\n    }\n\n    .editors-list oscd-list-item span {\n      /* prevents jitter when collapsing */\n      white-space: nowrap;\n    }\n\n    .footer {\n      /* setting this to display:none until re-design is fixed and its safe to remove */\n      display: none;\n      /* justify-self: center;\n      justify-content: center;\n      padding-block: 22px; */\n    }\n\n    .toggle-button {\n      --md-icon-color: var(--oscd-base3);\n      --md-icon-button-icon-size: 32px;\n      --md-icon-button-hover-state-layer-color: var(--oscd-base3);\n      --md-icon-button-hover-state-layer-opacity: 0.08;\n      --md-icon-button-icon-color: var(--oscd-base3);\n      --md-icon-button-hover-icon-color: var(--oscd-base3);\n      --md-icon-button-focus-icon-color: var(--oscd-base3);\n      --md-icon-button-pressed-icon-color: var(--oscd-base3);\n      --md-icon-button-state-layer-height: 48px;\n      --md-icon-button-state-layer-width: 48px;\n    }\n\n    :host([expanded]) {\n      width: var(--side-panel-width, 240px);\n    }\n\n    /* :host([expanded]) .footer {\n      justify-self: flex-end;\n      justify-content: flex-end;\n      padding-inline: 22px;\n    } */\n  `;\n}\n"]}
+{"version":3,"file":"editor-plugins-panel.js","sourceRoot":"","sources":["../../src/side-panel/editor-plugins-panel.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';\nimport { localized } from '@lit/localize';\n\nimport { OscdIconButton } from '@omicronenergy/oscd-ui/iconbutton/OscdIconButton.js';\nimport { OscdIcon } from '@omicronenergy/oscd-ui/icon/OscdIcon.js';\nimport { OscdList } from '@omicronenergy/oscd-ui/list/OscdList.js';\nimport { OscdListItem } from '@omicronenergy/oscd-ui/list/OscdListItem.js';\n\nimport { LocaleTag, Translation } from '../localization.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { PluginEntry } from '../oscd-shell.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'editor-plugins-panel': EditorPluginsPanel;\n  }\n}\n\n@localized()\nexport class EditorPluginsPanel extends ScopedElementsMixin(LitElement) {\n  static scopedElements = {\n    'oscd-icon-button': OscdIconButton,\n    'oscd-icon': OscdIcon,\n    'oscd-list': OscdList,\n    'oscd-list-item': OscdListItem,\n  };\n\n  @property({ type: Array })\n  editors: PluginEntry[] = [];\n\n  @property({ type: Number })\n  editorIndex = 0;\n\n  @property({ type: String })\n  locale!: LocaleTag;\n\n  // eslint-disable-next-line class-methods-use-this\n  @property({ type: Boolean, reflect: true })\n  get expanded() {\n    const expandedStr = localStorage.getItem('editorsPanel.expanded');\n    return expandedStr === 'false' ? false : true;\n  }\n  // eslint-disable-next-line class-methods-use-this\n  set expanded(expanded: boolean) {\n    localStorage.setItem('editorsPanel.expanded', String(expanded));\n  }\n\n  render() {\n    return html`\n      <oscd-list class=\"editors-list\" role=\"tablist\">\n        ${this.editors.map(\n          (editor, index) =>\n            html`<oscd-list-item\n              class=${classMap({ active: this.editorIndex === index })}\n              type=\"button\"\n              @click=${() => {\n                this.dispatchEvent(\n                  new CustomEvent('editor-select', {\n                    detail: { editor, index },\n                    bubbles: true,\n                    composed: true,\n                  }),\n                );\n              }}\n            >\n              <oscd-icon slot=\"start\">${editor.icon}</oscd-icon>\n              ${this.expanded\n                ? html`<span\n                    >${editor.translations?.[this.locale as Translation] ||\n                    editor.name}</span\n                  >`\n                : nothing}\n            </oscd-list-item>`,\n        )}\n      </oscd-list>\n      <div class=\"footer\">\n        <oscd-icon-button\n          class=\"toggle-button\"\n          @click=${() => {\n            this.expanded = !this.expanded;\n          }}\n        >\n          <oscd-icon\n            >${this.expanded\n              ? 'left_panel_close'\n              : 'left_panel_open'}</oscd-icon\n          ></oscd-icon-button\n        >\n      </div>\n    `;\n  }\n\n  static styles = css`\n    :host {\n      width: var(--editor-plugins-panel-width);\n      height: calc(100% - var(--editor-plugins-panel-padding-top));\n      display: grid;\n      grid-template-rows: 1fr auto;\n      min-height: 0;\n      padding-top: var(--editor-plugins-panel-padding-top);\n      transition: width 0.1s ease-in-out;\n      overflow-y: auto;\n      overflow-x: hidden;\n    }\n\n    .editors-list {\n      min-height: 0;\n      --md-list-item-leading-space: var(\n        --editor-plugins-panel-item-leading-space\n      );\n      --md-list-item-trailing-space: var(\n        --editor-plugins-panel-item-trailing-space\n      );\n      --md-icon-size: var(--editor-plugins-panel-item-icon-size);\n      --md-list-container-color: rgba(0, 0, 0, 0);\n      --md-list-item-label-text-color: var(\n        --editor-plugins-panel-item-text-color\n      );\n      --md-list-item-leading-icon-color: var(\n        --editor-plugins-panel-item-icon-color\n      );\n    }\n\n    .editors-list .active {\n      background-color: var(--editor-plugins-panel-item-active-bg);\n    }\n\n    .editors-list oscd-list-item span {\n      /* prevents jitter when collapsing */\n      white-space: nowrap;\n    }\n\n    .footer {\n      /* setting this to display:none until re-design is fixed and its safe to remove */\n      display: none;\n      /* justify-self: center;\n      justify-content: center;\n      padding-block: 22px; */\n    }\n\n    .toggle-button {\n      --md-icon-color: var(--editor-plugins-panel-item-icon-color);\n      --md-icon-button-icon-size: var(--editor-plugins-panel-item-icon-size);\n      --md-icon-button-hover-state-layer-color: var(\n        --editor-plugins-panel-item-icon-color\n      );\n      --md-icon-button-hover-state-layer-opacity: 0.08;\n      --md-icon-button-icon-color: var(--editor-plugins-panel-item-icon-color);\n      --md-icon-button-hover-icon-color: var(\n        --editor-plugins-panel-item-icon-color\n      );\n      --md-icon-button-focus-icon-color: var(\n        --editor-plugins-panel-item-icon-color\n      );\n      --md-icon-button-pressed-icon-color: var(\n        --editor-plugins-panel-item-icon-color\n      );\n      --md-icon-button-state-layer-height: 48px;\n      --md-icon-button-state-layer-width: 48px;\n    }\n\n    :host([expanded]) {\n      width: var(--editor-plugins-panel-width);\n    }\n\n    /* :host([expanded]) .footer {\n      justify-self: flex-end;\n      justify-content: flex-end;\n      padding-inline: 22px;\n    } */\n  `;\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omicronenergy/oscd-shell",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "The shell component of OpenSCD, where plugins are loaded and the application is initialized.",
   "repository": {
     "type": "git",