@oicl/openbridge-webcomponents 0.0.14 → 0.0.15-dev-20240814163530

package/dist/svghelpers/roundedArch.js

@@ -0,0 +1,63 @@
+function roundedArch({
+  startAngle,
+  endAngle,
+  r,
+  R,
+  roundOutsideCut,
+  roundInsideCut
+}) {
+  const a1 = startAngle * Math.PI / 180;
+  const a2 = endAngle * Math.PI / 180;
+  const X1 = Math.sin(a1) * R;
+  const Y1 = -Math.cos(a1) * R;
+  const x1 = Math.sin(a1) * r;
+  const y1 = -Math.cos(a1) * r;
+  const X2 = Math.sin(a2) * R;
+  const Y2 = -Math.cos(a2) * R;
+  const x2 = Math.sin(a2) * r;
+  const y2 = -Math.cos(a2) * r;
+  const roundRadius = 8;
+  let svgPath = "";
+  if (roundOutsideCut) {
+    const roundDeltaAngle = Math.asin(roundRadius / R);
+    const largeArcFlag = a2 - roundDeltaAngle - (a1 + roundDeltaAngle) <= Math.PI ? 0 : 1;
+    const x1i = Math.sin(a1) * (R - roundRadius);
+    const y1i = -Math.cos(a1) * (R - roundRadius);
+    const x1o = Math.sin(a1 + roundDeltaAngle) * R;
+    const y1o = -Math.cos(a1 + roundDeltaAngle) * R;
+    const x2i = Math.sin(a2) * (R - roundRadius);
+    const y2i = -Math.cos(a2) * (R - roundRadius);
+    const x2o = Math.sin(a2 - roundDeltaAngle) * R;
+    const y2o = -Math.cos(a2 - roundDeltaAngle) * R;
+    svgPath += `M ${x1i} ${y1i} A ${roundRadius} ${roundRadius} 1 0 1 ${x1o} ${y1o}`;
+    svgPath += `A ${R} ${R} 1 ${largeArcFlag} 1 ${x2o} ${y2o}`;
+    svgPath += `A ${roundRadius} ${roundRadius} 1 0 1 ${x2i} ${y2i}`;
+  } else {
+    const largeArcFlag = a2 - a1 <= Math.PI ? 0 : 1;
+    svgPath += `M ${X1} ${Y1} A ${R} ${R} 1 ${largeArcFlag} 1 ${X2} ${Y2}`;
+  }
+  if (roundInsideCut) {
+    const roundDeltaAngle = Math.asin(roundRadius / r);
+    const largeArcFlag = a2 - roundDeltaAngle - (a1 + roundDeltaAngle) <= Math.PI ? 0 : 1;
+    const x1i = Math.sin(a1) * (r + roundRadius);
+    const y1i = -Math.cos(a1) * (r + roundRadius);
+    const x1o = Math.sin(a1 + roundDeltaAngle) * r;
+    const y1o = -Math.cos(a1 + roundDeltaAngle) * r;
+    const x2i = Math.sin(a2) * (r + roundRadius);
+    const y2i = -Math.cos(a2) * (r + roundRadius);
+    const x2o = Math.sin(a2 - roundDeltaAngle) * r;
+    const y2o = -Math.cos(a2 - roundDeltaAngle) * r;
+    svgPath += `L ${x2i} ${y2i} A ${roundRadius} ${roundRadius} 1 0 1 ${x2o} ${y2o}`;
+    svgPath += `A ${r} ${r} 1 ${largeArcFlag} 0 ${x1o} ${y1o}`;
+    svgPath += `A ${roundRadius} ${roundRadius} 1 0 1 ${x1i} ${y1i}`;
+  } else {
+    const largeArcFlag = a2 - a1 <= Math.PI ? 0 : 1;
+    svgPath += `L ${x2} ${y2} A ${r} ${r} 1 ${largeArcFlag} 0 ${x1} ${y1}`;
+  }
+  svgPath += `Z`;
+  return svgPath;
+}
+export {
+  roundedArch
+};
+//# sourceMappingURL=roundedArch.js.map

