@reliability-design/web 1.1.1 → 1.2.0

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

@@ -1,118 +1,94 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-@customElement("rel-kbd")
-export class RelKbd extends LitElement {
-  @property({ type: String, reflect: true })
-  size: "sm" | "md" | "lg" = "md";
-
-  @property({ type: String, reflect: true })
-  variant: "default" | "muted" = "default";
-
-  @property({ type: Boolean, reflect: true })
-  pill = false;
-
-  @property({ type: Boolean, reflect: true })
-  inset = false;
-
-  static styles = css`
-    :host {
-      display: inline-flex;
-    }
-
-    kbd {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      font-family: var(--rel-fontFamilies-primary);
-      font-weight: var(--rel-fontWeights-medium);
-      white-space: nowrap;
-      user-select: none;
-      transition: all 0.15s ease;
-      line-height: 1;
-      vertical-align: middle;
-    }
-
-    /* Size variants */
-    .kbd-sm {
-      font-size: var(--rel-fontSizes-xs);
-      padding: var(--rel-spacing-space-3xs) var(--rel-spacing-space-xs);
-      min-width: 20px;
-      height: 20px;
-      border-radius: var(--rel-borders-radius-border-radius-100);
-    }
-
-    .kbd-md {
-      font-size: var(--rel-fontSizes-sm);
-      padding: var(--rel-spacing-space-2xs) var(--rel-spacing-space-sm);
-      min-width: 24px;
-      height: 24px;
-      border-radius: var(--rel-borders-radius-border-radius-100);
-    }
-
-    .kbd-lg {
-      font-size: var(--rel-fontSizes-md);
-      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-md);
-      min-width: 32px;
-      height: 32px;
-      border-radius: var(--rel-borders-radius-border-radius-200);
-    }
-
-    /* Variant: default */
-    .kbd-default {
-      background: var(--rel-colors-gray-light);
-      color: var(--rel-colors-gray-heading);
-      border: var(--rel-borders-width-stroke-100) solid var(--rel-colors-gray-border);
-      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(255, 255, 255, 0.5) inset;
-    }
-
-    /* Variant: muted */
-    .kbd-muted {
-      background: var(--rel-surface-secondary, #fafafa);
-      color: var(--rel-colors-gray-placeholder);
-      border: var(--rel-borders-width-stroke-100) solid var(--rel-colors-gray-divider);
-      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03);
-    }
-
-    /* Pill modifier */
-    :host([pill]) .kbd-sm {
-      border-radius: var(--rel-borders-radius-border-radius-500);
-    }
-
-    :host([pill]) .kbd-md {
-      border-radius: var(--rel-borders-radius-border-radius-500);
-    }
-
-    :host([pill]) .kbd-lg {
-      border-radius: var(--rel-borders-radius-border-radius-500);
-    }
-
-    /* Inset modifier - pressed appearance */
-    :host([inset]) kbd {
-      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset, 0 1px 0 0 rgba(0, 0, 0, 0.05);
-      transform: translateY(1px);
-    }
-
-    :host([inset]) .kbd-default {
-      background: var(--rel-surface-secondary, #fafafa);
-      border-color: var(--rel-colors-gray-divider);
-    }
-
-    :host([inset]) .kbd-muted {
-      background: var(--rel-colors-gray-divider);
-      border-color: var(--rel-colors-gray-border);
-    }
-  `;
-
-  private get classes() {
-    return ["kbd", `kbd-${this.size}`, `kbd-${this.variant}`].join(" ");
-  }
-
-  render() {
-    return html`
-      <kbd class="${this.classes}" role="presentation">
-        <slot></slot>
-      </kbd>
-    `;
-  }
-}
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import "../../styles/vars-v2.css";
+
+@customElement("rel-kbd")
+export class RelKbd extends LitElement {
+  @property({ type: String, reflect: true })
+  size: "sm" | "md" | "lg" = "md";
+
+  @property({ type: String, reflect: true })
+  variant: "default" | "muted" = "default";
+
+  @property({ type: Boolean, reflect: true })
+  pill = false;
+
+  @property({ type: Boolean, reflect: true })
+  inset = false;
+
+  static styles = css`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-family: var(--rel-fontFamilies-primary);
+      font-weight: var(--rel-fontWeights-medium);
+      white-space: nowrap;
+      user-select: none;
+      transition: box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
+      line-height: 1;
+      vertical-align: middle;
+    }
+
+    :host([size="sm"]) {
+      font-size: var(--rel-fontSizes-xs);
+      padding: var(--rel-spacing-space-3xs) var(--rel-spacing-space-xs);
+      min-width: 20px;
+      height: 20px;
+      border-radius: var(--rel-borders-radius-border-radius-100);
+    }
+
+    :host([size="md"]) {
+      font-size: var(--rel-fontSizes-sm);
+      padding: var(--rel-spacing-space-2xs) var(--rel-spacing-space-sm);
+      min-width: 24px;
+      height: 24px;
+      border-radius: var(--rel-borders-radius-border-radius-100);
+    }
+
+    :host([size="lg"]) {
+      font-size: var(--rel-fontSizes-md);
+      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-md);
+      min-width: 32px;
+      height: 32px;
+      border-radius: var(--rel-borders-radius-border-radius-200);
+    }
+
+    :host([variant="default"]) {
+      background: var(--rel-color-bg-secondary);
+      color: var(--rel-color-text-heading);
+      border: var(--rel-borders-width-stroke-100) solid var(--rel-color-border-default);
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(255, 255, 255, 0.5) inset;
+    }
+
+    :host([variant="muted"]) {
+      background: var(--rel-color-bg-secondary);
+      color: var(--rel-color-text-placeholder);
+      border: var(--rel-borders-width-stroke-100) solid var(--rel-color-border-divider);
+      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03);
+    }
+
+    :host([pill]) {
+      border-radius: var(--rel-borders-radius-border-radius-500);
+    }
+
+    :host([inset]) {
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset, 0 1px 0 0 rgba(0, 0, 0, 0.05);
+      transform: translateY(1px);
+    }
+
+    :host([inset][variant="default"]) {
+      background: var(--rel-color-bg-secondary);
+      border-color: var(--rel-color-border-divider);
+    }
+
+    :host([inset][variant="muted"]) {
+      background: var(--rel-color-border-divider);
+      border-color: var(--rel-color-border-default);
+    }
+  `;
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}

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

