@oicl/openbridge-webcomponents 0.0.8 → 0.0.10

package/dist/components/navigation-item/navigation-item.css.js

@@ -65,7 +65,6 @@ const compentStyle = css`.wrapper {
     font-style: normal;
     font-weight: 650;
     line-height: 24px;
-    /* 150% */
   }
 .wrapper.checked {
   border-color: var(--amplified-enabled-border-color);
@@ -100,6 +99,8 @@ const compentStyle = css`.wrapper {
   cursor: not-allowed;
   color: var(--on-amplified-disabled-color);
 }
+
+/* 150% */
 .wrapper.checked .icon {
       color: var(--instrument-enhanced-secondary-color);
     }

package/dist/components/navigation-item/navigation-item.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-item.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"navigation-item.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/notification-button/notification-button.css.js

@@ -19,13 +19,13 @@ const componentStyle = css`* {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--on-normal-active-color);
   font-family: 'Noto Sans';
   font-size: 1rem;
   font-style: normal;
   font-weight: 570;
   line-height: 1.5rem;
   /* 150% */
+  color: var(--on-normal-active-color);
 }
 
 .wrapper {

package/dist/components/rich-button/rich-button.css.js

@@ -5,17 +5,20 @@ const compentStyle = css`* {
 
 .wrapper {
     position: relative;
+}
+
+.wrapper:not(.info) {
     background-color: var(--container-background-color);
     box-shadow: var(--shadow-flat);
     overflow: hidden;
 }
 
-.wrapper.top, .wrapper.regular {
+.wrapper.top:not(.info), .wrapper.regular:not(.info) {
         border-top-left-radius: 6px;
         border-top-right-radius: 6px;
     }
 
-.wrapper.bottom, .wrapper.regular {
+.wrapper.bottom:not(.info), .wrapper.regular:not(.info) {
         border-bottom-left-radius: 6px;
         border-bottom-right-radius: 6px;
     }
@@ -23,14 +26,15 @@ const compentStyle = css`* {
 button {
     width: 100%;
     appearance: none;
-    border-width: 0 !important;
     display: flex;
     flex-direction: column;
     text-align: left;
     padding: 0;
+    border-width: 0 !important;
+    background-color: transparent;
 }
 
-button {
+.wrapper:not(.info) button {
     border-color: var(--flat-enabled-border-color);
     background-color: var(--flat-enabled-background-color);
     border-width: 1px;
@@ -38,32 +42,32 @@ button {
     cursor: pointer;
 }
 
-button:focus {
+.wrapper:not(.info) button:focus {
     outline: none;
 }
 
-button.activated {
+.wrapper:not(.info) button.activated {
     border-color: var(--flat-activated-border-color);
     background-color: var(--flat-activated-background-color);
 }
 
-button:focus-visible {
+.wrapper:not(.info) button:focus-visible {
     outline-color: hsla(211, 100%, 44%, 0.3);
     outline-width: 4px;
     outline-style: solid;
 }
 
-button:hover {
+.wrapper:not(.info) button:hover {
     border-color: var(--flat-hover-border-color);
     background-color: var(--flat-hover-background-color);
 }
 
-button:active {
+.wrapper:not(.info) button:active {
     border-color: var(--flat-pressed-border-color);
     background-color: var(--flat-pressed-background-color);
 }
 
-button:disabled {
+.wrapper:not(.info) button:disabled {
     border-color: var(--flat-disabled-border-color);
     background-color: var(--flat-disabled-background-color);
     cursor: not-allowed;
@@ -175,6 +179,12 @@ button:disabled {
     border-bottom: 1px solid var(--border-outline-color);
     margin-bottom: -1px;
 }
+
+.info .graphic {
+    border-radius: 6px;
+    box-shadow: var(--shadow-flat);
+    overflow: hidden;
+}
 `;
 export {
   compentStyle as default

package/dist/components/rich-button/rich-button.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"rich-button.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"rich-button.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/rich-button/rich-button.d.ts

@@ -15,6 +15,7 @@ export type ObcRichButtonSizeType = 'single-line' | 'double-line' | 'multi-line'
 export declare class ObcRichButton extends LitElement {
     position: ObcRichButtonPositionType;
     size: ObcRichButtonSizeType;
+    info: boolean;
     hasLeadingIcon: boolean;
     hasTrailingIcon: boolean;
     hasStatus: boolean;

package/dist/components/rich-button/rich-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rich-button.d.ts","sourceRoot":"","sources":["../../../src/components/rich-button/rich-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAKzD,oBAAY,qBAAqB;IAC/B,OAAO,YAAY;IACnB,GAAG,QAAQ;IACX,MAAM,WAAW;IACjB,MAAM,WAAW;CAClB;AACD,MAAM,MAAM,yBAAyB,GAAG,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEhF,oBAAY,iBAAiB;IAC3B,UAAU,gBAAgB;IAC1B,UAAU,gBAAgB;IAC1B,SAAS,eAAe;CACzB;AACD,MAAM,MAAM,qBAAqB,GAC7B,aAAa,GACb,aAAa,GACb,YAAY,CAAC;AAEjB,qBACa,aAAc,SAAQ,UAAU;IACjB,QAAQ,EAAE,yBAAyB,CAC7B;IACN,IAAI,EAAE,qBAAqB,CACtB;IAC2B,cAAc,UAChE;IACmD,eAAe,UAClE;IAC4C,SAAS,UAAS;IACjB,UAAU,UAAS;IAChB,aAAa,UAAS;IACnD,MAAM,UAAS;IAEjC,MAAM;IAiDf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
+{"version":3,"file":"rich-button.d.ts","sourceRoot":"","sources":["../../../src/components/rich-button/rich-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAKzD,oBAAY,qBAAqB;IAC/B,OAAO,YAAY;IACnB,GAAG,QAAQ;IACX,MAAM,WAAW;IACjB,MAAM,WAAW;CAClB;AACD,MAAM,MAAM,yBAAyB,GAAG,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEhF,oBAAY,iBAAiB;IAC3B,UAAU,gBAAgB;IAC1B,UAAU,gBAAgB;IAC1B,SAAS,eAAe;CACzB;AACD,MAAM,MAAM,qBAAqB,GAC7B,aAAa,GACb,aAAa,GACb,YAAY,CAAC;AAEjB,qBACa,aAAc,SAAQ,UAAU;IACjB,QAAQ,EAAE,yBAAyB,CAC7B;IACN,IAAI,EAAE,qBAAqB,CACtB;IACJ,IAAI,UAAS;IACkB,cAAc,UAChE;IACmD,eAAe,UAClE;IAC4C,SAAS,UAAS;IACjB,UAAU,UAAS;IAChB,aAAa,UAAS;IACnD,MAAM,UAAS;IAEjC,MAAM;IAkDf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/dist/components/rich-button/rich-button.js

@@ -31,6 +31,7 @@ let ObcRichButton = class extends LitElement {
     super(...arguments);
     this.position = "regular";
     this.size = "single-line";
+    this.info = false;
     this.hasLeadingIcon = false;
     this.hasTrailingIcon = false;
     this.hasStatus = false;
@@ -46,6 +47,7 @@ let ObcRichButton = class extends LitElement {
       [this.position]: true,
       [this.size]: true,
       "graphic-border": this.graphicBorder,
+      info: this.info,
       border: this.border
     })}
       >
@@ -84,6 +86,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String })
 ], ObcRichButton.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcRichButton.prototype, "info", 2);
 __decorateClass([
   property({ type: Boolean, attribute: "has-leading-icon" })
 ], ObcRichButton.prototype, "hasLeadingIcon", 2);

package/dist/components/rich-button/rich-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"rich-button.js","sources":["../../../src/components/rich-button/rich-button.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport compentStyle from './rich-button.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\n\nexport enum ObcRichButtonPosition {\n  Regular = 'regular',\n  Top = 'top',\n  Bottom = 'bottom',\n  Center = 'center',\n}\nexport type ObcRichButtonPositionType = 'regular' | 'top' | 'bottom' | 'center';\n\nexport enum ObcRichButtonSize {\n  SingleLine = 'single-line',\n  DoubleLine = 'double-line',\n  MultiLine = 'multi-line',\n}\nexport type ObcRichButtonSizeType =\n  | 'single-line'\n  | 'double-line'\n  | 'multi-line';\n\n@customElement('obc-rich-button')\nexport class ObcRichButton extends LitElement {\n  @property({type: String}) position: ObcRichButtonPositionType =\n    ObcRichButtonPosition.Regular;\n  @property({type: String}) size: ObcRichButtonSizeType =\n    ObcRichButtonSize.SingleLine;\n  @property({type: Boolean, attribute: 'has-leading-icon'}) hasLeadingIcon =\n    false;\n  @property({type: Boolean, attribute: 'has-trailing-icon'}) hasTrailingIcon =\n    false;\n  @property({type: Boolean, attribute: 'has-status'}) hasStatus = false;\n  @property({type: Boolean, attribute: 'has-graphic'}) hasGraphic = false;\n  @property({type: Boolean, attribute: 'graphic-border'}) graphicBorder = false;\n  @property({type: Boolean}) border = false;\n\n  override render() {\n    return html`\n      <div\n        class=${classMap({\n          wrapper: true,\n          [this.position]: true,\n          [this.size]: true,\n          'graphic-border': this.graphicBorder,\n          border: this.border,\n        })}\n      >\n        <button>\n          ${this.hasGraphic\n            ? html`<div class=\"graphic\"><slot name=\"graphic\"></slot></div>`\n            : nothing}\n          <div class=\"container\">\n            <div class=\"container-content\">\n              ${this.hasLeadingIcon\n                ? html`<div class=\"leading-icon\">\n                    <slot name=\"leading-icon\"></slot>\n                  </div>`\n                : nothing}\n              <div class=\"content\">\n                <slot name=\"label\"></slot>\n                ${this.size === ObcRichButtonSize.SingleLine\n                  ? nothing\n                  : html`<slot name=\"description\"></slot>`}\n              </div>\n            </div>\n            ${this.hasStatus\n              ? html`\n                  <div class=\"status\">\n                    <slot name=\"status\"></slot>\n                  </div>\n                `\n              : nothing}\n            ${this.hasTrailingIcon\n              ? html`\n                  <div class=\"trailing-icon\">\n                    <slot name=\"trailing-icon\"></slot>\n                  </div>\n                `\n              : nothing}\n          </div>\n        </button>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-rich-button': ObcRichButton;\n  }\n}\n"],"names":["ObcRichButtonPosition","ObcRichButtonSize"],"mappings":";;;;;;;;;;;;;;;AAKY,IAAA,0CAAAA,2BAAL;AACLA,yBAAA,SAAU,IAAA;AACVA,yBAAA,KAAM,IAAA;AACNA,yBAAA,QAAS,IAAA;AACTA,yBAAA,QAAS,IAAA;AAJCA,SAAAA;AAAA,GAAA,yBAAA,CAAA,CAAA;AAQA,IAAA,sCAAAC,uBAAL;AACLA,qBAAA,YAAa,IAAA;AACbA,qBAAA,YAAa,IAAA;AACbA,qBAAA,WAAY,IAAA;AAHFA,SAAAA;AAAA,GAAA,qBAAA,CAAA,CAAA;AAWC,IAAA,gBAAN,cAA4B,WAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA;AAEH,SAAA,WAAA;AAEA,SAAA,OAAA;AAEA,SAAA,iBAAA;AAEA,SAAA,kBAAA;AAC8D,SAAA,YAAA;AACE,SAAA,aAAA;AACM,SAAA,gBAAA;AACpC,SAAA,SAAA;AAAA,EAAA;AAAA,EAE3B,SAAS;AACT,WAAA;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,SAAS;AAAA,MACT,CAAC,KAAK,QAAQ,GAAG;AAAA,MACjB,CAAC,KAAK,IAAI,GAAG;AAAA,MACb,kBAAkB,KAAK;AAAA,MACvB,QAAQ,KAAK;AAAA,IAAA,CACd,CAAC;AAAA;AAAA;AAAA,YAGE,KAAK,aACH,gEACA,OAAO;AAAA;AAAA;AAAA,gBAGL,KAAK,iBACH;AAAA;AAAA,4BAGA,OAAO;AAAA;AAAA;AAAA,kBAGP,KAAK,SAAS,gBACZ,UACA,sCAAsC;AAAA;AAAA;AAAA,cAG5C,KAAK,YACH;AAAA;AAAA;AAAA;AAAA,oBAKA,OAAO;AAAA,cACT,KAAK,kBACH;AAAA;AAAA;AAAA;AAAA,oBAKA,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKrB;AAGF;AAhEa,cA+DK,SAAS,UAAU,YAAY;AA9DrB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,cACe,WAAA,YAAA,CAAA;AAEA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAHb,cAGe,WAAA,QAAA,CAAA;AAEgC,gBAAA;AAAA,EAAzD,SAAS,EAAC,MAAM,SAAS,WAAW,oBAAmB;AAAA,GAL7C,cAK+C,WAAA,kBAAA,CAAA;AAEC,gBAAA;AAAA,EAA1D,SAAS,EAAC,MAAM,SAAS,WAAW,qBAAoB;AAAA,GAP9C,cAOgD,WAAA,mBAAA,CAAA;AAEP,gBAAA;AAAA,EAAnD,SAAS,EAAC,MAAM,SAAS,WAAW,cAAa;AAAA,GATvC,cASyC,WAAA,aAAA,CAAA;AACC,gBAAA;AAAA,EAApD,SAAS,EAAC,MAAM,SAAS,WAAW,eAAc;AAAA,GAVxC,cAU0C,WAAA,cAAA,CAAA;AACG,gBAAA;AAAA,EAAvD,SAAS,EAAC,MAAM,SAAS,WAAW,kBAAiB;AAAA,GAX3C,cAW6C,WAAA,iBAAA,CAAA;AAC7B,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,SAAQ;AAAA,GAZd,cAYgB,WAAA,UAAA,CAAA;AAZhB,gBAAN,gBAAA;AAAA,EADN,cAAc,iBAAiB;AAAA,GACnB,aAAA;"}
+{"version":3,"file":"rich-button.js","sources":["../../../src/components/rich-button/rich-button.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport compentStyle from './rich-button.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\n\nexport enum ObcRichButtonPosition {\n  Regular = 'regular',\n  Top = 'top',\n  Bottom = 'bottom',\n  Center = 'center',\n}\nexport type ObcRichButtonPositionType = 'regular' | 'top' | 'bottom' | 'center';\n\nexport enum ObcRichButtonSize {\n  SingleLine = 'single-line',\n  DoubleLine = 'double-line',\n  MultiLine = 'multi-line',\n}\nexport type ObcRichButtonSizeType =\n  | 'single-line'\n  | 'double-line'\n  | 'multi-line';\n\n@customElement('obc-rich-button')\nexport class ObcRichButton extends LitElement {\n  @property({type: String}) position: ObcRichButtonPositionType =\n    ObcRichButtonPosition.Regular;\n  @property({type: String}) size: ObcRichButtonSizeType =\n    ObcRichButtonSize.SingleLine;\n  @property({type: Boolean}) info = false;\n  @property({type: Boolean, attribute: 'has-leading-icon'}) hasLeadingIcon =\n    false;\n  @property({type: Boolean, attribute: 'has-trailing-icon'}) hasTrailingIcon =\n    false;\n  @property({type: Boolean, attribute: 'has-status'}) hasStatus = false;\n  @property({type: Boolean, attribute: 'has-graphic'}) hasGraphic = false;\n  @property({type: Boolean, attribute: 'graphic-border'}) graphicBorder = false;\n  @property({type: Boolean}) border = false;\n\n  override render() {\n    return html`\n      <div\n        class=${classMap({\n          wrapper: true,\n          [this.position]: true,\n          [this.size]: true,\n          'graphic-border': this.graphicBorder,\n          info: this.info,\n          border: this.border,\n        })}\n      >\n        <button>\n          ${this.hasGraphic\n            ? html`<div class=\"graphic\"><slot name=\"graphic\"></slot></div>`\n            : nothing}\n          <div class=\"container\">\n            <div class=\"container-content\">\n              ${this.hasLeadingIcon\n                ? html`<div class=\"leading-icon\">\n                    <slot name=\"leading-icon\"></slot>\n                  </div>`\n                : nothing}\n              <div class=\"content\">\n                <slot name=\"label\"></slot>\n                ${this.size === ObcRichButtonSize.SingleLine\n                  ? nothing\n                  : html`<slot name=\"description\"></slot>`}\n              </div>\n            </div>\n            ${this.hasStatus\n              ? html`\n                  <div class=\"status\">\n                    <slot name=\"status\"></slot>\n                  </div>\n                `\n              : nothing}\n            ${this.hasTrailingIcon\n              ? html`\n                  <div class=\"trailing-icon\">\n                    <slot name=\"trailing-icon\"></slot>\n                  </div>\n                `\n              : nothing}\n          </div>\n        </button>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-rich-button': ObcRichButton;\n  }\n}\n"],"names":["ObcRichButtonPosition","ObcRichButtonSize"],"mappings":";;;;;;;;;;;;;;;AAKY,IAAA,0CAAAA,2BAAL;AACLA,yBAAA,SAAU,IAAA;AACVA,yBAAA,KAAM,IAAA;AACNA,yBAAA,QAAS,IAAA;AACTA,yBAAA,QAAS,IAAA;AAJCA,SAAAA;AAAA,GAAA,yBAAA,CAAA,CAAA;AAQA,IAAA,sCAAAC,uBAAL;AACLA,qBAAA,YAAa,IAAA;AACbA,qBAAA,YAAa,IAAA;AACbA,qBAAA,WAAY,IAAA;AAHFA,SAAAA;AAAA,GAAA,qBAAA,CAAA,CAAA;AAWC,IAAA,gBAAN,cAA4B,WAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA;AAEH,SAAA,WAAA;AAEA,SAAA,OAAA;AACgC,SAAA,OAAA;AAEhC,SAAA,iBAAA;AAEA,SAAA,kBAAA;AAC8D,SAAA,YAAA;AACE,SAAA,aAAA;AACM,SAAA,gBAAA;AACpC,SAAA,SAAA;AAAA,EAAA;AAAA,EAE3B,SAAS;AACT,WAAA;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,SAAS;AAAA,MACT,CAAC,KAAK,QAAQ,GAAG;AAAA,MACjB,CAAC,KAAK,IAAI,GAAG;AAAA,MACb,kBAAkB,KAAK;AAAA,MACvB,MAAM,KAAK;AAAA,MACX,QAAQ,KAAK;AAAA,IAAA,CACd,CAAC;AAAA;AAAA;AAAA,YAGE,KAAK,aACH,gEACA,OAAO;AAAA;AAAA;AAAA,gBAGL,KAAK,iBACH;AAAA;AAAA,4BAGA,OAAO;AAAA;AAAA;AAAA,kBAGP,KAAK,SAAS,gBACZ,UACA,sCAAsC;AAAA;AAAA;AAAA,cAG5C,KAAK,YACH;AAAA;AAAA;AAAA;AAAA,oBAKA,OAAO;AAAA,cACT,KAAK,kBACH;AAAA;AAAA;AAAA;AAAA,oBAKA,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKrB;AAGF;AAlEa,cAiEK,SAAS,UAAU,YAAY;AAhErB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,cACe,WAAA,YAAA,CAAA;AAEA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAHb,cAGe,WAAA,QAAA,CAAA;AAEC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,SAAQ;AAAA,GALd,cAKgB,WAAA,QAAA,CAAA;AAC+B,gBAAA;AAAA,EAAzD,SAAS,EAAC,MAAM,SAAS,WAAW,oBAAmB;AAAA,GAN7C,cAM+C,WAAA,kBAAA,CAAA;AAEC,gBAAA;AAAA,EAA1D,SAAS,EAAC,MAAM,SAAS,WAAW,qBAAoB;AAAA,GAR9C,cAQgD,WAAA,mBAAA,CAAA;AAEP,gBAAA;AAAA,EAAnD,SAAS,EAAC,MAAM,SAAS,WAAW,cAAa;AAAA,GAVvC,cAUyC,WAAA,aAAA,CAAA;AACC,gBAAA;AAAA,EAApD,SAAS,EAAC,MAAM,SAAS,WAAW,eAAc;AAAA,GAXxC,cAW0C,WAAA,cAAA,CAAA;AACG,gBAAA;AAAA,EAAvD,SAAS,EAAC,MAAM,SAAS,WAAW,kBAAiB;AAAA,GAZ3C,cAY6C,WAAA,iBAAA,CAAA;AAC7B,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,SAAQ;AAAA,GAbd,cAagB,WAAA,UAAA,CAAA;AAbhB,gBAAN,gBAAA;AAAA,EADN,cAAc,iBAAiB;AAAA,GACnB,aAAA;"}

package/dist/components/slider/slider.css.js

@@ -23,6 +23,7 @@ const componentStyle = css`* {
   position: relative;
 }
 
+
 .slider {
   position: absolute;
   -webkit-appearance: none;
@@ -71,6 +72,25 @@ const componentStyle = css`* {
   background: var(--selected-enabled-background-color);
 }
 
+.no-input .interactive-track {
+  width: calc(var(--ratio) * 100% + (1 - 2 * var(--ratio)) * 4px);
+}
+
+
+/* used in non-interactive mode */
+.passive-thumb {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  top: 16px;
+  left: calc(var(--ratio) * 100% - 8px + (1 - 2 * var(--ratio)) * 4px);
+  border-radius: 100%;
+  border-width: 4px;
+  border-style: solid;
+  border-color: var(--container-background-color);
+  background: var(--selected-enabled-background-color);
+}
+
 .wrapper:hover .interactive-track {
   background: var(--selected-hover-background-color);
 }

package/dist/components/slider/slider.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"slider.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/slider/slider.d.ts

@@ -1,5 +1,10 @@
 import { LitElement } from 'lit';
 import '../icon-button/icon-button';
+export declare enum ObcSliderVariant {
+    NoValue = "no-value",
+    NoInput = "no-input"
+}
+export type ObcSliderVariantType = 'no-value' | 'no-input';
 /**
  * @element obc-slider
  *
@@ -21,6 +26,9 @@ export declare class ObcSlider extends LitElement {
     max: number;
     step: number | undefined;
     stepClick: number;
+    variant: ObcSliderVariantType;
+    hasLeftIcon: boolean;
+    hasRightIcon: boolean;
     onInput(value: number): void;
     onReduceClick(): void;
     onIncreaseClick(): void;

package/dist/components/slider/slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/components/slider/slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAKhD,OAAO,4BAA4B,CAAC;AAEpC;;;;;;;;;;;;;;GAcG;AACH,qBACa,SAAU,SAAQ,UAAU;IACb,KAAK,SAAM;IACX,GAAG,SAAK;IACR,GAAG,SAAO;IACV,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACA,SAAS,SAAM;IAElE,OAAO,CAAC,KAAK,EAAE,MAAM;IAKrB,aAAa;IAIb,eAAe;IAIN,MAAM;IA+Bf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/components/slider/slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAKhD,OAAO,4BAA4B,CAAC;AAGpC,oBAAY,gBAAgB;IAC1B,OAAO,aAAa;IACpB,OAAO,aAAa;CACrB;AAED,MAAM,MAAM,oBAAoB,GAAG,UAAU,GAAG,UAAU,CAAC;AAE3D;;;;;;;;;;;;;;GAcG;AACH,qBACa,SAAU,SAAQ,UAAU;IACb,KAAK,SAAM;IACX,GAAG,SAAK;IACR,GAAG,SAAO;IACV,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACA,SAAS,SAAM;IACxC,OAAO,EAAE,oBAAoB,CAAc;IACd,WAAW,UAAS;IACnB,YAAY,UAAS;IAE7E,OAAO,CAAC,KAAK,EAAE,MAAM;IAKrB,aAAa;IAIb,eAAe;IAIN,MAAM;IA4Cf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/components/slider/slider.js

@@ -4,6 +4,7 @@ import { styleMap } from "lit/directives/style-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import componentStyle from "./slider.css.js";
 import "../icon-button/icon-button.js";
+import { classMap } from "lit/directives/class-map.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -15,6 +16,11 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
+var ObcSliderVariant = /* @__PURE__ */ ((ObcSliderVariant2) => {
+  ObcSliderVariant2["NoValue"] = "no-value";
+  ObcSliderVariant2["NoInput"] = "no-input";
+  return ObcSliderVariant2;
+})(ObcSliderVariant || {});
 let ObcSlider = class extends LitElement {
   constructor() {
     super(...arguments);
@@ -22,6 +28,9 @@ let ObcSlider = class extends LitElement {
     this.min = 0;
     this.max = 100;
     this.stepClick = 10;
+    this.variant = "no-value";
+    this.hasLeftIcon = false;
+    this.hasRightIcon = false;
   }
   onInput(value) {
     this.value = value;
@@ -36,31 +45,38 @@ let ObcSlider = class extends LitElement {
   render() {
     const ratio = (this.value - this.min) / (this.max - this.min);
     return html`
-      <obc-icon-button @click=${this.onReduceClick} variant="flat">
-        <slot name="icon-left"></slot>
-      </obc-icon-button>
-      <div class="wrapper">
+      ${this.hasLeftIcon ? html` <obc-icon-button @click=${this.onReduceClick} variant="flat">
+            <slot name="icon-left"></slot>
+          </obc-icon-button>` : null}
+      <div class=${classMap({ wrapper: true, [this.variant]: true })}>
         <div class="track"></div>
         <div
           class="interactive-track"
           style=${styleMap({ "--ratio": ratio })}
         ></div>
-        <input
-          type="range"
-          min=${this.min}
-          max=${this.max}
-          step=${ifDefined(this.step)}
-          .value=${this.value.toString()}
-          class="slider"
-          @input=${(event) => {
+        ${this.variant === "no-input" ? html`<div
+              class="passive-thumb"
+              style=${styleMap({ "--ratio": ratio })}
+            ></div>` : html`
+              <input
+                type="range"
+                min=${this.min}
+                max=${this.max}
+                step=${ifDefined(this.step)}
+                .value=${this.value.toString()}
+                class="slider"
+                @input=${(event) => {
       this.value = Number(event.target.value);
-      this.dispatchEvent(new CustomEvent("value", { detail: this.value }));
+      this.dispatchEvent(
+        new CustomEvent("value", { detail: this.value })
+      );
     }}
-        />
+              />
+            `}
       </div>
-      <obc-icon-button @click=${this.onIncreaseClick} variant="flat">
-        <slot name="icon-right"></slot>
-      </obc-icon-button>
+      ${this.hasRightIcon ? html`<obc-icon-button @click=${this.onIncreaseClick} variant="flat">
+            <slot name="icon-right"></slot>
+          </obc-icon-button>` : null}
     `;
   }
 };
@@ -80,10 +96,20 @@ __decorateClass([
 __decorateClass([
   property({ type: Number, attribute: "step-click" })
 ], ObcSlider.prototype, "stepClick", 2);
+__decorateClass([
+  property({ type: String })
+], ObcSlider.prototype, "variant", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "has-left-icon" })
+], ObcSlider.prototype, "hasLeftIcon", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "has-right-icon" })
+], ObcSlider.prototype, "hasRightIcon", 2);
 ObcSlider = __decorateClass([
   customElement("obc-slider")
 ], ObcSlider);
 export {
-  ObcSlider
+  ObcSlider,
+  ObcSliderVariant
 };
 //# sourceMappingURL=slider.js.map

