@stencil-kit/core 0.0.1 → 0.0.3

package/dist/collection/components/my-alert/my-alert.js

@@ -0,0 +1,122 @@
+import { h } from "@stencil/core";
+export class MyAlert {
+    type = 'info';
+    alertTitle = '';
+    dismissible = false;
+    dismissed = false;
+    myDismiss;
+    icons = {
+        success: '✓',
+        warning: '⚠',
+        error: '✕',
+        info: 'ℹ',
+    };
+    dismiss() {
+        this.dismissed = true;
+        this.myDismiss.emit();
+    }
+    render() {
+        if (this.dismissed)
+            return null;
+        return (h("div", { class: `alert alert--${this.type}`, role: "alert" }, h("span", { class: "alert-icon" }, this.icons[this.type]), h("div", { class: "alert-content" }, this.alertTitle && h("strong", { class: "alert-title" }, this.alertTitle), h("span", { class: "alert-message" }, h("slot", null))), this.dismissible && (h("button", { class: "alert-dismiss", onClick: () => this.dismiss() }, "\u2715"))));
+    }
+    static get is() { return "my-alert"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["my-alert.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["my-alert.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'success' | 'warning' | 'error' | 'info'",
+                    "resolved": "\"error\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'info'"
+            },
+            "alertTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alert-title",
+                "defaultValue": "''"
+            },
+            "dismissible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dismissible",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "dismissed": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "myDismiss",
+                "name": "myDismiss",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/my-badge/my-badge.js

@@ -13,7 +13,7 @@ export class MyBadge {
      */
     pill = false;
     render() {
-        return (h("span", { key: '33a316730b54199e32c7ecbd1160997411e5ff95', class: `badge badge--${this.color} badge--${this.size} ${this.pill ? 'badge--pill' : ''}` }, h("slot", { key: 'eb7a3e46ea27e7d714dcc60723ca7f5801204674' })));
+        return (h("span", { key: '9c76b0118c984ac578169d0f9df317fd3b99abcf', class: `badge badge--${this.color} badge--${this.size} ${this.pill ? 'badge--pill' : ''}` }, h("slot", { key: 'b98fb68c38ee63166be5dbb315d7b68faa0d0ce2' })));
     }
     static get is() { return "my-badge"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/my-button/my-button.js

@@ -13,7 +13,7 @@ export class MyButton {
      */
     disabled = false;
     render() {
-        return (h("button", { key: '94d04ac3ac7441f76510463322200c2b7a01d569', class: `btn btn--${this.variant} btn--${this.size}`, disabled: this.disabled }, h("slot", { key: '80f6c9a56010f80635288b16804d33c780232da5' })));
+        return (h("button", { key: '37743c78738521a38d5d09dd486c38a9a21f8b5b', class: `btn btn--${this.variant} btn--${this.size}`, disabled: this.disabled }, h("slot", { key: '89e08ccf936a61509c8a4601324b8f1909dd6f59' })));
     }
     static get is() { return "my-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/my-card/my-card.js

@@ -13,7 +13,7 @@ export class MyCard {
      */
     elevation = 'medium';
     render() {
-        return (h("div", { key: '771331816e786b93963b10dcc4577c89da6385c5', class: `card card--${this.elevation}` }, this.cardTitle && (h("div", { key: '525c2dfdda668cb45895f6f1e9b55e6923b9538d', class: "card__header" }, h("h3", { key: 'a3025832b6ce60e73dce68f575bca6fbb1143913', class: "card__title" }, this.cardTitle), this.subtitle && h("p", { key: '3c3f094449a06aa41b63db17b3ab27e7e29be437', class: "card__subtitle" }, this.subtitle))), h("div", { key: '628c69443cf48fb07ee98fde44c0c2f6de148ed5', class: "card__content" }, h("slot", { key: 'f0c2c156603f2179314e7c58aabefbeda3b2e911' })), h("div", { key: '8f5a30d595399c6a606a5cde67c393aca93e3d0d', class: "card__footer" }, h("slot", { key: '1cb72bdc25ce96673d85c9fc86ff5661975cd412', name: "footer" }))));
+        return (h("div", { key: '1cc6f81c704aacbb729869b8aaeb76e2b4d53ff3', class: `card card--${this.elevation}` }, this.cardTitle && (h("div", { key: 'c6d63ec9950cedd07fd0b48bb950ef56d9ac8345', class: "card__header" }, h("h3", { key: '0f74084a20a4526366f6ef72ee054171af37c9d7', class: "card__title" }, this.cardTitle), this.subtitle && h("p", { key: 'd74199debd939f6921cb464ac43ed7bae367a170', class: "card__subtitle" }, this.subtitle))), h("div", { key: '4a283a4606d514a7fd493ea32aa686e82cf2edf8', class: "card__content" }, h("slot", { key: 'fcfb442bf91417cbed4ffb3b4825df575669cde0' })), h("div", { key: '73e18535c4f4fea108c8f5f846eebaf7ec299f54', class: "card__footer" }, h("slot", { key: 'd66f75ecb97d1663a124c69c7956d6e6556b82fa', name: "footer" }))));
     }
     static get is() { return "my-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/my-component/my-component.js

@@ -17,7 +17,7 @@ export class MyComponent {
         return format(this.first, this.middle, this.last);
     }
     render() {
-        return h("div", { key: '543ff9a15c7d307e7e59a1143b033faeee29b1cb' }, "Hello, World! I'm ", this.getText());
+        return h("div", { key: '5c6bcb6d7c69409ec822ac4a1c31816bdbbe2bc2' }, "Hello, World! I'm ", this.getText());
     }
     static get is() { return "my-component"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/my-dropdown/my-dropdown.css

@@ -0,0 +1,111 @@
+:host {
+  display: block;
+}
+
+.dropdown-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.dropdown-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: #374151;
+}
+
+.dropdown {
+  position: relative;
+}
+
+.dropdown-trigger {
+  width: 100%;
+  padding: 10px 14px;
+  font-size: 15px;
+  border: 2px solid #d1d5db;
+  border-radius: 8px;
+  background: #fff;
+  color: #111827;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  transition: border-color 0.2s, box-shadow 0.2s;
+  text-align: left;
+  box-sizing: border-box;
+}
+
+.dropdown-trigger:hover:not(:disabled) {
+  border-color: #667eea;
+}
+
+.dropdown--open .dropdown-trigger {
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
+}
+
+.dropdown--disabled .dropdown-trigger {
+  background: #f3f4f6;
+  color: #9ca3af;
+  cursor: not-allowed;
+}
+
+.dropdown-placeholder {
+  color: #9ca3af;
+}
+
+.dropdown-arrow {
+  font-size: 11px;
+  color: #6b7280;
+  flex-shrink: 0;
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  background: #fff;
+  border: 2px solid #667eea;
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  list-style: none;
+  margin: 0;
+  padding: 4px;
+  z-index: 100;
+  max-height: 240px;
+  overflow-y: auto;
+}
+
+.dropdown-item {
+  padding: 10px 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 15px;
+  color: #111827;
+  transition: background 0.15s;
+}
+
+.dropdown-item:hover {
+  background: #f3f4f6;
+}
+
+.dropdown-item--selected {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+}
+
+.dropdown-item--selected:hover {
+  background: linear-gradient(135deg, #5568d3 0%, #63408a 100%);
+}
+
+.dropdown-wrapper--error .dropdown-trigger {
+  border-color: #ef4444;
+}
+
+.dropdown-error {
+  font-size: 13px;
+  color: #ef4444;
+}

package/dist/collection/components/my-dropdown/my-dropdown.js

@@ -0,0 +1,199 @@
+import { h } from "@stencil/core";
+export class MyDropdown {
+    options = [];
+    value = '';
+    placeholder = 'Select an option';
+    label = '';
+    disabled = false;
+    error = '';
+    isOpen = false;
+    myChange;
+    get parsedOptions() {
+        if (typeof this.options === 'string') {
+            try {
+                return JSON.parse(this.options);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.options;
+    }
+    get selectedLabel() {
+        const found = this.parsedOptions.find(o => o.value === this.value);
+        return found ? found.label : this.placeholder;
+    }
+    select(value) {
+        this.value = value;
+        this.myChange.emit(value);
+        this.isOpen = false;
+    }
+    render() {
+        return (h("div", { key: '5ba78bcc60f2eef7145873c29af8a2ff57c07728', class: `dropdown-wrapper ${this.error ? 'dropdown-wrapper--error' : ''}` }, this.label && h("label", { key: 'ebc13c625fd27fe64806fed5590aedefa9470b85', class: "dropdown-label" }, this.label), h("div", { key: '529ee15dc9ed0fcfde80f634bba4fe91ef250d5c', class: `dropdown ${this.isOpen ? 'dropdown--open' : ''} ${this.disabled ? 'dropdown--disabled' : ''}` }, h("button", { key: 'd5fe770674f4f6ef929febc373ddd1278ed91b1f', class: "dropdown-trigger", disabled: this.disabled, onClick: () => !this.disabled && (this.isOpen = !this.isOpen) }, h("span", { key: '02ed94363d6c142bad3b36b17ac5326a019485a9', class: !this.value ? 'dropdown-placeholder' : '' }, this.selectedLabel), h("span", { key: '10c1aed78e2655294b0ec0db17a178f86ddcc2bf', class: "dropdown-arrow" }, this.isOpen ? '▲' : '▼')), this.isOpen && (h("ul", { key: '4679e01162793d3dca7cdbc3cc932c2d33718d45', class: "dropdown-menu" }, this.parsedOptions.map(option => (h("li", { class: `dropdown-item ${option.value === this.value ? 'dropdown-item--selected' : ''}`, onClick: () => this.select(option.value) }, option.label)))))), this.error && h("span", { key: '71091a78c62997f1d64953b0a7251be9d184493d', class: "dropdown-error" }, this.error)));
+    }
+    static get is() { return "my-dropdown"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["my-dropdown.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["my-dropdown.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "options": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DropdownOption[] | string",
+                    "resolved": "DropdownOption[] | string",
+                    "references": {
+                        "DropdownOption": {
+                            "location": "local",
+                            "path": "/Users/anis/Sites/designsystem/my-monorepo/packages/stencil-library/src/components/my-dropdown/my-dropdown.tsx",
+                            "id": "src/components/my-dropdown/my-dropdown.tsx::DropdownOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "options",
+                "defaultValue": "[]"
+            },
+            "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",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'Select an option'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "myChange",
+                "name": "myChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/my-input/my-input.css

@@ -0,0 +1,58 @@
+:host {
+  display: block;
+}
+
+.input-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.input-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: #374151;
+}
+
+.input-required {
+  color: #ef4444;
+  margin-left: 2px;
+}
+
+.input-field {
+  padding: 10px 14px;
+  font-size: 15px;
+  border: 2px solid #d1d5db;
+  border-radius: 8px;
+  outline: none;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  background: #fff;
+  color: #111827;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.input-field:focus {
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
+}
+
+.input-field:disabled {
+  background: #f3f4f6;
+  color: #9ca3af;
+  cursor: not-allowed;
+}
+
+.input-wrapper--error .input-field {
+  border-color: #ef4444;
+}
+
+.input-wrapper--error .input-field:focus {
+  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
+}
+
+.input-error {
+  font-size: 13px;
+  color: #ef4444;
+}