@oicl/openbridge-webcomponents 0.0.13 → 0.0.15-dev-20240814145458

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;
 

package/src/components/clock/clock.ts

@@ -21,8 +21,8 @@ const monthNames = [
 @customElement('obc-clock')
 export class ObcClock extends LitElement {
   @property({type: String}) date = '2021-01-01T11:11:11.111Z';
-  @property({type: Boolean, attribute: 'show-date'}) showDate = false;
-  @property({type: Number, attribute: 'blink-only-breakpoint-px'})
+  @property({type: Boolean}) showDate = false;
+  @property({type: Number})
   blinkOnlyBreakpointPx = 0;
 
   override render() {

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

@@ -17,9 +17,9 @@ const meta: Meta<typeof ObcIconButton> = {
     <obc-icon-button
       variant=${args.variant}
       size=${args.size}
-      ?corner-left=${args.cornerLeft}
-      ?corner-right=${args.cornerRight}
-      ?active-color=${args.activeColor}
+      ?cornerleft=${args.cornerLeft}
+      ?cornerright=${args.cornerRight}
+      ?activecolor=${args.activeColor}
       ?activated=${args.activated}
     >
       ${iconIdToIconHtml(args.icon)}

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

@@ -8,9 +8,9 @@ export class ObcIconButton extends LitElement {
   @property({type: String}) variant = 'normal';
   @property({type: String}) size = 'regular';
   @property({type: Boolean}) activated = false;
-  @property({type: Boolean, attribute: 'corner-left'}) cornerLeft = false;
-  @property({type: Boolean, attribute: 'corner-right'}) cornerRight = false;
-  @property({type: Boolean, attribute: 'active-color'}) activeColor = false;
+  @property({type: Boolean}) cornerLeft = false;
+  @property({type: Boolean}) cornerRight = false;
+  @property({type: Boolean}) activeColor = false;
 
   override render() {
     return html`

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

@@ -41,21 +41,21 @@ export const MuteIndent: Story = {
 
 export const MuteOpenRight: Story = {
   render: () =>
-    html` <obc-notification-button icon open-right>
+    html` <obc-notification-button icon openright>
       <obi-14-mute></obi-14-mute>
     </obc-notification-button>`,
 };
 
 export const CornerLeft: Story = {
   render: () =>
-    html` <obc-notification-button icon corner-left>
+    html` <obc-notification-button icon cornerleft>
       <obi-14-mute></obi-14-mute>
     </obc-notification-button>`,
 };
 
 export const CornerRight: Story = {
   render: () =>
-    html` <obc-notification-button icon corner-right>
+    html` <obc-notification-button icon cornerright>
       <obi-14-mute></obi-14-mute>
     </obc-notification-button>`,
 };

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

@@ -5,10 +5,10 @@ import {classMap} from 'lit/directives/class-map.js';
 
 @customElement('obc-notification-button')
 export class ObcNotificationButton extends LitElement {
-  @property({type: Boolean, attribute: 'open-right'}) openRight = false;
-  @property({type: Boolean, attribute: 'open-left'}) openLeft = false;
-  @property({type: Boolean, attribute: 'corner-left'}) cornerLeft = false;
-  @property({type: Boolean, attribute: 'corner-right'}) cornerRight = false;
+  @property({type: Boolean}) openRight = false;
+  @property({type: Boolean}) openLeft = false;
+  @property({type: Boolean}) cornerLeft = false;
+  @property({type: Boolean}) cornerRight = false;
   @property({type: Boolean}) icon = false;
   @property({type: Boolean}) disabled = false;
   @property({type: Boolean}) indent = false;

package/src/components/notification-message/notification-message.stories.ts

@@ -23,7 +23,7 @@ export const Primary: Story = {
         <obc-alert-icon
           slot="icon"
           name="alarm-unack"
-          blink-value
+          blinkValue
         ></obc-alert-icon>
         <div slot="message">This is a message</div>
       </obc-notification-message-item>
@@ -47,7 +47,7 @@ export const Large: Story = {
         <obc-alert-icon
           slot="icon"
           name="alarm-unack"
-          blink-value
+          blinkValue
         ></obc-alert-icon>
         <div slot="message">This is a message</div>
       </obc-notification-message-item>
@@ -55,7 +55,7 @@ export const Large: Story = {
         <obc-alert-icon
           slot="icon"
           name="alarm-unack"
-          blink-value
+          blinkValue
         ></obc-alert-icon>
         <div slot="message">This is a message</div>
       </obc-notification-message-item>
@@ -71,7 +71,7 @@ export const LargeSingleMessage: Story = {
         <obc-alert-icon
           slot="icon"
           name="alarm-unack"
-          blink-value
+          blinkValue
         ></obc-alert-icon>
         <div slot="message">This is a message</div>
       </obc-notification-message-item>

package/src/components/notification-message/notification-message.ts

@@ -6,7 +6,7 @@ import {classMap} from 'lit/directives/class-map.js';
 @customElement('obc-notification-message')
 export class ObcNotificationMessage extends LitElement {
   @property({type: Boolean}) large = false;
-  @property({type: Boolean, attribute: 'empty'}) empty = false;
+  @property({type: Boolean}) empty = false;
 
   override render() {
     return html`

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

@@ -36,13 +36,13 @@ const meta: Meta<typeof ObcRichButton> = {
   decorators: (story) => html`<div style="width: 400px;">${story()}</div>`,
   render: (args) =>
     html`<obc-rich-button
-      position=${args.position}
-      size=${args.size}
-      ?has-graphic=${args.hasGraphic}
-      ?has-leading-icon=${args.hasLeadingIcon}
-      ?has-trailing-icon=${args.hasTrailingIcon}
-      ?has-status=${args.hasStatus}
-      ?border=${args.border}
+      .position=${args.position}
+      .size=${args.size}
+      .hasGraphic=${args.hasGraphic}
+      .hasLeadingIcon=${args.hasLeadingIcon}
+      .hasTrailingIcon=${args.hasTrailingIcon}
+      .hasStatus=${args.hasStatus}
+      .border=${args.border}
     >
       <obi-01-placeholder slot="leading-icon"></obi-01-placeholder>
       <div slot="label">Title</div>
@@ -143,13 +143,13 @@ export const WithGraphic: Story = {
   },
   render: (args) =>
     html`<obc-rich-button
-      position=${args.position}
-      size=${args.size}
-      ?has-graphic=${args.hasGraphic}
-      ?has-leading-icon=${args.hasLeadingIcon}
-      ?has-trailing-icon=${args.hasTrailingIcon}
-      ?has-status=${args.hasStatus}
-      ?graphic-border=${args.graphicBorder}
+      .position=${args.position}
+      .size=${args.size}
+      .hasGraphic=${args.hasGraphic}
+      .hasLeadingIcon=${args.hasLeadingIcon}
+      .hasTrailingIcon=${args.hasTrailingIcon}
+      .hasStatus=${args.hasStatus}
+      .graphicBorder=${args.graphicBorder}
     >
       <div
         slot="graphic"
@@ -175,13 +175,13 @@ export const WithGraphicBorder: Story = {
   },
   render: (args) =>
     html`<obc-rich-button
-      position=${args.position}
-      size=${args.size}
-      ?has-graphic=${args.hasGraphic}
-      ?has-leading-icon=${args.hasLeadingIcon}
-      ?has-trailing-icon=${args.hasTrailingIcon}
-      ?has-status=${args.hasStatus}
-      ?graphic-border=${args.graphicBorder}
+      .position=${args.position}
+      .size=${args.size}
+      .hasGraphic=${args.hasGraphic}
+      .hasLeadingIcon=${args.hasLeadingIcon}
+      .hasTrailingIcon=${args.hasTrailingIcon}
+      .hasStatus=${args.hasStatus}
+      .graphicBorder=${args.graphicBorder}
     >
       <div
         slot="graphic"
@@ -207,13 +207,13 @@ export const WithGraphicInfo: Story = {
   },
   render: (args) =>
     html`<obc-rich-button
-      position=${args.position}
-      size=${args.size}
-      ?has-graphic=${args.hasGraphic}
-      ?has-leading-icon=${args.hasLeadingIcon}
-      ?has-trailing-icon=${args.hasTrailingIcon}
-      ?graphic-border=${args.graphicBorder}
-      ?info=${args.info}
+      .position=${args.position}
+      .size=${args.size}
+      .hasGraphic=${args.hasGraphic}
+      .hasLeadingIcon=${args.hasLeadingIcon}
+      .hasTrailingIcon=${args.hasTrailingIcon}
+      .graphicBorder=${args.graphicBorder}
+      .info=${args.info}
     >
       <div
         slot="graphic"

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

@@ -28,13 +28,11 @@ export class ObcRichButton extends LitElement {
   @property({type: String}) size: ObcRichButtonSizeType =
     ObcRichButtonSize.SingleLine;
   @property({type: Boolean}) info = false;
-  @property({type: Boolean, attribute: 'has-leading-icon'}) hasLeadingIcon =
-    false;
-  @property({type: Boolean, attribute: 'has-trailing-icon'}) hasTrailingIcon =
-    false;
-  @property({type: Boolean, attribute: 'has-status'}) hasStatus = false;
-  @property({type: Boolean, attribute: 'has-graphic'}) hasGraphic = false;
-  @property({type: Boolean, attribute: 'graphic-border'}) graphicBorder = false;
+  @property({type: Boolean}) hasLeadingIcon = false;
+  @property({type: Boolean}) hasTrailingIcon = false;
+  @property({type: Boolean}) hasStatus = false;
+  @property({type: Boolean}) hasGraphic = false;
+  @property({type: Boolean}) graphicBorder = false;
   @property({type: Boolean}) border = false;
 
   override render() {

package/src/components/slider/slider.css

@@ -11,7 +11,7 @@
   color: var(--element-neutral-color, #1a1a1a);
 }
 
-:host([hug-container]) {
+:host([hugcontainer]) {
   margin-left: -12px;
   margin-right: -12px;
 }

package/src/components/slider/slider.stories.ts

@@ -35,9 +35,9 @@ const meta: Meta<typeof ObcSlider> = {
       step=${ifDefined(args.step)}
       min="0"
       max="100"
-      ?hug-container=${args.hugContainer}
-      ?has-left-icon=${args.iconLeft ? true : false}
-      ?has-right-icon=${args.iconRight ? true : false}
+      ?hugcontainer=${args.hugContainer}
+      ?haslefticon=${args.iconLeft ? true : false}
+      ?hasrighticon=${args.iconRight ? true : false}
       variant=${args.variant}
     >
       ${args.iconLeft

package/src/components/slider/slider.ts

@@ -21,7 +21,7 @@ export type ObcSliderVariantType = 'no-value' | 'no-input';
  * @prop {number} max - The maximum value of the slider
  * @prop {number} step - The step value of the slider
  * @prop {number} stepClick - The step value when clicking the increase or decrease buttons
- * @attr hug-container - If set, the slider will not have any spacing between the slider icons and the container
+ * @attr hugcontainer - If set, the slider will not have any spacing between the slider icons and the container
  *
  * @slot icon-left - Slot for the left icon
  * @slot icon-right - Slot for the right icon
@@ -34,10 +34,10 @@ export class ObcSlider extends LitElement {
   @property({type: Number}) min = 0;
   @property({type: Number}) max = 100;
   @property({type: Number}) step: number | undefined;
-  @property({type: Number, attribute: 'step-click'}) stepClick = 10;
+  @property({type: Number}) stepClick = 10;
   @property({type: String}) variant: ObcSliderVariantType = 'no-value';
-  @property({type: Boolean, attribute: 'has-left-icon'}) hasLeftIcon = false;
-  @property({type: Boolean, attribute: 'has-right-icon'}) hasRightIcon = false;
+  @property({type: Boolean}) hasLeftIcon = false;
+  @property({type: Boolean}) hasRightIcon = false;
 
   onInput(value: number) {
     this.value = value;

package/src/components/table/table.stories.ts

@@ -62,7 +62,7 @@ export const Primary: Story = {
               <obc-table-cell>
                 <div class="alert-status">
                   <obi-14-alarm-unack
-                    use-css-color
+                    usecsscolor
                     class="alert-icon"
                   ></obi-14-alarm-unack>
                   <span>Unacked</span>
@@ -78,14 +78,14 @@ export const Primary: Story = {
                 <obi-16-lock class="lock-icon"></obi-16-lock>
               </obc-table-cell>
               <obc-table-cell>
-                <obc-button full-width>ACK</obc-button>
+                <obc-button fullwidth>ACK</obc-button>
               </obc-table-cell>
             </obc-table-row>
             <obc-table-row>
               <obc-table-cell>
                 <div class="alert-status">
                   <obi-14-alarm-unack
-                    use-css-color
+                    usecsscolor
                     class="alert-icon"
                   ></obi-14-alarm-unack>
                   <span>Unacked</span>
@@ -101,14 +101,14 @@ export const Primary: Story = {
                 <obi-16-lock class="lock-icon"></obi-16-lock>
               </obc-table-cell>
               <obc-table-cell>
-                <obc-button full-width>ACK</obc-button>
+                <obc-button fullwidth>ACK</obc-button>
               </obc-table-cell>
             </obc-table-row>
             <obc-table-row>
               <obc-table-cell>
                 <div class="alert-status">
                   <obi-14-alarm-unack
-                    use-css-color
+                    usecsscolor
                     class="alert-icon"
                   ></obi-14-alarm-unack>
                   <span>Unacked</span>
@@ -124,14 +124,14 @@ export const Primary: Story = {
                 <obi-16-lock class="lock-icon"></obi-16-lock>
               </obc-table-cell>
               <obc-table-cell>
-                <obc-button full-width>ACK</obc-button>
+                <obc-button fullwidth>ACK</obc-button>
               </obc-table-cell>
             </obc-table-row>
             <obc-table-row>
               <obc-table-cell>
                 <div class="alert-status">
                   <obi-14-alarm-unack
-                    use-css-color
+                    usecsscolor
                     class="alert-icon"
                   ></obi-14-alarm-unack>
                   <span>Unacked</span>
@@ -147,14 +147,14 @@ export const Primary: Story = {
                 <obi-16-lock class="lock-icon"></obi-16-lock>
               </obc-table-cell>
               <obc-table-cell>
-                <obc-button full-width>ACK</obc-button>
+                <obc-button fullwidth>ACK</obc-button>
               </obc-table-cell>
             </obc-table-row>
             <obc-table-row>
               <obc-table-cell>
                 <div class="alert-status">
                   <obi-14-alarm-unack
-                    use-css-color
+                    usecsscolor
                     class="alert-icon"
                   ></obi-14-alarm-unack>
                   <span>Unacked</span>
@@ -170,14 +170,14 @@ export const Primary: Story = {
                 <obi-16-lock class="lock-icon"></obi-16-lock>
               </obc-table-cell>
               <obc-table-cell>
-                <obc-button full-width>ACK</obc-button>
+                <obc-button fullwidth>ACK</obc-button>
               </obc-table-cell>
             </obc-table-row>
             <obc-table-row>
               <obc-table-cell>
                 <div class="alert-status">
                   <obi-14-alarm-unack
-                    use-css-color
+                    usecsscolor
                     class="alert-icon"
                   ></obi-14-alarm-unack>
                   <span>Unacked</span>
@@ -193,14 +193,14 @@ export const Primary: Story = {
                 <obi-16-lock class="lock-icon"></obi-16-lock>
               </obc-table-cell>
               <obc-table-cell>
-                <obc-button full-width>ACK</obc-button>
+                <obc-button fullwidth>ACK</obc-button>
               </obc-table-cell>
             </obc-table-row>
             <obc-table-row>
               <obc-table-cell>
                 <div class="alert-status">
                   <obi-14-alarm-unack
-                    use-css-color
+                    usecsscolor
                     class="alert-icon"
                   ></obi-14-alarm-unack>
                   <span>Unacked</span>
@@ -216,14 +216,14 @@ export const Primary: Story = {
                 <obi-16-lock class="lock-icon"></obi-16-lock>
               </obc-table-cell>
               <obc-table-cell>
-                <obc-button full-width>ACK</obc-button>
+                <obc-button fullwidth>ACK</obc-button>
               </obc-table-cell>
             </obc-table-row>
             <obc-table-row>
               <obc-table-cell>
                 <div class="alert-status">
                   <obi-14-alarm-unack
-                    use-css-color
+                    usecsscolor
                     class="alert-icon"
                   ></obi-14-alarm-unack>
                   <span>Unacked</span>
@@ -239,14 +239,14 @@ export const Primary: Story = {
                 <obi-16-lock class="lock-icon"></obi-16-lock>
               </obc-table-cell>
               <obc-table-cell>
-                <obc-button full-width>ACK</obc-button>
+                <obc-button fullwidth>ACK</obc-button>
               </obc-table-cell>
             </obc-table-row>
             <obc-table-row>
               <obc-table-cell>
                 <div class="alert-status">
                   <obi-14-alarm-unack
-                    use-css-color
+                    usecsscolor
                     class="alert-icon"
                   ></obi-14-alarm-unack>
                   <span>Unacked</span>
@@ -262,14 +262,14 @@ export const Primary: Story = {
                 <obi-16-lock class="lock-icon"></obi-16-lock>
               </obc-table-cell>
               <obc-table-cell>
-                <obc-button full-width>ACK</obc-button>
+                <obc-button fullwidth>ACK</obc-button>
               </obc-table-cell>
             </obc-table-row>
             <obc-table-row>
               <obc-table-cell>
                 <div class="alert-status">
                   <obi-14-alarm-unack
-                    use-css-color
+                    usecsscolor
                     class="alert-icon"
                   ></obi-14-alarm-unack>
                   <span>Unacked</span>
@@ -285,7 +285,7 @@ export const Primary: Story = {
                 <obi-16-lock class="lock-icon"></obi-16-lock>
               </obc-table-cell>
               <obc-table-cell>
-                <obc-button full-width>ACK</obc-button>
+                <obc-button fullwidth>ACK</obc-button>
               </obc-table-cell>
             </obc-table-row>
           </obc-table-body>

package/src/components/table/table.ts

@@ -23,6 +23,7 @@ export class ObcTableCell extends LitElement {
       border-bottom: 1px solid var(--border-divider-color);
       vertical-align: middle;
       height: 48px;
+      color: var(--element-active-color);
     }
 
     :host(:first-child) {
@@ -48,6 +49,7 @@ export class ObcTableHeadCell extends LitElement {
       display: table-cell;
       padding-right: 16px;
       padding-left: 16px;
+      color: var(--element-active-color);
       border-bottom: 1px solid var(--border-divider-color);
       vertical-align: middle;
     }

package/src/components/toggle-button-group/toggle-button-group.css

@@ -1,13 +1,13 @@
-:host {
+.outer-wrapper {
   box-sizing: border-box;
   display: block;
   padding: 8px 0;
   height: 48px;
-}
 
-:host([has-labels]) {
-  padding-top: 4px;
-  height: 64px;
+  &.has-labels {
+    padding-top: 4px;
+    height: 64px;
+  }
 }
 
 .wrapper {

package/src/components/toggle-button-group/toggle-button-group.ts

@@ -9,7 +9,7 @@ import componentStyle from './toggle-button-group.css?inline';
 
 @customElement('obc-toggle-button-group')
 export class ObcToggleButtonGroup extends LitElement {
-  @property({type: Boolean, attribute: 'has-labels'}) hasLabels = false;
+  @property({type: Boolean}) hasLabels = false;
   @property({type: String}) value = '';
 
   @queryAssignedElements({selector: 'obc-toggle-button-option'})
@@ -44,8 +44,10 @@ export class ObcToggleButtonGroup extends LitElement {
 
   override render() {
     return html`
-      <div class="wrapper ${this.hasLabels ? 'has-labels' : ''}">
-        <slot></slot>
+      <div class="outer-wrapper ${this.hasLabels ? 'has-labels' : ''}">
+        <div class="wrapper ">
+          <slot></slot>
+        </div>
       </div>
     `;
   }

package/src/components/toggle-button-group/toggle-button.stories.ts

@@ -25,7 +25,7 @@ const meta: Meta<typeof ObcToggleButtonGroup> = {
   },
   render: (args) =>
     html` <div style="width: 300px">
-      <obc-toggle-button-group value="${args.value}" has-labels>
+      <obc-toggle-button-group value="${args.value}" hasLabels>
         <obc-toggle-button-option value="1"
           >Option 1
           <obi-01-placeholder slot="icon"></obi-01-placeholder>

package/src/components/tooltip/tooltip.stories.ts

@@ -19,7 +19,7 @@ const meta: Meta<typeof ObcTooltip> = {
       variant="${args.variant}"
       title="${args.label}"
       text="${args.text}"
-      ?right-arrow=${args.rightArrow}
+      ?rightarrow=${args.rightArrow}
     >
       ${iconIdToIconHtml(args.icon as unknown as string, {slot: 'icon'})}
     </obc-tooltip>`,

package/src/components/tooltip/tooltip.ts

@@ -18,7 +18,7 @@ export class ObcTooltip extends LitElement {
   @property({type: String}) variant = 'neutral' as TooltipVariant;
   @property({type: String}) label = 'Title';
   @property({type: String}) text = 'Tooltip text';
-  @property({type: Boolean, attribute: 'right-arrow'}) rightArrow = false;
+  @property({type: Boolean}) rightArrow = false;
 
   override render() {
     return html`
@@ -37,7 +37,7 @@ export class ObcTooltip extends LitElement {
             <div class="title">${this.label}</div>
             <div class="btn">
               <obc-icon-button
-                active-color
+                activecolor
                 variant="flat"
                 @click="${() =>
                   this.dispatchEvent(new CustomEvent('click:more'))}"