package/dist/components/slider/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","sources":["../../../src/components/slider/slider.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {styleMap} from 'lit/directives/style-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport componentStyle from './slider.css?inline';\nimport '../icon-button/icon-button';\n\n/**\n * @element obc-slider\n *\n * @prop {number} value - The value of the slider\n * @prop {number} min - The minimum value of the slider\n * @prop {number} max - The maximum value of the slider\n * @prop {number} step - The step value of the slider\n * @prop {number} stepClick - The step value when clicking the increase or decrease buttons\n * @attr hug-container - If set, the slider will not have any spacing between the slider icons and the container\n *\n * @slot icon-left - Slot for the left icon\n * @slot icon-right - Slot for the right icon\n *\n * @fires value - Fires when the value is changed\n */\n@customElement('obc-slider')\nexport class ObcSlider extends LitElement {\n  @property({type: Number}) value = 50;\n  @property({type: Number}) min = 0;\n  @property({type: Number}) max = 100;\n  @property({type: Number}) step: number | undefined;\n  @property({type: Number, attribute: 'step-click'}) stepClick = 10;\n\n  onInput(value: number) {\n    this.value = value;\n    this.dispatchEvent(new CustomEvent('value', {detail: this.value}));\n  }\n\n  onReduceClick() {\n    this.onInput(Math.max(this.value - this.stepClick, this.min));\n  }\n\n  onIncreaseClick() {\n    this.onInput(Math.min(this.value + this.stepClick, this.max));\n  }\n\n  override render() {\n    const ratio = (this.value - this.min) / (this.max - this.min);\n    return html`\n      <obc-icon-button @click=${this.onReduceClick} variant=\"flat\">\n        <slot name=\"icon-left\"></slot>\n      </obc-icon-button>\n      <div class=\"wrapper\">\n        <div class=\"track\"></div>\n        <div\n          class=\"interactive-track\"\n          style=${styleMap({'--ratio': ratio})}\n        ></div>\n        <input\n          type=\"range\"\n          min=${this.min}\n          max=${this.max}\n          step=${ifDefined(this.step)}\n          .value=${this.value.toString()}\n          class=\"slider\"\n          @input=${(event: Event) => {\n            this.value = Number((event.target as HTMLInputElement).value);\n            this.dispatchEvent(new CustomEvent('value', {detail: this.value}));\n          }}\n        />\n      </div>\n      <obc-icon-button @click=${this.onIncreaseClick} variant=\"flat\">\n        <slot name=\"icon-right\"></slot>\n      </obc-icon-button>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-slider': ObcSlider;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAuBa,IAAA,YAAN,cAAwB,WAAW;AAAA,EAAnC,cAAA;AAAA,UAAA,GAAA,SAAA;AAC6B,SAAA,QAAA;AACF,SAAA,MAAA;AACA,SAAA,MAAA;AAE+B,SAAA,YAAA;AAAA,EAAA;AAAA,EAE/D,QAAQ,OAAe;AACrB,SAAK,QAAQ;AACR,SAAA,cAAc,IAAI,YAAY,SAAS,EAAC,QAAQ,KAAK,MAAM,CAAA,CAAC;AAAA,EACnE;AAAA,EAEA,gBAAgB;AACT,SAAA,QAAQ,KAAK,IAAI,KAAK,QAAQ,KAAK,WAAW,KAAK,GAAG,CAAC;AAAA,EAC9D;AAAA,EAEA,kBAAkB;AACX,SAAA,QAAQ,KAAK,IAAI,KAAK,QAAQ,KAAK,WAAW,KAAK,GAAG,CAAC;AAAA,EAC9D;AAAA,EAES,SAAS;AAChB,UAAM,SAAS,KAAK,QAAQ,KAAK,QAAQ,KAAK,MAAM,KAAK;AAClD,WAAA;AAAA,gCACqB,KAAK,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAOhC,SAAS,EAAC,WAAW,MAAM,CAAA,CAAC;AAAA;AAAA;AAAA;AAAA,gBAI9B,KAAK,GAAG;AAAA,gBACR,KAAK,GAAG;AAAA,iBACP,UAAU,KAAK,IAAI,CAAC;AAAA,mBAClB,KAAK,MAAM,UAAU;AAAA;AAAA,mBAErB,CAAC,UAAiB;AACzB,WAAK,QAAQ,OAAQ,MAAM,OAA4B,KAAK;AACvD,WAAA,cAAc,IAAI,YAAY,SAAS,EAAC,QAAQ,KAAK,MAAM,CAAA,CAAC;AAAA,IAAA,CAClE;AAAA;AAAA;AAAA,gCAGqB,KAAK,eAAe;AAAA;AAAA;AAAA;AAAA,EAIlD;AAGF;AApDa,UAmDK,SAAS,UAAU,cAAc;AAlDvB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,UACe,WAAA,SAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAFb,UAEe,WAAA,OAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAHb,UAGe,WAAA,OAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAJb,UAIe,WAAA,QAAA,CAAA;AACyB,gBAAA;AAAA,EAAlD,SAAS,EAAC,MAAM,QAAQ,WAAW,cAAa;AAAA,GALtC,UAKwC,WAAA,aAAA,CAAA;AALxC,YAAN,gBAAA;AAAA,EADN,cAAc,YAAY;AAAA,GACd,SAAA;"}
+{"version":3,"file":"slider.js","sources":["../../../src/components/slider/slider.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {styleMap} from 'lit/directives/style-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport componentStyle from './slider.css?inline';\nimport '../icon-button/icon-button';\nimport {classMap} from 'lit/directives/class-map.js';\n\nexport enum ObcSliderVariant {\n  NoValue = 'no-value',\n  NoInput = 'no-input',\n}\n\nexport type ObcSliderVariantType = 'no-value' | 'no-input';\n\n/**\n * @element obc-slider\n *\n * @prop {number} value - The value of the slider\n * @prop {number} min - The minimum value of the slider\n * @prop {number} max - The maximum value of the slider\n * @prop {number} step - The step value of the slider\n * @prop {number} stepClick - The step value when clicking the increase or decrease buttons\n * @attr hug-container - If set, the slider will not have any spacing between the slider icons and the container\n *\n * @slot icon-left - Slot for the left icon\n * @slot icon-right - Slot for the right icon\n *\n * @fires value - Fires when the value is changed\n */\n@customElement('obc-slider')\nexport class ObcSlider extends LitElement {\n  @property({type: Number}) value = 50;\n  @property({type: Number}) min = 0;\n  @property({type: Number}) max = 100;\n  @property({type: Number}) step: number | undefined;\n  @property({type: Number, attribute: 'step-click'}) stepClick = 10;\n  @property({type: String}) variant: ObcSliderVariantType = 'no-value';\n  @property({type: Boolean, attribute: 'has-left-icon'}) hasLeftIcon = false;\n  @property({type: Boolean, attribute: 'has-right-icon'}) hasRightIcon = false;\n\n  onInput(value: number) {\n    this.value = value;\n    this.dispatchEvent(new CustomEvent('value', {detail: this.value}));\n  }\n\n  onReduceClick() {\n    this.onInput(Math.max(this.value - this.stepClick, this.min));\n  }\n\n  onIncreaseClick() {\n    this.onInput(Math.min(this.value + this.stepClick, this.max));\n  }\n\n  override render() {\n    const ratio = (this.value - this.min) / (this.max - this.min);\n    return html`\n      ${this.hasLeftIcon\n        ? html` <obc-icon-button @click=${this.onReduceClick} variant=\"flat\">\n            <slot name=\"icon-left\"></slot>\n          </obc-icon-button>`\n        : null}\n      <div class=${classMap({wrapper: true, [this.variant]: true})}>\n        <div class=\"track\"></div>\n        <div\n          class=\"interactive-track\"\n          style=${styleMap({'--ratio': ratio})}\n        ></div>\n        ${this.variant === ObcSliderVariant.NoInput\n          ? html`<div\n              class=\"passive-thumb\"\n              style=${styleMap({'--ratio': ratio})}\n            ></div>`\n          : html`\n              <input\n                type=\"range\"\n                min=${this.min}\n                max=${this.max}\n                step=${ifDefined(this.step)}\n                .value=${this.value.toString()}\n                class=\"slider\"\n                @input=${(event: Event) => {\n                  this.value = Number((event.target as HTMLInputElement).value);\n                  this.dispatchEvent(\n                    new CustomEvent('value', {detail: this.value})\n                  );\n                }}\n              />\n            `}\n      </div>\n      ${this.hasRightIcon\n        ? html`<obc-icon-button @click=${this.onIncreaseClick} variant=\"flat\">\n            <slot name=\"icon-right\"></slot>\n          </obc-icon-button>`\n        : null}\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-slider': ObcSlider;\n  }\n}\n"],"names":["ObcSliderVariant"],"mappings":";;;;;;;;;;;;;;;;;;AAQY,IAAA,qCAAAA,sBAAL;AACLA,oBAAA,SAAU,IAAA;AACVA,oBAAA,SAAU,IAAA;AAFAA,SAAAA;AAAA,GAAA,oBAAA,CAAA,CAAA;AAuBC,IAAA,YAAN,cAAwB,WAAW;AAAA,EAAnC,cAAA;AAAA,UAAA,GAAA,SAAA;AAC6B,SAAA,QAAA;AACF,SAAA,MAAA;AACA,SAAA,MAAA;AAE+B,SAAA,YAAA;AACL,SAAA,UAAA;AACW,SAAA,cAAA;AACE,SAAA,eAAA;AAAA,EAAA;AAAA,EAEvE,QAAQ,OAAe;AACrB,SAAK,QAAQ;AACR,SAAA,cAAc,IAAI,YAAY,SAAS,EAAC,QAAQ,KAAK,MAAM,CAAA,CAAC;AAAA,EACnE;AAAA,EAEA,gBAAgB;AACT,SAAA,QAAQ,KAAK,IAAI,KAAK,QAAQ,KAAK,WAAW,KAAK,GAAG,CAAC;AAAA,EAC9D;AAAA,EAEA,kBAAkB;AACX,SAAA,QAAQ,KAAK,IAAI,KAAK,QAAQ,KAAK,WAAW,KAAK,GAAG,CAAC;AAAA,EAC9D;AAAA,EAES,SAAS;AAChB,UAAM,SAAS,KAAK,QAAQ,KAAK,QAAQ,KAAK,MAAM,KAAK;AAClD,WAAA;AAAA,QACH,KAAK,cACH,gCAAgC,KAAK,aAAa;AAAA;AAAA,gCAGlD,IAAI;AAAA,mBACK,SAAS,EAAC,SAAS,MAAM,CAAC,KAAK,OAAO,GAAG,KAAI,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,kBAIhD,SAAS,EAAC,WAAW,MAAM,CAAA,CAAC;AAAA;AAAA,UAEpC,KAAK,YAAY,aACf;AAAA;AAAA,sBAEU,SAAS,EAAC,WAAW,MAAM,CAAA,CAAC;AAAA,uBAEtC;AAAA;AAAA;AAAA,sBAGU,KAAK,GAAG;AAAA,sBACR,KAAK,GAAG;AAAA,uBACP,UAAU,KAAK,IAAI,CAAC;AAAA,yBAClB,KAAK,MAAM,UAAU;AAAA;AAAA,yBAErB,CAAC,UAAiB;AACzB,WAAK,QAAQ,OAAQ,MAAM,OAA4B,KAAK;AACvD,WAAA;AAAA,QACH,IAAI,YAAY,SAAS,EAAC,QAAQ,KAAK,OAAM;AAAA,MAAA;AAAA,IAC/C,CACD;AAAA;AAAA,aAEJ;AAAA;AAAA,QAEL,KAAK,eACH,+BAA+B,KAAK,eAAe;AAAA;AAAA,gCAGnD,IAAI;AAAA;AAAA,EAEZ;AAGF;AApEa,UAmEK,SAAS,UAAU,cAAc;AAlEvB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,UACe,WAAA,SAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAFb,UAEe,WAAA,OAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAHb,UAGe,WAAA,OAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAJb,UAIe,WAAA,QAAA,CAAA;AACyB,gBAAA;AAAA,EAAlD,SAAS,EAAC,MAAM,QAAQ,WAAW,cAAa;AAAA,GALtC,UAKwC,WAAA,aAAA,CAAA;AACzB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GANb,UAMe,WAAA,WAAA,CAAA;AAC6B,gBAAA;AAAA,EAAtD,SAAS,EAAC,MAAM,SAAS,WAAW,iBAAgB;AAAA,GAP1C,UAO4C,WAAA,eAAA,CAAA;AACC,gBAAA;AAAA,EAAvD,SAAS,EAAC,MAAM,SAAS,WAAW,kBAAiB;AAAA,GAR3C,UAQ6C,WAAA,gBAAA,CAAA;AAR7C,YAAN,gBAAA;AAAA,EADN,cAAc,YAAY;AAAA,GACd,SAAA;"}

