@oicl/openbridge-webcomponents 0.0.7 → 0.0.8

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

@@ -0,0 +1,118 @@
+* {
+    box-sizing: border-box;
+}
+
+.wrapper {
+    position: relative;
+    background-color: var(--container-background-color);
+    box-shadow: var(--shadow-flat);
+    overflow: hidden;
+    
+    &.top, &.regular {
+        border-top-left-radius: 6px;
+        border-top-right-radius: 6px;
+    }
+
+    &.bottom, &.regular {
+        border-bottom-left-radius: 6px;
+        border-bottom-right-radius: 6px;
+    }
+}
+
+button {
+    width: 100%;
+    appearance: none;
+    @mixin style style=flat;
+    border-width: 0 !important;
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+    padding: 0;
+}
+
+.top.border button, .center.border button {
+    border-bottom: 1px solid var(--border-outline-color) !important;
+}
+
+.bottom.border button{
+    border-top: 1px solid var(--border-outline-color) !important;
+}
+
+.container {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px;
+}
+
+.wrapper.single-line .container {
+    padding-top: 4px;
+    padding-bottom: 4px;
+}
+
+.container-content {
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    gap: 8px;
+    padding: 8px;
+    min-width: 0;
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+}
+
+.leading-icon {
+    display: block;
+    width: 32px;
+    height: 24px;
+    padding-right: 8px;
+    color: var(--element-neutral-color);
+    flex-shrink: 0;
+    flex-grow: 0;
+}
+
+.trailing-icon {
+    width: 40px;
+    height: 24px;
+    padding-left: 8px;
+    padding-right: 8px;
+    color: var(--element-neutral-color);
+    flex-shrink: 0;
+    flex-grow: 0;
+
+}
+
+::slotted([slot="label"]) {
+    @mixin font-body;
+    color: var(--element-active-color);
+}
+
+::slotted([slot="description"]) {
+    @mixin font-label;
+    color: var(--element-neutral-color);
+}
+
+.double-line ::slotted([slot="description"])  {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.status {
+    @mixin font-body;
+    color: var(--element-neutral-color);
+}
+
+.graphic {
+    width: 100%;
+}
+
+.graphic-border .graphic {
+    border-bottom: 1px solid var(--border-outline-color);
+    margin-bottom: -1px;
+}

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

@@ -0,0 +1,196 @@
+import type {Meta, StoryObj} from '@storybook/web-components';
+import {ObcRichButton} from './rich-button';
+import './rich-button';
+import {html} from 'lit';
+import '../../icons/icon-01-placeholder';
+import '../../icons/icon-02-chevron-right';
+import '../../icons/icon-01-print';
+import {spread} from '@open-wc/lit-helpers';
+
+const meta: Meta<typeof ObcRichButton> = {
+  title: 'Button/Rich button',
+  tags: ['autodocs'],
+  component: 'obc-rich-button',
+  args: {
+    position: 'regular',
+    size: 'multi-line',
+    hasLeadingIcon: true,
+    hasTrailingIcon: true,
+  },
+  parameters: {
+    backgrounds: {
+      default: 'container-section-color',
+    },
+  },
+  argTypes: {
+    position: {
+      control: {type: 'select'},
+      options: ['regular', 'top', 'bottom', 'center'],
+    },
+    size: {
+      control: {type: 'select'},
+      options: ['single-line', 'double-line', 'multi-line'],
+    },
+  },
+  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}
+    >
+      <obi-01-placeholder slot="leading-icon"></obi-01-placeholder>
+      <div slot="label">Title</div>
+      <div slot="description">
+        Description with multiple lines of text and more than one line of
+        description
+      </div>
+      <obi-02-chevron-right slot="trailing-icon"></obi-02-chevron-right>
+    </obc-rich-button> `,
+} satisfies Meta<ObcRichButton>;
+
+export default meta;
+type Story = StoryObj<ObcRichButton>;
+
+export const Regular: Story = {};
+
+export const RegularNoIcons: Story = {
+  args: {
+    hasLeadingIcon: false,
+    hasTrailingIcon: false,
+  },
+};
+
+export const Top: Story = {
+  args: {
+    position: 'top',
+  },
+};
+
+export const TopWithBoarder: Story = {
+  args: {
+    position: 'top',
+    border: true,
+  },
+};
+
+export const Bottom: Story = {
+  args: {
+    position: 'bottom',
+  },
+};
+
+export const BottomWithBoarder: Story = {
+  args: {
+    position: 'bottom',
+    border: true,
+  },
+};
+
+export const Center: Story = {
+  args: {
+    position: 'center',
+  },
+};
+
+export const SingleLine: Story = {
+  args: {
+    size: 'single-line',
+  },
+};
+
+export const DoubleLine: Story = {
+  args: {
+    size: 'double-line',
+  },
+};
+
+export const MultiLine: Story = {
+  args: {
+    size: 'multi-line',
+  },
+};
+
+export const WithStatus: Story = {
+  args: {
+    size: 'double-line',
+    hasStatus: true,
+    hasLeadingIcon: true,
+    hasTrailingIcon: true,
+  },
+  render: (args) =>
+    html`<obc-rich-button ${spread(args)}>
+      <obi-01-placeholder slot="leading-icon"></obi-01-placeholder>
+      <div slot="label">Title</div>
+      <div slot="status">Status</div>
+      <obi-02-chevron-right slot="trailing-icon"></obi-02-chevron-right>
+    </obc-rich-button> `,
+};
+
+export const WithGraphic: Story = {
+  args: {
+    size: 'double-line',
+    hasStatus: true,
+    hasLeadingIcon: true,
+    hasTrailingIcon: true,
+    hasGraphic: true,
+    graphicBorder: false,
+  },
+  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}
+    >
+      <div
+        slot="graphic"
+        style="width: 100%; height: 120px; color: var(--element-neutral-color); padding-top: 40px; padding-bottom: 32px"
+      >
+        <obi-01-print></obi-01-print>
+      </div>
+      <obi-01-placeholder slot="leading-icon"></obi-01-placeholder>
+      <div slot="label">Title</div>
+      <div slot="status">Status</div>
+      <obi-02-chevron-right slot="trailing-icon"></obi-02-chevron-right>
+    </obc-rich-button> `,
+};
+
+export const WithGraphicBorder: Story = {
+  args: {
+    size: 'double-line',
+    hasStatus: true,
+    hasLeadingIcon: true,
+    hasTrailingIcon: true,
+    hasGraphic: true,
+    graphicBorder: true,
+  },
+  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}
+    >
+      <div
+        slot="graphic"
+        style="width: 100%; height: 120px; color: var(--element-neutral-color); padding-top: 40px; padding-bottom: 32px"
+      >
+        <obi-01-print></obi-01-print>
+      </div>
+      <obi-01-placeholder slot="leading-icon"></obi-01-placeholder>
+      <div slot="label">Title</div>
+      <div slot="status">Status</div>
+      <obi-02-chevron-right slot="trailing-icon"></obi-02-chevron-right>
+    </obc-rich-button> `,
+};

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

@@ -0,0 +1,95 @@
+import {LitElement, html, nothing, unsafeCSS} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import compentStyle from './rich-button.css?inline';
+import {classMap} from 'lit/directives/class-map.js';
+
+export enum ObcRichButtonPosition {
+  Regular = 'regular',
+  Top = 'top',
+  Bottom = 'bottom',
+  Center = 'center',
+}
+export type ObcRichButtonPositionType = 'regular' | 'top' | 'bottom' | 'center';
+
+export enum ObcRichButtonSize {
+  SingleLine = 'single-line',
+  DoubleLine = 'double-line',
+  MultiLine = 'multi-line',
+}
+export type ObcRichButtonSizeType =
+  | 'single-line'
+  | 'double-line'
+  | 'multi-line';
+
+@customElement('obc-rich-button')
+export class ObcRichButton extends LitElement {
+  @property({type: String}) position: ObcRichButtonPositionType =
+    ObcRichButtonPosition.Regular;
+  @property({type: String}) size: ObcRichButtonSizeType =
+    ObcRichButtonSize.SingleLine;
+  @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}) border = false;
+
+  override render() {
+    return html`
+      <div
+        class=${classMap({
+          wrapper: true,
+          [this.position]: true,
+          [this.size]: true,
+          'graphic-border': this.graphicBorder,
+          border: this.border,
+        })}
+      >
+        <button>
+          ${this.hasGraphic
+            ? html`<div class="graphic"><slot name="graphic"></slot></div>`
+            : nothing}
+          <div class="container">
+            <div class="container-content">
+              ${this.hasLeadingIcon
+                ? html`<div class="leading-icon">
+                    <slot name="leading-icon"></slot>
+                  </div>`
+                : nothing}
+              <div class="content">
+                <slot name="label"></slot>
+                ${this.size === ObcRichButtonSize.SingleLine
+                  ? nothing
+                  : html`<slot name="description"></slot>`}
+              </div>
+            </div>
+            ${this.hasStatus
+              ? html`
+                  <div class="status">
+                    <slot name="status"></slot>
+                  </div>
+                `
+              : nothing}
+            ${this.hasTrailingIcon
+              ? html`
+                  <div class="trailing-icon">
+                    <slot name="trailing-icon"></slot>
+                  </div>
+                `
+              : nothing}
+          </div>
+        </button>
+      </div>
+    `;
+  }
+
+  static override styles = unsafeCSS(compentStyle);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-rich-button': ObcRichButton;
+  }
+}

package/src/components/vendor-button/vendor-button.css

@@ -0,0 +1,10 @@
+.wrapper {
+    width: 100%;
+    @mixin style style=flat;
+    @mixin outline-inward;
+
+    & img {
+        width: 100%;
+        height: 100%;
+    }
+}

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

@@ -0,0 +1,19 @@
+import type {Meta, StoryObj} from '@storybook/web-components';
+import {ObcVendorButton} from './vendor-button';
+import './vendor-button';
+import {html} from 'lit';
+
+const meta: Meta<typeof ObcVendorButton> = {
+  title: 'Button/Vendor button',
+  tags: ['autodocs'],
+  component: 'obc-vendor-button',
+  args: {
+    imageSrc: 'https://openbridge-demo.web.app/companylogo-day.png',
+  },
+  decorators: [(story) => html`<div style="width:300px">${story()}</div>`],
+} satisfies Meta<ObcVendorButton>;
+
+export default meta;
+type Story = StoryObj<ObcVendorButton>;
+
+export const Primary: Story = {};

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

@@ -0,0 +1,25 @@
+import {LitElement, html, unsafeCSS} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import compentStyle from './vendor-button.css?inline';
+
+@customElement('obc-vendor-button')
+export class ObcVendorButton extends LitElement {
+  @property({type: String, attribute: 'image-src'}) imageSrc = '';
+  @property({type: String}) alt = 'logo';
+
+  override render() {
+    return html`
+      <button class="wrapper">
+        <img src=${this.imageSrc} alt=${this.alt} />
+      </button>
+    `;
+  }
+
+  static override styles = unsafeCSS(compentStyle);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-vendor-button': ObcVendorButton;
+  }
+}

package/src/icons/icon-01-content-copy.ts

@@ -0,0 +1,40 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-01-content-copy')
+export class Obi01ContentCopy extends LitElement {
+  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+
+  private icon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 18C8.45 18 7.97917 17.8042 7.5875 17.4125C7.19583 17.0208 7 16.55 7 16V4C7 3.45 7.19583 2.97917 7.5875 2.5875C7.97917 2.19583 8.45 2 9 2H18C18.55 2 19.0208 2.19583 19.4125 2.5875C19.8042 2.97917 20 3.45 20 4V16C20 16.55 19.8042 17.0208 19.4125 17.4125C19.0208 17.8042 18.55 18 18 18H9ZM9 16H18V4H9V16ZM5 22C4.45 22 3.97917 21.8042 3.5875 21.4125C3.19583 21.0208 3 20.55 3 20V6H5V20H16V22H5Z" fill="currentColor"/>
+</svg>
+`;
+
+  private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 18C8.45 18 7.97917 17.8042 7.5875 17.4125C7.19583 17.0208 7 16.55 7 16V4C7 3.45 7.19583 2.97917 7.5875 2.5875C7.97917 2.19583 8.45 2 9 2H18C18.55 2 19.0208 2.19583 19.4125 2.5875C19.8042 2.97917 20 3.45 20 4V16C20 16.55 19.8042 17.0208 19.4125 17.4125C19.0208 17.8042 18.55 18 18 18H9ZM9 16H18V4H9V16ZM5 22C4.45 22 3.97917 21.8042 3.5875 21.4125C3.19583 21.0208 3 20.55 3 20V6H5V20H16V22H5Z" style="fill: var(--element-active-color)"/>
+</svg>
+`;
+
+  override render() {
+    return html`
+      <div class="wrapper">${this.useCssColor ? this.iconCss : this.icon}</div>
+    `;
+  }
+
+  static override styles = css`
+    .wrapper {
+      height: 100%;
+      width: 100%;
+    }
+    .wrapper > * {
+      height: 100%;
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obi-01-content-copy': Obi01ContentCopy;
+  }
+}

