@duskmoon-dev/el-chip 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/cjs/index.js +259 -0
  2. package/dist/cjs/index.js.map +11 -0
  3. package/dist/cjs/register.js +262 -0
  4. package/dist/cjs/register.js.map +12 -0
  5. package/dist/esm/index.js +227 -0
  6. package/dist/esm/index.js.map +11 -0
  7. package/dist/esm/register.js +226 -0
  8. package/dist/esm/register.js.map +12 -0
  9. package/dist/tsconfig.tsbuildinfo +1 -0
  10. package/dist/types/el-dm-chip.d.ts +71 -0
  11. package/dist/types/el-dm-chip.d.ts.map +1 -0
  12. package/dist/types/index.d.ts +19 -0
  13. package/dist/types/index.d.ts.map +1 -0
  14. package/dist/types/register.d.ts +2 -0
  15. package/dist/types/register.d.ts.map +1 -0
  16. package/package.json +58 -0
package/dist/cjs/index.js ADDED
@@ -0,0 +1,259 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __getOwnPropNames = Object.getOwnPropertyNames;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
5
+ var __moduleCache = /* @__PURE__ */ new WeakMap;
6
+ var __toCommonJS = (from) => {
7
+ var entry = __moduleCache.get(from), desc;
8
+ if (entry)
9
+ return entry;
10
+ entry = __defProp({}, "__esModule", { value: true });
11
+ if (from && typeof from === "object" || typeof from === "function")
12
+ __getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp(entry, key, {
13
+ get: () => from[key],
14
+ enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
15
+ }));
16
+ __moduleCache.set(from, entry);
17
+ return entry;
18
+ };
19
+ var __export = (target, all) => {
20
+ for (var name in all)
21
+ __defProp(target, name, {
22
+ get: all[name],
23
+ enumerable: true,
24
+ configurable: true,
25
+ set: (newValue) => all[name] = () => newValue
26
+ });
27
+ };
28
+
29
+ // src/index.ts
30
+ var exports_src = {};
31
+ __export(exports_src, {
32
+ register: () => register,
33
+ ElDmChip: () => ElDmChip
34
+ });
35
+ module.exports = __toCommonJS(exports_src);
36
+
37
+ // src/el-dm-chip.ts
38
+ var import_el_core = require("@duskmoon-dev/el-core");
39
+ var import_chip = require("@duskmoon-dev/core/components/chip");
40
+ var VARIANT_CLASSES = {
41
+ filled: "",
42
+ outlined: "chip-outlined",
43
+ soft: "chip-soft"
44
+ };
45
+ var COLOR_CLASSES = {
46
+ primary: "chip-primary",
47
+ secondary: "chip-secondary",
48
+ tertiary: "chip-tertiary",
49
+ success: "chip-success",
50
+ warning: "chip-warning",
51
+ error: "chip-error",
52
+ info: "chip-info"
53
+ };
54
+ var SIZE_CLASSES = {
55
+ sm: "chip-sm",
56
+ md: "",
57
+ lg: "chip-lg"
58
+ };
59
+ var coreStyles = import_chip.css.replace(/@layer\s+components\s*\{/, "").replace(/\}\s*$/, "");
60
+ var styles = import_el_core.css`
61
+ :host {
62
+ display: inline-flex;
63
+ vertical-align: middle;
64
+ }
65
+
66
+ :host([hidden]) {
67
+ display: none !important;
68
+ }
69
+
70
+ ${coreStyles}
71
+
72
+ .chip {
73
+ font-family: inherit;
74
+ display: inline-flex;
75
+ align-items: center;
76
+ gap: 0.375rem;
77
+ padding: 0.25rem 0.75rem;
78
+ border-radius: 9999px;
79
+ font-size: 0.875rem;
80
+ line-height: 1.25rem;
81
+ cursor: pointer;
82
+ transition: all 150ms ease;
83
+ background-color: var(--color-surface-variant);
84
+ color: var(--color-on-surface);
85
+ border: 1px solid transparent;
86
+ }
87
+
88
+ .chip:hover {
89
+ background-color: var(--color-surface-container);
90
+ }
91
+
92
+ .chip-sm {
93
+ padding: 0.125rem 0.5rem;
94
+ font-size: 0.75rem;
95
+ }
96
+
97
+ .chip-lg {
98
+ padding: 0.375rem 1rem;
99
+ font-size: 1rem;
100
+ }
101
+
102
+ .chip-outlined {
103
+ background-color: transparent;
104
+ border-color: var(--color-outline);
105
+ }
106
+
107
+ .chip-outlined:hover {
108
+ background-color: var(--color-surface-variant);
109
+ }
110
+
111
+ .chip-primary {
112
+ background-color: var(--color-primary);
113
+ color: var(--color-on-primary);
114
+ }
115
+
116
+ .chip-secondary {
117
+ background-color: var(--color-secondary);
118
+ color: var(--color-on-secondary);
119
+ }
120
+
121
+ .chip-tertiary {
122
+ background-color: var(--color-tertiary);
123
+ color: var(--color-on-tertiary);
124
+ }
125
+
126
+ .chip-success {
127
+ background-color: var(--color-success);
128
+ color: var(--color-on-success);
129
+ }
130
+
131
+ .chip-warning {
132
+ background-color: var(--color-warning);
133
+ color: var(--color-on-warning);
134
+ }
135
+
136
+ .chip-error {
137
+ background-color: var(--color-error);
138
+ color: var(--color-on-error);
139
+ }
140
+
141
+ .chip-info {
142
+ background-color: var(--color-info);
143
+ color: var(--color-on-info);
144
+ }
145
+
146
+ .chip-selected {
147
+ background-color: var(--color-primary);
148
+ color: var(--color-on-primary);
149
+ }
150
+
151
+ :host([disabled]) .chip {
152
+ opacity: 0.5;
153
+ cursor: not-allowed;
154
+ pointer-events: none;
155
+ }
156
+
157
+ .chip-icon {
158
+ display: flex;
159
+ align-items: center;
160
+ justify-content: center;
161
+ width: 1rem;
162
+ height: 1rem;
163
+ }
164
+
165
+ .chip-delete {
166
+ display: flex;
167
+ align-items: center;
168
+ justify-content: center;
169
+ width: 1rem;
170
+ height: 1rem;
171
+ margin-left: 0.25rem;
172
+ margin-right: -0.25rem;
173
+ border-radius: 50%;
174
+ cursor: pointer;
175
+ opacity: 0.7;
176
+ transition: opacity 150ms ease;
177
+ }
178
+
179
+ .chip-delete:hover {
180
+ opacity: 1;
181
+ }
182
+
183
+ .chip-delete svg {
184
+ width: 0.75rem;
185
+ height: 0.75rem;
186
+ }
187
+ `;
188
+
189
+ class ElDmChip extends import_el_core.BaseElement {
190
+ static properties = {
191
+ variant: { type: String, reflect: true, default: "filled" },
192
+ color: { type: String, reflect: true },
193
+ size: { type: String, reflect: true },
194
+ deletable: { type: Boolean, reflect: true },
195
+ selected: { type: Boolean, reflect: true },
196
+ disabled: { type: Boolean, reflect: true }
197
+ };
198
+ constructor() {
199
+ super();
200
+ this.attachStyles(styles);
201
+ }
202
+ _handleDelete(event) {
203
+ event.stopPropagation();
204
+ if (!this.disabled) {
205
+ this.emit("delete");
206
+ }
207
+ }
208
+ _handleClick() {
209
+ if (!this.disabled) {
210
+ this.emit("click");
211
+ }
212
+ }
213
+ _getChipClasses() {
214
+ const classes = ["chip"];
215
+ if (this.variant && VARIANT_CLASSES[this.variant]) {
216
+ classes.push(VARIANT_CLASSES[this.variant]);
217
+ }
218
+ if (this.color && COLOR_CLASSES[this.color]) {
219
+ classes.push(COLOR_CLASSES[this.color]);
220
+ }
221
+ if (this.size && SIZE_CLASSES[this.size]) {
222
+ classes.push(SIZE_CLASSES[this.size]);
223
+ }
224
+ if (this.selected) {
225
+ classes.push("chip-selected");
226
+ }
227
+ return classes.join(" ");
228
+ }
229
+ render() {
230
+ const chipClasses = this._getChipClasses();
231
+ const deleteIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>`;
232
+ return `
233
+ <span class="${chipClasses}" part="chip" role="button" tabindex="0">
234
+ <span class="chip-icon" part="icon">
235
+ <slot name="icon"></slot>
236
+ </span>
237
+ <slot></slot>
238
+ ${this.deletable ? `<span class="chip-delete" part="delete">${deleteIcon}</span>` : ""}
239
+ </span>
240
+ `;
241
+ }
242
+ update() {
243
+ super.update();
244
+ const chip = this.shadowRoot?.querySelector(".chip");
245
+ chip?.addEventListener("click", this._handleClick.bind(this));
246
+ const deleteBtn = this.shadowRoot?.querySelector(".chip-delete");
247
+ deleteBtn?.addEventListener("click", this._handleDelete.bind(this));
248
+ }
249
+ }
250
+
251
+ // src/index.ts
252
+ function register() {
253
+ if (!customElements.get("el-dm-chip")) {
254
+ customElements.define("el-dm-chip", ElDmChip);
255
+ }
256
+ }
257
+
258
+ //# debugId=EBFE8B70395E5FB964756E2164756E21
259
+ //# sourceMappingURL=index.js.map
package/dist/cjs/index.js.map ADDED
@@ -0,0 +1,11 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/el-dm-chip.ts", "../../src/index.ts"],
4
+ "sourcesContent": [
5
+ "/**\n * DuskMoon Chip Element\n *\n * A chip component for displaying tags, filters, or selections.\n * Uses styles from @duskmoon-dev/core for consistent theming.\n *\n * @element el-dm-chip\n *\n * @attr {string} variant - Chip variant: filled, outlined, soft\n * @attr {string} color - Chip color: primary, secondary, tertiary, success, warning, error, info\n * @attr {string} size - Chip size: sm, md, lg\n * @attr {boolean} deletable - Whether the chip shows a delete button\n * @attr {boolean} selected - Whether the chip is in selected state\n * @attr {boolean} disabled - Whether the chip is disabled\n *\n * @slot - Default slot for chip content\n * @slot icon - Slot for leading icon\n *\n * @csspart chip - The chip container\n * @csspart icon - The icon container\n * @csspart delete - The delete button\n *\n * @fires delete - Fired when delete button is clicked\n * @fires click - Fired when chip is clicked\n */\n\nimport { BaseElement, css } from '@duskmoon-dev/el-core';\nimport { css as chipCSS } from '@duskmoon-dev/core/components/chip';\n\nconst VARIANT_CLASSES: Record<string, string> = {\n filled: '',\n outlined: 'chip-outlined',\n soft: 'chip-soft',\n};\n\nconst COLOR_CLASSES: Record<string, string> = {\n primary: 'chip-primary',\n secondary: 'chip-secondary',\n tertiary: 'chip-tertiary',\n success: 'chip-success',\n warning: 'chip-warning',\n error: 'chip-error',\n info: 'chip-info',\n};\n\nconst SIZE_CLASSES: Record<string, string> = {\n sm: 'chip-sm',\n md: '',\n lg: 'chip-lg',\n};\n\nexport type ChipVariant = 'filled' | 'outlined' | 'soft';\nexport type ChipColor =\n | 'primary'\n | 'secondary'\n | 'tertiary'\n | 'success'\n | 'warning'\n | 'error'\n | 'info';\nexport type ChipSize = 'sm' | 'md' | 'lg';\n\n// Strip @layer wrapper for Shadow DOM compatibility\nconst coreStyles = chipCSS.replace(/@layer\\s+components\\s*\\{/, '').replace(/\\}\\s*$/, '');\n\nconst styles = css`\n :host {\n display: inline-flex;\n vertical-align: middle;\n }\n\n :host([hidden]) {\n display: none !important;\n }\n\n ${coreStyles}\n\n .chip {\n font-family: inherit;\n display: inline-flex;\n align-items: center;\n gap: 0.375rem;\n padding: 0.25rem 0.75rem;\n border-radius: 9999px;\n font-size: 0.875rem;\n line-height: 1.25rem;\n cursor: pointer;\n transition: all 150ms ease;\n background-color: var(--color-surface-variant);\n color: var(--color-on-surface);\n border: 1px solid transparent;\n }\n\n .chip:hover {\n background-color: var(--color-surface-container);\n }\n\n .chip-sm {\n padding: 0.125rem 0.5rem;\n font-size: 0.75rem;\n }\n\n .chip-lg {\n padding: 0.375rem 1rem;\n font-size: 1rem;\n }\n\n .chip-outlined {\n background-color: transparent;\n border-color: var(--color-outline);\n }\n\n .chip-outlined:hover {\n background-color: var(--color-surface-variant);\n }\n\n .chip-primary {\n background-color: var(--color-primary);\n color: var(--color-on-primary);\n }\n\n .chip-secondary {\n background-color: var(--color-secondary);\n color: var(--color-on-secondary);\n }\n\n .chip-tertiary {\n background-color: var(--color-tertiary);\n color: var(--color-on-tertiary);\n }\n\n .chip-success {\n background-color: var(--color-success);\n color: var(--color-on-success);\n }\n\n .chip-warning {\n background-color: var(--color-warning);\n color: var(--color-on-warning);\n }\n\n .chip-error {\n background-color: var(--color-error);\n color: var(--color-on-error);\n }\n\n .chip-info {\n background-color: var(--color-info);\n color: var(--color-on-info);\n }\n\n .chip-selected {\n background-color: var(--color-primary);\n color: var(--color-on-primary);\n }\n\n :host([disabled]) .chip {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n }\n\n .chip-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1rem;\n height: 1rem;\n }\n\n .chip-delete {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1rem;\n height: 1rem;\n margin-left: 0.25rem;\n margin-right: -0.25rem;\n border-radius: 50%;\n cursor: pointer;\n opacity: 0.7;\n transition: opacity 150ms ease;\n }\n\n .chip-delete:hover {\n opacity: 1;\n }\n\n .chip-delete svg {\n width: 0.75rem;\n height: 0.75rem;\n }\n`;\n\nexport class ElDmChip extends BaseElement {\n static properties = {\n variant: { type: String, reflect: true, default: 'filled' },\n color: { type: String, reflect: true },\n size: { type: String, reflect: true },\n deletable: { type: Boolean, reflect: true },\n selected: { type: Boolean, reflect: true },\n disabled: { type: Boolean, reflect: true },\n };\n\n declare variant: ChipVariant;\n declare color: ChipColor;\n declare size: ChipSize;\n declare deletable: boolean;\n declare selected: boolean;\n declare disabled: boolean;\n\n constructor() {\n super();\n this.attachStyles(styles);\n }\n\n private _handleDelete(event: Event): void {\n event.stopPropagation();\n if (!this.disabled) {\n this.emit('delete');\n }\n }\n\n private _handleClick(): void {\n if (!this.disabled) {\n this.emit('click');\n }\n }\n\n private _getChipClasses(): string {\n const classes = ['chip'];\n\n if (this.variant && VARIANT_CLASSES[this.variant]) {\n classes.push(VARIANT_CLASSES[this.variant]);\n }\n\n if (this.color && COLOR_CLASSES[this.color]) {\n classes.push(COLOR_CLASSES[this.color]);\n }\n\n if (this.size && SIZE_CLASSES[this.size]) {\n classes.push(SIZE_CLASSES[this.size]);\n }\n\n if (this.selected) {\n classes.push('chip-selected');\n }\n\n return classes.join(' ');\n }\n\n render(): string {\n const chipClasses = this._getChipClasses();\n const deleteIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\" clip-rule=\"evenodd\" /></svg>`;\n\n return `\n <span class=\"${chipClasses}\" part=\"chip\" role=\"button\" tabindex=\"0\">\n <span class=\"chip-icon\" part=\"icon\">\n <slot name=\"icon\"></slot>\n </span>\n <slot></slot>\n ${this.deletable ? `<span class=\"chip-delete\" part=\"delete\">${deleteIcon}</span>` : ''}\n </span>\n `;\n }\n\n update(): void {\n super.update();\n\n const chip = this.shadowRoot?.querySelector('.chip');\n chip?.addEventListener('click', this._handleClick.bind(this));\n\n const deleteBtn = this.shadowRoot?.querySelector('.chip-delete');\n deleteBtn?.addEventListener('click', this._handleDelete.bind(this));\n }\n}\n",
6
+ "/**\n * @duskmoon-dev/el-chip\n *\n * DuskMoon Chip custom element\n */\n\nimport { ElDmChip } from './el-dm-chip.js';\n\nexport { ElDmChip };\nexport type { ChipVariant, ChipColor, ChipSize } from './el-dm-chip.js';\n\n/**\n * Register the el-dm-chip custom element\n *\n * @example\n * ```ts\n * import { register } from '@duskmoon-dev/el-chip';\n * register();\n * ```\n */\nexport function register(): void {\n if (!customElements.get('el-dm-chip')) {\n customElements.define('el-dm-chip', ElDmChip);\n }\n}\n"
7
+ ],
8
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BiC,IAAjC;AAC+B,IAA/B;AAEA,IAAM,kBAA0C;AAAA,EAC9C,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,MAAM;AACR;AAEA,IAAM,gBAAwC;AAAA,EAC5C,SAAS;AAAA,EACT,WAAW;AAAA,EACX,UAAU;AAAA,EACV,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AACR;AAEA,IAAM,eAAuC;AAAA,EAC3C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAcA,IAAM,aAAa,gBAAQ,QAAQ,4BAA4B,EAAE,EAAE,QAAQ,UAAU,EAAE;AAEvF,IAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuHG,MAAM,iBAAiB,2BAAY;AAAA,SACjC,aAAa;AAAA,IAClB,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM,SAAS,SAAS;AAAA,IAC1D,OAAO,EAAE,MAAM,QAAQ,SAAS,KAAK;AAAA,IACrC,MAAM,EAAE,MAAM,QAAQ,SAAS,KAAK;AAAA,IACpC,WAAW,EAAE,MAAM,SAAS,SAAS,KAAK;AAAA,IAC1C,UAAU,EAAE,MAAM,SAAS,SAAS,KAAK;AAAA,IACzC,UAAU,EAAE,MAAM,SAAS,SAAS,KAAK;AAAA,EAC3C;AAAA,EASA,WAAW,GAAG;AAAA,IACZ,MAAM;AAAA,IACN,KAAK,aAAa,MAAM;AAAA;AAAA,EAGlB,aAAa,CAAC,OAAoB;AAAA,IACxC,MAAM,gBAAgB;AAAA,IACtB,IAAI,CAAC,KAAK,UAAU;AAAA,MAClB,KAAK,KAAK,QAAQ;AAAA,IACpB;AAAA;AAAA,EAGM,YAAY,GAAS;AAAA,IAC3B,IAAI,CAAC,KAAK,UAAU;AAAA,MAClB,KAAK,KAAK,OAAO;AAAA,IACnB;AAAA;AAAA,EAGM,eAAe,GAAW;AAAA,IAChC,MAAM,UAAU,CAAC,MAAM;AAAA,IAEvB,IAAI,KAAK,WAAW,gBAAgB,KAAK,UAAU;AAAA,MACjD,QAAQ,KAAK,gBAAgB,KAAK,QAAQ;AAAA,IAC5C;AAAA,IAEA,IAAI,KAAK,SAAS,cAAc,KAAK,QAAQ;AAAA,MAC3C,QAAQ,KAAK,cAAc,KAAK,MAAM;AAAA,IACxC;AAAA,IAEA,IAAI,KAAK,QAAQ,aAAa,KAAK,OAAO;AAAA,MACxC,QAAQ,KAAK,aAAa,KAAK,KAAK;AAAA,IACtC;AAAA,IAEA,IAAI,KAAK,UAAU;AAAA,MACjB,QAAQ,KAAK,eAAe;AAAA,IAC9B;AAAA,IAEA,OAAO,QAAQ,KAAK,GAAG;AAAA;AAAA,EAGzB,MAAM,GAAW;AAAA,IACf,MAAM,cAAc,KAAK,gBAAgB;AAAA,IACzC,MAAM,aAAa;AAAA,IAEnB,OAAO;AAAA,qBACU;AAAA;AAAA;AAAA;AAAA;AAAA,UAKX,KAAK,YAAY,2CAA2C,sBAAsB;AAAA;AAAA;AAAA;AAAA,EAK1F,MAAM,GAAS;AAAA,IACb,MAAM,OAAO;AAAA,IAEb,MAAM,OAAO,KAAK,YAAY,cAAc,OAAO;AAAA,IACnD,MAAM,iBAAiB,SAAS,KAAK,aAAa,KAAK,IAAI,CAAC;AAAA,IAE5D,MAAM,YAAY,KAAK,YAAY,cAAc,cAAc;AAAA,IAC/D,WAAW,iBAAiB,SAAS,KAAK,cAAc,KAAK,IAAI,CAAC;AAAA;AAEtE;;;AC/PO,SAAS,QAAQ,GAAS;AAAA,EAC/B,IAAI,CAAC,eAAe,IAAI,YAAY,GAAG;AAAA,IACrC,eAAe,OAAO,cAAc,QAAQ;AAAA,EAC9C;AAAA;",
9
+ "debugId": "EBFE8B70395E5FB964756E2164756E21",
10
+ "names": []
11
+ }
package/dist/cjs/register.js ADDED
@@ -0,0 +1,262 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __getOwnPropNames = Object.getOwnPropertyNames;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
5
+ var __moduleCache = /* @__PURE__ */ new WeakMap;
6
+ var __toCommonJS = (from) => {
7
+ var entry = __moduleCache.get(from), desc;
8
+ if (entry)
9
+ return entry;
10
+ entry = __defProp({}, "__esModule", { value: true });
11
+ if (from && typeof from === "object" || typeof from === "function")
12
+ __getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp(entry, key, {
13
+ get: () => from[key],
14
+ enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
15
+ }));
16
+ __moduleCache.set(from, entry);
17
+ return entry;
18
+ };
19
+ var __export = (target, all) => {
20
+ for (var name in all)
21
+ __defProp(target, name, {
22
+ get: all[name],
23
+ enumerable: true,
24
+ configurable: true,
25
+ set: (newValue) => all[name] = () => newValue
26
+ });
27
+ };
28
+
29
+ // src/index.ts
30
+ var exports_src = {};
31
+ __export(exports_src, {
32
+ register: () => register,
33
+ ElDmChip: () => ElDmChip
34
+ });
35
+ module.exports = __toCommonJS(exports_src);
36
+
37
+ // src/el-dm-chip.ts
38
+ var import_el_core = require("@duskmoon-dev/el-core");
39
+ var import_chip = require("@duskmoon-dev/core/components/chip");
40
+ var VARIANT_CLASSES = {
41
+ filled: "",
42
+ outlined: "chip-outlined",
43
+ soft: "chip-soft"
44
+ };
45
+ var COLOR_CLASSES = {
46
+ primary: "chip-primary",
47
+ secondary: "chip-secondary",
48
+ tertiary: "chip-tertiary",
49
+ success: "chip-success",
50
+ warning: "chip-warning",
51
+ error: "chip-error",
52
+ info: "chip-info"
53
+ };
54
+ var SIZE_CLASSES = {
55
+ sm: "chip-sm",
56
+ md: "",
57
+ lg: "chip-lg"
58
+ };
59
+ var coreStyles = import_chip.css.replace(/@layer\s+components\s*\{/, "").replace(/\}\s*$/, "");
60
+ var styles = import_el_core.css`
61
+ :host {
62
+ display: inline-flex;
63
+ vertical-align: middle;
64
+ }
65
+
66
+ :host([hidden]) {
67
+ display: none !important;
68
+ }
69
+
70
+ ${coreStyles}
71
+
72
+ .chip {
73
+ font-family: inherit;
74
+ display: inline-flex;
75
+ align-items: center;
76
+ gap: 0.375rem;
77
+ padding: 0.25rem 0.75rem;
78
+ border-radius: 9999px;
79
+ font-size: 0.875rem;
80
+ line-height: 1.25rem;
81
+ cursor: pointer;
82
+ transition: all 150ms ease;
83
+ background-color: var(--color-surface-variant);
84
+ color: var(--color-on-surface);
85
+ border: 1px solid transparent;
86
+ }
87
+
88
+ .chip:hover {
89
+ background-color: var(--color-surface-container);
90
+ }
91
+
92
+ .chip-sm {
93
+ padding: 0.125rem 0.5rem;
94
+ font-size: 0.75rem;
95
+ }
96
+
97
+ .chip-lg {
98
+ padding: 0.375rem 1rem;
99
+ font-size: 1rem;
100
+ }
101
+
102
+ .chip-outlined {
103
+ background-color: transparent;
104
+ border-color: var(--color-outline);
105
+ }
106
+
107
+ .chip-outlined:hover {
108
+ background-color: var(--color-surface-variant);
109
+ }
110
+
111
+ .chip-primary {
112
+ background-color: var(--color-primary);
113
+ color: var(--color-on-primary);
114
+ }
115
+
116
+ .chip-secondary {
117
+ background-color: var(--color-secondary);
118
+ color: var(--color-on-secondary);
119
+ }
120
+
121
+ .chip-tertiary {
122
+ background-color: var(--color-tertiary);
123
+ color: var(--color-on-tertiary);
124
+ }
125
+
126
+ .chip-success {
127
+ background-color: var(--color-success);
128
+ color: var(--color-on-success);
129
+ }
130
+
131
+ .chip-warning {
132
+ background-color: var(--color-warning);
133
+ color: var(--color-on-warning);
134
+ }
135
+
136
+ .chip-error {
137
+ background-color: var(--color-error);
138
+ color: var(--color-on-error);
139
+ }
140
+
141
+ .chip-info {
142
+ background-color: var(--color-info);
143
+ color: var(--color-on-info);
144
+ }
145
+
146
+ .chip-selected {
147
+ background-color: var(--color-primary);
148
+ color: var(--color-on-primary);
149
+ }
150
+
151
+ :host([disabled]) .chip {
152
+ opacity: 0.5;
153
+ cursor: not-allowed;
154
+ pointer-events: none;
155
+ }
156
+
157
+ .chip-icon {
158
+ display: flex;
159
+ align-items: center;
160
+ justify-content: center;
161
+ width: 1rem;
162
+ height: 1rem;
163
+ }
164
+
165
+ .chip-delete {
166
+ display: flex;
167
+ align-items: center;
168
+ justify-content: center;
169
+ width: 1rem;
170
+ height: 1rem;
171
+ margin-left: 0.25rem;
172
+ margin-right: -0.25rem;
173
+ border-radius: 50%;
174
+ cursor: pointer;
175
+ opacity: 0.7;
176
+ transition: opacity 150ms ease;
177
+ }
178
+
179
+ .chip-delete:hover {
180
+ opacity: 1;
181
+ }
182
+
183
+ .chip-delete svg {
184
+ width: 0.75rem;
185
+ height: 0.75rem;
186
+ }
187
+ `;
188
+
189
+ class ElDmChip extends import_el_core.BaseElement {
190
+ static properties = {
191
+ variant: { type: String, reflect: true, default: "filled" },
192
+ color: { type: String, reflect: true },
193
+ size: { type: String, reflect: true },
194
+ deletable: { type: Boolean, reflect: true },
195
+ selected: { type: Boolean, reflect: true },
196
+ disabled: { type: Boolean, reflect: true }
197
+ };
198
+ constructor() {
199
+ super();
200
+ this.attachStyles(styles);
201
+ }
202
+ _handleDelete(event) {
203
+ event.stopPropagation();
204
+ if (!this.disabled) {
205
+ this.emit("delete");
206
+ }
207
+ }
208
+ _handleClick() {
209
+ if (!this.disabled) {
210
+ this.emit("click");
211
+ }
212
+ }
213
+ _getChipClasses() {
214
+ const classes = ["chip"];
215
+ if (this.variant && VARIANT_CLASSES[this.variant]) {
216
+ classes.push(VARIANT_CLASSES[this.variant]);
217
+ }
218
+ if (this.color && COLOR_CLASSES[this.color]) {
219
+ classes.push(COLOR_CLASSES[this.color]);
220
+ }
221
+ if (this.size && SIZE_CLASSES[this.size]) {
222
+ classes.push(SIZE_CLASSES[this.size]);
223
+ }
224
+ if (this.selected) {
225
+ classes.push("chip-selected");
226
+ }
227
+ return classes.join(" ");
228
+ }
229
+ render() {
230
+ const chipClasses = this._getChipClasses();
231
+ const deleteIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>`;
232
+ return `
233
+ <span class="${chipClasses}" part="chip" role="button" tabindex="0">
234
+ <span class="chip-icon" part="icon">
235
+ <slot name="icon"></slot>
236
+ </span>
237
+ <slot></slot>
238
+ ${this.deletable ? `<span class="chip-delete" part="delete">${deleteIcon}</span>` : ""}
239
+ </span>
240
+ `;
241
+ }
242
+ update() {
243
+ super.update();
244
+ const chip = this.shadowRoot?.querySelector(".chip");
245
+ chip?.addEventListener("click", this._handleClick.bind(this));
246
+ const deleteBtn = this.shadowRoot?.querySelector(".chip-delete");
247
+ deleteBtn?.addEventListener("click", this._handleDelete.bind(this));
248
+ }
249
+ }
250
+
251
+ // src/index.ts
252
+ function register() {
253
+ if (!customElements.get("el-dm-chip")) {
254
+ customElements.define("el-dm-chip", ElDmChip);
255
+ }
256
+ }
257
+
258
+ // src/register.ts
259
+ register();
260
+
261
+ //# debugId=90FECD3701085DFA64756E2164756E21
262
+ //# sourceMappingURL=register.js.map
package/dist/cjs/register.js.map ADDED
@@ -0,0 +1,12 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/el-dm-chip.ts", "../../src/index.ts", "../../src/register.ts"],
4
+ "sourcesContent": [
5
+ "/**\n * DuskMoon Chip Element\n *\n * A chip component for displaying tags, filters, or selections.\n * Uses styles from @duskmoon-dev/core for consistent theming.\n *\n * @element el-dm-chip\n *\n * @attr {string} variant - Chip variant: filled, outlined, soft\n * @attr {string} color - Chip color: primary, secondary, tertiary, success, warning, error, info\n * @attr {string} size - Chip size: sm, md, lg\n * @attr {boolean} deletable - Whether the chip shows a delete button\n * @attr {boolean} selected - Whether the chip is in selected state\n * @attr {boolean} disabled - Whether the chip is disabled\n *\n * @slot - Default slot for chip content\n * @slot icon - Slot for leading icon\n *\n * @csspart chip - The chip container\n * @csspart icon - The icon container\n * @csspart delete - The delete button\n *\n * @fires delete - Fired when delete button is clicked\n * @fires click - Fired when chip is clicked\n */\n\nimport { BaseElement, css } from '@duskmoon-dev/el-core';\nimport { css as chipCSS } from '@duskmoon-dev/core/components/chip';\n\nconst VARIANT_CLASSES: Record<string, string> = {\n filled: '',\n outlined: 'chip-outlined',\n soft: 'chip-soft',\n};\n\nconst COLOR_CLASSES: Record<string, string> = {\n primary: 'chip-primary',\n secondary: 'chip-secondary',\n tertiary: 'chip-tertiary',\n success: 'chip-success',\n warning: 'chip-warning',\n error: 'chip-error',\n info: 'chip-info',\n};\n\nconst SIZE_CLASSES: Record<string, string> = {\n sm: 'chip-sm',\n md: '',\n lg: 'chip-lg',\n};\n\nexport type ChipVariant = 'filled' | 'outlined' | 'soft';\nexport type ChipColor =\n | 'primary'\n | 'secondary'\n | 'tertiary'\n | 'success'\n | 'warning'\n | 'error'\n | 'info';\nexport type ChipSize = 'sm' | 'md' | 'lg';\n\n// Strip @layer wrapper for Shadow DOM compatibility\nconst coreStyles = chipCSS.replace(/@layer\\s+components\\s*\\{/, '').replace(/\\}\\s*$/, '');\n\nconst styles = css`\n :host {\n display: inline-flex;\n vertical-align: middle;\n }\n\n :host([hidden]) {\n display: none !important;\n }\n\n ${coreStyles}\n\n .chip {\n font-family: inherit;\n display: inline-flex;\n align-items: center;\n gap: 0.375rem;\n padding: 0.25rem 0.75rem;\n border-radius: 9999px;\n font-size: 0.875rem;\n line-height: 1.25rem;\n cursor: pointer;\n transition: all 150ms ease;\n background-color: var(--color-surface-variant);\n color: var(--color-on-surface);\n border: 1px solid transparent;\n }\n\n .chip:hover {\n background-color: var(--color-surface-container);\n }\n\n .chip-sm {\n padding: 0.125rem 0.5rem;\n font-size: 0.75rem;\n }\n\n .chip-lg {\n padding: 0.375rem 1rem;\n font-size: 1rem;\n }\n\n .chip-outlined {\n background-color: transparent;\n border-color: var(--color-outline);\n }\n\n .chip-outlined:hover {\n background-color: var(--color-surface-variant);\n }\n\n .chip-primary {\n background-color: var(--color-primary);\n color: var(--color-on-primary);\n }\n\n .chip-secondary {\n background-color: var(--color-secondary);\n color: var(--color-on-secondary);\n }\n\n .chip-tertiary {\n background-color: var(--color-tertiary);\n color: var(--color-on-tertiary);\n }\n\n .chip-success {\n background-color: var(--color-success);\n color: var(--color-on-success);\n }\n\n .chip-warning {\n background-color: var(--color-warning);\n color: var(--color-on-warning);\n }\n\n .chip-error {\n background-color: var(--color-error);\n color: var(--color-on-error);\n }\n\n .chip-info {\n background-color: var(--color-info);\n color: var(--color-on-info);\n }\n\n .chip-selected {\n background-color: var(--color-primary);\n color: var(--color-on-primary);\n }\n\n :host([disabled]) .chip {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n }\n\n .chip-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1rem;\n height: 1rem;\n }\n\n .chip-delete {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1rem;\n height: 1rem;\n margin-left: 0.25rem;\n margin-right: -0.25rem;\n border-radius: 50%;\n cursor: pointer;\n opacity: 0.7;\n transition: opacity 150ms ease;\n }\n\n .chip-delete:hover {\n opacity: 1;\n }\n\n .chip-delete svg {\n width: 0.75rem;\n height: 0.75rem;\n }\n`;\n\nexport class ElDmChip extends BaseElement {\n static properties = {\n variant: { type: String, reflect: true, default: 'filled' },\n color: { type: String, reflect: true },\n size: { type: String, reflect: true },\n deletable: { type: Boolean, reflect: true },\n selected: { type: Boolean, reflect: true },\n disabled: { type: Boolean, reflect: true },\n };\n\n declare variant: ChipVariant;\n declare color: ChipColor;\n declare size: ChipSize;\n declare deletable: boolean;\n declare selected: boolean;\n declare disabled: boolean;\n\n constructor() {\n super();\n this.attachStyles(styles);\n }\n\n private _handleDelete(event: Event): void {\n event.stopPropagation();\n if (!this.disabled) {\n this.emit('delete');\n }\n }\n\n private _handleClick(): void {\n if (!this.disabled) {\n this.emit('click');\n }\n }\n\n private _getChipClasses(): string {\n const classes = ['chip'];\n\n if (this.variant && VARIANT_CLASSES[this.variant]) {\n classes.push(VARIANT_CLASSES[this.variant]);\n }\n\n if (this.color && COLOR_CLASSES[this.color]) {\n classes.push(COLOR_CLASSES[this.color]);\n }\n\n if (this.size && SIZE_CLASSES[this.size]) {\n classes.push(SIZE_CLASSES[this.size]);\n }\n\n if (this.selected) {\n classes.push('chip-selected');\n }\n\n return classes.join(' ');\n }\n\n render(): string {\n const chipClasses = this._getChipClasses();\n const deleteIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\" clip-rule=\"evenodd\" /></svg>`;\n\n return `\n <span class=\"${chipClasses}\" part=\"chip\" role=\"button\" tabindex=\"0\">\n <span class=\"chip-icon\" part=\"icon\">\n <slot name=\"icon\"></slot>\n </span>\n <slot></slot>\n ${this.deletable ? `<span class=\"chip-delete\" part=\"delete\">${deleteIcon}</span>` : ''}\n </span>\n `;\n }\n\n update(): void {\n super.update();\n\n const chip = this.shadowRoot?.querySelector('.chip');\n chip?.addEventListener('click', this._handleClick.bind(this));\n\n const deleteBtn = this.shadowRoot?.querySelector('.chip-delete');\n deleteBtn?.addEventListener('click', this._handleDelete.bind(this));\n }\n}\n",
6
+ "/**\n * @duskmoon-dev/el-chip\n *\n * DuskMoon Chip custom element\n */\n\nimport { ElDmChip } from './el-dm-chip.js';\n\nexport { ElDmChip };\nexport type { ChipVariant, ChipColor, ChipSize } from './el-dm-chip.js';\n\n/**\n * Register the el-dm-chip custom element\n *\n * @example\n * ```ts\n * import { register } from '@duskmoon-dev/el-chip';\n * register();\n * ```\n */\nexport function register(): void {\n if (!customElements.get('el-dm-chip')) {\n customElements.define('el-dm-chip', ElDmChip);\n }\n}\n",
7
+ "import { register } from './index.js';\nregister();\n"
8
+ ],
9
+ "mappings": "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",
10
+ "debugId": "90FECD3701085DFA64756E2164756E21",
11
+ "names": []
12
+ }