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

package/dist/2-core/ds-input.js

@@ -1 +1,252 @@
-// 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 {
+    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;
+    }
+    _handleInput(e) {
+        const target = e.target;
+        this.value = target.value;
+        this.dispatchEvent(new CustomEvent("input-change", {
+            detail: { value: this.value, name: this.name },
+            bubbles: true,
+        }));
+    }
+    _handleFocus() {
+        this._focused = true;
+        this.dispatchEvent(new CustomEvent("input-focus", { bubbles: true }));
+    }
+    _handleBlur() {
+        this._focused = false;
+        this.dispatchEvent(new CustomEvent("input-blur", { bubbles: true }));
+    }
+    /**
+     * Focus the input element
+     */
+    focus() {
+        const input = this.shadowRoot?.querySelector("input");
+        input?.focus();
+    }
+    /**
+     * Blur the input element
+     */
+    blur() {
+        const input = this.shadowRoot?.querySelector("input");
+        input?.blur();
+    }
+    /**
+     * Select all text in the input
+     */
+    select() {
+        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>
+    `;
+    }
+}
+Input.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 },
+};
+Input.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);
+    }
+  `;
+customElements.define("ds-input", Input);

package/dist/2-core/ds-pagedots.d.ts

@@ -0,0 +1,32 @@
+import { LitElement } from "lit";
+/**
+ * Page dots indicator component for carousels and pagination.
+ *
+ * Usage:
+ * - <ds-pagedots count="3" active="0"></ds-pagedots>
+ */
+export declare class Pagedots extends LitElement {
+    static properties: {
+        /** Number of dots to display */
+        count: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+        /** Index of the active dot (0-based) */
+        active: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+    };
+    count: number;
+    active: number;
+    constructor();
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-pagedots": Pagedots;
+    }
+}
+//# sourceMappingURL=ds-pagedots.d.ts.map

package/dist/2-core/ds-pagedots.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-pagedots.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-pagedots.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAGlD;;;;;GAKG;AACH,qBAAa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,UAAU;QACf,gCAAgC;;;;;QAEhC,wCAAwC;;;;;MAExC;IAEM,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;;IAQvB,MAAM,CAAC,MAAM,0BAAqB;IAElC,MAAM;CAeP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,QAAQ,CAAC;KACzB;CACF"}

package/dist/2-core/ds-pagedots.js

@@ -0,0 +1,36 @@
+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 {
+    constructor() {
+        super();
+        this.count = 3;
+        this.active = 0;
+    }
+    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>
+        `)}
+    `;
+    }
+}
+Pagedots.properties = {
+    /** Number of dots to display */
+    count: { type: Number, reflect: true },
+    /** Index of the active dot (0-based) */
+    active: { type: Number, reflect: true },
+};
+Pagedots.styles = unsafeCSS(styles);
+customElements.define("ds-pagedots", Pagedots);

package/dist/2-core/ds-text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-text.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C;;;;;;;GAOG;AACH,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,KAAK,UAAU;;;;;;;;;;;;;;;;;;MAOpB;IAEO,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,MAAM,CAAC;IACjC,OAAO,CAAC,aAAa,CAAqC;;IAsB1D,MAAM,CAAC,MAAM,0BA2BX;IAEF,iBAAiB;IAsBjB,oBAAoB;IAYpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAQ/C,wBAAwB;IA8BxB,SAAS;IAmBT,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}
+{"version":3,"file":"ds-text.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAIlD;;;;;;;GAOG;AACH,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,KAAK,UAAU;;;;;;;;;;;;;;;;;;MAOpB;IAEO,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,MAAM,CAAC;IACjC,OAAO,CAAC,aAAa,CAAqC;;IAsB1D,MAAM,CAAC,MAAM,0BAAqB;IAElC,iBAAiB;IAsBjB,oBAAoB;IAYpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAQ/C,wBAAwB;IA8BxB,SAAS;IAmBT,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}

package/dist/2-core/ds-text.js

@@ -1,5 +1,6 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html, unsafeCSS } from "lit";
 import { getText, currentLanguage } from "../0-face/i18n";