package/src/icons/icon-01-content-cut.ts

@@ -0,0 +1,40 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-01-content-cut')
+export class Obi01ContentCut extends LitElement {
+  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+
+  private icon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 21L12 14L9.65 16.35C9.78333 16.6 9.875 16.8667 9.925 17.15C9.975 17.4333 10 17.7167 10 18C10 19.1 9.60833 20.0417 8.825 20.825C8.04167 21.6083 7.1 22 6 22C4.9 22 3.95833 21.6083 3.175 20.825C2.39167 20.0417 2 19.1 2 18C2 16.9 2.39167 15.9583 3.175 15.175C3.95833 14.3917 4.9 14 6 14C6.28333 14 6.56667 14.025 6.85 14.075C7.13333 14.125 7.4 14.2167 7.65 14.35L10 12L7.65 9.65C7.4 9.78333 7.13333 9.875 6.85 9.925C6.56667 9.975 6.28333 10 6 10C4.9 10 3.95833 9.60833 3.175 8.825C2.39167 8.04167 2 7.1 2 6C2 4.9 2.39167 3.95833 3.175 3.175C3.95833 2.39167 4.9 2 6 2C7.1 2 8.04167 2.39167 8.825 3.175C9.60833 3.95833 10 4.9 10 6C10 6.28333 9.975 6.56667 9.925 6.85C9.875 7.13333 9.78333 7.4 9.65 7.65L22 20V21H19ZM15 11L13 9L19 3H22V4L15 11ZM6 8C6.55 8 7.02083 7.80417 7.4125 7.4125C7.80417 7.02083 8 6.55 8 6C8 5.45 7.80417 4.97917 7.4125 4.5875C7.02083 4.19583 6.55 4 6 4C5.45 4 4.97917 4.19583 4.5875 4.5875C4.19583 4.97917 4 5.45 4 6C4 6.55 4.19583 7.02083 4.5875 7.4125C4.97917 7.80417 5.45 8 6 8ZM12 12.5C12.1333 12.5 12.25 12.45 12.35 12.35C12.45 12.25 12.5 12.1333 12.5 12C12.5 11.8667 12.45 11.75 12.35 11.65C12.25 11.55 12.1333 11.5 12 11.5C11.8667 11.5 11.75 11.55 11.65 11.65C11.55 11.75 11.5 11.8667 11.5 12C11.5 12.1333 11.55 12.25 11.65 12.35C11.75 12.45 11.8667 12.5 12 12.5ZM6 20C6.55 20 7.02083 19.8042 7.4125 19.4125C7.80417 19.0208 8 18.55 8 18C8 17.45 7.80417 16.9792 7.4125 16.5875C7.02083 16.1958 6.55 16 6 16C5.45 16 4.97917 16.1958 4.5875 16.5875C4.19583 16.9792 4 17.45 4 18C4 18.55 4.19583 19.0208 4.5875 19.4125C4.97917 19.8042 5.45 20 6 20Z" fill="currentColor"/>
+</svg>
+`;
+
+  private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 21L12 14L9.65 16.35C9.78333 16.6 9.875 16.8667 9.925 17.15C9.975 17.4333 10 17.7167 10 18C10 19.1 9.60833 20.0417 8.825 20.825C8.04167 21.6083 7.1 22 6 22C4.9 22 3.95833 21.6083 3.175 20.825C2.39167 20.0417 2 19.1 2 18C2 16.9 2.39167 15.9583 3.175 15.175C3.95833 14.3917 4.9 14 6 14C6.28333 14 6.56667 14.025 6.85 14.075C7.13333 14.125 7.4 14.2167 7.65 14.35L10 12L7.65 9.65C7.4 9.78333 7.13333 9.875 6.85 9.925C6.56667 9.975 6.28333 10 6 10C4.9 10 3.95833 9.60833 3.175 8.825C2.39167 8.04167 2 7.1 2 6C2 4.9 2.39167 3.95833 3.175 3.175C3.95833 2.39167 4.9 2 6 2C7.1 2 8.04167 2.39167 8.825 3.175C9.60833 3.95833 10 4.9 10 6C10 6.28333 9.975 6.56667 9.925 6.85C9.875 7.13333 9.78333 7.4 9.65 7.65L22 20V21H19ZM15 11L13 9L19 3H22V4L15 11ZM6 8C6.55 8 7.02083 7.80417 7.4125 7.4125C7.80417 7.02083 8 6.55 8 6C8 5.45 7.80417 4.97917 7.4125 4.5875C7.02083 4.19583 6.55 4 6 4C5.45 4 4.97917 4.19583 4.5875 4.5875C4.19583 4.97917 4 5.45 4 6C4 6.55 4.19583 7.02083 4.5875 7.4125C4.97917 7.80417 5.45 8 6 8ZM12 12.5C12.1333 12.5 12.25 12.45 12.35 12.35C12.45 12.25 12.5 12.1333 12.5 12C12.5 11.8667 12.45 11.75 12.35 11.65C12.25 11.55 12.1333 11.5 12 11.5C11.8667 11.5 11.75 11.55 11.65 11.65C11.55 11.75 11.5 11.8667 11.5 12C11.5 12.1333 11.55 12.25 11.65 12.35C11.75 12.45 11.8667 12.5 12 12.5ZM6 20C6.55 20 7.02083 19.8042 7.4125 19.4125C7.80417 19.0208 8 18.55 8 18C8 17.45 7.80417 16.9792 7.4125 16.5875C7.02083 16.1958 6.55 16 6 16C5.45 16 4.97917 16.1958 4.5875 16.5875C4.19583 16.9792 4 17.45 4 18C4 18.55 4.19583 19.0208 4.5875 19.4125C4.97917 19.8042 5.45 20 6 20Z" style="fill: var(--element-active-color)"/>
+</svg>
+`;
+
+  override render() {
+    return html`
+      <div class="wrapper">${this.useCssColor ? this.iconCss : this.icon}</div>
+    `;
+  }
+
+  static override styles = css`
+    .wrapper {
+      height: 100%;
+      width: 100%;
+    }
+    .wrapper > * {
+      height: 100%;
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obi-01-content-cut': Obi01ContentCut;
+  }
+}

package/src/icons/icon-01-content-paste.ts

@@ -0,0 +1,40 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-01-content-paste')
+export class Obi01ContentPaste extends LitElement {
+  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+
+  private icon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 22C4.45 22 3.97917 21.8042 3.5875 21.4125C3.19583 21.0208 3 20.55 3 20V6C3 5.45 3.19583 4.97917 3.5875 4.5875C3.97917 4.19583 4.45 4 5 4H9.175C9.35833 3.41667 9.71667 2.9375 10.25 2.5625C10.7833 2.1875 11.3667 2 12 2C12.6667 2 13.2625 2.1875 13.7875 2.5625C14.3125 2.9375 14.6667 3.41667 14.85 4H19C19.55 4 20.0208 4.19583 20.4125 4.5875C20.8042 4.97917 21 5.45 21 6V20C21 20.55 20.8042 21.0208 20.4125 21.4125C20.0208 21.8042 19.55 22 19 22H5ZM5 20H19V6H17V9H7V6H5V20ZM12 6C12.2833 6 12.5208 5.90417 12.7125 5.7125C12.9042 5.52083 13 5.28333 13 5C13 4.71667 12.9042 4.47917 12.7125 4.2875C12.5208 4.09583 12.2833 4 12 4C11.7167 4 11.4792 4.09583 11.2875 4.2875C11.0958 4.47917 11 4.71667 11 5C11 5.28333 11.0958 5.52083 11.2875 5.7125C11.4792 5.90417 11.7167 6 12 6Z" fill="currentColor"/>
+</svg>
+`;
+
+  private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 22C4.45 22 3.97917 21.8042 3.5875 21.4125C3.19583 21.0208 3 20.55 3 20V6C3 5.45 3.19583 4.97917 3.5875 4.5875C3.97917 4.19583 4.45 4 5 4H9.175C9.35833 3.41667 9.71667 2.9375 10.25 2.5625C10.7833 2.1875 11.3667 2 12 2C12.6667 2 13.2625 2.1875 13.7875 2.5625C14.3125 2.9375 14.6667 3.41667 14.85 4H19C19.55 4 20.0208 4.19583 20.4125 4.5875C20.8042 4.97917 21 5.45 21 6V20C21 20.55 20.8042 21.0208 20.4125 21.4125C20.0208 21.8042 19.55 22 19 22H5ZM5 20H19V6H17V9H7V6H5V20ZM12 6C12.2833 6 12.5208 5.90417 12.7125 5.7125C12.9042 5.52083 13 5.28333 13 5C13 4.71667 12.9042 4.47917 12.7125 4.2875C12.5208 4.09583 12.2833 4 12 4C11.7167 4 11.4792 4.09583 11.2875 4.2875C11.0958 4.47917 11 4.71667 11 5C11 5.28333 11.0958 5.52083 11.2875 5.7125C11.4792 5.90417 11.7167 6 12 6Z" style="fill: var(--element-active-color)"/>
+</svg>
+`;
+
+  override render() {
+    return html`
+      <div class="wrapper">${this.useCssColor ? this.iconCss : this.icon}</div>
+    `;
+  }
+
+  static override styles = css`
+    .wrapper {
+      height: 100%;
+      width: 100%;
+    }
+    .wrapper > * {
+      height: 100%;
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obi-01-content-paste': Obi01ContentPaste;
+  }
+}