@@ -1,58 +1,49 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-@customElement("rel-layout")
-export class RelLayout extends LitElement {
-  @property({ type: String }) gap = "1rem";
-
-  @property({ type: Number }) columns = 4;
-
-  // 🔥 IMPORTANT: reflect so CSS selectors work
-  @property({ type: Boolean, reflect: true }) responsive = true;
-
-  static styles = css`
-    :host {
-      display: block;
-      width: 100%;
-    }
-
-    .layout-grid {
-      display: grid;
-      width: 100%;
-      font-family: var(--rel-fontFamilies-primary);
-    }
-
-    /* Responsive breakpoints — only when attribute exists */
-    @media (max-width: 1024px) {
-      :host([responsive]) .layout-grid {
-        grid-template-columns: repeat(3, 1fr) !important;
-      }
-    }
-
-    @media (max-width: 768px) {
-      :host([responsive]) .layout-grid {
-        grid-template-columns: repeat(2, 1fr) !important;
-      }
-    }
-
-    @media (max-width: 480px) {
-      :host([responsive]) .layout-grid {
-        grid-template-columns: 1fr !important;
-      }
-    }
-  `;
-
-  render() {
-    return html`
-      <div
-        class="layout-grid"
-        style="
-          gap: ${this.gap};
-          grid-template-columns: repeat(${this.columns}, 1fr);
-        "
-      >
-        <slot></slot>
-      </div>
-    `;
-  }
-}
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import "../../styles/vars-v2.css";
+
+@customElement("rel-layout")
+export class RelLayout extends LitElement {
+  @property({ type: String }) gap = "1rem";
+
+  @property({ type: Number }) columns = 4;
+
+  @property({ type: Boolean, reflect: true }) responsive = true;
+
+  static styles = css`
+    :host {
+      display: grid;
+      width: 100%;
+      font-family: var(--rel-fontFamilies-primary);
+      gap: var(--_gap, 1rem);
+      grid-template-columns: repeat(var(--_columns, 4), 1fr);
+    }
+
+    @media (max-width: 1024px) {
+      :host([responsive]) {
+        grid-template-columns: repeat(3, 1fr);
+      }
+    }
+
+    @media (max-width: 768px) {
+      :host([responsive]) {
+        grid-template-columns: repeat(2, 1fr);
+      }
+    }
+
+    @media (max-width: 480px) {
+      :host([responsive]) {
+        grid-template-columns: 1fr;
+      }
+    }
+  `;
+
+  willUpdate() {
+    this.style.setProperty('--_gap', this.gap);
+    this.style.setProperty('--_columns', String(this.columns));
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}