+import styles from "./styles/ds-text.css?inline";
 /**
  * A component for displaying text from translations
  *
@@ -106,32 +107,5 @@ export class Text extends LitElement {
         return html `<span>${this._text || this.defaultValue || this.key}</span>`;
     }
 }
-Text.styles = css `
-    :host {
-      display: inline;
-      font-family: var(--typeface-regular);
-      font-size: var(--type-size-default);
-      font-weight: var(--type-weight-default);
-      line-height: calc(var(--type-lineheight-default) * var(--sf));
-      letter-spacing: calc(var(--type-letterspacing-default) * var(--sf));
-      text-align: var(--text-align-default);
-      text-transform: var(--text-transform-default);
-      text-decoration: var(--text-decoration-default);
-    }
-
-    :host([data-language="ja"]) {
-      font-family: var(--typeface-regular-jp);
-    }
-
-    :host([data-language="zh"]),
-    :host([data-language="zh-hant"]) {
-      font-family: var(--typeface-regular-zh-hant);
-      font-weight: 800;
-    }
-
-    :host([data-language="zh-hans"]) {
-      font-family: var(--typeface-regular-zh-hans);
-      font-weight: 800;
-    }
-  `;
+Text.styles = unsafeCSS(styles);
 customElements.define("ds-text", Text);

package/dist/2-core/ds-tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-tooltip.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,qBAAa,OAAQ,SAAQ,UAAU;IACrC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;MAKf;IAEM,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,EAAE,MAAM,CAAC;IAC7B,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,QAAQ,CAAU;IAE1B,OAAO,CAAC,mBAAmB,CAGzB;IACF,OAAO,CAAC,iBAAiB,CAKvB;;IAsCF,MAAM,CAAC,MAAM,0BA+CX;IAEF,iBAAiB,IAAI,IAAI;IAmBzB,oBAAoB,IAAI,IAAI;IAiB5B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAM5C,SAAS,IAAI,IAAI;IAiBjB,MAAM;CAUP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,OAAO,CAAC;KACvB;CACF"}
+{"version":3,"file":"ds-tooltip.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAIlD,qBAAa,OAAQ,SAAQ,UAAU;IACrC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;MAKf;IAEM,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,EAAE,MAAM,CAAC;IAC7B,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,QAAQ,CAAU;IAE1B,OAAO,CAAC,mBAAmB,CAGzB;IACF,OAAO,CAAC,iBAAiB,CAKvB;;IAsCF,MAAM,CAAC,MAAM,0BAAqB;IAElC,iBAAiB,IAAI,IAAI;IAmBzB,oBAAoB,IAAI,IAAI;IAiB5B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAM5C,SAAS,IAAI,IAAI;IAiBjB,MAAM;CAUP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,OAAO,CAAC;KACvB;CACF"}

package/dist/2-core/ds-tooltip.js

@@ -1,5 +1,6 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html, unsafeCSS } from "lit";
 import { translate } from "../0-face/i18n";
+import styles from "./styles/ds-tooltip.css?inline";
 export class Tooltip extends LitElement {
     constructor() {
         super();
@@ -90,52 +91,5 @@ Tooltip.properties = {
     _text: { state: true },
     _visible: { state: true },
 };
-Tooltip.styles = css `
-    :host {
-      position: relative;
-      display: inline-block;
-    }
-
-    .slot-wrapper {
-      display: inline-flex;
-      align-items: center;
-    }
-
-    .bubble {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      position: absolute;
-      left: 50%;
-      bottom: 100%;
-      transform: translate(-50%, calc(-2px * var(--sf)));
-      z-index: 1000;
-      pointer-events: none;
-      height: calc(var(--08) * var(--sf));
-      opacity: 0;
-      transition:
-        opacity 120ms ease,
-        transform 120ms ease;
-      background-color: light-dark(var(--black), var(--white));
-      color: light-dark(var(--white), var(--black));
-      border-radius: 0;
-      font-size: var(--type-size-default);
-      padding: 0px calc(1px * var(--sf));
-      font-family: var(
-        --typeface-regular,
-        -apple-system,
-        BlinkMacSystemFont,
-        "Segoe UI",
-        Roboto,
-        sans-serif
-      );
-      font-weight: 500;
-      white-space: nowrap;
-      min-width: max-content;
-    }
-
-    .bubble.visible {
-      opacity: 1;
-    }
-  `;
+Tooltip.styles = unsafeCSS(styles);
 customElements.define("ds-tooltip", Tooltip);

package/dist/2-core/styles/ds-banner.css

@@ -0,0 +1,77 @@
+/* ds-banner.css */
+/* Fixed banner component styles for notifications/alerts */
+
+:host {
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: calc(var(--unit) * var(--sf, 1));
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 calc(var(--unit) * var(--sf, 1));
+  box-sizing: border-box;
+  z-index: 9999;
+}
+
+:host([variant="warning"]) {
+  background-color: color-mix(in srgb, var(--yellow) 50%, transparent);
+  --banner-text-color: color-mix(in srgb, var(--black) 50%, transparent);
+  --banner-action-color: var(--slate);
+}
+
+:host([variant="info"]) {
+  background-color: rgba(var(--sharp-blue-rgb, 0, 122, 255), 0.7);
+  --banner-text-color: var(--white, #fff);
+  --banner-action-color: var(--white, #fff);
+}
+
+:host([variant="success"]) {
+  background-color: rgba(var(--apple-green-rgb, 52, 199, 89), 0.7);
+  --banner-text-color: var(--white, #fff);
+  --banner-action-color: var(--white, #fff);
+}
+
+:host([variant="error"]) {
+  background-color: rgba(var(--tuned-red-rgb, 255, 59, 48), 0.7);
+  --banner-text-color: var(--white, #fff);
+  --banner-action-color: var(--slate, #1e1e1e);
+}
+
+.text-wrapper {
+  flex: 1;
+  cursor: pointer;
+  user-select: none;
+}
+
+.text-wrapper ds-text,
+.text-wrapper .version {
+  color: var(--banner-text-color);
+}
+
+.action-wrapper {
+  font-size: calc(12px * var(--sf, 1));
+}
+
+.action-wrapper a {
+  color: var(--banner-action-color);
+  text-decoration: none;
+  font-family: var(--typeface-regular);
+  font-size: calc(12px * var(--sf, 1));
+  cursor: pointer;
+  pointer-events: auto;
+  display: inline-block;
+}
+
+.action-wrapper a:hover {
+  opacity: 0.8;
+}
+
+.action-wrapper ds-text {
+  color: var(--banner-action-color);
+  font-family: var(--typeface-regular);
+  font-size: calc(12px * var(--sf, 1));
+  pointer-events: none;
+}

package/dist/2-core/styles/ds-button.css

@@ -0,0 +1,67 @@
+/* ds-button.css */
+/* Core button component styles */
+
+button {
+  max-height: calc(var(--08) * var(--sf));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  cursor: pointer;
+  padding: 0 calc(0.5px * var(--sf));
+  color: var(--button-text-color);
+  font-family: var(--typeface-regular);
+}
+
+button.title {
+  background-color: var(--button-background-color-secondary);
+  color: var(--button-text-color);
+}
+
+button.primary {
+  background-color: var(--accent-color);
+  color: var(--button-text-color);
+  text-decoration-line: none;
+  font-family: var(--typeface-regular);
+}
+
+button.secondary {
+  background-color: var(--button-background-color-secondary);
+  color: var(--button-text-color);
+  font-family: var(--typeface-regular);
+}
+
+button.text {
+  background-color: transparent;
+  color: var(--button-color, var(--button-text-color));
+  font-family: var(--typeface-regular);
+  padding: 0;
+  text-decoration: none;
+}
+
+button.text:hover {
+  opacity: 0.8;
+  text-decoration: none;
+}
+
+button[bold] {
+  font-weight: var(--type-weight-bold);
+  font-family: var(--typeface-medium);
+}
+
+button[no-background] {
+  background-color: transparent;
+  max-height: var(--1);
+  padding: 0;
+  color: var(--button-color, var(--button-text-color-secondary));
+}
+
+button[no-background][bold] {
+  font-weight: var(--type-weight-bold);
+  font-family: var(--typeface-medium);
+  color: var(--button-color, var(--button-text-color-secondary));
+}
+
+.loading {
+  opacity: 0.7;
+}

package/dist/2-core/styles/ds-cycle.css

@@ -0,0 +1,21 @@
+/* ds-cycle.css */
+/* Cycle component styles for cycling through options */
+
+: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;
+}

package/dist/2-core/styles/ds-date.css

@@ -0,0 +1,9 @@
+/* ds-date.css */
+/* Date component styles for displaying the current year */
+
+:host {
+  display: inline;
+  font-family: var(--typeface-regular, var(--typeface-regular-regular));
+  font-size: inherit;
+  color: inherit;
+}