package/src/icons/icon-02-dock-bottom.ts

@@ -0,0 +1,40 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-02-dock-bottom')
+export class Obi02DockBottom extends LitElement {
+  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+
+  private icon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 16V19H19V16H5ZM5 14H19V5H5V14Z" fill="currentColor"/>
+</svg>
+`;
+
+  private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 16V19H19V16H5ZM5 14H19V5H5V14Z" style="fill: var(--element-active-color)"/>
+</svg>
+`;
+
+  override render() {
+    return html`
+      <div class="wrapper">${this.useCssColor ? this.iconCss : this.icon}</div>
+    `;
+  }
+
+  static override styles = css`
+    .wrapper {
+      height: 100%;
+      width: 100%;
+    }
+    .wrapper > * {
+      height: 100%;
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obi-02-dock-bottom': Obi02DockBottom;
+  }
+}

package/src/icons/icon-02-dock-left.ts

@@ -0,0 +1,40 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-02-dock-left')
+export class Obi02DockLeft extends LitElement {
+  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+
+  private icon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM8 19V5H5V19H8ZM10 19H19V5H10V19Z" fill="currentColor"/>
+</svg>
+`;
+
+  private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM8 19V5H5V19H8ZM10 19H19V5H10V19Z" style="fill: var(--element-active-color)"/>
+</svg>
+`;
+
+  override render() {
+    return html`
+      <div class="wrapper">${this.useCssColor ? this.iconCss : this.icon}</div>
+    `;
+  }
+
+  static override styles = css`
+    .wrapper {
+      height: 100%;
+      width: 100%;
+    }
+    .wrapper > * {
+      height: 100%;
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obi-02-dock-left': Obi02DockLeft;
+  }
+}