@oicl/openbridge-webcomponents 0.0.14 → 0.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "type": "module",
   "repository": {
     "type": "git",
@@ -31,6 +31,7 @@
     "release": "release-it"
   },
   "dependencies": {
+    "@lit-labs/observers": "^2.0.2",
     "lit": "^3.1.0"
   },
   "devDependencies": {

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>

package/src/components/badge/badge.stories.ts

@@ -34,7 +34,7 @@ export const Large: Story = {
 
 export const NoNumber: Story = {
   render() {
-    return html`<obc-badge hide-number size="regular">
+    return html`<obc-badge hideNumber size="regular">
       <obi-01-placeholder></obi-01-placeholder>
     </obc-badge>`;
   },
@@ -42,7 +42,7 @@ export const NoNumber: Story = {
 
 export const NoNumberLarge: Story = {
   render() {
-    return html`<obc-badge hide-number size="large">
+    return html`<obc-badge hideNumber size="large">
       <obi-01-placeholder></obi-01-placeholder>
     </obc-badge>`;
   },
@@ -112,7 +112,7 @@ export const Empty: Story = {
 
 export const Automation: Story = {
   render() {
-    return html`<obc-badge hide-number type="automation">
+    return html`<obc-badge hideNumber type="automation">
       <obi-01-placeholder></obi-01-placeholder>
     </obc-badge>`;
   },

package/src/components/badge/badge.ts

@@ -24,7 +24,7 @@ export enum BadgeType {
 @customElement('obc-badge')
 export class ObcBadge extends LitElement {
   @property({type: Number}) number = 0;
-  @property({type: Boolean, attribute: 'hide-number'}) hideNumber = false;
+  @property({type: Boolean}) hideNumber = false;
   @property({type: String}) size: BadgeSize = BadgeSize.regular;
   @property({type: String}) type: BadgeType = BadgeType.regular;
 

package/src/components/brilliance-menu/brilliance-menu.ts

@@ -29,10 +29,9 @@ export class ObcBrillianceMenu extends LitElement {
   @property({type: String}) palette: 'night' | 'dusk' | 'day' | 'bright' =
     'day';
   @property({type: Number}) brightness = 50;
-  @property({type: Boolean, attribute: 'show-auto-brightness'})
+  @property({type: Boolean})
   showAutoBrightness = false;
-  @property({type: Boolean, attribute: 'show-auto-palette'}) showAutoPalette =
-    false;
+  @property({type: Boolean}) showAutoPalette = false;
 
   onPaletteChanged(event: CustomEvent) {
     this.palette = event.detail.value;
@@ -61,9 +60,9 @@ export class ObcBrillianceMenu extends LitElement {
           @value=${this.onBrightnessChanged}
           min="0"
           max="100"
-          hug-container
-          has-left-icon
-          has-right-icon
+          hugcontainer
+          haslefticon
+          hasrighticon
         >
           <obi-04-brilliance-low slot="icon-left"></obi-04-brilliance-low>
           <obi-04-brilliance-high slot="icon-right"></obi-04-brilliance-high>

package/src/components/button/button.stories.ts

@@ -41,12 +41,12 @@ const meta: Meta<typeof ObcButton> = {
   },
   render: (args) =>
     html`<obc-button
-      variant=${args.variant}
-      size=${args.size}
-      ?full-width=${args.fullWidth}
-      ?hug-text=${args.hugText}
-      ?checked=${args.checked}
-      ?disabled=${args.disabled}
+      .variant=${args.variant}
+      .size=${args.size}
+      .fullWidth=${args.fullWidth}
+      .hugText=${args.hugText}
+      .checked=${args.checked}
+      .disabled=${args.disabled}
     >
       ${args.leadingIcon
         ? iconIdToIconHtml(args.leadingIcon as unknown as string, {
@@ -62,10 +62,10 @@ const meta: Meta<typeof ObcButton> = {
           })
         : ''}
     </obc-button>`,
-} satisfies Meta<Button>;
+} satisfies Meta<ObcButton>;
 
 export default meta;
-type Story = StoryObj<Button>;
+type Story = StoryObj<ObcButton>;
 
 // More on writing stories with args: https://storybook.js.org/docs/web-components/writing-stories/args
 export const Normal: Story = {

package/src/components/button/button.ts

@@ -13,8 +13,8 @@ export class ObcButton extends LitElement {
   @property({type: String}) icon = '01-placeholder';
   @property({type: String}) variant = 'normal';
   @property({type: String}) size = 'regular';
-  @property({type: Boolean, attribute: 'full-width'}) fullWidth = false;
-  @property({type: Boolean, attribute: 'hug-text'}) hugText = false;
+  @property({type: Boolean}) fullWidth = false;
+  @property({type: Boolean}) hugText = false;
   @property({type: Boolean}) checked = false;
   @property({type: Boolean}) disabled = false;