ds-one 0.2.5-alpha.17 → 0.2.5-alpha.19

package/DS1/2-core/ds-card.ts

@@ -0,0 +1,137 @@
+// ds-card.ts
+// Card component for displaying content in a contained box
+
+import { LitElement, html, css } from "lit";
+
+export class Card extends LitElement {
+  static properties = {
+    variant: { type: String, reflect: true },
+    elevation: { type: Number, reflect: true },
+    interactive: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    padding: { type: String, reflect: true },
+  };
+
+  declare variant: "default" | "outlined" | "elevated" | "filled";
+  declare elevation: number;
+  declare interactive: boolean;
+  declare disabled: boolean;
+  declare padding: "none" | "small" | "medium" | "large";
+
+  constructor() {
+    super();
+    this.variant = "default";
+    this.elevation = 1;
+    this.interactive = false;
+    this.disabled = false;
+    this.padding = "medium";
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      box-sizing: border-box;
+      border-radius: calc(var(--025) * var(--sf, 1));
+      background-color: var(--card-background, var(--surface-color, #fff));
+      color: var(--text-color-primary);
+      transition:
+        box-shadow 0.2s ease,
+        transform 0.2s ease;
+    }
+
+    :host([variant="default"]) {
+      background-color: var(--card-background, var(--surface-color, #fff));
+      border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
+    }
+
+    :host([variant="outlined"]) {
+      background-color: transparent;
+      border: 1px solid var(--border-color, rgba(0, 0, 0, 0.2));
+    }
+
+    :host([variant="elevated"]) {
+      background-color: var(--card-background, var(--surface-color, #fff));
+      border: none;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+
+    :host([variant="filled"]) {
+      background-color: var(
+        --card-background-filled,
+        var(--surface-color-secondary, #f5f5f5)
+      );
+      border: none;
+    }
+
+    :host([elevation="0"]) {
+      box-shadow: none;
+    }
+
+    :host([elevation="1"]) {
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+    }
+
+    :host([elevation="2"]) {
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
+    }
+
+    :host([elevation="3"]) {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
+    }
+
+    :host([interactive]) {
+      cursor: pointer;
+    }
+
+    :host([interactive]:hover:not([disabled])) {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    }
+
+    :host([interactive]:active:not([disabled])) {
+      transform: translateY(0);
+    }
+
+    :host([disabled]) {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    :host([padding="none"]) {
+      padding: 0;
+    }
+
+    :host([padding="small"]) {
+      padding: calc(var(--025) * var(--sf, 1));
+    }
+
+    :host([padding="medium"]) {
+      padding: calc(var(--05) * var(--sf, 1));
+    }
+
+    :host([padding="large"]) {
+      padding: calc(var(--1) * var(--sf, 1));
+    }
+
+    .card-content {
+      width: 100%;
+      height: 100%;
+    }
+  `;
+
+  render() {
+    return html`
+      <div class="card-content" part="content">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+customElements.define("ds-card", Card);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-card": Card;
+  }
+}

package/DS1/2-core/ds-cycle.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html, unsafeCSS } from "lit";
 import {
   translate,
   currentLanguage,
@@ -13,6 +13,7 @@ import { savePreferences } from "../0-face/preferences";
 import "./ds-button";
 import "./ds-icon";
 import "./ds-text";
+import styles from "./styles/ds-cycle.css?inline";
 
 // Accent color utilities
 const saveAccentColor = (color: string) => {
@@ -62,27 +63,7 @@ export class Cycle extends LitElement {
     };
   }
 
-  static styles = css`
-    :host {
-      display: inline-flex;
-      align-items: center;
-    }
-
-    .cycle {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--025);
-    }
-
-    .color-preview {
-      width: var(--05);
-      height: var(--05);
-      border-radius: 999px;
-      border: 1px solid
-        color-mix(in srgb, var(--text-color-primary) 20%, transparent);
-      flex: 0 0 auto;
-    }
-  `;
+  static styles = unsafeCSS(styles);
 
   // Add runtime properties using the any type
   // These are just for TypeScript and don't create shadowing fields

package/DS1/2-core/ds-date.ts

@@ -1,4 +1,5 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html, unsafeCSS } from "lit";
+import styles from "./styles/ds-date.css?inline";
 
 /**
  * A component for displaying the current year
@@ -6,14 +7,7 @@ import { LitElement, html, css } from "lit";
  * @element ds-date
  */
 export class DateComponent extends LitElement {
-  static styles = css`
-    :host {
-      display: inline;
-      font-family: var(--typeface-regular, var(--typeface-regular-regular));
-      font-size: inherit;
-      color: inherit;
-    }
-  `;
+  static styles = unsafeCSS(styles);
 
   render() {
     const year = new Date().getFullYear();

package/DS1/2-core/ds-gap.ts

@@ -1,4 +1,5 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html, unsafeCSS } from "lit";
+import styles from "./styles/ds-gap.css?inline";
 
 /**
  * Full-width vertical spacer.
@@ -21,80 +22,7 @@ export class Gap extends LitElement {
     this.size = "";
   }
 
-  static styles = css`
-    :host {
-      display: block;
-      width: 100%;
-      /* Default if no attribute is provided */
-      --gap-size: var(--unit);
-      height: var(--gap-size);
-      flex: 0 0 auto;
-    }
-
-    /* Semantic sizing tokens (from DS1/1-root/one.css) */
-    :host([tenth]) {
-      --gap-size: var(--tenth);
-    }
-    :host([quarter]) {
-      --gap-size: var(--quarter);
-    }
-    :host([half]) {
-      --gap-size: var(--half);
-    }
-    :host([eight-tenth]) {
-      --gap-size: var(--eight-tenth);
-    }
-    :host([unit]) {
-      --gap-size: var(--unit);
-    }
-    :host([double]) {
-      --gap-size: var(--double);
-    }
-    :host([triple]) {
-      --gap-size: var(--triple);
-    }
-    :host([quad]) {
-      --gap-size: var(--quad);
-    }
-    :host([oct]) {
-      --gap-size: var(--oct);
-    }
-    :host([dozen]) {
-      --gap-size: var(--dozen);
-    }
-
-    /* Raw scale sizing (size="...") */
-    :host([size="01"]) {
-      --gap-size: var(--01);
-    }
-    :host([size="025"]) {
-      --gap-size: var(--025);
-    }
-    :host([size="05"]) {
-      --gap-size: var(--05);
-    }
-    :host([size="08"]) {
-      --gap-size: var(--08);
-    }
-    :host([size="1"]) {
-      --gap-size: var(--1);
-    }
-    :host([size="2"]) {
-      --gap-size: var(--2);
-    }
-    :host([size="3"]) {
-      --gap-size: var(--3);
-    }
-    :host([size="4"]) {
-      --gap-size: var(--4);
-    }
-    :host([size="8"]) {
-      --gap-size: var(--8);
-    }
-    :host([size="12"]) {
-      --gap-size: var(--12);
-    }
-  `;
+  static styles = unsafeCSS(styles);
 
   render() {
     return html``;

package/DS1/2-core/ds-icon.ts

@@ -1,5 +1,6 @@
-import { LitElement, html, css, type PropertyValues } from "lit";
+import { LitElement, html, unsafeCSS, type PropertyValues } from "lit";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import styles from "./styles/ds-icon.css?inline";
 
 export class Icon extends LitElement {
   static properties = {
@@ -21,38 +22,7 @@ export class Icon extends LitElement {
     this.requestUpdate("type", oldVal);
   }
 
-  static styles = css`
-    :host {
-      display: inline-flex;
-      justify-content: center;
-      align-items: center;
-      width: calc(16px * var(--sf));
-      height: calc(16px * var(--sf));
-    }
-
-    svg {
-      width: 100%;
-      height: 100%;
-      fill: var(--icon-color, currentColor);
-    }
-
-    path {
-      fill: var(--icon-color, currentColor);
-    }
-
-    .icon-container {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: calc(16px * var(--sf));
-      height: calc(16px * var(--sf));
-    }
-
-    /* Notes style color variable for future implementation */
-    :host {
-      --notes-style-color: #ffb6b9;
-    }
-  `;
+  static styles = unsafeCSS(styles);
 
   // Load all SVGs from `x Icon/` as raw strings at build time (Vite)
   // The keys will be the file base names (without extension), lowercased.

package/DS1/2-core/ds-input.ts

@@ -1 +1,306 @@
-// here should be an input component
+// ds-input.ts
+// Input component for text and other input types
+
+import { LitElement, html, css } from "lit";
+import "./ds-text";
+
+export class Input extends LitElement {
+  static properties = {
+    type: { type: String, reflect: true },
+    name: { type: String, reflect: true },
+    value: { type: String },
+    placeholder: { type: String },
+    placeholderKey: { type: String, attribute: "placeholder-key" },
+    label: { type: String },
+    labelKey: { type: String, attribute: "label-key" },
+    disabled: { type: Boolean, reflect: true },
+    readonly: { type: Boolean, reflect: true },
+    required: { type: Boolean, reflect: true },
+    autofocus: { type: Boolean },
+    autocomplete: { type: String },
+    pattern: { type: String },
+    minlength: { type: Number },
+    maxlength: { type: Number },
+    min: { type: String },
+    max: { type: String },
+    step: { type: String },
+    variant: { type: String, reflect: true },
+    error: { type: String },
+    errorKey: { type: String, attribute: "error-key" },
+    _focused: { type: Boolean, state: true },
+  };
+
+  declare type:
+    | "text"
+    | "password"
+    | "email"
+    | "number"
+    | "tel"
+    | "url"
+    | "search"
+    | "date"
+    | "time"
+    | "datetime-local";
+  declare name: string;
+  declare value: string;
+  declare placeholder: string;
+  declare placeholderKey: string;
+  declare label: string;
+  declare labelKey: string;
+  declare disabled: boolean;
+  declare readonly: boolean;
+  declare required: boolean;
+  declare autofocus: boolean;
+  declare autocomplete: string;
+  declare pattern: string;
+  declare minlength: number;
+  declare maxlength: number;
+  declare min: string;
+  declare max: string;
+  declare step: string;
+  declare variant: "default" | "filled" | "outlined";
+  declare error: string;
+  declare errorKey: string;
+  declare _focused: boolean;
+
+  constructor() {
+    super();
+    this.type = "text";
+    this.name = "";
+    this.value = "";
+    this.placeholder = "";
+    this.placeholderKey = "";
+    this.label = "";
+    this.labelKey = "";
+    this.disabled = false;
+    this.readonly = false;
+    this.required = false;
+    this.autofocus = false;
+    this.autocomplete = "off";
+    this.pattern = "";
+    this.minlength = 0;
+    this.maxlength = 0;
+    this.min = "";
+    this.max = "";
+    this.step = "";
+    this.variant = "default";
+    this.error = "";
+    this.errorKey = "";
+    this._focused = false;
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    .input-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--025) * var(--sf, 1));
+      width: 100%;
+    }
+
+    label {
+      font-family: var(--typeface-regular);
+      font-size: calc(12px * var(--sf, 1));
+      color: var(--text-color-secondary);
+    }
+
+    .input-container {
+      position: relative;
+      display: flex;
+      align-items: center;
+      width: 100%;
+    }
+
+    input {
+      width: 100%;
+      height: calc(var(--1) * var(--sf, 1));
+      padding: 0 calc(var(--025) * var(--sf, 1));
+      font-family: var(--typeface-regular);
+      font-size: calc(14px * var(--sf, 1));
+      color: var(--text-color-primary);
+      background-color: var(--input-background, transparent);
+      border: 1px solid var(--input-border-color, var(--border-color, #ccc));
+      border-radius: calc(var(--025) * var(--sf, 1));
+      outline: none;
+      transition:
+        border-color 0.2s ease,
+        box-shadow 0.2s ease;
+      box-sizing: border-box;
+    }
+
+    input::placeholder {
+      color: var(--text-color-tertiary, #999);
+    }
+
+    input:focus {
+      border-color: var(--accent-color, #007aff);
+      box-shadow: 0 0 0 2px var(--input-focus-ring, rgba(0, 122, 255, 0.2));
+    }
+
+    input:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      background-color: var(--input-disabled-background, #f5f5f5);
+    }
+
+    input:read-only {
+      background-color: var(--input-readonly-background, #fafafa);
+    }
+
+    :host([variant="filled"]) input {
+      background-color: var(
+        --input-filled-background,
+        var(--surface-color-secondary, #f5f5f5)
+      );
+      border: none;
+      border-bottom: 2px solid var(--border-color, #ccc);
+      border-radius: calc(var(--025) * var(--sf, 1))
+        calc(var(--025) * var(--sf, 1)) 0 0;
+    }
+
+    :host([variant="filled"]) input:focus {
+      border-bottom-color: var(--accent-color, #007aff);
+      box-shadow: none;
+    }
+
+    :host([variant="outlined"]) input {
+      background-color: transparent;
+      border: 2px solid var(--border-color, #ccc);
+    }
+
+    :host([variant="outlined"]) input:focus {
+      border-color: var(--accent-color, #007aff);
+    }
+
+    .error-message {
+      font-family: var(--typeface-regular);
+      font-size: calc(12px * var(--sf, 1));
+      color: var(--error-color, #ff3b30);
+      margin-top: calc(var(--025) * var(--sf, 1));
+    }
+
+    :host([required]) label::after {
+      content: " *";
+      color: var(--error-color, #ff3b30);
+    }
+
+    /* Error state */
+    input.has-error {
+      border-color: var(--error-color, #ff3b30);
+    }
+
+    input.has-error:focus {
+      box-shadow: 0 0 0 2px rgba(255, 59, 48, 0.2);
+    }
+  `;
+
+  private _handleInput(e: Event): void {
+    const target = e.target as HTMLInputElement;
+    this.value = target.value;
+    this.dispatchEvent(
+      new CustomEvent("input-change", {
+        detail: { value: this.value, name: this.name },
+        bubbles: true,
+      })
+    );
+  }
+
+  private _handleFocus(): void {
+    this._focused = true;
+    this.dispatchEvent(new CustomEvent("input-focus", { bubbles: true }));
+  }
+
+  private _handleBlur(): void {
+    this._focused = false;
+    this.dispatchEvent(new CustomEvent("input-blur", { bubbles: true }));
+  }
+
+  /**
+   * Focus the input element
+   */
+  focus(): void {
+    const input = this.shadowRoot?.querySelector("input");
+    input?.focus();
+  }
+
+  /**
+   * Blur the input element
+   */
+  blur(): void {
+    const input = this.shadowRoot?.querySelector("input");
+    input?.blur();
+  }
+
+  /**
+   * Select all text in the input
+   */
+  select(): void {
+    const input = this.shadowRoot?.querySelector("input");
+    input?.select();
+  }
+
+  render() {
+    const hasError = Boolean(this.error || this.errorKey);
+
+    return html`
+      <div class="input-wrapper">
+        ${this.label || this.labelKey
+          ? html`
+              <label for="input">
+                ${this.labelKey
+                  ? html`<ds-text .key=${this.labelKey}></ds-text>`
+                  : this.label}
+              </label>
+            `
+          : null}
+
+        <div class="input-container">
+          <input
+            id="input"
+            .type=${this.type}
+            .name=${this.name}
+            .value=${this.value}
+            .placeholder=${this.placeholder}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            ?required=${this.required}
+            ?autofocus=${this.autofocus}
+            autocomplete=${this.autocomplete}
+            pattern=${this.pattern || ""}
+            minlength=${this.minlength || ""}
+            maxlength=${this.maxlength || ""}
+            min=${this.min}
+            max=${this.max}
+            step=${this.step}
+            class=${hasError ? "has-error" : ""}
+            @input=${this._handleInput}
+            @focus=${this._handleFocus}
+            @blur=${this._handleBlur}
+          />
+        </div>
+
+        ${hasError
+          ? html`
+              <div class="error-message">
+                ${this.errorKey
+                  ? html`<ds-text .key=${this.errorKey}></ds-text>`
+                  : this.error}
+              </div>
+            `
+          : null}
+      </div>
+    `;
+  }
+}
+
+customElements.define("ds-input", Input);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-input": Input;
+  }
+}

package/DS1/2-core/ds-pagedots.ts

@@ -0,0 +1,52 @@
+import { LitElement, html, unsafeCSS } from "lit";
+import styles from "./styles/ds-pagedots.css?inline";
+
+/**
+ * Page dots indicator component for carousels and pagination.
+ *
+ * Usage:
+ * - <ds-pagedots count="3" active="0"></ds-pagedots>
+ */
+export class Pagedots extends LitElement {
+  static properties = {
+    /** Number of dots to display */
+    count: { type: Number, reflect: true },
+    /** Index of the active dot (0-based) */
+    active: { type: Number, reflect: true },
+  };
+
+  declare count: number;
+  declare active: number;
+
+  constructor() {
+    super();
+    this.count = 3;
+    this.active = 0;
+  }
+
+  static styles = unsafeCSS(styles);
+
+  render() {
+    const dots = Array.from({ length: this.count }, (_, i) => i);
+    return html`
+      ${dots.map(
+        (index) => html`
+          <span
+            class="dot ${index === this.active ? "active" : ""}"
+            role="button"
+            aria-label="Slide ${index + 1}"
+            aria-current="${index === this.active ? "true" : "false"}"
+          ></span>
+        `
+      )}
+    `;
+  }
+}
+
+customElements.define("ds-pagedots", Pagedots);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-pagedots": Pagedots;
+  }
+}