@reliability-design/web 1.4.6 → 1.4.7

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

@@ -1,188 +0,0 @@
-import { LitElement, html, css, nothing } 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 {
-      color: var(--rel-text-default);
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      font-family: var(--rel-label-md-font-family);
-      font-weight: var(--rel-label-md-font-weight);
-      font-size: var(--rel-label-md-font-size);
-      line-height: var(--rel-label-md-line-height);
-      letter-spacing: var(--rel-label-md-letter-spacing);
-      white-space: nowrap;
-      user-select: none;
-      transition: box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
-      vertical-align: middle;
-    }
-
-    /* Slotted hint text (Figma body-sm-regular) */
-    ::slotted(span) {
-      font-family: var(--rel-body-sm-regular-font-family);
-      font-weight: var(--rel-body-sm-regular-font-weight);
-      font-size: var(--rel-body-sm-regular-font-size);
-      line-height: var(--rel-body-sm-regular-line-height);
-      letter-spacing: var(--rel-body-sm-regular-letter-spacing);
-    }
-
-    
-    :host([size="sm"]) {
-      padding: var(--rel-spacing-3xs) var(--rel-spacing-xs);
-      min-width: 20px;
-      height: 20px;
-      border-radius: var(--rel-border-radius-xs);
-
-      font-family: var(--rel-label-xs-font-family);
-
-      font-weight: var(--rel-label-xs-font-weight);
-
-      font-size: var(--rel-label-xs-font-size);
-
-      line-height: var(--rel-label-xs-line-height);
-
-      letter-spacing: var(--rel-label-xs-letter-spacing);
-
-    }
-
-    :host([size="md"]) {
-      padding: var(--rel-spacing-2xs) var(--rel-spacing-sm);
-      min-width: 24px;
-      height: 24px;
-      border-radius: var(--rel-border-radius-xs);
-
-      font-family: var(--rel-label-sm-font-family);
-
-      font-weight: var(--rel-label-sm-font-weight);
-
-      font-size: var(--rel-label-sm-font-size);
-
-      line-height: var(--rel-label-sm-line-height);
-
-      letter-spacing: var(--rel-label-sm-letter-spacing);
-
-    }
-
-    :host([size="lg"]) {
-      padding: var(--rel-spacing-xs) var(--rel-spacing-md);
-      min-width: 32px;
-      height: 32px;
-      border-radius: var(--rel-border-radius-sm);
-
-      font-family: var(--rel-label-lg-font-family);
-
-      font-weight: var(--rel-label-lg-font-weight);
-
-      font-size: var(--rel-label-lg-font-size);
-
-      line-height: var(--rel-label-lg-line-height);
-
-      letter-spacing: var(--rel-label-lg-letter-spacing);
-
-    }
-
-    :host([variant="default"]) {
-      background: var(--rel-bg-neutral-elevated-1);
-      color: var(--rel-text-label);
-      border: var(--rel-stroke-sm) solid var(--rel-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-bg-neutral-elevated-2);
-      color: var(--rel-text-placeholder);
-      border: var(--rel-stroke-sm) solid var(--rel-border-default);
-      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03);
-    }
-
-    :host([pill]) {
-      border-radius: var(--rel-border-radius-full-rounded);
-    }
-
-    :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-bg-neutral-elevated-1);
-      border-color: var(--rel-border-default);
-    }
-
-    :host([inset][variant="muted"]) {
-      background: var(--rel-border-default);
-      border-color: var(--rel-border-default);
-    }
-  `;
-
-  render() {
-    return html`<slot></slot>`;
-  }
-}
-
-/**
- * Multi-key shortcut (Figma Kbd Items=1/2/3/4): renders one <rel-kbd> per
- * entry in `items` with "+" separators between them. Slotted <rel-kbd>
- * children may be used instead of the items array.
- *
- * <rel-kbd-group .items=${["Ctrl", "Shift", "P"]} size="md"></rel-kbd-group>
- */
-@customElement("rel-kbd-group")
-export class RelKbdGroup extends LitElement {
-  @property({ type: Array }) items: string[] = [];
-
-  @property({ type: String, reflect: true })
-  size: "sm" | "md" | "lg" = "md";
-
-  @property({ type: String, reflect: true })
-  variant: "default" | "muted" = "default";
-
-  static styles = css`
-    :host {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--rel-spacing-2xs);
-      white-space: nowrap;
-    }
-
-    /* "+" between keys (Figma body-sm-regular, caption tone) */
-    .separator {
-      font-family: var(--rel-body-sm-regular-font-family);
-      font-weight: var(--rel-body-sm-regular-font-weight);
-      font-size: var(--rel-body-sm-regular-font-size);
-      line-height: var(--rel-body-sm-regular-line-height);
-      letter-spacing: var(--rel-body-sm-regular-letter-spacing);
-      color: var(--rel-text-caption);
-      user-select: none;
-    }
-  `;
-
-  render() {
-    return html`
-      ${this.items.map(
-        (key, i) => html`
-          ${i > 0
-            ? html`<span part="label" class="separator" aria-hidden="true">+</span>`
-            : nothing}
-          <rel-kbd part="item" size=${this.size} variant=${this.variant}>${key}</rel-kbd>
-        `
-      )}
-      <slot></slot>
-    `;
-  }
-}

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

@@ -1,49 +0,0 @@
-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;
-
-  @property({ type: Boolean, reflect: true }) responsive = true;
-
-  static styles = css`
-    :host {
-      color: var(--rel-text-default);
-      display: grid;
-      width: 100%;
-      font-family: var(--rel-fonts-font-family);
-      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>`;
-  }
-}