package/dist/components/top-bar/top-bar.css.js

@@ -1,5 +1,9 @@
 import { css } from "lit";
-const compentStyle = css`.wrapper {
+const compentStyle = css`* {
+  box-sizing: border-box;
+}
+
+.wrapper {
   height: 48px;
   width: 100%;
   display: flex;

package/dist/components/top-bar/top-bar.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"top-bar.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"top-bar.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/top-bar/top-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"top-bar.d.ts","sourceRoot":"","sources":["../../../src/components/top-bar/top-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAIhD,OAAO,4BAA4B,CAAC;AACpC,OAAO,gBAAgB,CAAC;AACxB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAClC,OAAO,2BAA2B,CAAC;AACnC,OAAO,gCAAgC,CAAC;AACxC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,6BAA6B,CAAC;AACrC,OAAO,0BAA0B,CAAC;AAClC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,EAAC,cAAc,EAAC,MAAM,0BAA0B,CAAC;AAExD;;;;;;;GAOG;AACH,qBACa,SAAU,SAAQ,UAAU;IACb,QAAQ,SAAS;IACjB,QAAQ,SAAU;IAClB,IAAI,SAA8B;IAE5D,mBAAmB,UAAS;IAE5B,sBAAsB,UAAS;IAE/B,mBAAmB,UAAS;IAE5B,uBAAuB,UAAS;IAE0B,cAAc,UAChE;IACkD,cAAc,UAChE;IAER,iBAAiB,UAAS;IAC0B,SAAS,UAAS;IACnB,QAAQ,UAAS;IACzC,QAAQ,UAAS;IAE5C,qBAAqB,SAAO;IAE5B,yBAAyB,SAAO;IAEhC,oBAAoB,SAAO;IAE3B,yBAAyB,SAAO;IACL,QAAQ,UAAS;IAE5C,eAAe,EAAE,cAAc,EAAE,CAAM;IAEvC,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,qBAAqB;IAIpB,MAAM;IA6If,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,SAAS,CAAC;KAC1B;CACF"}
+{"version":3,"file":"top-bar.d.ts","sourceRoot":"","sources":["../../../src/components/top-bar/top-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAIhD,OAAO,4BAA4B,CAAC;AACpC,OAAO,gBAAgB,CAAC;AACxB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAClC,OAAO,2BAA2B,CAAC;AACnC,OAAO,gCAAgC,CAAC;AACxC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,6BAA6B,CAAC;AACrC,OAAO,0BAA0B,CAAC;AAClC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,EAAC,cAAc,EAAC,MAAM,0BAA0B,CAAC;AAExD;;;;;;;GAOG;AACH,qBACa,SAAU,SAAQ,UAAU;IACb,QAAQ,SAAS;IACjB,QAAQ,SAAU;IAClB,IAAI,SAA8B;IAE5D,mBAAmB,UAAS;IAE5B,sBAAsB,UAAS;IAE/B,mBAAmB,UAAS;IAE5B,uBAAuB,UAAS;IAE0B,cAAc,UAChE;IACkD,cAAc,UAChE;IAER,iBAAiB,UAAS;IAC0B,SAAS,UAAS;IACnB,QAAQ,UAAS;IACzC,QAAQ,UAAS;IAE5C,qBAAqB,SAAO;IAE5B,yBAAyB,SAAO;IAEhC,oBAAoB,SAAO;IAE3B,yBAAyB,SAAO;IACL,QAAQ,UAAS;IAE5C,eAAe,EAAE,cAAc,EAAE,CAAM;IAEvC,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,qBAAqB;IAIpB,MAAM;IA+If,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,SAAS,CAAC;KAC1B;CACF"}

package/dist/components/top-bar/top-bar.js

@@ -179,14 +179,14 @@ let ObcTopBar = class extends LitElement {
               >
                 <obi-01-apps></obi-01-apps>
               </obc-icon-button>` : null}
-          <obc-icon-button
-            class="left-more-button"
-            variant="flat"
-            @click=${this.leftMoreButtonClicked}
-            ?activated=${this.leftMoreButtonActivated}
-          >
-            <obi-01-more-vertical></obi-01-more-vertical>
-          </obc-icon-button>
+          ${!this.inactive ? html`<obc-icon-button
+                class="left-more-button"
+                variant="flat"
+                @click=${this.leftMoreButtonClicked}
+                ?activated=${this.leftMoreButtonActivated}
+              >
+                <obi-01-more-vertical></obi-01-more-vertical>
+              </obc-icon-button>` : null}
         </div>
       </nav>
     `;

package/dist/components/top-bar/top-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"top-bar.js","sources":["../../../src/components/top-bar/top-bar.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport compentStyle from './top-bar.css?inline';\nimport '../icon-button/icon-button';\nimport '../clock/clock';\nimport '../divider/divider';\nimport '../breadcrumb/breadcrumb';\nimport '../../icons/icon-01-menu';\nimport '../../icons/icon-01-close';\nimport '../../icons/icon-02-arrow-back';\nimport '../../icons/icon-02-arrow-forward';\nimport '../../icons/icon-04-dimming';\nimport '../../icons/icon-01-apps';\nimport '../../icons/icon-01-more-vertical';\nimport {BreadcrumbItem} from '../breadcrumb/breadcrumb';\n\n/**\n * Top bar component\n *\n * @fires menu-button-clicked - Menu button clicked\n * @fires dimming-button-clicked - Dimming button clicked\n * @fires apps-button-clicked - Apps button clicked\n * @fires left-more-button-clicked - Left more button clicked\n */\n@customElement('obc-top-bar')\nexport class ObcTopBar extends LitElement {\n  @property({type: String}) appTitle = 'App';\n  @property({type: String}) pageName = 'Page';\n  @property({type: String}) date = '2021-01-01T11:11:11.111Z';\n  @property({type: Boolean, attribute: 'menu-button-activated'})\n  menuButtonActivated = false;\n  @property({type: Boolean, attribute: 'dimming-button-activated'})\n  dimmingButtonActivated = false;\n  @property({type: Boolean, attribute: 'apps-button-activated'})\n  appsButtonActivated = false;\n  @property({type: Boolean, attribute: 'left-more-button-activated'})\n  leftMoreButtonActivated = false;\n\n  @property({type: Boolean, attribute: 'wide-menu-button'}) wideMenuButton =\n    false;\n  @property({type: Boolean, attribute: 'show-apps-button'}) showAppsButton =\n    false;\n  @property({type: Boolean, attribute: 'show-dimming-button'})\n  showDimmingButton = false;\n  @property({type: Boolean, attribute: 'show-clock'}) showClock = false;\n  @property({type: Boolean, attribute: 'show-date'}) showDate = false;\n  @property({type: Boolean}) inactive = false;\n  @property({type: Number, attribute: 'apps-button-breakpoint-px'})\n  appButtonBreakpointPx = 500;\n  @property({type: Number, attribute: 'dimming-button-breakpoint-px'})\n  dimmingButtonBreakpointPx = 500;\n  @property({type: Number, attribute: 'app-title-breakpoint-px'})\n  appTitleBreakpointPx = 500;\n  @property({type: Number, attribute: 'clock-minimize-breakpoint-px'})\n  clockMinimizeBreakpointPx = 300;\n  @property({type: Boolean}) settings = false;\n  @property({type: Array, attribute: 'breadcrumb-items'})\n  breadcrumbItems: BreadcrumbItem[] = [];\n\n  private menuButtonClicked() {\n    this.dispatchEvent(new CustomEvent('menu-button-clicked'));\n  }\n\n  private dimmingButtonClicked() {\n    this.dispatchEvent(new CustomEvent('dimming-button-clicked'));\n  }\n\n  private appsButtonClicked() {\n    this.dispatchEvent(new CustomEvent('apps-button-clicked'));\n  }\n\n  private leftMoreButtonClicked() {\n    this.dispatchEvent(new CustomEvent('left-more-button-clicked'));\n  }\n\n  override render() {\n    const leftGroup = [];\n    if (this.settings) {\n      leftGroup.push(\n        html`<div class=\"menu-button\">\n          <obc-icon-button\n            variant=\"flat\"\n            @click=${() => this.dispatchEvent(new CustomEvent('close'))}\n          >\n            <obi-01-close></obi-01-close>\n          </obc-icon-button>\n        </div>`\n      );\n      leftGroup.push(html`<obc-divider></obc-divider>`);\n      leftGroup.push(\n        html`<obc-icon-button\n          variant=\"flat\"\n          corner-left\n          @click=${() => this.dispatchEvent(new CustomEvent('back'))}\n        >\n          <obi-02-arrow-back></obi-02-arrow-back>\n        </obc-icon-button>`\n      );\n      leftGroup.push(\n        html`<obc-icon-button\n          variant=\"flat\"\n          corner-right\n          @click=${() => this.dispatchEvent(new CustomEvent('forward'))}\n        >\n          <obi-02-arrow-forward></obi-02-arrow-forward>\n        </obc-icon-button>`\n      );\n      leftGroup.push(html`<obc-divider></obc-divider>`);\n      leftGroup.push(html`<div class=\"title\">${this.appTitle}</div>`);\n      leftGroup.push(\n        html`<obc-breadcrumb .items=${this.breadcrumbItems}></obc-breadcrumb>`\n      );\n    } else {\n      if (!this.inactive) {\n        leftGroup.push(\n          html`<div class=\"menu-button ${this.wideMenuButton ? 'wide' : null}\">\n            <obc-icon-button\n              variant=\"flat\"\n              @click=${this.menuButtonClicked}\n              ?activated=${this.menuButtonActivated}\n            >\n              <obi-01-menu></obi-01-menu>\n            </obc-icon-button>\n          </div>`\n        );\n      }\n      leftGroup.push(html`<div class=\"title\">${this.appTitle}</div>`);\n      leftGroup.push(html`<div class=\"page-name\">${this.pageName}</div>`);\n    }\n\n    const breakpointMoreButton = Math.max(\n      this.appButtonBreakpointPx,\n      this.dimmingButtonBreakpointPx\n    );\n\n    return html`\n      <style>\n        @media (max-width: ${breakpointMoreButton}px) {\n          .left-more-button {\n            display: revert !important;\n          }\n\n          .group.left > * {\n            margin-right: 4px;\n            margin-left: 4px;\n          }\n        }\n\n        @media (max-width: ${this.appButtonBreakpointPx}px) {\n          .apps-button {\n            display: none;\n          }\n        }\n\n        @media (max-width: ${this.dimmingButtonBreakpointPx}px) {\n          .dimming-button {\n            display: none;\n          }\n        }\n\n        @media (max-width: ${this.appTitleBreakpointPx}px) {\n          .title {\n            display: none;\n          }\n        }\n      </style>\n      <nav\n        class=${classMap({\n          wrapper: true,\n          inactive: this.inactive,\n          settings: this.settings,\n        })}\n      >\n        <div class=\"left group\">${leftGroup}</div>\n        <div class=\"right group\">\n          ${this.showClock\n            ? html`<obc-clock\n                date=${this.date}\n                blink-only-breakpoint-px=${this.clockMinimizeBreakpointPx}\n                ?show-date=${this.showDate}\n              ></obc-clock>`\n            : null}\n          <slot name=\"alerts\"></slot>\n          ${this.showDimmingButton && !this.inactive\n            ? html`<obc-icon-button\n                class=\"dimming-button\"\n                variant=\"flat\"\n                @click=${this.dimmingButtonClicked}\n                ?activated=${this.dimmingButtonActivated}\n              >\n                <obi-04-dimming></obi-04-dimming>\n              </obc-icon-button>`\n            : null}\n          ${this.showAppsButton && !this.inactive\n            ? html`<obc-icon-button\n                class=\"apps-button\"\n                variant=\"flat\"\n                @click=${this.appsButtonClicked}\n                ?activated=${this.appsButtonActivated}\n              >\n                <obi-01-apps></obi-01-apps>\n              </obc-icon-button>`\n            : null}\n          <obc-icon-button\n            class=\"left-more-button\"\n            variant=\"flat\"\n            @click=${this.leftMoreButtonClicked}\n            ?activated=${this.leftMoreButtonActivated}\n          >\n            <obi-01-more-vertical></obi-01-more-vertical>\n          </obc-icon-button>\n        </div>\n      </nav>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-top-bar': ObcTopBar;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"top-bar.js","sources":["../../../src/components/top-bar/top-bar.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport compentStyle from './top-bar.css?inline';\nimport '../icon-button/icon-button';\nimport '../clock/clock';\nimport '../divider/divider';\nimport '../breadcrumb/breadcrumb';\nimport '../../icons/icon-01-menu';\nimport '../../icons/icon-01-close';\nimport '../../icons/icon-02-arrow-back';\nimport '../../icons/icon-02-arrow-forward';\nimport '../../icons/icon-04-dimming';\nimport '../../icons/icon-01-apps';\nimport '../../icons/icon-01-more-vertical';\nimport {BreadcrumbItem} from '../breadcrumb/breadcrumb';\n\n/**\n * Top bar component\n *\n * @fires menu-button-clicked - Menu button clicked\n * @fires dimming-button-clicked - Dimming button clicked\n * @fires apps-button-clicked - Apps button clicked\n * @fires left-more-button-clicked - Left more button clicked\n */\n@customElement('obc-top-bar')\nexport class ObcTopBar extends LitElement {\n  @property({type: String}) appTitle = 'App';\n  @property({type: String}) pageName = 'Page';\n  @property({type: String}) date = '2021-01-01T11:11:11.111Z';\n  @property({type: Boolean, attribute: 'menu-button-activated'})\n  menuButtonActivated = false;\n  @property({type: Boolean, attribute: 'dimming-button-activated'})\n  dimmingButtonActivated = false;\n  @property({type: Boolean, attribute: 'apps-button-activated'})\n  appsButtonActivated = false;\n  @property({type: Boolean, attribute: 'left-more-button-activated'})\n  leftMoreButtonActivated = false;\n\n  @property({type: Boolean, attribute: 'wide-menu-button'}) wideMenuButton =\n    false;\n  @property({type: Boolean, attribute: 'show-apps-button'}) showAppsButton =\n    false;\n  @property({type: Boolean, attribute: 'show-dimming-button'})\n  showDimmingButton = false;\n  @property({type: Boolean, attribute: 'show-clock'}) showClock = false;\n  @property({type: Boolean, attribute: 'show-date'}) showDate = false;\n  @property({type: Boolean}) inactive = false;\n  @property({type: Number, attribute: 'apps-button-breakpoint-px'})\n  appButtonBreakpointPx = 500;\n  @property({type: Number, attribute: 'dimming-button-breakpoint-px'})\n  dimmingButtonBreakpointPx = 500;\n  @property({type: Number, attribute: 'app-title-breakpoint-px'})\n  appTitleBreakpointPx = 500;\n  @property({type: Number, attribute: 'clock-minimize-breakpoint-px'})\n  clockMinimizeBreakpointPx = 300;\n  @property({type: Boolean}) settings = false;\n  @property({type: Array, attribute: 'breadcrumb-items'})\n  breadcrumbItems: BreadcrumbItem[] = [];\n\n  private menuButtonClicked() {\n    this.dispatchEvent(new CustomEvent('menu-button-clicked'));\n  }\n\n  private dimmingButtonClicked() {\n    this.dispatchEvent(new CustomEvent('dimming-button-clicked'));\n  }\n\n  private appsButtonClicked() {\n    this.dispatchEvent(new CustomEvent('apps-button-clicked'));\n  }\n\n  private leftMoreButtonClicked() {\n    this.dispatchEvent(new CustomEvent('left-more-button-clicked'));\n  }\n\n  override render() {\n    const leftGroup = [];\n    if (this.settings) {\n      leftGroup.push(\n        html`<div class=\"menu-button\">\n          <obc-icon-button\n            variant=\"flat\"\n            @click=${() => this.dispatchEvent(new CustomEvent('close'))}\n          >\n            <obi-01-close></obi-01-close>\n          </obc-icon-button>\n        </div>`\n      );\n      leftGroup.push(html`<obc-divider></obc-divider>`);\n      leftGroup.push(\n        html`<obc-icon-button\n          variant=\"flat\"\n          corner-left\n          @click=${() => this.dispatchEvent(new CustomEvent('back'))}\n        >\n          <obi-02-arrow-back></obi-02-arrow-back>\n        </obc-icon-button>`\n      );\n      leftGroup.push(\n        html`<obc-icon-button\n          variant=\"flat\"\n          corner-right\n          @click=${() => this.dispatchEvent(new CustomEvent('forward'))}\n        >\n          <obi-02-arrow-forward></obi-02-arrow-forward>\n        </obc-icon-button>`\n      );\n      leftGroup.push(html`<obc-divider></obc-divider>`);\n      leftGroup.push(html`<div class=\"title\">${this.appTitle}</div>`);\n      leftGroup.push(\n        html`<obc-breadcrumb .items=${this.breadcrumbItems}></obc-breadcrumb>`\n      );\n    } else {\n      if (!this.inactive) {\n        leftGroup.push(\n          html`<div class=\"menu-button ${this.wideMenuButton ? 'wide' : null}\">\n            <obc-icon-button\n              variant=\"flat\"\n              @click=${this.menuButtonClicked}\n              ?activated=${this.menuButtonActivated}\n            >\n              <obi-01-menu></obi-01-menu>\n            </obc-icon-button>\n          </div>`\n        );\n      }\n      leftGroup.push(html`<div class=\"title\">${this.appTitle}</div>`);\n      leftGroup.push(html`<div class=\"page-name\">${this.pageName}</div>`);\n    }\n\n    const breakpointMoreButton = Math.max(\n      this.appButtonBreakpointPx,\n      this.dimmingButtonBreakpointPx\n    );\n\n    return html`\n      <style>\n        @media (max-width: ${breakpointMoreButton}px) {\n          .left-more-button {\n            display: revert !important;\n          }\n\n          .group.left > * {\n            margin-right: 4px;\n            margin-left: 4px;\n          }\n        }\n\n        @media (max-width: ${this.appButtonBreakpointPx}px) {\n          .apps-button {\n            display: none;\n          }\n        }\n\n        @media (max-width: ${this.dimmingButtonBreakpointPx}px) {\n          .dimming-button {\n            display: none;\n          }\n        }\n\n        @media (max-width: ${this.appTitleBreakpointPx}px) {\n          .title {\n            display: none;\n          }\n        }\n      </style>\n      <nav\n        class=${classMap({\n          wrapper: true,\n          inactive: this.inactive,\n          settings: this.settings,\n        })}\n      >\n        <div class=\"left group\">${leftGroup}</div>\n        <div class=\"right group\">\n          ${this.showClock\n            ? html`<obc-clock\n                date=${this.date}\n                blink-only-breakpoint-px=${this.clockMinimizeBreakpointPx}\n                ?show-date=${this.showDate}\n              ></obc-clock>`\n            : null}\n          <slot name=\"alerts\"></slot>\n          ${this.showDimmingButton && !this.inactive\n            ? html`<obc-icon-button\n                class=\"dimming-button\"\n                variant=\"flat\"\n                @click=${this.dimmingButtonClicked}\n                ?activated=${this.dimmingButtonActivated}\n              >\n                <obi-04-dimming></obi-04-dimming>\n              </obc-icon-button>`\n            : null}\n          ${this.showAppsButton && !this.inactive\n            ? html`<obc-icon-button\n                class=\"apps-button\"\n                variant=\"flat\"\n                @click=${this.appsButtonClicked}\n                ?activated=${this.appsButtonActivated}\n              >\n                <obi-01-apps></obi-01-apps>\n              </obc-icon-button>`\n            : null}\n          ${!this.inactive\n            ? html`<obc-icon-button\n                class=\"left-more-button\"\n                variant=\"flat\"\n                @click=${this.leftMoreButtonClicked}\n                ?activated=${this.leftMoreButtonActivated}\n              >\n                <obi-01-more-vertical></obi-01-more-vertical>\n              </obc-icon-button>`\n            : null}\n        </div>\n      </nav>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-top-bar': ObcTopBar;\n  }\n}\n"],"names":[],"mappings":"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"}

package/fix-generated.cjs

@@ -20,6 +20,7 @@ function addRepositoryToPackageJsonVue() {
     url: 'git+https://github.com/Ocean-Industries-Concept-Lab/openbridge-webcomponents.git',
     directory: 'packages/openbridge-webcomponents-vue',
   };
+
   // add license
   packageJson.license = 'Apache-2.0';
   fs.writeFileSync(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "type": "module",
   "repository": {
     "type": "git",
@@ -18,7 +18,6 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "download:icons": "tsx ./script/download-icons.ts",
-    "download:instruments": "tsx ./script/svg-instruments/main.ts",
     "new:component": "tsx ./new-component.ts",
     "test-storybook": "test-storybook",
     "prepack": "yarn build",
@@ -39,44 +38,39 @@
     "@lit-labs/cli": "^0.6.2",
     "@lit-labs/gen-wrapper-react": "^0.3.1",
     "@lit-labs/gen-wrapper-vue": "^0.3.2",
-    "@open-wc/lit-helpers": "^0.6.0",
-    "@storybook/addon-essentials": "^7.6.7",
-    "@storybook/addon-interactions": "^7.6.17",
-    "@storybook/addon-links": "^7.6.7",
-    "@storybook/addon-storysource": "^7.6.17",
-    "@storybook/addon-themes": "^7.6.7",
-    "@storybook/blocks": "^7.6.7",
-    "@storybook/test-runner": "^0.16.0",
-    "@storybook/testing-library": "^0.2.2",
-    "@storybook/web-components": "^7.6.7",
-    "@storybook/web-components-vite": "^7.6.7",
+    "@open-wc/lit-helpers": "^0.7.0",
+    "@storybook/addon-essentials": "^8.0.5",
+    "@storybook/addon-interactions": "^8.0.5",
+    "@storybook/addon-links": "^8.0.5",
+    "@storybook/addon-storysource": "^8.0.5",
+    "@storybook/addon-themes": "^8.0.5",
+    "@storybook/blocks": "^8.0.5",
+    "@storybook/test": "^8.0.5",
+    "@storybook/test-runner": "^0.17.0",
+    "@storybook/web-components": "^8.0.5",
+    "@storybook/web-components-vite": "^8.0.5",
     "@topcli/prompts": "^1.8.0",
     "@types/jest-image-snapshot": "^6",
-    "@types/xmldom": "^0.1.34",
-    "chromatic": "^7.6.0",
     "concurrently": "^8.2.2",
     "dotenv": "^16.3.1",
     "eslint": "^8.56.0",
-    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-storybook": "^0.8.0",
     "figma-api": "^1.11.0",
     "jest-image-snapshot": "^6.2.0",
     "lit-analyzer": "^2.0.2",
     "nodemon": "^3.0.2",
     "playwright": "^1.40.0",
-    "postcss": "^8.4.32",
-    "postcss-mixins": "^9.0.4",
+    "postcss": "^8.4.36",
+    "postcss-mixins": "^10.0.0",
     "postcss-nesting": "^12.0.1",
-    "postcss-plugin": "^1.0.0",
     "prettier": "^3.1.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "release-it": "^17.1.1",
     "rollup-plugin-postcss-lit": "^2.1.0",
-    "storybook": "^7.6.7",
-    "tsx": "^3.14.0",
+    "storybook": "^8.0.5",
+    "tsx": "^4.7.1",
     "typescript": "^5.3.3",
-    "vite": "^4.4.5",
-    "vite-plugin-dts": "^3.6.3",
-    "xmldom": "^0.6.0"
+    "vite": "^5.2.7",
+    "vite-plugin-dts": "^3.6.3"
   },
   "types": "./dist/index.d.ts",
   "customElements": "custom-elements.json"