@reliability-design/web 1.0.2

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

@@ -0,0 +1,441 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit";
+import "./rel-switch";
+
+const meta: Meta = {
+  title: "Components/Switch",
+  component: "rel-switch",
+  tags: ["autodocs"],
+  argTypes: {
+    checked: {
+      control: "boolean",
+      description: "Whether the switch is checked",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
+    disabled: {
+      control: "boolean",
+      description: "Whether the switch is disabled",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+  args: {
+    checked: false,
+    disabled: false,
+  },
+  render: (args) => html`
+    <rel-switch
+      ?checked=${args.checked}
+      ?disabled=${args.disabled}
+    ></rel-switch>
+  `,
+};
+
+export const Checked: Story = {
+  args: {
+    checked: true,
+    disabled: false,
+  },
+  render: (args) => html`
+    <rel-switch
+      ?checked=${args.checked}
+      ?disabled=${args.disabled}
+    ></rel-switch>
+  `,
+};
+
+export const Disabled: Story = {
+  args: {
+    checked: false,
+    disabled: true,
+  },
+  render: (args) => html`
+    <rel-switch
+      ?checked=${args.checked}
+      ?disabled=${args.disabled}
+    ></rel-switch>
+  `,
+};
+
+export const DisabledChecked: Story = {
+  args: {
+    checked: true,
+    disabled: true,
+  },
+  render: (args) => html`
+    <rel-switch
+      ?checked=${args.checked}
+      ?disabled=${args.disabled}
+    ></rel-switch>
+  `,
+};
+
+export const Interactive: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 20px;">
+      <div style="display: flex; align-items: center; gap: 12px;">
+        <rel-switch></rel-switch>
+        <span>Default (Unchecked)</span>
+      </div>
+      <div style="display: flex; align-items: center; gap: 12px;">
+        <rel-switch checked></rel-switch>
+        <span>Checked</span>
+      </div>
+      <div style="display: flex; align-items: center; gap: 12px;">
+        <rel-switch disabled></rel-switch>
+        <span>Disabled (Unchecked)</span>
+      </div>
+      <div style="display: flex; align-items: center; gap: 12px;">
+        <rel-switch checked disabled></rel-switch>
+        <span>Disabled (Checked)</span>
+      </div>
+    </div>
+  `,
+};
+
+export const WithEventListener: Story = {
+  render: () => {
+    const handleChange = (e: CustomEvent) => {
+      console.log("Switch changed:", e.detail);
+      const output = document.getElementById("switch-output");
+      if (output) {
+        output.textContent = `Switch is now: ${e.detail ? "ON" : "OFF"}`;
+      }
+    };
+
+    return html`
+      <div style="display: flex; flex-direction: column; gap: 12px;">
+        <div style="display: flex; align-items: center; gap: 12px;">
+          <rel-switch @changed=${handleChange}></rel-switch>
+          <span>Toggle me and check the output below</span>
+        </div>
+        <div
+          id="switch-output"
+          style="padding: 8px; background: #f0f0f0; border-radius: 4px;"
+        >
+          Switch is now: OFF
+        </div>
+      </div>
+    `;
+  },
+};
+
+export const WithLabels: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 20px;">
+      <div style="display: flex; align-items: center; gap: 12px;">
+        <label style="font-size: 14px; font-weight: 500;">Enable Notifications</label>
+        <rel-switch checked></rel-switch>
+      </div>
+      <div style="display: flex; align-items: center; gap: 12px;">
+        <label style="font-size: 14px; font-weight: 500;">Dark Mode</label>
+        <rel-switch></rel-switch>
+      </div>
+      <div style="display: flex; align-items: center; gap: 12px;">
+        <rel-switch checked></rel-switch>
+        <label style="font-size: 14px; font-weight: 500;">Auto-save (Right Label)</label>
+      </div>
+    </div>
+  `,
+};
+
+export const WithDescriptiveLabels: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 24px; max-width: 400px;">
+      <div style="display: flex; align-items: flex-start; gap: 12px;">
+        <div style="flex: 1;">
+          <div style="font-size: 14px; font-weight: 500; margin-bottom: 4px;">Email Notifications</div>
+          <div style="font-size: 12px; color: #666;">Receive email updates about your account activity</div>
+        </div>
+        <rel-switch checked></rel-switch>
+      </div>
+      <div style="display: flex; align-items: flex-start; gap: 12px;">
+        <div style="flex: 1;">
+          <div style="font-size: 14px; font-weight: 500; margin-bottom: 4px;">Two-Factor Authentication</div>
+          <div style="font-size: 12px; color: #666;">Add an extra layer of security to your account</div>
+        </div>
+        <rel-switch></rel-switch>
+      </div>
+      <div style="display: flex; align-items: flex-start; gap: 12px;">
+        <div style="flex: 1;">
+          <div style="font-size: 14px; font-weight: 500; margin-bottom: 4px;">Marketing Communications</div>
+          <div style="font-size: 12px; color: #666;">Receive promotional emails and product updates</div>
+        </div>
+        <rel-switch disabled></rel-switch>
+      </div>
+    </div>
+  `,
+};
+
+export const InFormContext: Story = {
+  render: () => {
+    const handleSubmit = (e: Event) => {
+      e.preventDefault();
+      const formData = new FormData(e.target as HTMLFormElement);
+      const notifications = (e.target as HTMLFormElement).querySelector('[name="notifications"]') as any;
+      const autoSave = (e.target as HTMLFormElement).querySelector('[name="autoSave"]') as any;
+      const darkMode = (e.target as HTMLFormElement).querySelector('[name="darkMode"]') as any;
+
+      console.log('Form submitted:', {
+        notifications: notifications?.checked || false,
+        autoSave: autoSave?.checked || false,
+        darkMode: darkMode?.checked || false,
+      });
+
+      alert(`Form Values:\nNotifications: ${notifications?.checked || false}\nAuto-save: ${autoSave?.checked || false}\nDark Mode: ${darkMode?.checked || false}`);
+    };
+
+    return html`
+      <form @submit=${handleSubmit} style="display: flex; flex-direction: column; gap: 20px; max-width: 400px;">
+        <h3 style="margin: 0 0 8px 0;">User Preferences</h3>
+
+        <div style="display: flex; align-items: center; justify-content: space-between;">
+          <label style="font-size: 14px; font-weight: 500;">Enable Notifications</label>
+          <rel-switch name="notifications" checked></rel-switch>
+        </div>
+
+        <div style="display: flex; align-items: center; justify-content: space-between;">
+          <label style="font-size: 14px; font-weight: 500;">Auto-save</label>
+          <rel-switch name="autoSave" checked></rel-switch>
+        </div>
+
+        <div style="display: flex; align-items: center; justify-content: space-between;">
+          <label style="font-size: 14px; font-weight: 500;">Dark Mode</label>
+          <rel-switch name="darkMode"></rel-switch>
+        </div>
+
+        <button type="submit" style="padding: 8px 16px; background: #000; color: #fff; border: none; border-radius: 4px; cursor: pointer; margin-top: 8px;">
+          Save Preferences
+        </button>
+      </form>
+    `;
+  },
+};
+
+export const ToggleGroup: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 16px; max-width: 400px;">
+      <h4 style="margin: 0 0 8px 0; font-size: 16px;">Privacy Settings</h4>
+
+      <div style="display: flex; align-items: center; justify-content: space-between; padding: 12px; background: #f9f9f9; border-radius: 6px;">
+        <span style="font-size: 14px;">Profile Visibility</span>
+        <rel-switch checked></rel-switch>
+      </div>
+
+      <div style="display: flex; align-items: center; justify-content: space-between; padding: 12px; background: #f9f9f9; border-radius: 6px;">
+        <span style="font-size: 14px;">Show Online Status</span>
+        <rel-switch checked></rel-switch>
+      </div>
+
+      <div style="display: flex; align-items: center; justify-content: space-between; padding: 12px; background: #f9f9f9; border-radius: 6px;">
+        <span style="font-size: 14px;">Allow Messages from Anyone</span>
+        <rel-switch></rel-switch>
+      </div>
+
+      <div style="display: flex; align-items: center; justify-content: space-between; padding: 12px; background: #f9f9f9; border-radius: 6px;">
+        <span style="font-size: 14px;">Share Activity Status</span>
+        <rel-switch></rel-switch>
+      </div>
+    </div>
+  `,
+};
+
+export const NotificationSettings: Story = {
+  render: () => {
+    const handleChange = (e: CustomEvent, name: string) => {
+      console.log(`${name} changed to:`, e.detail);
+    };
+
+    return html`
+      <div style="display: flex; flex-direction: column; gap: 0; max-width: 500px; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden;">
+        <div style="padding: 16px; background: #f5f5f5; border-bottom: 1px solid #e0e0e0;">
+          <h3 style="margin: 0; font-size: 18px;">Notification Preferences</h3>
+        </div>
+
+        <div style="display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid #e0e0e0;">
+          <div>
+            <div style="font-size: 14px; font-weight: 500; margin-bottom: 4px;">Push Notifications</div>
+            <div style="font-size: 12px; color: #666;">Receive push notifications on your device</div>
+          </div>
+          <rel-switch checked @changed=${(e: CustomEvent) => handleChange(e, 'Push Notifications')}></rel-switch>
+        </div>
+
+        <div style="display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid #e0e0e0;">
+          <div>
+            <div style="font-size: 14px; font-weight: 500; margin-bottom: 4px;">Email Digest</div>
+            <div style="font-size: 12px; color: #666;">Daily summary of important updates</div>
+          </div>
+          <rel-switch checked @changed=${(e: CustomEvent) => handleChange(e, 'Email Digest')}></rel-switch>
+        </div>
+
+        <div style="display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid #e0e0e0;">
+          <div>
+            <div style="font-size: 14px; font-weight: 500; margin-bottom: 4px;">SMS Alerts</div>
+            <div style="font-size: 12px; color: #666;">Critical alerts via text message</div>
+          </div>
+          <rel-switch @changed=${(e: CustomEvent) => handleChange(e, 'SMS Alerts')}></rel-switch>
+        </div>
+
+        <div style="display: flex; align-items: center; justify-content: space-between; padding: 16px;">
+          <div>
+            <div style="font-size: 14px; font-weight: 500; margin-bottom: 4px;">Marketing Updates</div>
+            <div style="font-size: 12px; color: #666;">News about products and features</div>
+          </div>
+          <rel-switch @changed=${(e: CustomEvent) => handleChange(e, 'Marketing Updates')}></rel-switch>
+        </div>
+      </div>
+    `;
+  },
+};
+
+export const AccessibilitySettings: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 0; max-width: 500px; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden;">
+      <div style="padding: 16px; background: #f5f5f5; border-bottom: 1px solid #e0e0e0;">
+        <h3 style="margin: 0; font-size: 18px;">Accessibility</h3>
+        <p style="margin: 8px 0 0 0; font-size: 13px; color: #666;">Customize your experience</p>
+      </div>
+
+      <div style="display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid #e0e0e0;">
+        <div style="flex: 1;">
+          <div style="font-size: 14px; font-weight: 500; margin-bottom: 4px;">High Contrast Mode</div>
+          <div style="font-size: 12px; color: #666;">Increase contrast for better visibility</div>
+        </div>
+        <rel-switch></rel-switch>
+      </div>
+
+      <div style="display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid #e0e0e0;">
+        <div style="flex: 1;">
+          <div style="font-size: 14px; font-weight: 500; margin-bottom: 4px;">Reduce Motion</div>
+          <div style="font-size: 12px; color: #666;">Minimize animations and transitions</div>
+        </div>
+        <rel-switch></rel-switch>
+      </div>
+
+      <div style="display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid #e0e0e0;">
+        <div style="flex: 1;">
+          <div style="font-size: 14px; font-weight: 500; margin-bottom: 4px;">Screen Reader Support</div>
+          <div style="font-size: 12px; color: #666;">Enhanced support for screen readers</div>
+        </div>
+        <rel-switch checked></rel-switch>
+      </div>
+
+      <div style="display: flex; align-items: center; justify-content: space-between; padding: 16px;">
+        <div style="flex: 1;">
+          <div style="font-size: 14px; font-weight: 500; margin-bottom: 4px;">Keyboard Navigation</div>
+          <div style="font-size: 12px; color: #666;">Optimized keyboard shortcuts</div>
+        </div>
+        <rel-switch checked></rel-switch>
+      </div>
+    </div>
+  `,
+};
+
+export const AccountSettings: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 24px; max-width: 600px;">
+      <section>
+        <h3 style="margin: 0 0 16px 0; font-size: 16px; font-weight: 600;">Security</h3>
+        <div style="display: flex; flex-direction: column; gap: 16px;">
+          <div style="display: flex; align-items: center; justify-content: space-between; padding: 12px; background: #f9f9f9; border-radius: 6px;">
+            <div>
+              <div style="font-size: 14px; font-weight: 500;">Two-Factor Authentication</div>
+              <div style="font-size: 12px; color: #666; margin-top: 4px;">Require 2FA for sign in</div>
+            </div>
+            <rel-switch checked></rel-switch>
+          </div>
+
+          <div style="display: flex; align-items: center; justify-content: space-between; padding: 12px; background: #f9f9f9; border-radius: 6px;">
+            <div>
+              <div style="font-size: 14px; font-weight: 500;">Login Alerts</div>
+              <div style="font-size: 12px; color: #666; margin-top: 4px;">Get notified of new sign-ins</div>
+            </div>
+            <rel-switch checked></rel-switch>
+          </div>
+        </div>
+      </section>
+
+      <section>
+        <h3 style="margin: 0 0 16px 0; font-size: 16px; font-weight: 600;">Preferences</h3>
+        <div style="display: flex; flex-direction: column; gap: 16px;">
+          <div style="display: flex; align-items: center; justify-content: space-between; padding: 12px; background: #f9f9f9; border-radius: 6px;">
+            <div>
+              <div style="font-size: 14px; font-weight: 500;">Email Notifications</div>
+              <div style="font-size: 12px; color: #666; margin-top: 4px;">Receive account updates via email</div>
+            </div>
+            <rel-switch checked></rel-switch>
+          </div>
+
+          <div style="display: flex; align-items: center; justify-content: space-between; padding: 12px; background: #f9f9f9; border-radius: 6px;">
+            <div>
+              <div style="font-size: 14px; font-weight: 500;">Newsletter Subscription</div>
+              <div style="font-size: 12px; color: #666; margin-top: 4px;">Weekly updates and tips</div>
+            </div>
+            <rel-switch></rel-switch>
+          </div>
+
+          <div style="display: flex; align-items: center; justify-content: space-between; padding: 12px; background: #f9f9f9; border-radius: 6px;">
+            <div>
+              <div style="font-size: 14px; font-weight: 500;">Beta Features</div>
+              <div style="font-size: 12px; color: #666; margin-top: 4px;">Try experimental features early</div>
+            </div>
+            <rel-switch></rel-switch>
+          </div>
+        </div>
+      </section>
+    </div>
+  `,
+};
+
+export const DashboardSettings: Story = {
+  render: () => html`
+    <div style="display: flex; gap: 24px; flex-wrap: wrap;">
+      <div style="flex: 1; min-width: 280px; padding: 20px; border: 1px solid #e0e0e0; border-radius: 8px;">
+        <h4 style="margin: 0 0 16px 0; font-size: 14px; font-weight: 600; text-transform: uppercase; color: #666;">Display</h4>
+        <div style="display: flex; flex-direction: column; gap: 16px;">
+          <div style="display: flex; align-items: center; justify-content: space-between;">
+            <span style="font-size: 14px;">Dark Mode</span>
+            <rel-switch></rel-switch>
+          </div>
+          <div style="display: flex; align-items: center; justify-content: space-between;">
+            <span style="font-size: 14px;">Compact View</span>
+            <rel-switch checked></rel-switch>
+          </div>
+          <div style="display: flex; align-items: center; justify-content: space-between;">
+            <span style="font-size: 14px;">Show Sidebar</span>
+            <rel-switch checked></rel-switch>
+          </div>
+        </div>
+      </div>
+
+      <div style="flex: 1; min-width: 280px; padding: 20px; border: 1px solid #e0e0e0; border-radius: 8px;">
+        <h4 style="margin: 0 0 16px 0; font-size: 14px; font-weight: 600; text-transform: uppercase; color: #666;">Behavior</h4>
+        <div style="display: flex; flex-direction: column; gap: 16px;">
+          <div style="display: flex; align-items: center; justify-content: space-between;">
+            <span style="font-size: 14px;">Auto-save</span>
+            <rel-switch checked></rel-switch>
+          </div>
+          <div style="display: flex; align-items: center; justify-content: space-between;">
+            <span style="font-size: 14px;">Sound Effects</span>
+            <rel-switch></rel-switch>
+          </div>
+          <div style="display: flex; align-items: center; justify-content: space-between;">
+            <span style="font-size: 14px;">Animations</span>
+            <rel-switch checked></rel-switch>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+};

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

@@ -0,0 +1,161 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+@customElement("rel-switch")
+export class RelSwitch extends LitElement {
+  @property({ type: Boolean }) checked = false;
+  @property({ type: Boolean }) disabled = false;
+
+  @state() private isFocused = false;
+  @state() private isPressed = false;
+
+  static styles = css`
+    :host {
+      --switch-track: #7e8186;
+      --switch-knob-on: #000000;
+      --switch-knob-off: #ffffff;
+      --switch-halo: rgba(224, 224, 224, 0.8);
+      --switch-disabled: #d1d5db;
+      display: inline-block;
+    }
+
+    /* Wrapper */
+    .switch-wrapper {
+      position: relative;
+      display: inline-block;
+      width: 42px;
+      height: 22px;
+      cursor: pointer;
+    }
+
+    .switch-wrapper.switch-disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    /* Hide native checkbox */
+    .switch-wrapper input {
+      opacity: 0;
+      width: 0;
+      height: 0;
+    }
+
+    /* Track */
+    .switch-slider {
+      position: absolute;
+      top: 50%;
+      left: 4px;
+      right: 4px;
+      height: 12px;
+      background-color: var(--switch-track);
+      border-radius: 999px;
+      transform: translateY(-50%);
+      transition: background-color 0.25s ease;
+    }
+
+    /* Knob */
+    .switch-slider::before {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: -2px;
+      transform: translateY(-50%);
+      height: 18px;
+      width: 18px;
+      background-color: var(--switch-knob-off);
+      border-radius: 50%;
+      transition: transform 0.25s ease, background-color 0.25s ease,
+        box-shadow 0.2s ease;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    }
+
+    /* ON state */
+    input:checked + .switch-slider::before {
+      background-color: var(--switch-knob-on);
+      transform: translateY(-50%) translateX(22px);
+    }
+
+    /* Hover */
+    .switch-wrapper:hover:not(.switch-disabled) .switch-slider {
+      background-color: #666;
+    }
+
+    /* Focus halo */
+    .switch-focused .switch-slider::before {
+      box-shadow: 0 0 0 6px var(--switch-halo);
+    }
+
+    /* Pressed */
+    .switch-pressed .switch-slider::before {
+      transform: scale(0.9) translateY(-50%);
+    }
+    .switch-pressed input:checked + .switch-slider::before {
+      transform: scale(0.9) translateY(-50%) translateX(22px);
+    }
+
+    /* Disabled */
+    .switch-disabled .switch-slider {
+      background-color: var(--switch-disabled);
+    }
+    .switch-disabled .switch-slider::before {
+      background-color: var(--switch-disabled);
+    }
+  `;
+
+  private toggle() {
+    if (this.disabled) return;
+    this.checked = !this.checked;
+    this.requestUpdate();
+    this.dispatchEvent(
+      new CustomEvent("changed", {
+        detail: this.checked,
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  private handleFocus() {
+    this.isFocused = true;
+  }
+
+  private handleBlur() {
+    this.isFocused = false;
+    this.isPressed = false;
+  }
+
+  private handleMouseDown() {
+    if (!this.disabled) this.isPressed = true;
+  }
+
+  private handleMouseUp() {
+    if (!this.disabled) this.isPressed = false;
+  }
+
+  render() {
+    const wrapperClasses = [
+      "switch-wrapper",
+      this.disabled && "switch-disabled",
+      this.isFocused && "switch-focused",
+      this.isPressed && "switch-pressed",
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    return html`
+      <label class="${wrapperClasses}">
+        <input
+          type="checkbox"
+          ?disabled=${this.disabled}
+          .checked=${this.checked}
+          @change=${this.toggle}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
+          @mousedown=${this.handleMouseDown}
+          @mouseup=${this.handleMouseUp}
+        />
+        <span class="switch-slider"></span>
+      </label>
+    `;
+  }
+}