@ind-ds/core 0.1.0

package/dist/collection/components/atoms/divider/divider.css

@@ -0,0 +1,16 @@
+:host {
+  display: block;
+  background: var(--ind-surface-border-default, #2a3340);
+  flex-shrink: 0;
+}
+
+:host([orientation="horizontal"]) {
+  width: 100%;
+  height: 1px;
+}
+
+:host([orientation="vertical"]) {
+  height: 100%;
+  min-height: 1em;
+  width: 1px;
+}

package/dist/collection/components/atoms/divider/divider.js

@@ -0,0 +1,50 @@
+import { h, Host } from "@stencil/core";
+export class IndDivider {
+    orientation = 'horizontal';
+    render() {
+        return h(Host, { key: 'eae104b602756afe326c0002f84d926134075e44', role: "separator", "aria-orientation": this.orientation });
+    }
+    static get is() { return "ind-divider"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["divider.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["divider.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DividerOrientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "DividerOrientation": {
+                            "location": "local",
+                            "path": "C:/www/ind-ds/packages/core/src/components/atoms/divider/divider.tsx",
+                            "id": "src/components/atoms/divider/divider.tsx::DividerOrientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "orientation",
+                "defaultValue": "'horizontal'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=divider.js.map

package/dist/collection/components/atoms/divider/divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.js","sourceRoot":"","sources":["../../../../src/components/atoms/divider/divider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AASzD,MAAM,OAAO,UAAU;IACI,WAAW,GAAuB,YAAY,CAAC;IAExE,MAAM;QACJ,OAAO,EAAC,IAAI,qDAAC,IAAI,EAAC,WAAW,sBAAmB,IAAI,CAAC,WAAW,GAAI,CAAC;IACvE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type DividerOrientation = 'horizontal' | 'vertical';\n\n@Component({\n  tag: 'ind-divider',\n  styleUrl: 'divider.css',\n  shadow: true,\n})\nexport class IndDivider {\n  @Prop({ reflect: true }) orientation: DividerOrientation = 'horizontal';\n\n  render() {\n    return <Host role=\"separator\" aria-orientation={this.orientation} />;\n  }\n}\n"]}

package/dist/collection/components/atoms/input/input.css

@@ -0,0 +1,92 @@
+:host {
+  display: inline-block;
+  font-family: var(--ind-font-family-sans);
+  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));
+  --_h: var(--ind-size-input-md, 32px);
+}
+
+:host([size="sm"]) { --_h: var(--ind-size-input-sm, 24px); }
+:host([size="md"]) { --_h: var(--ind-size-input-md, 32px); }
+:host([size="lg"]) { --_h: var(--ind-size-input-lg, 40px); }
+
+.wrap {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--ind-spacing-2, 4px);
+  min-width: 160px;
+  max-width: 100%;
+}
+
+.label {
+  font-size: var(--ind-font-size-sm, 11px);
+  font-weight: var(--ind-font-weight-medium, 500);
+  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.field {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ind-spacing-3, 6px);
+  height: var(--_h);
+  padding: 0 var(--ind-spacing-4, 8px);
+  background: var(--ind-surface-sunken, light-dark(#ffffff, #000000));
+  border: 1px solid var(--ind-surface-border-default, #2a3340);
+  border-radius: var(--ind-radius-md, 3px);
+  transition:
+    border-color var(--ind-motion-duration-fast, 120ms),
+    box-shadow   var(--ind-motion-duration-fast, 120ms);
+}
+
+.field.is-focus {
+  border-color: var(--ind-surface-focus-ring, #22d3ee);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ind-surface-focus-ring, #22d3ee) 35%, transparent);
+}
+
+.input {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  font-feature-settings: var(--ind-font-feature-tabular, "tnum" 1);
+}
+
+.input::placeholder {
+  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));
+  opacity: 1;
+}
+
+:host([type="number"]) .input {
+  font-family: var(--ind-font-family-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+:host([invalid]) .field {
+  border-color: var(--ind-feedback-error-bg, #dc2626);
+}
+:host([invalid]) .field.is-focus {
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ind-feedback-error-bg, #dc2626) 40%, transparent);
+}
+
+:host([disabled]) {
+  opacity: 0.55;
+  pointer-events: none;
+}
+
+:host([readonly]) .field {
+  background: var(--ind-surface-panel, light-dark(#f4f6f9, #11161c));
+}
+
+::slotted([slot="prefix"]),
+::slotted([slot="suffix"]) {
+  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));
+  font-size: var(--ind-font-size-sm, 11px);
+  font-family: var(--ind-font-family-mono);
+  white-space: nowrap;
+}

package/dist/collection/components/atoms/input/input.js

@@ -0,0 +1,427 @@
+import { h, Host, } from "@stencil/core";
+export class IndInput {
+    host;
+    type = 'text';
+    size = 'md';
+    value = '';
+    placeholder;
+    disabled = false;
+    readonly = false;
+    invalid = false;
+    label;
+    name;
+    min;
+    max;
+    step;
+    pattern;
+    autocomplete;
+    /** Maps to the native `inputmode` attribute — named `mode` to avoid clashing with `HTMLElement.inputMode`. */
+    mode;
+    hasFocus = false;
+    /** Fires on every keystroke. */
+    indInput;
+    /** Fires on change (blur or Enter). */
+    indChange;
+    /** Programmatically focus the underlying input. */
+    async setFocus() {
+        this.host.shadowRoot?.querySelector('input')?.focus();
+    }
+    onInput = (e) => {
+        const v = e.target.value;
+        this.value = v;
+        this.indInput.emit(v);
+    };
+    onChange = (e) => {
+        const v = e.target.value;
+        this.indChange.emit(v);
+    };
+    render() {
+        return (h(Host, { key: 'bb19139e219e04af88a8d60ef7189b1fe75cb9fa' }, h("label", { key: '95047b762b29dddf02e1236c4febb7bd175a5375', class: "wrap", part: "wrap" }, this.label && h("span", { key: '3dfe06b89e8022fc4dc74e29d73edd4684ca7305', class: "label", part: "label" }, this.label), h("span", { key: '4714f42749f9018c7a472c85d4ce59537ac60b1f', class: { field: true, 'is-focus': this.hasFocus }, part: "field" }, h("slot", { key: '97e0af1ba3eec75684483fa1fb76d08eec886075', name: "prefix" }), h("input", { key: '3764cd35fb827430a05af94b3fd2164d1f812cfa', part: "input", class: "input", type: this.type, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, name: this.name, min: this.min, max: this.max, step: this.step, pattern: this.pattern, autocomplete: this.autocomplete, inputMode: this.mode, "aria-invalid": this.invalid ? 'true' : 'false', onFocus: () => (this.hasFocus = true), onBlur: () => (this.hasFocus = false), onInput: this.onInput, onChange: this.onChange }), h("slot", { key: '1fefcb0e2fa6efd3385aef0bbf8b228578915c3a', name: "suffix" })))));
+    }
+    static get is() { return "ind-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["input.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputType",
+                    "resolved": "\"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+                    "references": {
+                        "InputType": {
+                            "location": "local",
+                            "path": "C:/www/ind-ds/packages/core/src/components/atoms/input/input.tsx",
+                            "id": "src/components/atoms/input/input.tsx::InputType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type",
+                "defaultValue": "'text'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "InputSize": {
+                            "location": "local",
+                            "path": "C:/www/ind-ds/packages/core/src/components/atoms/input/input.tsx",
+                            "id": "src/components/atoms/input/input.tsx::InputSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "invalid",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "min": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min"
+            },
+            "max": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max"
+            },
+            "step": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "step"
+            },
+            "pattern": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pattern"
+            },
+            "autocomplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autocomplete"
+            },
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputMode",
+                    "resolved": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\" | undefined",
+                    "references": {
+                        "InputMode": {
+                            "location": "local",
+                            "path": "C:/www/ind-ds/packages/core/src/components/atoms/input/input.tsx",
+                            "id": "src/components/atoms/input/input.tsx::InputMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maps to the native `inputmode` attribute \u2014 named `mode` to avoid clashing with `HTMLElement.inputMode`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "inputmode"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasFocus": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "indInput",
+                "name": "indInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires on every keystroke."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "indChange",
+                "name": "indChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires on change (blur or Enter)."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically focus the underlying input.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=input.js.map

package/dist/collection/components/atoms/input/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../../src/components/atoms/input/input.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Element,\n  Method,\n  h,\n  Host,\n} from '@stencil/core';\n\nexport type InputType = 'text' | 'number' | 'email' | 'password' | 'search' | 'tel' | 'url';\nexport type InputSize = 'sm' | 'md' | 'lg';\nexport type InputMode = 'text' | 'numeric' | 'decimal' | 'tel' | 'url' | 'email' | 'search' | 'none';\n\n@Component({\n  tag: 'ind-input',\n  styleUrl: 'input.css',\n  shadow: true,\n})\nexport class IndInput {\n  @Element() host!: HTMLElement;\n\n  @Prop({ reflect: true }) type: InputType = 'text';\n  @Prop({ reflect: true }) size: InputSize = 'md';\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() placeholder?: string;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) readonly: boolean = false;\n  @Prop({ reflect: true }) invalid: boolean = false;\n  @Prop() label?: string;\n  @Prop() name?: string;\n  @Prop() min?: number | string;\n  @Prop() max?: number | string;\n  @Prop() step?: number | string;\n  @Prop() pattern?: string;\n  @Prop() autocomplete?: string;\n  /** Maps to the native `inputmode` attribute — named `mode` to avoid clashing with `HTMLElement.inputMode`. */\n  @Prop({ attribute: 'inputmode' }) mode?: InputMode;\n\n  @State() private hasFocus = false;\n\n  /** Fires on every keystroke. */\n  @Event() indInput!: EventEmitter<string>;\n  /** Fires on change (blur or Enter). */\n  @Event() indChange!: EventEmitter<string>;\n\n  /** Programmatically focus the underlying input. */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.host.shadowRoot?.querySelector('input')?.focus();\n  }\n\n  private onInput = (e: Event) => {\n    const v = (e.target as HTMLInputElement).value;\n    this.value = v;\n    this.indInput.emit(v);\n  };\n\n  private onChange = (e: Event) => {\n    const v = (e.target as HTMLInputElement).value;\n    this.indChange.emit(v);\n  };\n\n  render() {\n    return (\n      <Host>\n        <label class=\"wrap\" part=\"wrap\">\n          {this.label && <span class=\"label\" part=\"label\">{this.label}</span>}\n          <span class={{ field: true, 'is-focus': this.hasFocus }} part=\"field\">\n            <slot name=\"prefix\" />\n            <input\n              part=\"input\"\n              class=\"input\"\n              type={this.type}\n              value={this.value}\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n              readonly={this.readonly}\n              name={this.name}\n              min={this.min as unknown as string}\n              max={this.max as unknown as string}\n              step={this.step as unknown as string}\n              pattern={this.pattern}\n              autocomplete={this.autocomplete as unknown as 'on' | 'off'}\n              inputMode={this.mode as unknown as undefined}\n              aria-invalid={this.invalid ? 'true' : 'false'}\n              onFocus={() => (this.hasFocus = true)}\n              onBlur={() => (this.hasFocus = false)}\n              onInput={this.onInput}\n              onChange={this.onChange}\n            />\n            <slot name=\"suffix\" />\n          </span>\n        </label>\n      </Host>\n    );\n  }\n}\n"]}