@logosphere-ui/core 0.0.0-alpha.38 → 0.0.0-alpha.40
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.
- package/AGENTS.md +49 -5
- package/dist/AGENTS.md +49 -5
- package/dist/atoms/Checkbox/checkbox.d.ts +11 -2
- package/dist/atoms/FormField/formfield.d.ts +2 -0
- package/dist/{badge-BJqUgXZD.js → badge-B0Bj-HAT.js} +20 -20
- package/dist/{badge-COTtd1jh.cjs → badge-DWkKpZTX.cjs} +1 -1
- package/dist/badge.cjs +1 -1
- package/dist/badge.js +1 -1
- package/dist/breadcrumb-BOuCLUJh.cjs +12 -0
- package/dist/breadcrumb-BeJqq-5C.js +41 -0
- package/dist/breadcrumb.cjs +1 -1
- package/dist/breadcrumb.js +1 -1
- package/dist/button-MBxtvVqn.cjs +10 -0
- package/dist/button-QWCkFTeJ.js +58 -0
- package/dist/button.cjs +1 -1
- package/dist/button.js +1 -1
- package/dist/{calendar-DtpJBtpq.cjs → calendar-DcDT4o-U.cjs} +1 -1
- package/dist/{calendar-B7bSuIt4.js → calendar-DsriSHZ4.js} +1 -1
- package/dist/calendar.cjs +1 -1
- package/dist/calendar.js +1 -1
- package/dist/{card-BD8FkSTi.cjs → card-BUWvno93.cjs} +1 -1
- package/dist/{card-CAAhjIjf.js → card-R_cKrdHK.js} +2 -2
- package/dist/card.cjs +1 -1
- package/dist/card.js +1 -1
- package/dist/chatbot-BPVC2wqM.cjs +183 -0
- package/dist/{chatbot-Cr6iOO7s.js → chatbot-yup4Nz00.js} +13 -13
- package/dist/chatbot.cjs +1 -1
- package/dist/chatbot.js +1 -1
- package/dist/checkbox-BAbPDN6x.cjs +53 -0
- package/dist/checkbox-CTfbav6M.js +152 -0
- package/dist/checkbox.cjs +1 -1
- package/dist/checkbox.js +1 -1
- package/dist/chip-group-BqYKZKmu.cjs +26 -0
- package/dist/chip-group-CC5RBhN_.js +89 -0
- package/dist/chip-group.cjs +1 -0
- package/dist/chip-group.js +4 -0
- package/dist/combobox-Bah9Akr-.cjs +113 -0
- package/dist/combobox-Nxhk75IH.js +460 -0
- package/dist/combobox.cjs +1 -1
- package/dist/combobox.js +1 -1
- package/dist/{datepicker-tJbIvNpy.js → datepicker-BExZseRQ.js} +58 -51
- package/dist/datepicker-BOQ13sIm.cjs +85 -0
- package/dist/datepicker.cjs +1 -1
- package/dist/datepicker.js +1 -1
- package/dist/{drawer-g6mHdpjF.cjs → drawer-DBrOkz0z.cjs} +1 -1
- package/dist/{drawer-CRB8UUAo.js → drawer-DHsESNFL.js} +2 -2
- package/dist/drawer.cjs +1 -1
- package/dist/drawer.js +1 -1
- package/dist/formfield-JXiv9mvJ.cjs +33 -0
- package/dist/{formfield-O327HYt0.js → formfield-ss2mFweu.js} +59 -52
- package/dist/formfield.cjs +1 -1
- package/dist/formfield.js +1 -1
- package/dist/icon.cjs +1 -0
- package/dist/icon.js +4 -0
- package/dist/index.cjs +7 -7
- package/dist/index.d.ts +2 -0
- package/dist/index.js +61 -58
- package/dist/index.umd.js +202 -171
- package/dist/input-D9lFcDHU.js +278 -0
- package/dist/input-Dg-jos9u.cjs +60 -0
- package/dist/input.cjs +1 -1
- package/dist/input.js +1 -1
- package/dist/left-menu.cjs +1 -1
- package/dist/left-menu.js +1 -1
- package/dist/{leftmenu-Cf2gC2J0.js → leftmenu-CMx2K5Ws.js} +4 -4
- package/dist/{leftmenu-D0sRExqr.cjs → leftmenu-DCfTelzi.cjs} +1 -1
- package/dist/modal-BJNCTlBX.cjs +84 -0
- package/dist/{modal-Cfa0imdF.js → modal-DNjURVZy.js} +3 -3
- package/dist/modal.cjs +1 -1
- package/dist/modal.js +1 -1
- package/dist/molecules/Chip/chip-group.d.ts +29 -0
- package/dist/molecules/Chip/index.d.ts +2 -0
- package/dist/molecules/Input/input.d.ts +17 -0
- package/dist/organisms/Combobox/combobox.d.ts +20 -0
- package/dist/organisms/DatePicker/datepicker.d.ts +2 -0
- package/dist/{pagination-DG56TV5n.js → pagination-B91sZD5E.js} +61 -61
- package/dist/pagination-Cnh-o-Nq.cjs +169 -0
- package/dist/pagination.cjs +1 -1
- package/dist/pagination.js +1 -1
- package/dist/{popover-BSfKsQni.js → popover-CSgoaROl.js} +1 -1
- package/dist/popover-DwDyLpQq.cjs +30 -0
- package/dist/popover.cjs +1 -1
- package/dist/popover.js +1 -1
- package/dist/shared/icons/index.d.ts +1 -0
- package/dist/{switch-8RGGesy5.cjs → switch-Do6SCkPJ.cjs} +2 -2
- package/dist/{switch-DNqPqH-R.js → switch-uYVuohJ-.js} +25 -21
- package/dist/switch.cjs +1 -1
- package/dist/switch.js +1 -1
- package/dist/tab-BvRVHpWs.cjs +41 -0
- package/dist/{tab-CuBCFGoO.js → tab-Byh4UgFB.js} +1 -1
- package/dist/tab.cjs +1 -1
- package/dist/tab.js +1 -1
- package/dist/{text-area-coWx4Xn-.js → text-area-CHkrGi3S.js} +16 -12
- package/dist/text-area-DvOiCcKP.cjs +51 -0
- package/dist/textarea.cjs +1 -1
- package/dist/textarea.js +1 -1
- package/dist/{timepicker-rNyKCfN3.js → timepicker-CAat7fcK.js} +6 -2
- package/dist/{timepicker-WxA2Uo66.cjs → timepicker-Co7lW5Rp.cjs} +1 -1
- package/dist/timepicker.cjs +1 -1
- package/dist/timepicker.js +1 -1
- package/dist/{toast-container-Cb0MduXt.js → toast-container-DxFwLT5S.js} +3 -3
- package/dist/{toast-container-B9E_mVk6.cjs → toast-container-aY1lGjRi.cjs} +1 -1
- package/dist/toast.cjs +1 -1
- package/dist/toast.js +1 -1
- package/dist/tree-menu-Dqy14_m2.cjs +47 -0
- package/dist/{tree-menu-CufITiv_.js → tree-menu-Psek8QB9.js} +2 -2
- package/dist/tree-menu.cjs +1 -1
- package/dist/tree-menu.js +1 -1
- package/dist/ui-icon-Cd5YhUeQ.cjs +22 -0
- package/dist/ui-icon-Ckljc9hg.js +74 -0
- package/package.json +11 -1
- package/dist/breadcrumb-BB61Xt0s.js +0 -41
- package/dist/breadcrumb-Cop-B1J7.cjs +0 -12
- package/dist/button-DRZ4sG4T.cjs +0 -10
- package/dist/button-Uu9oaieg.js +0 -58
- package/dist/chatbot-Dl6P98Jq.cjs +0 -183
- package/dist/checkbox-CX0LgsWP.js +0 -148
- package/dist/checkbox-DpbKHANK.cjs +0 -53
- package/dist/combobox-CFF30L-n.js +0 -393
- package/dist/combobox-s7NFPAd3.cjs +0 -108
- package/dist/datepicker-BCNJROwD.cjs +0 -85
- package/dist/formfield-CRcyUMvQ.cjs +0 -33
- package/dist/input-BUX_2G5m.js +0 -257
- package/dist/input-Tkm7VBBl.cjs +0 -59
- package/dist/modal-DFnpqdWX.cjs +0 -84
- package/dist/pagination-HyX0EAZr.cjs +0 -169
- package/dist/popover-DhEvLuOo.cjs +0 -30
- package/dist/tab-CDMcFHvP.cjs +0 -41
- package/dist/text-area-DCBCDtJw.cjs +0 -51
- package/dist/tree-menu-DuJuy5pp.cjs +0 -47
- package/dist/ui-icon-Ctn4nGFa.js +0 -70
- package/dist/ui-icon-jKyMV1zp.cjs +0 -22
package/AGENTS.md
CHANGED
|
@@ -36,6 +36,45 @@ import "@logosphere-ui/core/input";
|
|
|
36
36
|
| **Hata/yardım** | `error="..."` ve `helper="..."` prop'ları tüm form bileşenlerinde mevcuttur |
|
|
37
37
|
| **Disabled/Readonly** | Tüm form bileşenlerinde `disabled` ve `readonly` boolean prop'ları bulunur |
|
|
38
38
|
| **Event dinleme** | `element.addEventListener("change", handler)` veya inline `@change=${handler}` (Lit) |
|
|
39
|
+
| **Birleşik event** | Form bileşenleri (Input, Textarea, Checkbox, Switch, Combobox, DatePicker, TimePicker) ek olarak **`lgsChange`** yayınlar → `detail: { value?, checked?, selected? }`. Bileşene özel eski event'ler aynen korunur |
|
|
40
|
+
|
|
41
|
+
---
|
|
42
|
+
|
|
43
|
+
## Tema: Bileşen Token Katmanı
|
|
44
|
+
|
|
45
|
+
Global token'ları (`--color-secondary`, `--spacing-4` vb.) `:root`'ta ezmek **tüm** bileşenleri etkiler. Tek bir bileşeni tema'lamak için aşağıdaki bileşen token'larını kullanın — hepsi ilgili global token'a fallback yapar; hiçbirini tanımlamazsanız davranış değişmez.
|
|
46
|
+
|
|
47
|
+
```css
|
|
48
|
+
/* Örnek: sadece pagination'ı tema'la, diğer bileşenlere dokunma */
|
|
49
|
+
logosphere-pagination {
|
|
50
|
+
--pagination-color: #0a58ca;
|
|
51
|
+
--pagination-padding: 8px 12px;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
/* Örnek: eski tasarımın 36px form alanı */
|
|
55
|
+
logosphere-input { --formfield-min-height: 36px; --input-field-height: 20px; }
|
|
56
|
+
|
|
57
|
+
/* Örnek: focus'ta border rengi değişmesin */
|
|
58
|
+
logosphere-input { --formfield-border-color-focus: var(--color-border); }
|
|
59
|
+
|
|
60
|
+
/* Örnek: alan koyu, takvim popup'ı beyaz kalsın */
|
|
61
|
+
logosphere-datepicker { --color-body-bg: #1e1e1e; --datepicker-popup-bg: #ffffff; }
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
| Bileşen | Token | Fallback |
|
|
65
|
+
|---------|-------|----------|
|
|
66
|
+
| FormField | `--formfield-min-height` / `--formfield-min-height-large` | `32px` / `40px` |
|
|
67
|
+
| FormField | `--formfield-border-color` / `--formfield-border-color-focus` | `--color-border` / `--color-body-text` |
|
|
68
|
+
| FormField | `--formfield-border-radius`, `--formfield-border-{top,right,bottom,left}[-width]` | `--radius-base`, `1px solid` |
|
|
69
|
+
| Input | `--input-field-height` / `--input-field-height-large` | `16px` / `24px` |
|
|
70
|
+
| DatePicker | `--datepicker-popup-bg` / `--datepicker-popup-border-color` | `--color-body-bg` / `--color-border` |
|
|
71
|
+
| Pagination | `--pagination-color` / `--pagination-color-disabled` | `--color-secondary` / `--color-secondary-disabled` |
|
|
72
|
+
| Pagination | `--pagination-bg` / `--pagination-item-bg` / `--pagination-item-bg-hover` | `--color-body-bg` / `--color-body-bg` / `--color-body-bg-hover` |
|
|
73
|
+
| Pagination | `--pagination-active-bg` / `--pagination-active-color` | `--color-secondary` / `white` |
|
|
74
|
+
| Pagination | `--pagination-padding` | `--spacing-4 --spacing-6` (mobil: `--spacing-3 --spacing-4`) |
|
|
75
|
+
| Badge (default varyant) | `--badge-bg` / `--badge-color` | `--color-light-bg-2` / `--color-secondary` |
|
|
76
|
+
| Chatbot | `--chatbot-bg` / `--chatbot-color` | `--color-body-bg` / `--color-secondary` |
|
|
77
|
+
| Combobox | `--combobox-tag-bg` / `--combobox-tag-color` / `--combobox-clear-color` | `--color-light` / `--color-body-text` / `--color-secondary` |
|
|
39
78
|
|
|
40
79
|
---
|
|
41
80
|
|
|
@@ -127,6 +166,8 @@ Onay kutusu, toggle switch veya radio buton.
|
|
|
127
166
|
|
|
128
167
|
**Events:** `lgsChange` → `detail: { checked, indeterminate, value }`
|
|
129
168
|
|
|
169
|
+
> **Kontrollü kullanım:** `checked` property'sine yapılan her dış atama — değer öncekiyle aynı olsa bile — görsel state'i prop'a senkronlar. Parent bir seçimi reddederse (`lgsChange` sonrası `checked`'ı değişmeyen değerle yeniden atarsa) bileşen görsel olarak geri döner; iki radio'nun birden seçili kalması engellenir.
|
|
170
|
+
|
|
130
171
|
```html
|
|
131
172
|
<logosphere-checkbox label="Beni hatırla" value="remember"></logosphere-checkbox>
|
|
132
173
|
|
|
@@ -159,7 +200,7 @@ Bağımsız toggle switch.
|
|
|
159
200
|
| `disabled` | `boolean` | `false` | Devre dışı |
|
|
160
201
|
| `size` | `"sm" \| "md"` | `"md"` | Boyut |
|
|
161
202
|
|
|
162
|
-
**Events:** `change` → `detail: { checked }`
|
|
203
|
+
**Events:** `change` → `detail: { checked }`, `lgsChange` → `detail: { checked }`
|
|
163
204
|
|
|
164
205
|
```html
|
|
165
206
|
<logosphere-switch></logosphere-switch>
|
|
@@ -213,6 +254,9 @@ Metin girişi; maske, parola, temizle ve tüm formfield özellikleri.
|
|
|
213
254
|
| `placeholder` | `string` | `""` | Yer tutucu |
|
|
214
255
|
| `name` | `string` | `""` | Form adı |
|
|
215
256
|
| `mask` | `string` | `""` | Giriş maskesi: `0`=rakam, `a`=harf, `*`=rakam/harf, diğerleri literal. Örn: `"(000) 000-0000"`, `"00/00/0000"`, `"00:00"` |
|
|
257
|
+
| `showPasswordToggle` | `boolean` | `true` | `type="password"` iken göster/gizle butonunu render et (attribute: `show-password-toggle`). Şifrenin hiç gösterilmemesi gereken ekranlarda `false` verin |
|
|
258
|
+
| `suppressNativeValidation` | `boolean` | `false` | Tarayıcının yerel (dil bağımlı) `validationMessage`'ının iç hata olarak gösterilmesini kapatır (attribute: `suppress-native-validation`). Uygulama kendi hata metnini yönetiyorsa açın |
|
|
259
|
+
| `errorDisplay` | `"always" \| "on-invalid"` | `"always"` | Hata gösterim modu (attribute: `error-display`). `"on-invalid"`: hata yalnızca alan geçersizken görünür — blur/change'de doğrulanır, yazarken temizlenir (vaadin semantiği) |
|
|
216
260
|
| `label` | `string` | `""` | Etiket |
|
|
217
261
|
| `helper` | `string` | `""` | Yardım metni |
|
|
218
262
|
| `error` | `string` | `""` | Hata mesajı |
|
|
@@ -300,7 +344,7 @@ Metin girişi; maske, parola, temizle ve tüm formfield özellikleri.
|
|
|
300
344
|
| `size` | `"default" \| "large"` | `"default"` | Boyut |
|
|
301
345
|
| `variant` | `"default" \| "subtle"` | `"default"` | Stil |
|
|
302
346
|
|
|
303
|
-
**Events:** `input`, `change`, `clear`, `keydown`, `keyup`
|
|
347
|
+
**Events:** `input`, `change`, `clear`, `keydown`, `keyup`, `lgsChange` → `detail: { value }`
|
|
304
348
|
|
|
305
349
|
```html
|
|
306
350
|
<!-- Temel kullanım -->
|
|
@@ -429,7 +473,7 @@ Tetikleyici elemana konumlanmış açılır panel.
|
|
|
429
473
|
| `variant` | `"default" \| "subtle"` | `"default"` | Stil |
|
|
430
474
|
| `onChange` | `(value: string) => void` | — | Değişim callback'i (attribute değil) |
|
|
431
475
|
|
|
432
|
-
**Events:** `change` → `detail: { value }`, `clear`
|
|
476
|
+
**Events:** `change` → `detail: { value }`, `clear`, `lgsChange` → `detail: { value }`
|
|
433
477
|
|
|
434
478
|
```html
|
|
435
479
|
<!-- Temel kullanım -->
|
|
@@ -484,7 +528,7 @@ Seçim kutusu: tekli/çoklu seçim, filtreleme, tag desteği.
|
|
|
484
528
|
|
|
485
529
|
**Public Metotlar:** `selectedItems()` → seçili öğe dizisi, `isSelected(item)`, `setSelected(items[])`
|
|
486
530
|
|
|
487
|
-
**Events:** `selected` → `detail: { selected }`, `change` → `detail: { value }`
|
|
531
|
+
**Events:** `selected` → `detail: { selected }`, `change` → `detail: { value }`, `lgsChange` → `detail: { value, selected }` (value = primitive `optionValue` değer(ler)i)
|
|
488
532
|
|
|
489
533
|
```html
|
|
490
534
|
<logosphere-combobox
|
|
@@ -541,7 +585,7 @@ Tarih seçici; manuel yazma ve takvim popup'ı. `dayjs` tabanlı.
|
|
|
541
585
|
| `onChange` | `(value: string) => void` | — | Değişim callback'i |
|
|
542
586
|
| `onRangeChange` | `(range) => void` | — | Aralık callback'i |
|
|
543
587
|
|
|
544
|
-
**Events:** `change` → `detail: { value }`, `rangeChange` → `detail: { start, end }`
|
|
588
|
+
**Events:** `change` → `detail: { value }`, `rangeChange` → `detail: { start, end }`, `lgsChange` → `detail: { value }`
|
|
545
589
|
|
|
546
590
|
```html
|
|
547
591
|
<!-- Temel kullanım -->
|
package/dist/AGENTS.md
CHANGED
|
@@ -36,6 +36,45 @@ import "@logosphere-ui/core/input";
|
|
|
36
36
|
| **Hata/yardım** | `error="..."` ve `helper="..."` prop'ları tüm form bileşenlerinde mevcuttur |
|
|
37
37
|
| **Disabled/Readonly** | Tüm form bileşenlerinde `disabled` ve `readonly` boolean prop'ları bulunur |
|
|
38
38
|
| **Event dinleme** | `element.addEventListener("change", handler)` veya inline `@change=${handler}` (Lit) |
|
|
39
|
+
| **Birleşik event** | Form bileşenleri (Input, Textarea, Checkbox, Switch, Combobox, DatePicker, TimePicker) ek olarak **`lgsChange`** yayınlar → `detail: { value?, checked?, selected? }`. Bileşene özel eski event'ler aynen korunur |
|
|
40
|
+
|
|
41
|
+
---
|
|
42
|
+
|
|
43
|
+
## Tema: Bileşen Token Katmanı
|
|
44
|
+
|
|
45
|
+
Global token'ları (`--color-secondary`, `--spacing-4` vb.) `:root`'ta ezmek **tüm** bileşenleri etkiler. Tek bir bileşeni tema'lamak için aşağıdaki bileşen token'larını kullanın — hepsi ilgili global token'a fallback yapar; hiçbirini tanımlamazsanız davranış değişmez.
|
|
46
|
+
|
|
47
|
+
```css
|
|
48
|
+
/* Örnek: sadece pagination'ı tema'la, diğer bileşenlere dokunma */
|
|
49
|
+
logosphere-pagination {
|
|
50
|
+
--pagination-color: #0a58ca;
|
|
51
|
+
--pagination-padding: 8px 12px;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
/* Örnek: eski tasarımın 36px form alanı */
|
|
55
|
+
logosphere-input { --formfield-min-height: 36px; --input-field-height: 20px; }
|
|
56
|
+
|
|
57
|
+
/* Örnek: focus'ta border rengi değişmesin */
|
|
58
|
+
logosphere-input { --formfield-border-color-focus: var(--color-border); }
|
|
59
|
+
|
|
60
|
+
/* Örnek: alan koyu, takvim popup'ı beyaz kalsın */
|
|
61
|
+
logosphere-datepicker { --color-body-bg: #1e1e1e; --datepicker-popup-bg: #ffffff; }
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
| Bileşen | Token | Fallback |
|
|
65
|
+
|---------|-------|----------|
|
|
66
|
+
| FormField | `--formfield-min-height` / `--formfield-min-height-large` | `32px` / `40px` |
|
|
67
|
+
| FormField | `--formfield-border-color` / `--formfield-border-color-focus` | `--color-border` / `--color-body-text` |
|
|
68
|
+
| FormField | `--formfield-border-radius`, `--formfield-border-{top,right,bottom,left}[-width]` | `--radius-base`, `1px solid` |
|
|
69
|
+
| Input | `--input-field-height` / `--input-field-height-large` | `16px` / `24px` |
|
|
70
|
+
| DatePicker | `--datepicker-popup-bg` / `--datepicker-popup-border-color` | `--color-body-bg` / `--color-border` |
|
|
71
|
+
| Pagination | `--pagination-color` / `--pagination-color-disabled` | `--color-secondary` / `--color-secondary-disabled` |
|
|
72
|
+
| Pagination | `--pagination-bg` / `--pagination-item-bg` / `--pagination-item-bg-hover` | `--color-body-bg` / `--color-body-bg` / `--color-body-bg-hover` |
|
|
73
|
+
| Pagination | `--pagination-active-bg` / `--pagination-active-color` | `--color-secondary` / `white` |
|
|
74
|
+
| Pagination | `--pagination-padding` | `--spacing-4 --spacing-6` (mobil: `--spacing-3 --spacing-4`) |
|
|
75
|
+
| Badge (default varyant) | `--badge-bg` / `--badge-color` | `--color-light-bg-2` / `--color-secondary` |
|
|
76
|
+
| Chatbot | `--chatbot-bg` / `--chatbot-color` | `--color-body-bg` / `--color-secondary` |
|
|
77
|
+
| Combobox | `--combobox-tag-bg` / `--combobox-tag-color` / `--combobox-clear-color` | `--color-light` / `--color-body-text` / `--color-secondary` |
|
|
39
78
|
|
|
40
79
|
---
|
|
41
80
|
|
|
@@ -127,6 +166,8 @@ Onay kutusu, toggle switch veya radio buton.
|
|
|
127
166
|
|
|
128
167
|
**Events:** `lgsChange` → `detail: { checked, indeterminate, value }`
|
|
129
168
|
|
|
169
|
+
> **Kontrollü kullanım:** `checked` property'sine yapılan her dış atama — değer öncekiyle aynı olsa bile — görsel state'i prop'a senkronlar. Parent bir seçimi reddederse (`lgsChange` sonrası `checked`'ı değişmeyen değerle yeniden atarsa) bileşen görsel olarak geri döner; iki radio'nun birden seçili kalması engellenir.
|
|
170
|
+
|
|
130
171
|
```html
|
|
131
172
|
<logosphere-checkbox label="Beni hatırla" value="remember"></logosphere-checkbox>
|
|
132
173
|
|
|
@@ -159,7 +200,7 @@ Bağımsız toggle switch.
|
|
|
159
200
|
| `disabled` | `boolean` | `false` | Devre dışı |
|
|
160
201
|
| `size` | `"sm" \| "md"` | `"md"` | Boyut |
|
|
161
202
|
|
|
162
|
-
**Events:** `change` → `detail: { checked }`
|
|
203
|
+
**Events:** `change` → `detail: { checked }`, `lgsChange` → `detail: { checked }`
|
|
163
204
|
|
|
164
205
|
```html
|
|
165
206
|
<logosphere-switch></logosphere-switch>
|
|
@@ -213,6 +254,9 @@ Metin girişi; maske, parola, temizle ve tüm formfield özellikleri.
|
|
|
213
254
|
| `placeholder` | `string` | `""` | Yer tutucu |
|
|
214
255
|
| `name` | `string` | `""` | Form adı |
|
|
215
256
|
| `mask` | `string` | `""` | Giriş maskesi: `0`=rakam, `a`=harf, `*`=rakam/harf, diğerleri literal. Örn: `"(000) 000-0000"`, `"00/00/0000"`, `"00:00"` |
|
|
257
|
+
| `showPasswordToggle` | `boolean` | `true` | `type="password"` iken göster/gizle butonunu render et (attribute: `show-password-toggle`). Şifrenin hiç gösterilmemesi gereken ekranlarda `false` verin |
|
|
258
|
+
| `suppressNativeValidation` | `boolean` | `false` | Tarayıcının yerel (dil bağımlı) `validationMessage`'ının iç hata olarak gösterilmesini kapatır (attribute: `suppress-native-validation`). Uygulama kendi hata metnini yönetiyorsa açın |
|
|
259
|
+
| `errorDisplay` | `"always" \| "on-invalid"` | `"always"` | Hata gösterim modu (attribute: `error-display`). `"on-invalid"`: hata yalnızca alan geçersizken görünür — blur/change'de doğrulanır, yazarken temizlenir (vaadin semantiği) |
|
|
216
260
|
| `label` | `string` | `""` | Etiket |
|
|
217
261
|
| `helper` | `string` | `""` | Yardım metni |
|
|
218
262
|
| `error` | `string` | `""` | Hata mesajı |
|
|
@@ -300,7 +344,7 @@ Metin girişi; maske, parola, temizle ve tüm formfield özellikleri.
|
|
|
300
344
|
| `size` | `"default" \| "large"` | `"default"` | Boyut |
|
|
301
345
|
| `variant` | `"default" \| "subtle"` | `"default"` | Stil |
|
|
302
346
|
|
|
303
|
-
**Events:** `input`, `change`, `clear`, `keydown`, `keyup`
|
|
347
|
+
**Events:** `input`, `change`, `clear`, `keydown`, `keyup`, `lgsChange` → `detail: { value }`
|
|
304
348
|
|
|
305
349
|
```html
|
|
306
350
|
<!-- Temel kullanım -->
|
|
@@ -429,7 +473,7 @@ Tetikleyici elemana konumlanmış açılır panel.
|
|
|
429
473
|
| `variant` | `"default" \| "subtle"` | `"default"` | Stil |
|
|
430
474
|
| `onChange` | `(value: string) => void` | — | Değişim callback'i (attribute değil) |
|
|
431
475
|
|
|
432
|
-
**Events:** `change` → `detail: { value }`, `clear`
|
|
476
|
+
**Events:** `change` → `detail: { value }`, `clear`, `lgsChange` → `detail: { value }`
|
|
433
477
|
|
|
434
478
|
```html
|
|
435
479
|
<!-- Temel kullanım -->
|
|
@@ -484,7 +528,7 @@ Seçim kutusu: tekli/çoklu seçim, filtreleme, tag desteği.
|
|
|
484
528
|
|
|
485
529
|
**Public Metotlar:** `selectedItems()` → seçili öğe dizisi, `isSelected(item)`, `setSelected(items[])`
|
|
486
530
|
|
|
487
|
-
**Events:** `selected` → `detail: { selected }`, `change` → `detail: { value }`
|
|
531
|
+
**Events:** `selected` → `detail: { selected }`, `change` → `detail: { value }`, `lgsChange` → `detail: { value, selected }` (value = primitive `optionValue` değer(ler)i)
|
|
488
532
|
|
|
489
533
|
```html
|
|
490
534
|
<logosphere-combobox
|
|
@@ -541,7 +585,7 @@ Tarih seçici; manuel yazma ve takvim popup'ı. `dayjs` tabanlı.
|
|
|
541
585
|
| `onChange` | `(value: string) => void` | — | Değişim callback'i |
|
|
542
586
|
| `onRangeChange` | `(range) => void` | — | Aralık callback'i |
|
|
543
587
|
|
|
544
|
-
**Events:** `change` → `detail: { value }`, `rangeChange` → `detail: { start, end }`
|
|
588
|
+
**Events:** `change` → `detail: { value }`, `rangeChange` → `detail: { start, end }`, `lgsChange` → `detail: { value }`
|
|
545
589
|
|
|
546
590
|
```html
|
|
547
591
|
<!-- Temel kullanım -->
|
|
@@ -3,13 +3,22 @@ export declare class Checkbox extends LitElement {
|
|
|
3
3
|
static styles: import("lit").CSSResult[];
|
|
4
4
|
label: string;
|
|
5
5
|
value: string;
|
|
6
|
-
checked: boolean;
|
|
7
6
|
type: "checkbox" | "switch" | "radio";
|
|
8
7
|
disabled: boolean;
|
|
9
8
|
indeterminate: boolean;
|
|
10
9
|
private internalChecked;
|
|
11
10
|
private inputElement?;
|
|
12
|
-
|
|
11
|
+
private _checked;
|
|
12
|
+
/**
|
|
13
|
+
* Custom accessor: her dış atama — değer öncekiyle AYNI olsa bile — iç
|
|
14
|
+
* görsel state'i prop'a senkronlar. Lit'in standart accessor'ı aynı değeri
|
|
15
|
+
* dirty-check'te yuttuğu için, kontrollü kullanımda parent'ın "reddi"
|
|
16
|
+
* (checked'ı değişmeyen değerle yeniden ataması) görsele yansımıyordu:
|
|
17
|
+
* tıklama internalChecked'ı optimistik set eder, parent reddedince geri
|
|
18
|
+
* alınamazdı (örn. iki radio birden seçili kalırdı).
|
|
19
|
+
*/
|
|
20
|
+
get checked(): boolean;
|
|
21
|
+
set checked(value: boolean);
|
|
13
22
|
firstUpdated(): void;
|
|
14
23
|
updated(changedProps: Map<string, unknown>): void;
|
|
15
24
|
private setIndeterminate;
|
|
@@ -21,6 +21,7 @@ export declare class FormField extends LitElement {
|
|
|
21
21
|
private _hovered;
|
|
22
22
|
private _hasPrefix;
|
|
23
23
|
private _hasSuffix;
|
|
24
|
+
private _hasClear;
|
|
24
25
|
private handleSlotFocus;
|
|
25
26
|
private handleSlotBlur;
|
|
26
27
|
private handleMouseEnter;
|
|
@@ -28,6 +29,7 @@ export declare class FormField extends LitElement {
|
|
|
28
29
|
private handleContainerClick;
|
|
29
30
|
private handlePrefixSlotChange;
|
|
30
31
|
private handleSuffixSlotChange;
|
|
32
|
+
private handleClearSlotChange;
|
|
31
33
|
connectedCallback(): void;
|
|
32
34
|
firstUpdated(): void;
|
|
33
35
|
disconnectedCallback(): void;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { unsafeCSS as p, css as u, LitElement as b, nothing as d, html as g } from "lit";
|
|
2
|
-
import { property as
|
|
3
|
-
import "./ui-icon-
|
|
4
|
-
const f = ".badge{display:inline-flex;align-items:center;gap:var(--spacing-1);font-family:var(--font-family-base);font-size:11px;font-weight:var(--font-weight-medium);line-height:1rem;letter-spacing:-.11px;border-radius:var(--radius-base);white-space:nowrap;-webkit-user-select:none;user-select:none}.badge--default-size{min-height:24px;max-height:24px;padding:var(--spacing-0) var(--spacing-2)}.badge--small{min-height:16px;max-height:16px;padding:0 var(--spacing-2)}.badge--round{border-radius:var(--radius-full)}.badge--primary{background-color:var(--color-primary);color:var(--color-secondary-color, #ffffff)}.badge--default{background-color:var(--color-light-bg-2);color:var(--color-secondary)}.badge--warning{background-color:var( --color-warning-subtle);color:var(--color-warning-emphasis)}.badge--success{background-color:var(--color-success-subtle);color:var(--color-success-emphasis)}.badge--danger{background-color:var(--color-danger-subtle);color:var(--color-danger)}.badge--info{background-color:var(--color-info-subtle);color:var(--color-info-emphasis)}.badge--purple{background-color:var(--color-commercial-subtle);color:var(--color-commercial-emphasis)}.badge__close{display:inline-flex;align-items:center;justify-content:center;margin-left:var(--spacing-1);padding:0;background:none;border:none;cursor:pointer;color:inherit;opacity:.75;transition:opacity var(--transition-speed-fast) var(--transition-timing);line-height:1}.badge__close:hover{opacity:1}.badge__close:focus{outline:none;opacity:1}";
|
|
5
|
-
var
|
|
6
|
-
for (var o = i > 1 ? void 0 : i ?
|
|
7
|
-
(c = s[
|
|
8
|
-
return i && o &&
|
|
2
|
+
import { property as r, customElement as h } from "lit/decorators.js";
|
|
3
|
+
import "./ui-icon-Ckljc9hg.js";
|
|
4
|
+
const f = ":host{display:inline-block}.badge{display:inline-flex;align-items:center;gap:var(--spacing-1);font-family:var(--font-family-base);font-size:11px;font-weight:var(--font-weight-medium);line-height:1rem;letter-spacing:-.11px;border-radius:var(--radius-base);white-space:nowrap;-webkit-user-select:none;user-select:none}.badge--default-size{min-height:24px;max-height:24px;padding:var(--spacing-0) var(--spacing-2)}.badge--small{min-height:16px;max-height:16px;padding:0 var(--spacing-2)}.badge--round{border-radius:var(--radius-full)}.badge--primary{background-color:var(--color-primary);color:var(--color-secondary-color, #ffffff)}.badge--default{background-color:var(--badge-bg, var(--color-light-bg-2));color:var(--badge-color, var(--color-secondary))}.badge--warning{background-color:var( --color-warning-subtle);color:var(--color-warning-emphasis)}.badge--success{background-color:var(--color-success-subtle);color:var(--color-success-emphasis)}.badge--danger{background-color:var(--color-danger-subtle);color:var(--color-danger)}.badge--info{background-color:var(--color-info-subtle);color:var(--color-info-emphasis)}.badge--purple{background-color:var(--color-commercial-subtle);color:var(--color-commercial-emphasis)}.badge__close{display:inline-flex;align-items:center;justify-content:center;margin-left:var(--spacing-1);padding:0;background:none;border:none;cursor:pointer;color:inherit;opacity:.75;transition:opacity var(--transition-speed-fast) var(--transition-timing);line-height:1}.badge__close:hover{opacity:1}.badge__close:focus{outline:none;opacity:1}";
|
|
5
|
+
var v = Object.defineProperty, m = Object.getOwnPropertyDescriptor, a = (s, t, l, i) => {
|
|
6
|
+
for (var o = i > 1 ? void 0 : i ? m(t, l) : t, n = s.length - 1, c; n >= 0; n--)
|
|
7
|
+
(c = s[n]) && (o = (i ? c(t, l, o) : c(o)) || o);
|
|
8
|
+
return i && o && v(t, l, o), o;
|
|
9
9
|
};
|
|
10
10
|
let e = class extends b {
|
|
11
11
|
constructor() {
|
|
@@ -46,25 +46,25 @@ e.styles = [
|
|
|
46
46
|
${p(f)}
|
|
47
47
|
`
|
|
48
48
|
];
|
|
49
|
-
|
|
50
|
-
|
|
49
|
+
a([
|
|
50
|
+
r({ type: String })
|
|
51
51
|
], e.prototype, "variant", 2);
|
|
52
|
-
|
|
53
|
-
|
|
52
|
+
a([
|
|
53
|
+
r({ type: String })
|
|
54
54
|
], e.prototype, "size", 2);
|
|
55
|
-
|
|
56
|
-
|
|
55
|
+
a([
|
|
56
|
+
r({ type: String })
|
|
57
57
|
], e.prototype, "text", 2);
|
|
58
|
-
|
|
59
|
-
|
|
58
|
+
a([
|
|
59
|
+
r({ type: Boolean })
|
|
60
60
|
], e.prototype, "closeable", 2);
|
|
61
|
-
|
|
62
|
-
|
|
61
|
+
a([
|
|
62
|
+
r({ type: Boolean })
|
|
63
63
|
], e.prototype, "isRound", 2);
|
|
64
|
-
|
|
65
|
-
|
|
64
|
+
a([
|
|
65
|
+
r({ attribute: !1 })
|
|
66
66
|
], e.prototype, "onClose", 2);
|
|
67
|
-
e =
|
|
67
|
+
e = a([
|
|
68
68
|
h("logosphere-badge")
|
|
69
69
|
], e);
|
|
70
70
|
export {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const e=require("lit"),a=require("lit/decorators.js");require("./ui-icon-
|
|
1
|
+
"use strict";const e=require("lit"),a=require("lit/decorators.js");require("./ui-icon-Cd5YhUeQ.cjs");const g=":host{display:inline-block}.badge{display:inline-flex;align-items:center;gap:var(--spacing-1);font-family:var(--font-family-base);font-size:11px;font-weight:var(--font-weight-medium);line-height:1rem;letter-spacing:-.11px;border-radius:var(--radius-base);white-space:nowrap;-webkit-user-select:none;user-select:none}.badge--default-size{min-height:24px;max-height:24px;padding:var(--spacing-0) var(--spacing-2)}.badge--small{min-height:16px;max-height:16px;padding:0 var(--spacing-2)}.badge--round{border-radius:var(--radius-full)}.badge--primary{background-color:var(--color-primary);color:var(--color-secondary-color, #ffffff)}.badge--default{background-color:var(--badge-bg, var(--color-light-bg-2));color:var(--badge-color, var(--color-secondary))}.badge--warning{background-color:var( --color-warning-subtle);color:var(--color-warning-emphasis)}.badge--success{background-color:var(--color-success-subtle);color:var(--color-success-emphasis)}.badge--danger{background-color:var(--color-danger-subtle);color:var(--color-danger)}.badge--info{background-color:var(--color-info-subtle);color:var(--color-info-emphasis)}.badge--purple{background-color:var(--color-commercial-subtle);color:var(--color-commercial-emphasis)}.badge__close{display:inline-flex;align-items:center;justify-content:center;margin-left:var(--spacing-1);padding:0;background:none;border:none;cursor:pointer;color:inherit;opacity:.75;transition:opacity var(--transition-speed-fast) var(--transition-timing);line-height:1}.badge__close:hover{opacity:1}.badge__close:focus{outline:none;opacity:1}";var p=Object.defineProperty,d=Object.getOwnPropertyDescriptor,s=(i,o,n,t)=>{for(var r=t>1?void 0:t?d(o,n):o,l=i.length-1,c;l>=0;l--)(c=i[l])&&(r=(t?c(o,n,r):c(r))||r);return t&&r&&p(o,n,r),r};exports.LogosphereBadge=class extends e.LitElement{constructor(){super(...arguments),this.variant="default",this.size="default",this.text="",this.closeable=!1,this.isRound=!1}handleClose(){this.onClose&&this.onClose(),this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0}))}getBadgeClasses(){const o=["badge",`badge--${this.variant}`,this.size==="small"?"badge--small":"badge--default-size"];return this.isRound&&o.push("badge--round"),o.join(" ")}render(){return e.html`
|
|
2
2
|
<div class="${this.getBadgeClasses()}">
|
|
3
3
|
<slot></slot>
|
|
4
4
|
${this.text?e.html`<span>${this.text}</span>`:e.nothing}
|
package/dist/badge.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./badge-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./badge-DWkKpZTX.cjs");Object.defineProperty(exports,"LogosphereBadge",{enumerable:!0,get:()=>e.LogosphereBadge});
|
package/dist/badge.js
CHANGED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";const e=require("lit"),o=require("lit/decorators.js"),b=":host{display:block}.breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacing-2);font-family:var(--font-family-base);font-size:var(--font-size-sm);line-height:var(--line-height-normal);list-style:none;margin:0;padding:0}.breadcrumb__item{display:inline-flex;align-items:center;gap:var(--spacing-2)}.breadcrumb__link{color:var(--color-primary);text-decoration:none;font-weight:var(--font-weight-regular);transition:color var(--transition-speed-fast) var(--transition-timing),text-decoration var(--transition-speed-fast) var(--transition-timing)}.breadcrumb__link:hover{color:var(--color-primary-hover);text-decoration:underline}.breadcrumb__label{color:var(--color-tertiary);font-weight:var(--font-weight-regular)}.breadcrumb__label--active{color:var(--color-emphasis);font-weight:var(--font-weight-medium)}.breadcrumb__separator{color:var(--color-gray-400);-webkit-user-select:none;user-select:none;flex-shrink:0}";var m=Object.defineProperty,u=Object.getOwnPropertyDescriptor,c=(l,r,t,s)=>{for(var a=s>1?void 0:s?u(r,t):r,n=l.length-1,i;n>=0;n--)(i=l[n])&&(a=(s?i(r,t,a):i(a))||a);return s&&a&&m(r,t,a),a};exports.Breadcrumb=class extends e.LitElement{constructor(){super(...arguments),this.items=[]}render(){return e.html`
|
|
2
|
+
<nav>
|
|
3
|
+
<ol class="breadcrumb">
|
|
4
|
+
${this.items.map((r,t)=>e.html`
|
|
5
|
+
<li class="breadcrumb__item">
|
|
6
|
+
${r.href&&!r.active?e.html`<a href="${r.href}" class="breadcrumb__link">${r.label}</a>`:e.html`<span class="breadcrumb__label ${r.active?"breadcrumb__label--active":""}">${r.label}</span>`}
|
|
7
|
+
${t<this.items.length-1?e.html`<span class="breadcrumb__separator">/</span>`:""}
|
|
8
|
+
</li>
|
|
9
|
+
`)}
|
|
10
|
+
</ol>
|
|
11
|
+
</nav>
|
|
12
|
+
`}};exports.Breadcrumb.styles=[e.css`${e.unsafeCSS(b)}`];c([o.property({type:Array})],exports.Breadcrumb.prototype,"items",2);exports.Breadcrumb=c([o.customElement("logosphere-breadcrumb")],exports.Breadcrumb);
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { unsafeCSS as b, css as m, LitElement as p, html as t } from "lit";
|
|
2
|
+
import { property as v, customElement as u } from "lit/decorators.js";
|
|
3
|
+
const f = ":host{display:block}.breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacing-2);font-family:var(--font-family-base);font-size:var(--font-size-sm);line-height:var(--line-height-normal);list-style:none;margin:0;padding:0}.breadcrumb__item{display:inline-flex;align-items:center;gap:var(--spacing-2)}.breadcrumb__link{color:var(--color-primary);text-decoration:none;font-weight:var(--font-weight-regular);transition:color var(--transition-speed-fast) var(--transition-timing),text-decoration var(--transition-speed-fast) var(--transition-timing)}.breadcrumb__link:hover{color:var(--color-primary-hover);text-decoration:underline}.breadcrumb__label{color:var(--color-tertiary);font-weight:var(--font-weight-regular)}.breadcrumb__label--active{color:var(--color-emphasis);font-weight:var(--font-weight-medium)}.breadcrumb__separator{color:var(--color-gray-400);-webkit-user-select:none;user-select:none;flex-shrink:0}";
|
|
4
|
+
var d = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, c = (r, a, l, s) => {
|
|
5
|
+
for (var e = s > 1 ? void 0 : s ? _(a, l) : a, n = r.length - 1, i; n >= 0; n--)
|
|
6
|
+
(i = r[n]) && (e = (s ? i(a, l, e) : i(e)) || e);
|
|
7
|
+
return s && e && d(a, l, e), e;
|
|
8
|
+
};
|
|
9
|
+
let o = class extends p {
|
|
10
|
+
constructor() {
|
|
11
|
+
super(...arguments), this.items = [];
|
|
12
|
+
}
|
|
13
|
+
render() {
|
|
14
|
+
return t`
|
|
15
|
+
<nav>
|
|
16
|
+
<ol class="breadcrumb">
|
|
17
|
+
${this.items.map(
|
|
18
|
+
(r, a) => t`
|
|
19
|
+
<li class="breadcrumb__item">
|
|
20
|
+
${r.href && !r.active ? t`<a href="${r.href}" class="breadcrumb__link">${r.label}</a>` : t`<span class="breadcrumb__label ${r.active ? "breadcrumb__label--active" : ""}">${r.label}</span>`}
|
|
21
|
+
${a < this.items.length - 1 ? t`<span class="breadcrumb__separator">/</span>` : ""}
|
|
22
|
+
</li>
|
|
23
|
+
`
|
|
24
|
+
)}
|
|
25
|
+
</ol>
|
|
26
|
+
</nav>
|
|
27
|
+
`;
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
o.styles = [
|
|
31
|
+
m`${b(f)}`
|
|
32
|
+
];
|
|
33
|
+
c([
|
|
34
|
+
v({ type: Array })
|
|
35
|
+
], o.prototype, "items", 2);
|
|
36
|
+
o = c([
|
|
37
|
+
u("logosphere-breadcrumb")
|
|
38
|
+
], o);
|
|
39
|
+
export {
|
|
40
|
+
o as B
|
|
41
|
+
};
|
package/dist/breadcrumb.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./breadcrumb-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./breadcrumb-BOuCLUJh.cjs");Object.defineProperty(exports,"Breadcrumb",{enumerable:!0,get:()=>e.Breadcrumb});
|
package/dist/breadcrumb.js
CHANGED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use strict";const a=require("lit"),r=require("lit/decorators.js"),d=':host{display:inline-block}.button{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-family-base);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);line-height:1.25rem;letter-spacing:-.14px;border:none;border-radius:var(--radius-base);cursor:pointer;transition:all var(--transition-speed-base) var(--transition-timing);gap:var(--spacing-1);white-space:nowrap;-webkit-user-select:none;user-select:none;outline:none;text-decoration:none;box-sizing:border-box}.button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.button ::slotted(*){display:inline-flex;align-items:center;vertical-align:middle}.button ::slotted(i),.button ::slotted([class^="uil-"]),.button ::slotted([class*=" uil-"]){font-size:1rem;line-height:1;flex-shrink:0}.button--sm{padding:var(--spacing-0-5) var(--spacing-2)}.button--sm.button--icon-only{min-height:24px;width:24px;padding:0}.button--md{padding:var(--spacing-1-5) var(--spacing-3)}.button--md.button--icon-only{min-height:32px;width:32px;padding:0}.button--lg{padding:var(--spacing-2-5) var(--spacing-3)}.button--lg.button--icon-only{min-height:40px;width:40px;padding:0}.button--solid.button--primary{background-color:var(--color-primary);color:var(--color-primary-color, #ffffff)}.button--solid.button--primary:hover:not(:disabled){background-color:var(--color-primary-hover)}.button--solid.button--primary:active:not(:disabled){background-color:var(--color-primary-active)}.button--solid.button--primary:disabled{background-color:var(--color-primary-disabled);cursor:not-allowed;pointer-events:none}.button--solid.button--secondary{background-color:var(--color-secondary);color:var(--color-secondary-color)}.button--solid.button--secondary:hover:not(:disabled){background-color:var(--color-secondary-hover)}.button--solid.button--secondary:active:not(:disabled){background-color:var(--color-secondary-active)}.button--solid.button--secondary:disabled{background-color:var(--color-secondary-disabled);cursor:not-allowed;pointer-events:none}.button--solid.button--success{background-color:var(--color-success);color:var(--color-secondary-color)}.button--solid.button--success:hover:not(:disabled){background-color:var(--color-success-hover)}.button--solid.button--success:active:not(:disabled){background-color:var(--color-success-active)}.button--solid.button--success:disabled{background-color:var(--color-success-disabled);cursor:not-allowed;pointer-events:none}.button--solid.button--danger{background-color:var(--color-danger);color:var(--color-secondary-color)}.button--solid.button--danger:hover:not(:disabled){background-color:var(--color-danger-hover)}.button--solid.button--danger:active:not(:disabled){background-color:var(--color-danger-active)}.button--solid.button--danger:disabled{background-color:var(--color-danger-disabled);cursor:not-allowed;pointer-events:none}.button--solid.button--info{background-color:var(--color-info);color:var(--color-secondary-color)}.button--solid.button--info:hover:not(:disabled){background-color:var(--color-info-hover)}.button--solid.button--info:active:not(:disabled){background-color:var(--color-info-active)}.button--solid.button--info:disabled{background-color:var(--color-info-disabled);cursor:not-allowed;pointer-events:none}.button--solid.button--warning{background-color:var(--color-warning);color:var(--color-secondary-color)}.button--solid.button--warning:hover:not(:disabled){background-color:var(--color-warning-hover)}.button--solid.button--warning:active:not(:disabled){background-color:var(--color-warning-active)}.button--solid.button--warning:disabled{background-color:var(--color-warning-disabled);cursor:not-allowed;pointer-events:none}.button--outline{font-weight:var(--font-weight-medium);border:1px solid var(--color-border);background-color:var(--color-body-bg)}.button--outline:hover:not(:disabled){background-color:var(--color-body-bg-hover)}.button--outline:active:not(:disabled){background-color:var(--color-body-bg-active)}.button--outline:disabled{cursor:not-allowed;pointer-events:none;opacity:.5}.button--outline.button--primary{color:var(--color-primary);border-color:var(--color-border)}.button--outline.button--primary:disabled{color:var(--color-primary-disabled);border-color:var(--color-primary-disabled);opacity:1}.button--outline.button--secondary{color:var(--color-secondary);border-color:var(--color-border)}.button--outline.button--secondary:disabled{color:var(--color-secondary-disabled);border-color:var(--color-secondary-border-subtle);opacity:1}.button--outline.button--success{color:var(--color-success);border-color:var(--color-success-border)}.button--outline.button--success:disabled{color:var(--color-success-disabled);border-color:var(--color-success-border-subtle);opacity:1}.button--outline.button--danger{color:var(--color-danger);border-color:var(--color-danger-border)}.button--outline.button--danger:disabled{color:var(--color-danger-disabled);border-color:var(--color-danger-disabled);opacity:1}.button--outline.button--info{color:var(--color-info);border-color:var(--color-info-border)}.button--outline.button--info:disabled{color:var(--color-info-disabled);border-color:var(--color-info-border-subtle);opacity:1}.button--outline.button--warning{color:var(--color-warning-emphasis);border-color:var(--color-warning-border)}.button--outline.button--warning:disabled{color:var(--color-warning-disabled);border-color:var(--color-warning-border-subtle);opacity:1}.button--text{font-weight:var(--font-weight-medium);background-color:transparent;border:none}.button--text:hover:not(:disabled){background-color:var(--color-body-bg-hover)}.button--text:active:not(:disabled){background-color:var(--color-body-bg-active)}.button--text:disabled{cursor:not-allowed;pointer-events:none;opacity:.5}.button--text{background-color:transparent;border:none}.button--text.button--primary{color:var(--color-primary)}.button--text.button--primary:disabled{color:var(--color-primary-disabled);opacity:1}.button--text.button--secondary{color:var(--color-secondary)}.button--text.button--secondary:disabled{color:var(--color-secondary-disabled);opacity:1}.button--text.button--success{color:var(--color-success)}.button--text.button--success:disabled{color:var(--color-success-disabled);opacity:1}.button--text.button--danger{color:var(--color-danger)}.button--text.button--danger:disabled{color:var(--color-danger-disabled);opacity:1}.button--text.button--info{color:var(--color-info)}.button--text.button--info:disabled{color:var(--color-info-disabled);opacity:1}.button--text.button--warning{color:var(--color-warning-emphasis)}.button--text.button--warning:disabled{color:var(--color-warning-disabled);opacity:1}';var b=Object.defineProperty,u=Object.getOwnPropertyDescriptor,n=(l,o,c,e)=>{for(var t=e>1?void 0:e?u(o,c):o,i=l.length-1,s;i>=0;i--)(s=l[i])&&(t=(e?s(o,c,t):s(t))||t);return e&&t&&b(o,c,t),t};exports.Button=class extends a.LitElement{constructor(){super(...arguments),this.variant="solid",this.size="md",this.theme="primary",this.iconOnly=!1,this.disabled=!1}getButtonClasses(){const o=["button",`button--${this.variant}`,`button--${this.size}`,`button--${this.theme}`];return this.iconOnly&&o.push("button--icon-only"),o.join(" ")}render(){return a.html`
|
|
2
|
+
<button
|
|
3
|
+
class="${this.getButtonClasses()}"
|
|
4
|
+
?disabled="${this.disabled}"
|
|
5
|
+
>
|
|
6
|
+
<slot name="prefix"></slot>
|
|
7
|
+
<slot></slot>
|
|
8
|
+
<slot name="suffix"></slot>
|
|
9
|
+
</button>
|
|
10
|
+
`}};exports.Button.styles=[a.css`${a.unsafeCSS(d)}`];n([r.property({type:String})],exports.Button.prototype,"variant",2);n([r.property({type:String})],exports.Button.prototype,"size",2);n([r.property({type:String})],exports.Button.prototype,"theme",2);n([r.property({type:Boolean})],exports.Button.prototype,"iconOnly",2);n([r.property({type:Boolean})],exports.Button.prototype,"disabled",2);exports.Button=n([r.customElement("logosphere-button")],exports.Button);
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { unsafeCSS as d, css as b, LitElement as u, html as v } from "lit";
|
|
2
|
+
import { property as e, customElement as g } from "lit/decorators.js";
|
|
3
|
+
const p = ':host{display:inline-block}.button{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-family-base);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);line-height:1.25rem;letter-spacing:-.14px;border:none;border-radius:var(--radius-base);cursor:pointer;transition:all var(--transition-speed-base) var(--transition-timing);gap:var(--spacing-1);white-space:nowrap;-webkit-user-select:none;user-select:none;outline:none;text-decoration:none;box-sizing:border-box}.button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.button ::slotted(*){display:inline-flex;align-items:center;vertical-align:middle}.button ::slotted(i),.button ::slotted([class^="uil-"]),.button ::slotted([class*=" uil-"]){font-size:1rem;line-height:1;flex-shrink:0}.button--sm{padding:var(--spacing-0-5) var(--spacing-2)}.button--sm.button--icon-only{min-height:24px;width:24px;padding:0}.button--md{padding:var(--spacing-1-5) var(--spacing-3)}.button--md.button--icon-only{min-height:32px;width:32px;padding:0}.button--lg{padding:var(--spacing-2-5) var(--spacing-3)}.button--lg.button--icon-only{min-height:40px;width:40px;padding:0}.button--solid.button--primary{background-color:var(--color-primary);color:var(--color-primary-color, #ffffff)}.button--solid.button--primary:hover:not(:disabled){background-color:var(--color-primary-hover)}.button--solid.button--primary:active:not(:disabled){background-color:var(--color-primary-active)}.button--solid.button--primary:disabled{background-color:var(--color-primary-disabled);cursor:not-allowed;pointer-events:none}.button--solid.button--secondary{background-color:var(--color-secondary);color:var(--color-secondary-color)}.button--solid.button--secondary:hover:not(:disabled){background-color:var(--color-secondary-hover)}.button--solid.button--secondary:active:not(:disabled){background-color:var(--color-secondary-active)}.button--solid.button--secondary:disabled{background-color:var(--color-secondary-disabled);cursor:not-allowed;pointer-events:none}.button--solid.button--success{background-color:var(--color-success);color:var(--color-secondary-color)}.button--solid.button--success:hover:not(:disabled){background-color:var(--color-success-hover)}.button--solid.button--success:active:not(:disabled){background-color:var(--color-success-active)}.button--solid.button--success:disabled{background-color:var(--color-success-disabled);cursor:not-allowed;pointer-events:none}.button--solid.button--danger{background-color:var(--color-danger);color:var(--color-secondary-color)}.button--solid.button--danger:hover:not(:disabled){background-color:var(--color-danger-hover)}.button--solid.button--danger:active:not(:disabled){background-color:var(--color-danger-active)}.button--solid.button--danger:disabled{background-color:var(--color-danger-disabled);cursor:not-allowed;pointer-events:none}.button--solid.button--info{background-color:var(--color-info);color:var(--color-secondary-color)}.button--solid.button--info:hover:not(:disabled){background-color:var(--color-info-hover)}.button--solid.button--info:active:not(:disabled){background-color:var(--color-info-active)}.button--solid.button--info:disabled{background-color:var(--color-info-disabled);cursor:not-allowed;pointer-events:none}.button--solid.button--warning{background-color:var(--color-warning);color:var(--color-secondary-color)}.button--solid.button--warning:hover:not(:disabled){background-color:var(--color-warning-hover)}.button--solid.button--warning:active:not(:disabled){background-color:var(--color-warning-active)}.button--solid.button--warning:disabled{background-color:var(--color-warning-disabled);cursor:not-allowed;pointer-events:none}.button--outline{font-weight:var(--font-weight-medium);border:1px solid var(--color-border);background-color:var(--color-body-bg)}.button--outline:hover:not(:disabled){background-color:var(--color-body-bg-hover)}.button--outline:active:not(:disabled){background-color:var(--color-body-bg-active)}.button--outline:disabled{cursor:not-allowed;pointer-events:none;opacity:.5}.button--outline.button--primary{color:var(--color-primary);border-color:var(--color-border)}.button--outline.button--primary:disabled{color:var(--color-primary-disabled);border-color:var(--color-primary-disabled);opacity:1}.button--outline.button--secondary{color:var(--color-secondary);border-color:var(--color-border)}.button--outline.button--secondary:disabled{color:var(--color-secondary-disabled);border-color:var(--color-secondary-border-subtle);opacity:1}.button--outline.button--success{color:var(--color-success);border-color:var(--color-success-border)}.button--outline.button--success:disabled{color:var(--color-success-disabled);border-color:var(--color-success-border-subtle);opacity:1}.button--outline.button--danger{color:var(--color-danger);border-color:var(--color-danger-border)}.button--outline.button--danger:disabled{color:var(--color-danger-disabled);border-color:var(--color-danger-disabled);opacity:1}.button--outline.button--info{color:var(--color-info);border-color:var(--color-info-border)}.button--outline.button--info:disabled{color:var(--color-info-disabled);border-color:var(--color-info-border-subtle);opacity:1}.button--outline.button--warning{color:var(--color-warning-emphasis);border-color:var(--color-warning-border)}.button--outline.button--warning:disabled{color:var(--color-warning-disabled);border-color:var(--color-warning-border-subtle);opacity:1}.button--text{font-weight:var(--font-weight-medium);background-color:transparent;border:none}.button--text:hover:not(:disabled){background-color:var(--color-body-bg-hover)}.button--text:active:not(:disabled){background-color:var(--color-body-bg-active)}.button--text:disabled{cursor:not-allowed;pointer-events:none;opacity:.5}.button--text{background-color:transparent;border:none}.button--text.button--primary{color:var(--color-primary)}.button--text.button--primary:disabled{color:var(--color-primary-disabled);opacity:1}.button--text.button--secondary{color:var(--color-secondary)}.button--text.button--secondary:disabled{color:var(--color-secondary-disabled);opacity:1}.button--text.button--success{color:var(--color-success)}.button--text.button--success:disabled{color:var(--color-success-disabled);opacity:1}.button--text.button--danger{color:var(--color-danger)}.button--text.button--danger:disabled{color:var(--color-danger-disabled);opacity:1}.button--text.button--info{color:var(--color-info)}.button--text.button--info:disabled{color:var(--color-info-disabled);opacity:1}.button--text.button--warning{color:var(--color-warning-emphasis)}.button--text.button--warning:disabled{color:var(--color-warning-disabled);opacity:1}';
|
|
4
|
+
var y = Object.defineProperty, f = Object.getOwnPropertyDescriptor, t = (n, a, c, l) => {
|
|
5
|
+
for (var r = l > 1 ? void 0 : l ? f(a, c) : a, i = n.length - 1, s; i >= 0; i--)
|
|
6
|
+
(s = n[i]) && (r = (l ? s(a, c, r) : s(r)) || r);
|
|
7
|
+
return l && r && y(a, c, r), r;
|
|
8
|
+
};
|
|
9
|
+
let o = class extends u {
|
|
10
|
+
constructor() {
|
|
11
|
+
super(...arguments), this.variant = "solid", this.size = "md", this.theme = "primary", this.iconOnly = !1, this.disabled = !1;
|
|
12
|
+
}
|
|
13
|
+
getButtonClasses() {
|
|
14
|
+
const n = [
|
|
15
|
+
"button",
|
|
16
|
+
`button--${this.variant}`,
|
|
17
|
+
`button--${this.size}`,
|
|
18
|
+
`button--${this.theme}`
|
|
19
|
+
];
|
|
20
|
+
return this.iconOnly && n.push("button--icon-only"), n.join(" ");
|
|
21
|
+
}
|
|
22
|
+
render() {
|
|
23
|
+
return v`
|
|
24
|
+
<button
|
|
25
|
+
class="${this.getButtonClasses()}"
|
|
26
|
+
?disabled="${this.disabled}"
|
|
27
|
+
>
|
|
28
|
+
<slot name="prefix"></slot>
|
|
29
|
+
<slot></slot>
|
|
30
|
+
<slot name="suffix"></slot>
|
|
31
|
+
</button>
|
|
32
|
+
`;
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
o.styles = [
|
|
36
|
+
b`${d(p)}`
|
|
37
|
+
];
|
|
38
|
+
t([
|
|
39
|
+
e({ type: String })
|
|
40
|
+
], o.prototype, "variant", 2);
|
|
41
|
+
t([
|
|
42
|
+
e({ type: String })
|
|
43
|
+
], o.prototype, "size", 2);
|
|
44
|
+
t([
|
|
45
|
+
e({ type: String })
|
|
46
|
+
], o.prototype, "theme", 2);
|
|
47
|
+
t([
|
|
48
|
+
e({ type: Boolean })
|
|
49
|
+
], o.prototype, "iconOnly", 2);
|
|
50
|
+
t([
|
|
51
|
+
e({ type: Boolean })
|
|
52
|
+
], o.prototype, "disabled", 2);
|
|
53
|
+
o = t([
|
|
54
|
+
g("logosphere-button")
|
|
55
|
+
], o);
|
|
56
|
+
export {
|
|
57
|
+
o as B
|
|
58
|
+
};
|
package/dist/button.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./button-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./button-MBxtvVqn.cjs");Object.defineProperty(exports,"Button",{enumerable:!0,get:()=>e.Button});
|
package/dist/button.js
CHANGED