@reliability-design/web 1.0.2 → 1.0.3

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

@@ -3,23 +3,19 @@ import { customElement, property } from "lit/decorators.js";
 
 @customElement("rel-button")
 export class RelButton extends LitElement {
-  @property({ type: String }) variant:
-    | "default"
-    | "primary"
-    | "secondary"
-    | "text"
-    | "link"
-    | "icon" = "default";
-
-  @property({ type: String }) tone: "default" | "critical" | "success" =
+  @property({ type: String })
+  variant: "default" | "primary" | "secondary" | "text" | "link" | "icon" =
     "default";
 
-  @property({ type: String }) size: "small" | "medium" | "large" = "medium";
+  @property({ type: String })
+  tone: "default" | "critical" | "success" = "default";
 
-  @property({ type: String }) border:
-    | "corner-radius"
-    | "small-corner-radius"
-    | "no-corner-radius" = "corner-radius";
+  @property({ type: String })
+  size: "small" | "medium" | "large" = "medium";
+
+  @property({ type: String })
+  border: "corner-radius" | "small-corner-radius" | "no-corner-radius" =
+    "corner-radius";
 
   @property({ type: Boolean, reflect: true }) disabled = false;
 
@@ -41,9 +37,7 @@ export class RelButton extends LitElement {
       outline: none;
     }
 
-    /* -------------------------
-        SIZES (Figma)
-    -------------------------- */
+    /* Sizes */
     .size-small {
       height: 32px;
       padding: 0 var(--rel-spacing-space-md);
@@ -62,9 +56,7 @@ export class RelButton extends LitElement {
       font-size: var(--rel-fontSizes-lg);
     }
 
-    /* -------------------------
-        BORDER RADII (Tokens)
-    -------------------------- */
+    /* Borders */
     .border-corner-radius {
       border-radius: var(--rel-borders-radius-border-radius-500);
     }
@@ -77,24 +69,15 @@ export class RelButton extends LitElement {
       border-radius: var(--rel-borders-radius-border-radius-0);
     }
 
-    /* -------------------------
-        DISABLED STATE
-    -------------------------- */
-    :host([disabled]) button,
-    button:disabled {
+    /* Disabled */
+    :host([disabled]) button {
       cursor: not-allowed;
       background-color: var(--rel-colors-gray-border) !important;
       color: var(--rel-colors-gray-disabled-text) !important;
-      border-color: var(--rel-colors-gray-border) !important;
-      opacity: 1;
       pointer-events: none;
     }
 
-    /* -------------------------
-        VARIANTS & TONES
-    -------------------------- */
-
-    /* DEFAULT */
+    /* Variants & tones (unchanged) */
     .btn-default.tone-default {
       background: var(--rel-colors-gray-primary);
       color: var(--rel-colors-white);
@@ -108,7 +91,6 @@ export class RelButton extends LitElement {
       color: var(--rel-colors-white);
     }
 
-    /* PRIMARY */
     .btn-primary.tone-default {
       background: var(--rel-colors-green-primary);
       color: var(--rel-colors-black);
@@ -122,27 +104,23 @@ export class RelButton extends LitElement {
       color: var(--rel-colors-white);
     }
 
-    /* SECONDARY */
     .btn-secondary {
       background: var(--rel-colors-white);
       border: 1px solid var(--rel-colors-black);
       color: var(--rel-colors-black);
     }
 
-    /* TEXT */
     .btn-text {
       background: transparent;
       color: var(--rel-colors-black);
     }
 
-    /* LINK */
     .btn-link {
       background: transparent;
       color: var(--rel-colors-blue-primary);
       text-decoration: underline;
     }
 
-    /* ICON */
     .btn-icon {
       width: 40px;
       height: 40px;
@@ -152,32 +130,14 @@ export class RelButton extends LitElement {
       color: var(--rel-colors-black);
     }
 
-    /* -------------------------
-        STATES: Hover / Active
-    -------------------------- */
-    button:hover:not(.btn-disabled) {
+    button:hover:not(:disabled) {
       filter: brightness(0.92);
     }
 
-    button:active:not(.btn-disabled) {
+    button:active:not(:disabled) {
       transform: scale(0.97);
     }
 
-    /* TEXT BUTTON — hover border */
-    .btn-text:not(.btn-disabled):hover {
-      border: 1px solid var(--rel-colors-black);
-      text-decoration: none;
-    }
-
-    /* LINK BUTTON — hover border */
-    .btn-link:not(.btn-disabled):hover {
-      border: 1px solid var(--rel-colors-blue-primary);
-      text-decoration: underline;
-    }
-
-    /* -------------------------
-        FOCUS RING
-    -------------------------- */
     button:focus-visible {
       outline: 2px solid var(--rel-colors-blue-primary);
       outline-offset: 2px;
@@ -190,13 +150,33 @@ export class RelButton extends LitElement {
       `tone-${this.tone}`,
       `size-${this.size}`,
       `border-${this.border}`,
-      this.disabled ? "btn-disabled" : "",
     ].join(" ");
   }
 
+  private handleClick(e: MouseEvent) {
+    if (this.disabled) {
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      return;
+    }
+
+    // Re-emit click from host (Angular-friendly)
+    this.dispatchEvent(
+      new MouseEvent("click", {
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
   render() {
     return html`
-      <button class="${this.classes}" ?disabled=${this.disabled}>
+      <button
+        class="${this.classes}"
+        ?disabled=${this.disabled}
+        @click=${this.handleClick}
+        aria-disabled=${this.disabled}
+      >
         <slot></slot>
       </button>
     `;

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

@@ -6,28 +6,29 @@ export class RelCard extends LitElement {
   static styles = css`
     :host {
       display: block;
+      font-family: var(--rel-fontFamilies-primary);
     }
 
     .card {
-      background-color: var(--rel-colors-white, #ffffff);
-      border-radius: var(--rel-borderRadius-lg, 12px);
-      padding: var(--rel-spacing-space-md, 16px);
-
-      box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3),
-        0px 6px 10px 4px rgba(0, 0, 0, 0.15);
+      background-color: var(--rel-colors-white);
+      border-radius: var(--rel-borders-radius-border-radius-300);
+      padding: var(--rel-spacing-space-md);
 
-      font-family: var(--rel-fontFamilies-primary);
+      box-shadow: var(--rel-shadows-shadow-200);
       transition: transform 0.2s ease, box-shadow 0.2s ease;
     }
 
     .card:hover {
       transform: translateY(-3px);
-      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.35),
-        0px 8px 14px 4px rgba(0, 0, 0, 0.2);
+      box-shadow: var(--rel-shadows-shadow-300);
     }
   `;
 
   render() {
-    return html` <div class="card"><slot></slot></div> `;
+    return html`
+      <div class="card">
+        <slot></slot>
+      </div>
+    `;
   }
 }

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

@@ -15,20 +15,16 @@ export class RelCardMedia extends LitElement {
     }
 
     .card-media {
-      background-color: var(--rel-colors-white, #ffffff);
-      border-radius: var(--rel-borderRadius-lg, 12px);
+      background-color: var(--rel-colors-white);
+      border-radius: var(--rel-borders-radius-border-radius-300);
       overflow: hidden;
-
-      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.3),
-        0px 8px 12px 6px rgba(0, 0, 0, 0.15);
-
+      box-shadow: var(--rel-shadows-shadow-200);
       transition: transform 0.2s ease, box-shadow 0.2s ease;
     }
 
     .card-media:hover {
       transform: translateY(-4px);
-      box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.35),
-        0px 10px 16px 6px rgba(0, 0, 0, 0.2);
+      box-shadow: var(--rel-shadows-shadow-300);
     }
 
     .card-image img {
@@ -39,20 +35,20 @@ export class RelCardMedia extends LitElement {
     }
 
     .card-content {
-      padding: var(--rel-spacing-space-md, 16px);
+      padding: var(--rel-spacing-space-md);
     }
 
     .card-content h3 {
       margin: 0 0 4px 0;
-      font-size: var(--rel-fontSizes-md, 16px);
-      font-weight: var(--rel-fontWeights-semibold, 600);
-      color: var(--rel-colors-gray-heading, #2b2b2b);
+      font-size: var(--rel-fontSizes-md);
+      font-weight: var(--rel-fontWeights-semibold);
+      color: var(--rel-colors-gray-heading);
     }
 
     .card-content p {
       margin: 0 0 8px 0;
-      font-size: var(--rel-fontSizes-sm, 14px);
-      color: var(--rel-colors-gray-text, #555);
+      font-size: var(--rel-fontSizes-sm);
+      color: var(--rel-colors-gray-text);
     }
   `;
 
@@ -62,7 +58,7 @@ export class RelCardMedia extends LitElement {
         ${this.imageSrc
           ? html`
               <div class="card-image">
-                <img src="${this.imageSrc}" alt="${this.imageAlt}" />
+                <img src=${this.imageSrc} alt=${this.imageAlt} />
               </div>
             `
           : null}
@@ -70,8 +66,6 @@ export class RelCardMedia extends LitElement {
         <div class="card-content">
           ${this.title ? html`<h3>${this.title}</h3>` : null}
           ${this.subtitle ? html`<p>${this.subtitle}</p>` : null}
-
-          <!-- Slot for extra content such as buttons, descriptions, etc -->
           <slot></slot>
         </div>
       </div>

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

@@ -48,55 +48,43 @@ export class RelCheckbox extends LitElement {
       transition: all 0.2s;
     }
 
-    /* ICONS FIXED SIZE */
     svg {
       width: 12px;
       height: 12px;
       display: none;
-      pointer-events: none;
     }
 
-    /* CHECKED */
-    .checked .box {
+    .checked .box,
+    .indeterminate .box {
       background: var(--rel-colors-gray-heading);
       border-color: var(--rel-colors-gray-heading);
     }
+
     .checked .check-icon {
       display: block;
     }
 
-    /* INDETERMINATE */
-    .indeterminate .box {
-      background: var(--rel-colors-gray-heading);
-      border-color: var(--rel-colors-gray-heading);
-    }
     .indeterminate .indeterminate-icon {
       display: block;
     }
 
-    /* ERROR */
     .error .box {
       border-color: var(--rel-colors-red-primary);
     }
+
     .error.checked .box,
     .error.indeterminate .box {
       background: var(--rel-colors-red-primary);
       border-color: var(--rel-colors-red-primary);
     }
-    .error .label,
-    .error .text {
-      color: var(--rel-colors-red-primary);
-    }
 
-    /* DISABLED */
     .disabled {
       opacity: 0.55;
-      cursor: not-allowed !important;
+      cursor: not-allowed;
     }
 
     .label {
       font-size: var(--rel-fontSizes-md);
-      color: var(--rel-colors-gray-heading);
       font-weight: var(--rel-fontWeights-medium);
     }
 
@@ -104,12 +92,6 @@ export class RelCheckbox extends LitElement {
       font-size: var(--rel-fontSizes-sm);
       color: var(--rel-colors-gray-text);
     }
-
-    /* Focus ring */
-    input:focus-visible + .box {
-      outline: 2px solid var(--rel-colors-blue-primary);
-      outline-offset: 2px;
-    }
   `;
 
   private toggle() {
@@ -119,34 +101,35 @@ export class RelCheckbox extends LitElement {
     else if (this.status === "checked") this.status = "indeterminate";
     else this.status = "unchecked";
 
-    this.dispatchEvent(new CustomEvent("changed", { detail: this.status }));
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: {
+          checked: this.status === "checked",
+          indeterminate: this.status === "indeterminate",
+        },
+        bubbles: true,
+        composed: true,
+      })
+    );
   }
 
   render() {
-    const className = `
-      wrapper
-      ${this.state}
-      ${this.status}
-    `;
-
     return html`
-      <div class="${className}">
+      <div class="wrapper ${this.state} ${this.status}">
         <label class="row">
           <input
             type="checkbox"
-            @change=${this.toggle}
+            @click=${this.toggle}
             ?disabled=${this.state === "disabled"}
           />
 
           <span class="box">
-            <!-- CHECK ICON -->
             <svg class="check-icon" viewBox="0 0 18 14" fill="white">
               <path
-                d="M6.44479 14L0.5 7.36383L1.9862 5.70478L6.44479 10.6819L16.0138 0L17.5 1.65904L6.44479 14Z"
+                d="M6.44 14L0.5 7.36l1.49-1.66L6.44 10.68 16.01 0 17.5 1.66z"
               />
             </svg>
 
-            <!-- INDETERMINATE ICON -->
             <svg class="indeterminate-icon" viewBox="0 0 16 2" fill="white">
               <rect width="16" height="2" />
             </svg>

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

@@ -1,23 +1,22 @@
 import { LitElement, html, css } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { customElement, property } from "lit/decorators.js";
 
 @customElement("rel-chip")
 export class RelChip extends LitElement {
-  @property({ type: String }) label: string = "Label";
+  @property({ type: String }) label = "Label";
 
-  @property({ type: String }) tone: "default" | "blue" | "yellow" | "red" | "green" = "default";
+  @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 }) removable = false;
+  @property({ type: Boolean }) outline = false;
 
-  @property({ type: Boolean }) outline: boolean = false;
-
-  @state() private removed: boolean = false;
+  /** IMPORTANT: reflected so CSS + Angular can see it */
+  @property({ type: Boolean, reflect: true }) removed = false;
 
   static styles = css`
     :host {
@@ -38,123 +37,55 @@ export class RelChip extends LitElement {
       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;
+      background: transparent;
     }
 
     .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 */
+    /* TONES */
     .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 {
+    /* OUTLINE */
+    .chip-outline {
       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);
+      border-radius: 50%;
       object-fit: cover;
     }
 
-    .chip-icon {
-      display: flex;
-      align-items: center;
-      line-height: 0;
-    }
-
     .chip-icon ::slotted(svg),
     .chip-icon svg {
       width: 16px;
@@ -162,24 +93,14 @@ export class RelChip extends LitElement {
       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);
+      cursor: pointer;
+      opacity: 0.7;
     }
 
     .chip-remove:hover {
-      opacity: 0.6;
+      opacity: 1;
     }
   `;
 
@@ -194,6 +115,7 @@ export class RelChip extends LitElement {
   private handleRemove(event: Event) {
     event.stopPropagation();
     this.removed = true;
+
     this.dispatchEvent(
       new CustomEvent("removed", {
         bubbles: true,
@@ -202,60 +124,47 @@ export class RelChip extends LitElement {
     );
   }
 
-  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
+      <span
         class="${this.classes}"
-        type="button"
         role="button"
-        aria-label="${this.label}"
-        @keydown=${this.handleKeyDown}
         tabindex="0"
+        aria-label="${this.label}"
       >
         ${this.avatar
-          ? html`<img src="${this.avatar}" alt="avatar" class="chip-avatar" />`
-          : ""}
+          ? html`<img src=${this.avatar} alt="" class="chip-avatar" />`
+          : null}
         ${this.leadingIcon
-          ? html`<span class="chip-icon leading">
-              <slot name="leading-icon">${this.renderIcon(this.leadingIcon)}</slot>
+          ? html`<span class="chip-icon">
+              ${this.renderIcon(this.leadingIcon)}
             </span>`
-          : ""}
+          : null}
+
         <span class="chip-label">${this.label}</span>
+
         ${this.trailingIcon
-          ? html`<span class="chip-icon trailing">
-              <slot name="trailing-icon">${this.renderIcon(this.trailingIcon)}</slot>
+          ? html`<span class="chip-icon">
+              ${this.renderIcon(this.trailingIcon)}
             </span>`
-          : ""}
+          : null}
         ${this.removable
-          ? html`<button
-              type="button"
+          ? html`<span
               class="chip-remove"
-              @click=${this.handleRemove}
+              role="button"
               aria-label="Remove chip"
+              @click=${this.handleRemove}
             >
-              
-            </button>`
-          : ""}
-      </button>
+              ✕
+            </span>`
+          : null}
+      </span>
     `;
   }
 
   private renderIcon(iconString: string) {
     const template = document.createElement("template");
     template.innerHTML = iconString.trim();
-    return html`${template.content.cloneNode(true)}`;
+    return template.content.cloneNode(true);
   }
 }