@reliability-design/web 1.0.2

package/dist/components/rel-chip/rel-chip.ts

@@ -0,0 +1,261 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+@customElement("rel-chip")
+export class RelChip extends LitElement {
+  @property({ type: String }) label: string = "Label";
+
+  @property({ type: String }) tone: "default" | "blue" | "yellow" | "red" | "green" = "default";
+
+  @property({ type: String }) leadingIcon?: string;
+
+  @property({ type: String }) trailingIcon?: string;
+
+  @property({ type: String }) avatar?: string;
+
+  @property({ type: Boolean }) removable: boolean = false;
+
+  @property({ type: Boolean }) outline: boolean = false;
+
+  @state() private removed: boolean = false;
+
+  static styles = css`
+    :host {
+      display: inline-block;
+    }
+
+    :host([removed]) {
+      display: none;
+    }
+
+    .chip {
+      display: inline-flex;
+      align-items: center;
+      font-family: var(--rel-fontFamilies-primary);
+      font-size: var(--rel-fontSizes-md);
+      font-weight: var(--rel-fontWeights-medium);
+      border-radius: var(--rel-borders-radius-border-radius-500);
+      padding: var(--rel-spacing-space-2xs) var(--rel-spacing-space-sm);
+      gap: var(--rel-spacing-space-2xs);
+      cursor: pointer;
+      transition: all 0.2s ease-in-out;
+      border: var(--rel-borders-width-stroke-100) solid transparent;
+      user-select: none;
+      white-space: nowrap;
+    }
+
+    .chip:hover {
+      filter: brightness(0.92);
+      transform: translateY(-1px);
+      box-shadow: var(--rel-shadows-shadow-100);
+    }
+
+    .chip:focus:not(:focus-visible) {
+      outline: none;
+    }
+
+    .chip:active {
+      transform: scale(0.97) translateY(0);
+      box-shadow: none;
+      filter: brightness(0.88);
+    }
+
+    /* Tone Variants - Filled */
+    .chip-default {
+      background: var(--rel-colors-gray-border);
+      color: var(--rel-colors-black);
+    }
+
+    .chip-default:focus {
+      outline: var(--rel-borders-width-stroke-200) solid var(--rel-colors-gray-primary);
+      outline-offset: var(--rel-spacing-space-3xs);
+    }
+
+    .chip-blue {
+      background: var(--rel-colors-blue-tertiary);
+      color: var(--rel-colors-white);
+    }
+
+    .chip-blue:focus {
+      outline: var(--rel-borders-width-stroke-200) solid var(--rel-colors-blue-tertiary);
+      outline-offset: var(--rel-spacing-space-3xs);
+    }
+
+    .chip-yellow {
+      background: var(--rel-colors-yellow-pending);
+      color: var(--rel-colors-black);
+    }
+
+    .chip-yellow:focus {
+      outline: var(--rel-borders-width-stroke-200) solid var(--rel-colors-yellow-pending);
+      outline-offset: var(--rel-spacing-space-3xs);
+    }
+
+    .chip-red {
+      background: var(--rel-colors-red-secondary);
+      color: var(--rel-colors-white);
+    }
+
+    .chip-red:focus {
+      outline: var(--rel-borders-width-stroke-200) solid var(--rel-colors-red-secondary);
+      outline-offset: var(--rel-spacing-space-3xs);
+    }
+
+    .chip-green {
+      background: var(--rel-colors-green-success);
+      color: var(--rel-colors-white);
+    }
+
+    .chip-green:focus {
+      outline: var(--rel-borders-width-stroke-200) solid var(--rel-colors-green-success);
+      outline-offset: var(--rel-spacing-space-3xs);
+    }
+
+    /* Outline Variants */
+    .chip-outline.chip-default {
+      background: transparent;
+      border-color: var(--rel-colors-gray-border);
+      color: var(--rel-colors-black);
+    }
+
+    .chip-outline.chip-blue {
+      background: transparent;
+      border-color: var(--rel-colors-blue-tertiary);
+      color: var(--rel-colors-blue-tertiary);
+    }
+
+    .chip-outline.chip-yellow {
+      background: transparent;
+      border-color: var(--rel-colors-yellow-pending);
+      color: var(--rel-colors-yellow-pending);
+    }
+
+    .chip-outline.chip-red {
+      background: transparent;
+      border-color: var(--rel-colors-red-secondary);
+      color: var(--rel-colors-red-secondary);
+    }
+
+    .chip-outline.chip-green {
+      background: transparent;
+      border-color: var(--rel-colors-green-success);
+      color: var(--rel-colors-green-success);
+    }
+
+    .chip-avatar {
+      width: 20px;
+      height: 20px;
+      border-radius: var(--rel-borders-radius-border-radius-500);
+      object-fit: cover;
+    }
+
+    .chip-icon {
+      display: flex;
+      align-items: center;
+      line-height: 0;
+    }
+
+    .chip-icon ::slotted(svg),
+    .chip-icon svg {
+      width: 16px;
+      height: 16px;
+      fill: currentColor;
+    }
+
+    .chip-label {
+      line-height: var(--rel-lineHeights-md);
+    }
+
+    .chip-remove {
+      background: transparent;
+      border: none;
+      color: inherit;
+      font-size: var(--rel-fontSizes-md);
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      padding: 0;
+      margin-left: var(--rel-spacing-space-3xs);
+    }
+
+    .chip-remove:hover {
+      opacity: 0.6;
+    }
+  `;
+
+  private get classes() {
+    return [
+      "chip",
+      `chip-${this.tone}`,
+      this.outline ? "chip-outline" : "",
+    ].join(" ");
+  }
+
+  private handleRemove(event: Event) {
+    event.stopPropagation();
+    this.removed = true;
+    this.dispatchEvent(
+      new CustomEvent("removed", {
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  private handleKeyDown(event: KeyboardEvent) {
+    if (!this.removable) return;
+
+    if (event.key === "Backspace" || event.key === "Delete") {
+      event.preventDefault();
+      this.handleRemove(event);
+    }
+  }
+
+  render() {
+    if (this.removed) {
+      return null;
+    }
+
+    return html`
+      <button
+        class="${this.classes}"
+        type="button"
+        role="button"
+        aria-label="${this.label}"
+        @keydown=${this.handleKeyDown}
+        tabindex="0"
+      >
+        ${this.avatar
+          ? html`<img src="${this.avatar}" alt="avatar" class="chip-avatar" />`
+          : ""}
+        ${this.leadingIcon
+          ? html`<span class="chip-icon leading">
+              <slot name="leading-icon">${this.renderIcon(this.leadingIcon)}</slot>
+            </span>`
+          : ""}
+        <span class="chip-label">${this.label}</span>
+        ${this.trailingIcon
+          ? html`<span class="chip-icon trailing">
+              <slot name="trailing-icon">${this.renderIcon(this.trailingIcon)}</slot>
+            </span>`
+          : ""}
+        ${this.removable
+          ? html`<button
+              type="button"
+              class="chip-remove"
+              @click=${this.handleRemove}
+              aria-label="Remove chip"
+            >
+              
+            </button>`
+          : ""}
+      </button>
+    `;
+  }
+
+  private renderIcon(iconString: string) {
+    const template = document.createElement("template");
+    template.innerHTML = iconString.trim();
+    return html`${template.content.cloneNode(true)}`;
+  }
+}

package/dist/components/rel-container/rel-container.stories.ts

@@ -0,0 +1,239 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import { html } from 'lit';
+import './rel-container';
+
+/**
+ * The Container component is a flexible layout wrapper with customizable padding, background, and shadow.
+ * Built with Lit web components for framework-agnostic usage with full token support.
+ *
+ * ## Features
+ * - **3 Padding Sizes**: sm (8px), md (16px), lg (32px)
+ * - **3 Background Options**: white, light, none (transparent)
+ * - **Optional Shadow**: Elevation shadow for depth
+ * - **Fully Token-Driven**: Uses design system tokens
+ * - **Flexible Content**: Accepts any slotted content
+ */
+const meta: Meta = {
+  title: 'Components/Container',
+  tags: ['autodocs'],
+  component: 'rel-container',
+  argTypes: {
+    padding: {
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg'],
+      description: 'Padding size',
+      table: {
+        defaultValue: { summary: 'md' },
+        type: { summary: 'string' },
+      },
+    },
+    background: {
+      control: { type: 'select' },
+      options: ['white', 'light', 'none'],
+      description: 'Background color variant',
+      table: {
+        defaultValue: { summary: 'white' },
+        type: { summary: 'string' },
+      },
+    },
+    shadow: {
+      control: 'boolean',
+      description: 'Apply elevation shadow',
+      table: {
+        defaultValue: { summary: false },
+        type: { summary: 'boolean' },
+      },
+    },
+  },
+  render: (args) => html`
+    <rel-container
+      padding="${args.padding || 'md'}"
+      background="${args.background || 'white'}"
+      ?shadow="${args.shadow}"
+    >
+      <p style="margin: 0; color: #333;">
+        This is content inside the container. The container provides padding, background, and optional shadow.
+      </p>
+    </rel-container>
+  `,
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Default container with white background and medium padding
+ */
+export const Default: Story = {
+  args: {
+    padding: 'md',
+    background: 'white',
+    shadow: false,
+  },
+};
+
+/**
+ * Container with shadow for elevation effect
+ */
+export const WithShadow: Story = {
+  args: {
+    padding: 'md',
+    background: 'white',
+    shadow: true,
+  },
+};
+
+/**
+ * All padding sizes comparison
+ */
+export const PaddingSizes: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 24px; background: #e0e0e0; padding: 24px;">
+      <div>
+        <h3 style="margin-bottom: 12px; font-size: 16px; font-weight: 600;">Small Padding (8px)</h3>
+        <rel-container padding="sm" background="white" shadow>
+          <p style="margin: 0; color: #333;">Small padding content</p>
+        </rel-container>
+      </div>
+
+      <div>
+        <h3 style="margin-bottom: 12px; font-size: 16px; font-weight: 600;">Medium Padding (16px)</h3>
+        <rel-container padding="md" background="white" shadow>
+          <p style="margin: 0; color: #333;">Medium padding content</p>
+        </rel-container>
+      </div>
+
+      <div>
+        <h3 style="margin-bottom: 12px; font-size: 16px; font-weight: 600;">Large Padding (32px)</h3>
+        <rel-container padding="lg" background="white" shadow>
+          <p style="margin: 0; color: #333;">Large padding content</p>
+        </rel-container>
+      </div>
+    </div>
+  `,
+};
+
+/**
+ * All background variants comparison
+ */
+export const BackgroundVariants: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 24px; background: #e0e0e0; padding: 24px;">
+      <div>
+        <h3 style="margin-bottom: 12px; font-size: 16px; font-weight: 600;">White Background</h3>
+        <rel-container padding="md" background="white" shadow>
+          <p style="margin: 0; color: #333;">White background container</p>
+        </rel-container>
+      </div>
+
+      <div>
+        <h3 style="margin-bottom: 12px; font-size: 16px; font-weight: 600;">Light Background</h3>
+        <rel-container padding="md" background="light" shadow>
+          <p style="margin: 0; color: #333;">Light gray background container</p>
+        </rel-container>
+      </div>
+
+      <div>
+        <h3 style="margin-bottom: 12px; font-size: 16px; font-weight: 600;">No Background (Transparent)</h3>
+        <rel-container padding="md" background="none">
+          <p style="margin: 0; color: #333; background: white; padding: 8px; border-radius: 4px;">
+            Transparent background container (content has its own background for visibility)
+          </p>
+        </rel-container>
+      </div>
+    </div>
+  `,
+};
+
+/**
+ * Container with complex nested content
+ */
+export const ComplexContent: Story = {
+  render: () => html`
+    <div style="background: #e0e0e0; padding: 24px;">
+      <rel-container padding="lg" background="white" shadow>
+        <h2 style="margin: 0 0 16px 0; font-size: 24px; font-weight: 600; color: #333;">User Profile</h2>
+        <div style="display: flex; gap: 16px; align-items: center; margin-bottom: 16px;">
+          <img src="/assets/dummy 1.jpeg" alt="User" style="width: 60px; height: 60px; border-radius: 50%; object-fit: cover;" />
+          <div>
+            <h3 style="margin: 0 0 4px 0; font-size: 18px; font-weight: 600; color: #333;">John Doe</h3>
+            <p style="margin: 0; color: #666; font-size: 14px;">Software Engineer</p>
+          </div>
+        </div>
+        <p style="margin: 0; color: #555; line-height: 1.6;">
+          This container holds complex content including headings, images, and text.
+          The container provides consistent spacing and visual structure.
+        </p>
+      </rel-container>
+    </div>
+  `,
+};
+
+/**
+ * Nested containers for card-like layouts
+ */
+export const NestedContainers: Story = {
+  render: () => html`
+    <div style="background: #e0e0e0; padding: 24px;">
+      <rel-container padding="lg" background="light">
+        <h2 style="margin: 0 0 16px 0; font-size: 20px; font-weight: 600; color: #333;">Dashboard</h2>
+
+        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px;">
+          <rel-container padding="md" background="white" shadow>
+            <h3 style="margin: 0 0 8px 0; font-size: 16px; font-weight: 600; color: #333;">Total Users</h3>
+            <p style="margin: 0; font-size: 32px; font-weight: 700; color: #0059F4;">1,234</p>
+          </rel-container>
+
+          <rel-container padding="md" background="white" shadow>
+            <h3 style="margin: 0 0 8px 0; font-size: 16px; font-weight: 600; color: #333;">Revenue</h3>
+            <p style="margin: 0; font-size: 32px; font-weight: 700; color: #00A86B;">$56,789</p>
+          </rel-container>
+
+          <rel-container padding="md" background="white" shadow>
+            <h3 style="margin: 0 0 8px 0; font-size: 16px; font-weight: 600; color: #333;">Active Sessions</h3>
+            <p style="margin: 0; font-size: 32px; font-weight: 700; color: #FFB020;">89</p>
+          </rel-container>
+        </div>
+      </rel-container>
+    </div>
+  `,
+};
+
+/**
+ * All combinations showcase
+ */
+export const AllCombinations: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 32px; background: #e0e0e0; padding: 24px;">
+      <div>
+        <h2 style="margin-bottom: 16px; font-size: 20px; font-weight: 600;">Without Shadow</h2>
+        <div style="display: flex; flex-direction: column; gap: 16px;">
+          <rel-container padding="sm" background="white">
+            <p style="margin: 0; color: #333;">Small padding, white background, no shadow</p>
+          </rel-container>
+          <rel-container padding="md" background="light">
+            <p style="margin: 0; color: #333;">Medium padding, light background, no shadow</p>
+          </rel-container>
+          <rel-container padding="lg" background="white">
+            <p style="margin: 0; color: #333;">Large padding, white background, no shadow</p>
+          </rel-container>
+        </div>
+      </div>
+
+      <div>
+        <h2 style="margin-bottom: 16px; font-size: 20px; font-weight: 600;">With Shadow</h2>
+        <div style="display: flex; flex-direction: column; gap: 16px;">
+          <rel-container padding="sm" background="white" shadow>
+            <p style="margin: 0; color: #333;">Small padding, white background, with shadow</p>
+          </rel-container>
+          <rel-container padding="md" background="light" shadow>
+            <p style="margin: 0; color: #333;">Medium padding, light background, with shadow</p>
+          </rel-container>
+          <rel-container padding="lg" background="white" shadow>
+            <p style="margin: 0; color: #333;">Large padding, white background, with shadow</p>
+          </rel-container>
+        </div>
+      </div>
+    </div>
+  `,
+};

package/dist/components/rel-container/rel-container.ts

@@ -0,0 +1,74 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+@customElement("rel-container")
+export class RelContainer extends LitElement {
+  @property({ type: String }) padding: "sm" | "md" | "lg" = "md";
+
+  @property({ type: Boolean }) shadow: boolean = false;
+
+  @property({ type: String }) background: "light" | "white" | "none" = "white";
+
+  static styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    .reliability-container {
+      border-radius: var(--rel-borders-radius-border-radius-200);
+      display: block;
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    /* Background Variants */
+    .bg-white {
+      background-color: var(--rel-colors-white);
+    }
+
+    .bg-light {
+      background-color: var(--rel-colors-gray-light);
+    }
+
+    .bg-none {
+      background: transparent;
+    }
+
+    /* Padding Variants */
+    .padding-sm {
+      padding: var(--rel-spacing-space-xs);
+    }
+
+    .padding-md {
+      padding: var(--rel-spacing-space-md);
+    }
+
+    .padding-lg {
+      padding: var(--rel-spacing-space-2xl);
+    }
+
+    /* Shadow */
+    .shadow {
+      box-shadow: var(--rel-shadows-shadow-300);
+    }
+  `;
+
+  private get classes() {
+    return [
+      "reliability-container",
+      `bg-${this.background}`,
+      `padding-${this.padding}`,
+      this.shadow ? "shadow" : "",
+    ].join(" ");
+  }
+
+  render() {
+    return html`
+      <div class="${this.classes}">
+        <slot></slot>
+      </div>
+    `;
+  }
+}