package/dist/svghelpers/roundedArch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"roundedArch.js","sources":["../../src/svghelpers/roundedArch.ts"],"sourcesContent":["export function roundedArch({\n  startAngle,\n  endAngle,\n  r,\n  R,\n  roundOutsideCut,\n  roundInsideCut,\n}: {\n  startAngle: number;\n  R: number;\n  r: number;\n  endAngle: number;\n  roundOutsideCut: boolean;\n  roundInsideCut: boolean;\n}) {\n  const a1 = (startAngle * Math.PI) / 180;\n  const a2 = (endAngle * Math.PI) / 180;\n\n  const X1 = Math.sin(a1) * R;\n  const Y1 = -Math.cos(a1) * R;\n  const x1 = Math.sin(a1) * r;\n  const y1 = -Math.cos(a1) * r;\n  const X2 = Math.sin(a2) * R;\n  const Y2 = -Math.cos(a2) * R;\n  const x2 = Math.sin(a2) * r;\n  const y2 = -Math.cos(a2) * r;\n  const roundRadius = 8;\n\n  let svgPath = '';\n  if (roundOutsideCut) {\n    const roundDeltaAngle = Math.asin(roundRadius / R);\n    const largeArcFlag =\n      a2 - roundDeltaAngle - (a1 + roundDeltaAngle) <= Math.PI ? 0 : 1;\n    const x1i = Math.sin(a1) * (R - roundRadius);\n    const y1i = -Math.cos(a1) * (R - roundRadius);\n    const x1o = Math.sin(a1 + roundDeltaAngle) * R;\n    const y1o = -Math.cos(a1 + roundDeltaAngle) * R;\n    const x2i = Math.sin(a2) * (R - roundRadius);\n    const y2i = -Math.cos(a2) * (R - roundRadius);\n    const x2o = Math.sin(a2 - roundDeltaAngle) * R;\n    const y2o = -Math.cos(a2 - roundDeltaAngle) * R;\n    // Rounded start\n    svgPath += `M ${x1i} ${y1i} A ${roundRadius} ${roundRadius} 1 0 1 ${x1o} ${y1o}`;\n    // Arch\n    svgPath += `A ${R} ${R} 1 ${largeArcFlag} 1 ${x2o} ${y2o}`;\n    // Rounded end\n    svgPath += `A ${roundRadius} ${roundRadius} 1 0 1 ${x2i} ${y2i}`;\n  } else {\n    const largeArcFlag = a2 - a1 <= Math.PI ? 0 : 1;\n    svgPath += `M ${X1} ${Y1} A ${R} ${R} 1 ${largeArcFlag} 1 ${X2} ${Y2}`;\n  }\n\n  if (roundInsideCut) {\n    const roundDeltaAngle = Math.asin(roundRadius / r);\n    const largeArcFlag =\n      a2 - roundDeltaAngle - (a1 + roundDeltaAngle) <= Math.PI ? 0 : 1;\n    const x1i = Math.sin(a1) * (r + roundRadius);\n    const y1i = -Math.cos(a1) * (r + roundRadius);\n    const x1o = Math.sin(a1 + roundDeltaAngle) * r;\n    const y1o = -Math.cos(a1 + roundDeltaAngle) * r;\n    const x2i = Math.sin(a2) * (r + roundRadius);\n    const y2i = -Math.cos(a2) * (r + roundRadius);\n    const x2o = Math.sin(a2 - roundDeltaAngle) * r;\n    const y2o = -Math.cos(a2 - roundDeltaAngle) * r;\n    // Rounded start\n    svgPath += `L ${x2i} ${y2i} A ${roundRadius} ${roundRadius} 1 0 1 ${x2o} ${y2o}`;\n    // Arch\n    svgPath += `A ${r} ${r} 1 ${largeArcFlag} 0 ${x1o} ${y1o}`;\n    // Rounded end\n    svgPath += `A ${roundRadius} ${roundRadius} 1 0 1 ${x1i} ${y1i}`;\n  } else {\n    const largeArcFlag = a2 - a1 <= Math.PI ? 0 : 1;\n    svgPath += `L ${x2} ${y2} A ${r} ${r} 1 ${largeArcFlag} 0 ${x1} ${y1}`;\n  }\n  svgPath += `Z`;\n  return svgPath;\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents",
-  "version": "0.0.14",
+  "version": "0.0.15-dev-20240814163530",
   "type": "module",
   "repository": {
     "type": "git",
@@ -31,6 +31,7 @@
     "release": "release-it"
   },
   "dependencies": {
+    "@lit-labs/observers": "^2.0.2",
     "lit": "^3.1.0"
   },
   "devDependencies": {
@@ -39,16 +40,16 @@
     "@lit-labs/gen-wrapper-react": "^0.3.2",
     "@lit-labs/gen-wrapper-vue": "^0.3.3",
     "@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/addon-essentials": "^8.1.11",
+    "@storybook/addon-interactions": "^8.1.11",
+    "@storybook/addon-links": "^8.1.11",
+    "@storybook/addon-storysource": "^8.1.11",
+    "@storybook/addon-themes": "^8.1.11",
+    "@storybook/blocks": "^8.1.11",
+    "@storybook/test": "^8.1.11",
     "@storybook/test-runner": "^0.17.0",
-    "@storybook/web-components": "^8.0.5",
-    "@storybook/web-components-vite": "^8.0.5",
+    "@storybook/web-components": "^8.1.11",
+    "@storybook/web-components-vite": "^8.1.11",
     "@topcli/prompts": "^1.8.0",
     "@types/jest-image-snapshot": "^6",
     "concurrently": "^8.2.2",
@@ -66,7 +67,7 @@
     "prettier": "^3.1.1",
     "release-it": "^17.1.1",
     "rollup-plugin-postcss-lit": "^2.1.0",
-    "storybook": "^8.0.5",
+    "storybook": "^8.1.11",
     "tsx": "^4.7.1",
     "typescript": "^5.3.3",
     "vite": "^5.2.7",

package/script/download-icons.ts

@@ -133,7 +133,7 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('obi-${name}')
 export class Obi${upperCammelCaseName} extends LitElement {
-  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+  @property({type: Boolean}) useCssColor = false;
 
   private icon = svg\`${singleColorIcon}\`;
 

package/src/automation/automation-button/automation-button.stories.ts

@@ -95,7 +95,7 @@ export const ValveOpen: Story = {
       ?progress=${args.progress}
     >
       <obi-09-twoway-digital-open
-        use-css-color
+        usecsscolor
         slot="icon"
         style="display: block; transform: rotate(90deg); line-height: 0;"
       ></obi-09-twoway-digital-open>
@@ -126,7 +126,7 @@ export const ValveAlert: Story = {
       ?progress=${args.progress}
     >
       <obi-09-twoway-digital-open
-        use-css-color
+        usecsscolor
         slot="icon"
         style="display: block; transform: rotate(90deg); line-height: 0;"
       ></obi-09-twoway-digital-open>
@@ -160,12 +160,12 @@ export const ValveBadges: Story = {
       ?progress=${args.progress}
     >
       <obi-09-twoway-digital-open
-        use-css-color
+        usecsscolor
         slot="icon"
         style="display: block; transform: rotate(90deg); line-height: 0;"
       ></obi-09-twoway-digital-open>
       <obc-badge
-        hide-number
+        hideNumber
         type="automation"
         .size=${badgeSize}
         slot="badge-top-right"
@@ -173,7 +173,7 @@ export const ValveBadges: Story = {
         <obi-14-alert-off></obi-14-alert-off>
       </obc-badge>
       <obc-badge
-        hide-number
+        hideNumber
         type="automation"
         .size=${badgeSize}
         slot="badge-top-left"
@@ -181,7 +181,7 @@ export const ValveBadges: Story = {
         <obi-08-auto></obi-08-auto>
       </obc-badge>
       <obc-badge
-        hide-number
+        hideNumber
         type="automation"
         .size=${badgeSize}
         slot="badge-bottom-left"
@@ -189,7 +189,7 @@ export const ValveBadges: Story = {
         <obi-08-duty></obi-08-duty>
       </obc-badge>
       <obc-badge
-        hide-number
+        hideNumber
         type="automation"
         .size=${badgeSize}
         slot="badge-bottom-right"
@@ -223,7 +223,7 @@ export const ValveProgress: Story = {
       ?progress=${args.progress}
     >
       <obi-09-twoway-digital-open
-        use-css-color
+        usecsscolor
         slot="icon"
         style="display: block; transform: rotate(90deg); line-height: 0;"
       ></obi-09-twoway-digital-open>
@@ -251,7 +251,7 @@ export const ValveClosed: Story = {
       ?progress=${args.progress}
     >
       <obi-09-twoway-digital-closed
-        use-css-color
+        usecsscolor
         slot="icon"
         style="display: block; transform: rotate(90deg); line-height: 0;"
       ></obi-09-twoway-digital-closed>
@@ -281,7 +281,7 @@ export const SwitchOn: Story = {
       ?progress=${args.progress}
     >
       <obi-09-switch-horizontal-on
-        use-css-color
+        usecsscolor
         slot="icon"
         style="display: block; line-height: 0;"
       ></obi-09-switch-horizontal-on>
@@ -311,7 +311,7 @@ export const SwitchOff: Story = {
       ?progress=${args.progress}
     >
       <obi-09-switch-horizontal-off
-        use-css-color
+        usecsscolor
         slot="icon"
         style="display: block; line-height: 0;"
       ></obi-09-switch-horizontal-off>
@@ -341,7 +341,7 @@ export const DamperOn: Story = {
       ?progress=${args.progress}
     >
       <obi-09-damper-horizontal-on
-        use-css-color
+        usecsscolor
         slot="icon"
         style="display: block; line-height: 0;"
       ></obi-09-damper-horizontal-on>
@@ -371,7 +371,7 @@ export const DamperOff: Story = {
       ?progress=${args.progress}
     >
       <obi-09-damper-horizontal-off
-        use-css-color
+        usecsscolor
         slot="icon"
         style="display: block; line-height: 0;"
       ></obi-09-damper-horizontal-off>
@@ -407,12 +407,12 @@ export const DamperBadges: Story = {
       ?progress=${args.progress}
     >
       <obi-09-damper-horizontal-on
-        use-css-color
+        usecsscolor
         slot="icon"
         style="display: block; line-height: 0;"
       ></obi-09-damper-horizontal-on>
       <obc-badge
-        hide-number
+        hideNumber
         type="automation"
         .size=${badgeSize}
         slot="badge-top-right"
@@ -420,7 +420,7 @@ export const DamperBadges: Story = {
         <obi-14-alert-off></obi-14-alert-off>
       </obc-badge>
       <obc-badge
-        hide-number
+        hideNumber
         type="automation"
         .size=${badgeSize}
         slot="badge-top-left"
@@ -428,7 +428,7 @@ export const DamperBadges: Story = {
         <obi-08-auto></obi-08-auto>
       </obc-badge>
       <obc-badge
-        hide-number
+        hideNumber
         type="automation"
         .size=${badgeSize}
         slot="badge-bottom-left"
@@ -436,7 +436,7 @@ export const DamperBadges: Story = {
         <obi-08-duty></obi-08-duty>
       </obc-badge>
       <obc-badge
-        hide-number
+        hideNumber
         type="automation"
         .size=${badgeSize}
         slot="badge-bottom-right"
@@ -474,7 +474,7 @@ export const MotorOn: Story = {
       ?progress=${args.progress}
     >
       <obi-08-pump-on-horisontal
-        use-css-color
+        usecsscolor
         slot="icon"
         style="display: block; line-height: 0;"
       ></obi-08-pump-on-horisontal>
@@ -509,7 +509,7 @@ export const MotorOff: Story = {
       ?progress=${args.progress}
     >
       <obi-08-pump-off-horisontal
-        use-css-color
+        usecsscolor
         slot="icon"
         style="display: block; line-height: 0;"
       ></obi-08-pump-off-horisontal>

package/src/automation/automation-button/automation-button.ts

@@ -362,7 +362,7 @@ export class ObcAutomationButton extends LitElement {
     } else if (this.direction === AutomationButtonDirection.standby) {
       return html`<obi-08-standby
         class="icon-direction"
-        use-css-color
+        usecsscolor
       ></obi-08-standby>`;
     }
     throw new Error('Invalid direction');

package/src/automation/automation-input-modal/automation-input-modal.stories.ts

@@ -56,7 +56,7 @@ export const Compact: Story = {
       </div>
       <div slot="preview"></div>
       <div slot="actions">
-        <obc-toggle-button-group has-labels value="run">
+        <obc-toggle-button-group hasLabels value="run">
           <obc-toggle-button-option value="stop"
             >Stop
             <obi-01-stop slot="icon"></obi-01-stop>
@@ -67,10 +67,10 @@ export const Compact: Story = {
           </obc-toggle-button-option>
         </obc-toggle-button-group>
         <div class="speed">
-          <obc-notification-button icon corner-left open-right>
+          <obc-notification-button icon cornerLeft openRight>
             <obi-02-chevron-double-left></obi-02-chevron-double-left>
           </obc-notification-button>
-          <obc-notification-button icon open-right>
+          <obc-notification-button icon openRight>
             <obi-02-chevron-left></obi-02-chevron-left>
           </obc-notification-button>
           <obc-input
@@ -79,10 +79,10 @@ export const Compact: Story = {
             textAlign="center"
             font="button"
           ></obc-input>
-          <obc-notification-button icon open-left>
+          <obc-notification-button icon openLeft>
             <obi-02-chevron-right></obi-02-chevron-right>
           </obc-notification-button>
-          <obc-notification-button icon corner-right open-left>
+          <obc-notification-button icon cornerRight openLeft>
             <obi-02-chevron-double-right></obi-02-chevron-double-right>
           </obc-notification-button>
           <div class="label">-10</div>

package/src/automation/automation-tank/automation-tank.stories.ts

@@ -48,10 +48,10 @@ export const VerticalWithBadges: Story = {
       .trend=${args.trend}
       .tag=${args.tag}
     >
-      <obc-badge slot="badges" size="regular" hide-number type="automation">
+      <obc-badge slot="badges" size="regular" hideNumber type="automation">
         <obi-08-auto></obi-08-auto>
       </obc-badge>
-      <obc-badge slot="badges" size="regular" hide-number type="automation">
+      <obc-badge slot="badges" size="regular" hideNumber type="automation">
         <obi-16-lock></obi-16-lock>
       </obc-badge>
     </obc-automation-tank>`;

package/src/components/alert-button/alert-button.ts

@@ -20,14 +20,12 @@ import {classMap} from 'lit/directives/class-map.js';
  */
 @customElement('obc-alert-button')
 export class ObcAlertButton extends LitElement {
-  @property({type: Number, attribute: 'n-alerts'}) nAlerts = 0;
-  @property({type: String, attribute: 'alert-type'}) alertType = AlertType.None;
+  @property({type: Number}) nAlerts = 0;
+  @property({type: String}) alertType = AlertType.None;
   @property({type: Boolean}) standalone = false;
   @property({type: Boolean}) counter = false;
-  @property({type: Boolean, attribute: 'blink-alarm-value'}) blinkAlarmValue =
-    false;
-  @property({type: Boolean, attribute: 'blink-warning-value'})
-  blinkWarningValue = false;
+  @property({type: Boolean}) blinkAlarmValue = false;
+  @property({type: Boolean}) blinkWarningValue = false;
 
   override render() {
     let alertType = this.alertType;

package/src/components/alert-icon/alert-icon.stories.ts

@@ -23,7 +23,7 @@ const meta: Meta<typeof ObcAlertIcon> = {
   render: (args) =>
     html` <div style="width:64px;height:64px">
       <obc-alert-icon
-        ?blink-value=${args.blinkValue}
+        ?blinkvalue=${args.blinkValue}
         name=${args.name}
       ></obc-alert-icon>
     </div>`,

package/src/components/alert-icon/alert-icon.ts

@@ -25,7 +25,7 @@ export type AlertIconName = keyof typeof mapping;
  */
 @customElement('obc-alert-icon')
 export class ObcAlertIcon extends LitElement {
-  @property({type: Boolean, attribute: 'blink-value'}) blinkValue = false;
+  @property({type: Boolean}) blinkValue = false;
   @property({type: String}) name: AlertIconName = 'alarm-unack';
 
   override render() {

package/src/components/alert-menu/alert-menu.stories.ts

@@ -32,64 +32,61 @@ const meta: Meta<typeof ObcAlertMenu> = {
         <obc-alert-menu-item
           acknowledgeble
           message="Alert message with more than one line of text"
-          time-since="12m 12s"
+          timesince="12m 12s"
           time="2020-11-19T13:56:00.414000Z"
-          narrow-breakpoint-px=${args.breakpoint}
+          narrowBreakpointPx=${args.breakpoint}
         >
-          <obi-14-alarm-unack slot="icon" use-css-color></obi-14-alarm-unack>
+          <obi-14-alarm-unack slot="icon" usecsscolor></obi-14-alarm-unack>
         </obc-alert-menu-item>
         <obc-alert-menu-item
           acknowledgeble
           message="Alert message with more than one line of text"
-          time-since="12m 12s"
+          timesince="12m 12s"
           time="2020-11-19T13:56:00.414000Z"
-          narrow-breakpoint-px=${args.breakpoint}
+          narrowBreakpointPx=${args.breakpoint}
         >
-          <obi-14-alarm-unack slot="icon" use-css-color></obi-14-alarm-unack>
+          <obi-14-alarm-unack slot="icon" usecsscolor></obi-14-alarm-unack>
         </obc-alert-menu-item>
         <obc-alert-menu-item
           acknowledgeble
           message="Alert message with more than one line of text"
-          time-since="12m 12s"
+          timesince="12m 12s"
           time="2020-11-19T13:56:00.414000Z"
-          narrow-breakpoint-px=${args.breakpoint}
+          narrowBreakpointPx=${args.breakpoint}
         >
-          <obi-14-alarm-unack slot="icon" use-css-color></obi-14-alarm-unack>
+          <obi-14-alarm-unack slot="icon" usecsscolor></obi-14-alarm-unack>
         </obc-alert-menu-item>
         <obc-alert-menu-item
           acknowledgeble
           message="Alert message with more than one line of text"
-          time-since="12m 12s"
+          timesince="12m 12s"
           time="2020-11-19T13:56:00.414000Z"
-          narrow-breakpoint-px=${args.breakpoint}
+          narrowBreakpointPx=${args.breakpoint}
         >
           <obi-14-warning-unacknowledged
             slot="icon"
-            use-css-color
+            usecsscolor
           ></obi-14-warning-unacknowledged>
         </obc-alert-menu-item>
         <obc-alert-menu-item
           acknowledgeble
           message="Alert message with more than one line of text"
-          time-since="12m 12s"
+          timesince="12m 12s"
           time="2020-11-19T13:56:00.414000Z"
-          narrow-breakpoint-px=${args.breakpoint}
+          narrowBreakpointPx=${args.breakpoint}
         >
           <obi-14-warning-unacknowledged
             slot="icon"
-            use-css-color
+            usecsscolor
           ></obi-14-warning-unacknowledged>
         </obc-alert-menu-item>
         <obc-alert-menu-item
           message="Alert message with more than one line of text"
-          time-since="12m 12s"
+          timesince="12m 12s"
           time="2020-11-19T13:56:00.414000Z"
-          narrow-breakpoint-px=${args.breakpoint}
+          narrowBreakpointPx=${args.breakpoint}
         >
-          <obi-14-caution-color
-            slot="icon"
-            use-css-color
-          ></obi-14-caution-color>
+          <obi-14-caution-color slot="icon" usecsscolor></obi-14-caution-color>
         </obc-alert-menu-item>
       </obc-alert-menu>`;
   },

package/src/components/alert-menu-item/alert-menu-item.ts

@@ -11,10 +11,10 @@ import '../button/button';
 export class ObcAlertMenuItem extends LitElement {
   @property({type: String}) message = 'Message';
   @property({type: String}) time = '2021-01-01T00:00:00Z';
-  @property({type: String, attribute: 'time-since'}) timeSince = '1h';
+  @property({type: String}) timeSince = '1h';
   @property({type: Boolean}) acknowledgeble = false;
   @property({type: Boolean}) acknowledged = false;
-  @property({type: Number, attribute: 'narrow-breakpoint-px'})
+  @property({type: Number})
   narrowBreakpointPx = 400;
 
   override render() {
@@ -51,7 +51,7 @@ export class ObcAlertMenuItem extends LitElement {
             ? html`
                 <obc-button
                   class="acknowledge-button"
-                  full-width
+                  fullWidth
                   @click=${() =>
                     this.dispatchEvent(new CustomEvent('ack-click'))}
                   >ACK</obc-button

package/src/components/alert-topbar-element/alert-topbar-element.stories.ts

@@ -29,17 +29,17 @@ const meta: Meta<typeof ObcAlertTopbarElement> = {
   },
   render: (args) => html`
     <obc-alert-topbar-element
-      n-alerts=${args.nAlerts}
-      alert-type=${args.alertType}
-      max-width=${args.maxWidth}
-      ?blink-alarm-value=${args.blinkAlarmValue}
-      ?blink-warning-value=${args.blinkWarningValue}
-      ?minimized=${args.minimized}
-      ?show-ack=${args.showAck}
-      ?alert-muted=${args.alertMuted}
+      .nAlerts=${args.nAlerts}
+      .alertType=${args.alertType}
+      .maxWidth=${args.maxWidth}
+      .blinkAlarmValue=${args.blinkAlarmValue}
+      .blinkWarningValue=${args.blinkWarningValue}
+      .minimized=${args.minimized}
+      .showAck=${args.showAck}
+      .alertMuted=${args.alertMuted}
     >
       <obc-notification-message-item time="2023-01-01T13:37:01+01:00">
-        <obi-14-alarm-unack slot="icon" use-css-color></obi-14-alarm-unack>
+        <obi-14-alarm-unack slot="icon" usecsscolor></obi-14-alarm-unack>
         <div slot="message">This is a message</div>
       </obc-notification-message-item>
     </obc-alert-topbar-element>
@@ -70,15 +70,15 @@ export const Caution: Story = {
   },
   render: (args) => html`
     <obc-alert-topbar-element
-      n-alerts=${args.nAlerts}
-      alert-type=${args.alertType}
-      max-width=${args.maxWidth}
-      ?minimized=${args.minimized}
-      ?show-ack=${args.showAck}
-      ?alert-muted=${args.alertMuted}
+      .nAlerts=${args.nAlerts}
+      .alertType=${args.alertType}
+      .maxWidth=${args.maxWidth}
+      .minimized=${args.minimized}
+      .showAck=${args.showAck}
+      .alertMuted=${args.alertMuted}
     >
       <obc-notification-message-item time="2023-01-01T13:37:01+01:00">
-        <obi-14-caution-color slot="icon" use-css-color></obi-14-caution-color>
+        <obi-14-caution-color slot="icon" usecsscolor></obi-14-caution-color>
         <div slot="message">This is a message</div>
       </obc-notification-message-item>
     </obc-alert-topbar-element>
@@ -98,10 +98,10 @@ export const NoAlerts: Story = {
   },
   render: (args) =>
     html` <obc-alert-topbar-element
-      n-alerts=${args.nAlerts}
-      alert-type=${args.alertType}
-      max-width=${args.maxWidth}
-      ?minimized=${args.minimized}
+      .nAlerts=${args.nAlerts}
+      .alertType=${args.alertType}
+      .maxWidth=${args.maxWidth}
+      .minimized=${args.minimized}
     >
     </obc-alert-topbar-element>`,
 };

package/src/components/alert-topbar-element/alert-topbar-element.ts

@@ -33,17 +33,14 @@ import {classMap} from 'lit/directives/class-map.js';
  */
 @customElement('obc-alert-topbar-element')
 export class ObcAlertTopbarElement extends LitElement {
-  @property({type: Number, attribute: 'n-alerts'}) nAlerts = 0;
-  @property({type: String, attribute: 'alert-type'}) alertType: AlertType =
-    AlertType.None;
-  @property({type: Boolean, attribute: 'blink-alarm-value'}) blinkAlarmValue =
-    false;
-  @property({type: Boolean, attribute: 'blink-warning-value'})
-  blinkWarningValue = false;
-  @property({type: Boolean, attribute: 'show-ack'}) showAck = false;
-  @property({type: Boolean, attribute: 'alert-muted'}) alertMuted = false;
+  @property({type: Number}) nAlerts = 0;
+  @property({type: String}) alertType: AlertType = AlertType.None;
+  @property({type: Boolean}) blinkAlarmValue = false;
+  @property({type: Boolean}) blinkWarningValue = false;
+  @property({type: Boolean}) showAck = false;
+  @property({type: Boolean}) alertMuted = false;
   @property({type: Boolean}) minimized = false;
-  @property({type: Number, attribute: 'max-width'}) maxWidth = 480;
+  @property({type: Number}) maxWidth = 480;
 
   override render() {
     const empty = this.nAlerts === 0;
@@ -57,8 +54,8 @@ export class ObcAlertTopbarElement extends LitElement {
     if (this.minimized) {
       firstPart = html`<obc-notification-button
         icon
-        open-right
-        corner-left
+        openright
+        cornerleft
         @click=${() => this.dispatchEvent(new CustomEvent('muteclick'))}
       >
         <obi-14-mute></obi-14-mute>
@@ -66,7 +63,7 @@ export class ObcAlertTopbarElement extends LitElement {
     } else {
       firstPart = html`<obc-notification-message
           class="notification-message"
-          ?empty=${empty}
+          .empty=${empty}
           @click=${() => this.dispatchEvent(new CustomEvent('messageclick'))}
         >
           <slot></slot>
@@ -74,16 +71,16 @@ export class ObcAlertTopbarElement extends LitElement {
         </obc-notification-message>
         ${this.showAck
           ? html`<obc-notification-button
-              open-right
+              openright
               @click=${() => this.dispatchEvent(new CustomEvent('ackclick'))}
               >ACK</obc-notification-button
             >`
           : html``}
         <obc-notification-button
           icon
-          open-right
-          ?indent=${empty}
-          ?disabled=${disabledMute}
+          openright
+          .indent=${empty}
+          .disabled=${disabledMute}
           @click=${() => this.dispatchEvent(new CustomEvent('muteclick'))}
         >
           <obi-14-mute></obi-14-mute>
@@ -104,11 +101,11 @@ export class ObcAlertTopbarElement extends LitElement {
       >
         ${firstPart}
         <obc-alert-button
-          alert-type=${this.alertType}
-          n-alerts=${this.nAlerts}
-          ?counter=${!empty}
-          ?blink-alarm-value=${this.blinkAlarmValue}
-          ?blink-warning-value=${this.blinkWarningValue}
+          .alertType=${this.alertType}
+          .nAlerts=${this.nAlerts}
+          .counter=${!empty}
+          .blinkAlarmValue=${this.blinkAlarmValue}
+          .blinkWarningValue=${this.blinkWarningValue}
           @click=${() => this.dispatchEvent(new CustomEvent('alertclick'))}
         ></obc-alert-button>
       </div>