@synergy-design-system/components 1.0.0-main.1 → 1.0.0-main.11

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 (147) hide show
  1. package/LICENSE +28 -0
  2. package/README.md +150 -1
  3. package/dist/chunks/chunk.2NHBIE4V.js +376 -0
  4. package/dist/chunks/chunk.2NHBIE4V.js.map +7 -0
  5. package/dist/chunks/chunk.3XRGNU3R.js +12 -0
  6. package/dist/chunks/chunk.3XRGNU3R.js.map +7 -0
  7. package/dist/chunks/chunk.4OMRXGQ5.js +12 -0
  8. package/dist/chunks/chunk.4OMRXGQ5.js.map +7 -0
  9. package/dist/chunks/chunk.5OIEI73E.js +45 -0
  10. package/dist/chunks/chunk.5OIEI73E.js.map +7 -0
  11. package/dist/chunks/chunk.6C4JXZZN.js +15 -0
  12. package/dist/chunks/chunk.6C4JXZZN.js.map +7 -0
  13. package/dist/chunks/chunk.A3SKDWCT.js +42 -0
  14. package/dist/chunks/chunk.A3SKDWCT.js.map +7 -0
  15. package/dist/chunks/chunk.BREU4ILT.js +28 -0
  16. package/dist/chunks/chunk.BREU4ILT.js.map +7 -0
  17. package/dist/chunks/chunk.C4FLGZ7E.js +32 -0
  18. package/dist/chunks/chunk.C4FLGZ7E.js.map +7 -0
  19. package/dist/chunks/chunk.C7624ITA.js +30 -0
  20. package/dist/chunks/chunk.C7624ITA.js.map +7 -0
  21. package/dist/chunks/chunk.DJOAQ4JU.js +36 -0
  22. package/dist/chunks/chunk.DJOAQ4JU.js.map +7 -0
  23. package/dist/chunks/chunk.EFGGZW6Y.js +498 -0
  24. package/dist/chunks/chunk.EFGGZW6Y.js.map +7 -0
  25. package/dist/chunks/chunk.HLUOHJUC.js +278 -0
  26. package/dist/chunks/chunk.HLUOHJUC.js.map +7 -0
  27. package/dist/chunks/chunk.IFBY43YE.js +138 -0
  28. package/dist/chunks/chunk.IFBY43YE.js.map +7 -0
  29. package/dist/chunks/chunk.KXCGB2XT.js +202 -0
  30. package/dist/chunks/chunk.KXCGB2XT.js.map +7 -0
  31. package/dist/chunks/chunk.MRBFJWMS.js +63 -0
  32. package/dist/chunks/chunk.MRBFJWMS.js.map +7 -0
  33. package/dist/chunks/chunk.N2I6HVX3.js +71 -0
  34. package/dist/chunks/chunk.N2I6HVX3.js.map +7 -0
  35. package/dist/chunks/chunk.O7USYXBT.js +23 -0
  36. package/dist/chunks/chunk.O7USYXBT.js.map +7 -0
  37. package/dist/chunks/chunk.R6VNLE6N.js +11 -0
  38. package/dist/chunks/chunk.R6VNLE6N.js.map +7 -0
  39. package/dist/chunks/chunk.U7ZJ22QM.js +128 -0
  40. package/dist/chunks/chunk.U7ZJ22QM.js.map +7 -0
  41. package/dist/chunks/chunk.W46CFM2R.js +90 -0
  42. package/dist/chunks/chunk.W46CFM2R.js.map +7 -0
  43. package/dist/chunks/chunk.WDCAHRYG.js +273 -0
  44. package/dist/chunks/chunk.WDCAHRYG.js.map +7 -0
  45. package/dist/chunks/chunk.WTCUSH7V.js +42 -0
  46. package/dist/chunks/chunk.WTCUSH7V.js.map +7 -0
  47. package/dist/chunks/chunk.XGXFE6IF.js +49 -0
  48. package/dist/chunks/chunk.XGXFE6IF.js.map +7 -0
  49. package/dist/chunks/chunk.Y7DVVKVJ.js +436 -0
  50. package/dist/chunks/chunk.Y7DVVKVJ.js.map +7 -0
  51. package/dist/components/button/button.component.d.ts +123 -0
  52. package/dist/components/button/button.component.js +24 -0
  53. package/dist/components/button/button.component.js.map +7 -0
  54. package/dist/components/button/button.custom.styles.d.ts +2 -0
  55. package/dist/components/button/button.custom.styles.js +8 -0
  56. package/dist/components/button/button.custom.styles.js.map +7 -0
  57. package/dist/components/button/button.d.ts +8 -0
  58. package/dist/components/button/button.js +25 -0
  59. package/dist/components/button/button.js.map +7 -0
  60. package/dist/components/button/button.styles.d.ts +2 -0
  61. package/dist/components/button/button.styles.js +10 -0
  62. package/dist/components/button/button.styles.js.map +7 -0
  63. package/dist/components/checkbox/checkbox.custom.styles.d.ts +2 -0
  64. package/dist/components/checkbox/checkbox.custom.styles.js +11 -0
  65. package/dist/components/checkbox/checkbox.custom.styles.js.map +7 -0
  66. package/dist/components/icon/icon.component.d.ts +42 -0
  67. package/dist/components/icon/icon.component.js +15 -0
  68. package/dist/components/icon/icon.component.js.map +7 -0
  69. package/dist/components/icon/icon.d.ts +8 -0
  70. package/dist/components/icon/icon.js +19 -0
  71. package/dist/components/icon/icon.js.map +7 -0
  72. package/dist/components/icon/icon.styles.d.ts +2 -0
  73. package/dist/components/icon/icon.styles.js +9 -0
  74. package/dist/components/icon/icon.styles.js.map +7 -0
  75. package/dist/components/icon/library.d.ts +19 -0
  76. package/dist/components/icon/library.default.d.ts +3 -0
  77. package/dist/components/icon/library.default.js +9 -0
  78. package/dist/components/icon/library.default.js.map +7 -0
  79. package/dist/components/icon/library.js +19 -0
  80. package/dist/components/icon/library.js.map +7 -0
  81. package/dist/components/icon/library.system.d.ts +3 -0
  82. package/dist/components/icon/library.system.js +8 -0
  83. package/dist/components/icon/library.system.js.map +7 -0
  84. package/dist/components/input/input.component.d.ts +175 -0
  85. package/dist/components/input/input.component.js +22 -0
  86. package/dist/components/input/input.component.js.map +7 -0
  87. package/dist/components/input/input.custom.styles.d.ts +2 -0
  88. package/dist/components/input/input.custom.styles.js +8 -0
  89. package/dist/components/input/input.custom.styles.js.map +7 -0
  90. package/dist/components/input/input.d.ts +8 -0
  91. package/dist/components/input/input.js +23 -0
  92. package/dist/components/input/input.js.map +7 -0
  93. package/dist/components/input/input.styles.d.ts +2 -0
  94. package/dist/components/input/input.styles.js +10 -0
  95. package/dist/components/input/input.styles.js.map +7 -0
  96. package/dist/components/spinner/spinner.component.d.ts +20 -0
  97. package/dist/components/spinner/spinner.component.js +13 -0
  98. package/dist/components/spinner/spinner.component.js.map +7 -0
  99. package/dist/components/spinner/spinner.styles.d.ts +2 -0
  100. package/dist/components/spinner/spinner.styles.js +9 -0
  101. package/dist/components/spinner/spinner.styles.js.map +7 -0
  102. package/dist/components/textarea/textarea.custom.styles.d.ts +2 -0
  103. package/dist/components/textarea/textarea.custom.styles.js +11 -0
  104. package/dist/components/textarea/textarea.custom.styles.js.map +7 -0
  105. package/dist/custom-elements.json +1870 -0
  106. package/dist/events/events.d.ts +8 -0
  107. package/dist/events/syn-blur.d.ts +6 -0
  108. package/dist/events/syn-change.d.ts +6 -0
  109. package/dist/events/syn-clear.d.ts +6 -0
  110. package/dist/events/syn-error.d.ts +8 -0
  111. package/dist/events/syn-focus.d.ts +6 -0
  112. package/dist/events/syn-input.d.ts +6 -0
  113. package/dist/events/syn-invalid.d.ts +6 -0
  114. package/dist/events/syn-load.d.ts +6 -0
  115. package/dist/internal/default-value.d.ts +2 -0
  116. package/dist/internal/form.d.ts +73 -0
  117. package/dist/internal/slot.d.ts +23 -0
  118. package/dist/internal/synergy-element.d.ts +47 -0
  119. package/dist/internal/test/form-control-base-tests.d.ts +7 -0
  120. package/dist/internal/watch.d.ts +26 -0
  121. package/dist/styles/component.styles.d.ts +2 -0
  122. package/dist/styles/form-control.custom.styles.d.ts +2 -0
  123. package/dist/styles/form-control.styles.d.ts +2 -0
  124. package/dist/synergy-autoloader.d.ts +4 -0
  125. package/dist/synergy-autoloader.js +41 -0
  126. package/dist/synergy-autoloader.js.map +7 -0
  127. package/dist/synergy.d.ts +4 -0
  128. package/dist/synergy.js +38 -0
  129. package/dist/synergy.js.map +7 -0
  130. package/dist/translations/de.d.ts +3 -0
  131. package/dist/translations/de.js +46 -0
  132. package/dist/translations/de.js.map +7 -0
  133. package/dist/translations/en.d.ts +3 -0
  134. package/dist/translations/en.js +8 -0
  135. package/dist/translations/en.js.map +7 -0
  136. package/dist/utilities/base-path.d.ts +18 -0
  137. package/dist/utilities/base-path.js +10 -0
  138. package/dist/utilities/base-path.js.map +7 -0
  139. package/dist/utilities/form.d.ts +11 -0
  140. package/dist/utilities/form.js +11 -0
  141. package/dist/utilities/form.js.map +7 -0
  142. package/dist/utilities/localize.d.ts +33 -0
  143. package/dist/utilities/localize.js +11 -0
  144. package/dist/utilities/localize.js.map +7 -0
  145. package/dist/vscode.html-custom-data.json +371 -0
  146. package/dist/web-types.json +738 -0
  147. package/package.json +47 -27
package/LICENSE ADDED
@@ -0,0 +1,28 @@
1
+ BSD 3-Clause License
2
+
3
+ Copyright (c) 2023, SickDesignSystem
4
+
5
+ Redistribution and use in source and binary forms, with or without
6
+ modification, are permitted provided that the following conditions are met:
7
+
8
+ 1. Redistributions of source code must retain the above copyright notice, this
9
+ list of conditions and the following disclaimer.
10
+
11
+ 2. Redistributions in binary form must reproduce the above copyright notice,
12
+ this list of conditions and the following disclaimer in the documentation
13
+ and/or other materials provided with the distribution.
14
+
15
+ 3. Neither the name of the copyright holder nor the names of its
16
+ contributors may be used to endorse or promote products derived from
17
+ this software without specific prior written permission.
18
+
19
+ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
20
+ AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
21
+ IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
22
+ DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
23
+ FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
24
+ DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
25
+ SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
26
+ CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
27
+ OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
28
+ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
package/README.md CHANGED
@@ -1,9 +1,154 @@
1
1
  # @synergy-design-system/components
2
2
 
3
- Synergy Web Component library based on [shoelace](https://shoelace.style/).
3
+ This package provides the base of the Synergy Design System as native web components.
4
+ It uses [lit](https://www.lit.dev) and parts of [shoelace](https://shoelace.style/).
5
+
6
+ ## Getting started
7
+
8
+ ### 1. Package installation
9
+
10
+ Run the following steps to install the required packages.
11
+
12
+ ```bash
13
+ # Install the base library and required css files
14
+ npm install --save @synergy-design-system/components @synergy-design-system/tokens
15
+ ```
16
+
17
+ ---
18
+
19
+ ### 2. Load the design tokens
20
+
21
+ The shipped components make heavy use of design tokens, which are provided via [@synergy-design-system/tokens](https://github.com/SickDesignSystem/synergy/tree/main/packages/tokens). Make sure to follow the installation steps there for help on setting the tokens up. Usually it is enough to load the light or dark theme included there.
22
+
23
+ ---
24
+
25
+ ### 3. Define the elements
26
+
27
+ There are multiple ways to load the components:
28
+
29
+ #### Loading all available components
30
+
31
+ To make all components available, just load the main package file. It will make sure that all components and needed dependencies are loaded and available directly.
32
+
33
+ > Please keep in mind that this way of loading the components will create larger bundle sizes!
34
+
35
+ ```html
36
+ <!-- Example 1: Loading via script type module -->
37
+ <!doctype html>
38
+ <html lang="en">
39
+ <head>
40
+ <meta charset="UTF-8" />
41
+ </head>
42
+ <body>
43
+ <div id="root">
44
+ <syn-button variant="text">Button</syn-button>
45
+ <syn-input></syn-input>
46
+ </div>
47
+ <!-- As we are loading all modules, syn-button and syn-input will render correctly -->
48
+ <script type="module" src="../node_modules/@synergy-design-system/components/dist/synergy.js"></script>
49
+ </body>
50
+ </html>
51
+ ```
52
+
53
+ When using a build system, you should load the bundle in JavaScript or TypeScript directly, for example when using vite:
54
+
55
+ ```typescript
56
+ // main.ts
57
+
58
+ // Do not forget to load the design tokens!
59
+ import '@synergy-design-system/tokens/themes/light.css';
60
+
61
+ // This will load synergy.js via the exports map
62
+ import '@synergy-design-system/components';
63
+ ```
64
+
65
+ #### Loading selected components only
66
+
67
+ Use this when you need complete control about which components are loaded. This will usually lead to smaller bundle sizes, which might be preferable for your application. As a downside, you will have to remember adding missing components to your bundle.
68
+
69
+ ```html
70
+ <!-- Example 1: Loading via script type module -->
71
+ <!doctype html>
72
+ <html lang="en">
73
+ <head>
74
+ <meta charset="UTF-8" />
75
+ </head>
76
+ <body>
77
+ <div id="root">
78
+ <syn-button variant="text">Button</syn-button>
79
+ <syn-input></syn-input>
80
+ </div>
81
+ <!-- We are only loading the button, syn-input will render as an empty div! -->
82
+ <script type="module" src="../node_modules/@synergy-design-system/components/dist/components/button/button.js"></script>
83
+ </body>
84
+ </html>
85
+ ```
86
+
87
+ When using a build system, you may also load the bundle in JavaScript or TypeScript directly, for example when using vite:
88
+
89
+ ```typescript
90
+ // main.ts
91
+
92
+ // Do not forget to load the design tokens!
93
+ import '@synergy-design-system/tokens/themes/light.css';
94
+
95
+ // This will only load and define the button itself
96
+ import '@synergy-design-system/components/components/button/button.js';
97
+ ```
98
+
99
+ ---
100
+
101
+ ### 4. Using the provided types
102
+
103
+ The components are built using typescript and provide types for elements and events out of the box. These can be used for working with the dom when working in a typescript environment. You may use them by importing the needed types and using them for elements, like shown in this example:
104
+
105
+ ```typescript
106
+ // main.ts
107
+
108
+ // Do not forget to load the design tokens!
109
+ import '@synergy-design-system/tokens/themes/light.css';
110
+
111
+ // Example 1: Load the type for syn-button from the root:
112
+ import type { SynButton, SynInvalidEvent } from '@synergy-design-system/components';
113
+
114
+ // Example 2: Load the type from the syn-button dir directly.
115
+ // In this case you will have to load the event type from another file!
116
+ import type { SynButton } from '@synergy-design-system/components/components/button/button';
117
+ import type { SynInvalidEvent } from '@synergy-design-system/components/events/syn-invalid';
118
+
119
+ document.addEventListener('load', () => {
120
+ const loadedSynButtons = document.querySelectorAll<SynButton>('syn-button');
121
+
122
+ // Attach a syn-invalid event that is fired every time a button becomes invalid
123
+ Array
124
+ .from(loadedSynButtons) // Type: SynButton[]
125
+ .addEventListener('syn-invalid', (e: SynInvalidEvent) => {
126
+ console.log('Button is now invalid!', e);
127
+ });
128
+ });
129
+ ```
130
+
131
+ ---
132
+
133
+ ### 5. Add html autocompletion to VSCode (optional)
134
+
135
+ This package ships with a [custom-elements-manifest](https://github.com/webcomponents/custom-elements-manifest) that may be used to provide typings for tags. To enable code completion, please proceed the following way:
136
+
137
+ 1. Install the `@synergy-design-system/components` package.
138
+ 2. If you do **not** have a `.vscode/settings.json` file yet, create it.
139
+ 3. Add support for [vscode-custom-data](https://github.com/microsoft/vscode-custom-data) by adding the following setting to your `.vscode/settings.json`: `"html.customData": ["./node_modules/@synergy-design-system/components/dist/vscode.html-custom-data.json"]`
140
+ 4. Restart VSCode.
141
+ 5. Switch to an html (or similar) file and type `<syn`. Auto-complete now provides a list of available components along with its attributes.
142
+
143
+ > Note the path above is valid for installations using npm.
144
+ > When using another package manager, make sure to set the proper path to `vscode.html-custom-data.json`!
145
+
146
+ ---
4
147
 
5
148
  ## Local setup
149
+
6
150
  ### Using the vendor cli
151
+
7
152
  The vendor cli is taking care about updating our code base according to a new version of shoelace.
8
153
 
9
154
  To change the shoelace version, that should be downloaded, change the version in the config of `./scripts/vendorism.js`.
@@ -12,3 +157,7 @@ If code in our components library should be updated to this new shoelace version
12
157
 
13
158
  All shoelace files are per default readonly and are disabled from being changed. To change this files can be ejected. This can be done via:
14
159
  `pnpm vendor.eject "src/declaration.d.ts"`.
160
+
161
+ ### Adding events to the output
162
+
163
+ To add events to the component output, make sure to add them to `src/scripts/vendorism.js` into the `events` array that is defined there. After a new build run `via pnpm build`, you will see the new event files and the `events/events.ts` file will be regenerated.
@@ -0,0 +1,376 @@
1
+ import {
2
+ button_custom_styles_default
3
+ } from "./chunk.IFBY43YE.js";
4
+ import {
5
+ component_styles_default
6
+ } from "./chunk.O7USYXBT.js";
7
+
8
+ // src/components/button/button.styles.ts
9
+ import { css } from "lit";
10
+ var button_styles_default = css`
11
+ /* stylelint-disable */
12
+ ${component_styles_default}
13
+
14
+ :host {
15
+ display: inline-block;
16
+ position: relative;
17
+ width: auto;
18
+ cursor: pointer;
19
+ }
20
+
21
+ .button {
22
+ display: inline-flex;
23
+ align-items: stretch;
24
+ justify-content: center;
25
+ width: 100%;
26
+ border-style: solid;
27
+ border-width: var(--syn-input-border-width);
28
+ font-family: var(--syn-input-font-family);
29
+ font-weight: var(--syn-font-weight-semibold);
30
+ text-decoration: none;
31
+ user-select: none;
32
+ -webkit-user-select: none;
33
+ white-space: nowrap;
34
+ vertical-align: middle;
35
+ padding: 0;
36
+ transition:
37
+ var(--syn-transition-x-fast) background-color,
38
+ var(--syn-transition-x-fast) color,
39
+ var(--syn-transition-x-fast) border,
40
+ var(--syn-transition-x-fast) box-shadow;
41
+ cursor: inherit;
42
+ }
43
+
44
+ .button::-moz-focus-inner {
45
+ border: 0;
46
+ }
47
+
48
+ .button:focus {
49
+ outline: none;
50
+ }
51
+
52
+ .button:focus-visible {
53
+ outline: var(--syn-focus-ring);
54
+ outline-offset: var(--syn-focus-ring-offset);
55
+ }
56
+
57
+ .button--disabled {
58
+ opacity: 0.5;
59
+ cursor: not-allowed;
60
+ }
61
+
62
+ /* When disabled, prevent mouse events from bubbling up from children */
63
+ .button--disabled * {
64
+ pointer-events: none;
65
+ }
66
+
67
+ .button__prefix,
68
+ .button__suffix {
69
+ flex: 0 0 auto;
70
+ display: flex;
71
+ align-items: center;
72
+ pointer-events: none;
73
+ }
74
+
75
+ .button__label {
76
+ display: inline-block;
77
+ }
78
+
79
+ .button__label::slotted(syn-icon) {
80
+ vertical-align: -2px;
81
+ }
82
+
83
+ /*
84
+ * Standard buttons
85
+ */
86
+
87
+ /* Primary */
88
+ .button--filled.button--primary {
89
+ background-color: var(--syn-color-primary-600);
90
+ border-color: var(--syn-color-primary-600);
91
+ color: var(--syn-color-neutral-0);
92
+ }
93
+
94
+ .button--filled.button--primary:hover:not(.button--disabled) {
95
+ background-color: var(--syn-color-primary-500);
96
+ border-color: var(--syn-color-primary-500);
97
+ color: var(--syn-color-neutral-0);
98
+ }
99
+
100
+ .button--filled.button--primary:active:not(.button--disabled) {
101
+ background-color: var(--syn-color-primary-600);
102
+ border-color: var(--syn-color-primary-600);
103
+ color: var(--syn-color-neutral-0);
104
+ }
105
+
106
+ /*
107
+ * Outline buttons
108
+ */
109
+
110
+ .button--outline {
111
+ background: none;
112
+ border: solid 1px;
113
+ }
114
+
115
+ /* Primary */
116
+ .button--outline.button--primary {
117
+ border-color: var(--syn-color-primary-600);
118
+ color: var(--syn-color-primary-600);
119
+ }
120
+
121
+ .button--outline.button--primary:hover:not(.button--disabled),
122
+ .button--outline.button--primary.button--checked:not(.button--disabled) {
123
+ background-color: var(--syn-color-primary-600);
124
+ color: var(--syn-color-neutral-0);
125
+ }
126
+
127
+ .button--outline.button--primary:active:not(.button--disabled) {
128
+ border-color: var(--syn-color-primary-700);
129
+ background-color: var(--syn-color-primary-700);
130
+ color: var(--syn-color-neutral-0);
131
+ }
132
+
133
+ /*
134
+ * Text buttons
135
+ */
136
+
137
+ .button--text {
138
+ background-color: transparent;
139
+ border-color: transparent;
140
+ color: var(--syn-color-primary-600);
141
+ }
142
+
143
+ .button--text:hover:not(.button--disabled) {
144
+ background-color: transparent;
145
+ border-color: transparent;
146
+ color: var(--syn-color-primary-500);
147
+ }
148
+
149
+ .button--text:focus-visible:not(.button--disabled) {
150
+ background-color: transparent;
151
+ border-color: transparent;
152
+ color: var(--syn-color-primary-500);
153
+ }
154
+
155
+ .button--text:active:not(.button--disabled) {
156
+ background-color: transparent;
157
+ border-color: transparent;
158
+ color: var(--syn-color-primary-700);
159
+ }
160
+
161
+ /*
162
+ * Size modifiers
163
+ */
164
+
165
+ .button--small {
166
+ height: auto;
167
+ min-height: var(--syn-input-height-small);
168
+ font-size: var(--syn-button-font-size-small);
169
+ line-height: calc(var(--syn-input-height-small) - var(--syn-input-border-width) * 2);
170
+ border-radius: var(--syn-input-border-radius-small);
171
+ }
172
+
173
+ .button--medium {
174
+ height: auto;
175
+ min-height: var(--syn-input-height-medium);
176
+ font-size: var(--syn-button-font-size-medium);
177
+ line-height: calc(var(--syn-input-height-medium) - var(--syn-input-border-width) * 2);
178
+ border-radius: var(--syn-input-border-radius-medium);
179
+ }
180
+
181
+ .button--large {
182
+ height: auto;
183
+ min-height: var(--syn-input-height-large);
184
+ font-size: var(--syn-button-font-size-large);
185
+ line-height: calc(var(--syn-input-height-large) - var(--syn-input-border-width) * 2);
186
+ border-radius: var(--syn-input-border-radius-large);
187
+ }
188
+
189
+ /*
190
+ * Caret modifier
191
+ */
192
+
193
+ .button--caret .button__suffix {
194
+ display: none;
195
+ }
196
+
197
+ .button--caret .button__caret {
198
+ height: auto;
199
+ }
200
+
201
+ /*
202
+ * Loading modifier
203
+ */
204
+
205
+ .button--loading {
206
+ position: relative;
207
+ cursor: wait;
208
+ }
209
+
210
+ .button--loading .button__prefix,
211
+ .button--loading .button__label,
212
+ .button--loading .button__suffix,
213
+ .button--loading .button__caret {
214
+ visibility: hidden;
215
+ }
216
+
217
+ .button--loading syn-spinner {
218
+ --indicator-color: currentColor;
219
+ position: absolute;
220
+ font-size: 1em;
221
+ height: 1em;
222
+ width: 1em;
223
+ top: calc(50% - 0.5em);
224
+ left: calc(50% - 0.5em);
225
+ }
226
+
227
+ /*
228
+ * Badges
229
+ */
230
+
231
+ .button ::slotted(syn-badge) {
232
+ position: absolute;
233
+ top: 0;
234
+ right: 0;
235
+ translate: 50% -50%;
236
+ pointer-events: none;
237
+ }
238
+
239
+ .button--rtl ::slotted(syn-badge) {
240
+ right: auto;
241
+ left: 0;
242
+ translate: -50% -50%;
243
+ }
244
+
245
+ /*
246
+ * Button spacing
247
+ */
248
+
249
+ .button--has-label.button--small .button__label {
250
+ padding: 0 var(--syn-spacing-small);
251
+ }
252
+
253
+ .button--has-label.button--medium .button__label {
254
+ padding: 0 var(--syn-spacing-medium);
255
+ }
256
+
257
+ .button--has-label.button--large .button__label {
258
+ padding: 0 var(--syn-spacing-large);
259
+ }
260
+
261
+ .button--has-prefix.button--small {
262
+ padding-inline-start: var(--syn-spacing-x-small);
263
+ }
264
+
265
+ .button--has-prefix.button--small .button__label {
266
+ padding-inline-start: var(--syn-spacing-x-small);
267
+ }
268
+
269
+ .button--has-prefix.button--medium {
270
+ padding-inline-start: var(--syn-spacing-small);
271
+ }
272
+
273
+ .button--has-prefix.button--medium .button__label {
274
+ padding-inline-start: var(--syn-spacing-small);
275
+ }
276
+
277
+ .button--has-prefix.button--large {
278
+ padding-inline-start: var(--syn-spacing-small);
279
+ }
280
+
281
+ .button--has-prefix.button--large .button__label {
282
+ padding-inline-start: var(--syn-spacing-small);
283
+ }
284
+
285
+ .button--has-suffix.button--small,
286
+ .button--caret.button--small {
287
+ padding-inline-end: var(--syn-spacing-x-small);
288
+ }
289
+
290
+ .button--has-suffix.button--small .button__label,
291
+ .button--caret.button--small .button__label {
292
+ padding-inline-end: var(--syn-spacing-x-small);
293
+ }
294
+
295
+ .button--has-suffix.button--medium,
296
+ .button--caret.button--medium {
297
+ padding-inline-end: var(--syn-spacing-small);
298
+ }
299
+
300
+ .button--has-suffix.button--medium .button__label,
301
+ .button--caret.button--medium .button__label {
302
+ padding-inline-end: var(--syn-spacing-small);
303
+ }
304
+
305
+ .button--has-suffix.button--large,
306
+ .button--caret.button--large {
307
+ padding-inline-end: var(--syn-spacing-small);
308
+ }
309
+
310
+ .button--has-suffix.button--large .button__label,
311
+ .button--caret.button--large .button__label {
312
+ padding-inline-end: var(--syn-spacing-small);
313
+ }
314
+
315
+ /*
316
+ * Button groups support a variety of button types (e.g. buttons with tooltips, buttons as dropdown triggers, etc.).
317
+ * This means buttons aren't always direct descendants of the button group, thus we can't target them with the
318
+ * ::slotted selector. To work around this, the button group component does some magic to add these special classes to
319
+ * buttons and we style them here instead.
320
+ */
321
+
322
+ :host(.syn-button-group__button--first:not(.syn-button-group__button--last)) .button {
323
+ border-start-end-radius: 0;
324
+ border-end-end-radius: 0;
325
+ }
326
+
327
+ :host(.syn-button-group__button--inner) .button {
328
+ border-radius: 0;
329
+ }
330
+
331
+ :host(.syn-button-group__button--last:not(.syn-button-group__button--first)) .button {
332
+ border-start-start-radius: 0;
333
+ border-end-start-radius: 0;
334
+ }
335
+
336
+ /* All except the first */
337
+ :host(.syn-button-group__button:not(.syn-button-group__button--first)) {
338
+ margin-inline-start: calc(-1 * var(--syn-input-border-width));
339
+ }
340
+
341
+ /* Add a visual separator between solid buttons */
342
+ :host(
343
+ .syn-button-group__button:not(
344
+ .syn-button-group__button--first,
345
+ .syn-button-group__button--radio,
346
+ [variant='filled']
347
+ ):not(:hover)
348
+ )
349
+ .button:after {
350
+ content: '';
351
+ position: absolute;
352
+ top: 0;
353
+ inset-inline-start: 0;
354
+ bottom: 0;
355
+ border-left: solid 1px rgb(128 128 128 / 33%);
356
+ mix-blend-mode: multiply;
357
+ }
358
+
359
+ /* Bump hovered, focused, and checked buttons up so their focus ring isn't clipped */
360
+ :host(.syn-button-group__button--hover) {
361
+ z-index: 1;
362
+ }
363
+
364
+ /* Focus and checked are always on top */
365
+ :host(.syn-button-group__button--focus),
366
+ :host(.syn-button-group__button[checked]) {
367
+ z-index: 2;
368
+ }
369
+
370
+ ${button_custom_styles_default}
371
+ `;
372
+
373
+ export {
374
+ button_styles_default
375
+ };
376
+ //# sourceMappingURL=chunk.2NHBIE4V.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/components/button/button.styles.ts"],
4
+ "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport { css } from 'lit';\nimport customStyles from './button.custom.styles.js';\nimport componentStyles from '../../styles/component.styles.js';\n\nexport default css`\n\t/* stylelint-disable */\n ${componentStyles}\n\n :host {\n display: inline-block;\n position: relative;\n width: auto;\n cursor: pointer;\n }\n\n .button {\n display: inline-flex;\n align-items: stretch;\n justify-content: center;\n width: 100%;\n border-style: solid;\n border-width: var(--syn-input-border-width);\n font-family: var(--syn-input-font-family);\n font-weight: var(--syn-font-weight-semibold);\n text-decoration: none;\n user-select: none;\n -webkit-user-select: none;\n white-space: nowrap;\n vertical-align: middle;\n padding: 0;\n transition:\n var(--syn-transition-x-fast) background-color,\n var(--syn-transition-x-fast) color,\n var(--syn-transition-x-fast) border,\n var(--syn-transition-x-fast) box-shadow;\n cursor: inherit;\n }\n\n .button::-moz-focus-inner {\n border: 0;\n }\n\n .button:focus {\n outline: none;\n }\n\n .button:focus-visible {\n outline: var(--syn-focus-ring);\n outline-offset: var(--syn-focus-ring-offset);\n }\n\n .button--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n /* When disabled, prevent mouse events from bubbling up from children */\n .button--disabled * {\n pointer-events: none;\n }\n\n .button__prefix,\n .button__suffix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n pointer-events: none;\n }\n\n .button__label {\n display: inline-block;\n }\n\n .button__label::slotted(syn-icon) {\n vertical-align: -2px;\n }\n\n /*\n * Standard buttons\n */\n\n /* Primary */\n .button--filled.button--primary {\n background-color: var(--syn-color-primary-600);\n border-color: var(--syn-color-primary-600);\n color: var(--syn-color-neutral-0);\n }\n\n .button--filled.button--primary:hover:not(.button--disabled) {\n background-color: var(--syn-color-primary-500);\n border-color: var(--syn-color-primary-500);\n color: var(--syn-color-neutral-0);\n }\n\n .button--filled.button--primary:active:not(.button--disabled) {\n background-color: var(--syn-color-primary-600);\n border-color: var(--syn-color-primary-600);\n color: var(--syn-color-neutral-0);\n }\n\n /*\n * Outline buttons\n */\n\n .button--outline {\n background: none;\n border: solid 1px;\n }\n\n /* Primary */\n .button--outline.button--primary {\n border-color: var(--syn-color-primary-600);\n color: var(--syn-color-primary-600);\n }\n\n .button--outline.button--primary:hover:not(.button--disabled),\n .button--outline.button--primary.button--checked:not(.button--disabled) {\n background-color: var(--syn-color-primary-600);\n color: var(--syn-color-neutral-0);\n }\n\n .button--outline.button--primary:active:not(.button--disabled) {\n border-color: var(--syn-color-primary-700);\n background-color: var(--syn-color-primary-700);\n color: var(--syn-color-neutral-0);\n }\n\n /*\n * Text buttons\n */\n\n .button--text {\n background-color: transparent;\n border-color: transparent;\n color: var(--syn-color-primary-600);\n }\n\n .button--text:hover:not(.button--disabled) {\n background-color: transparent;\n border-color: transparent;\n color: var(--syn-color-primary-500);\n }\n\n .button--text:focus-visible:not(.button--disabled) {\n background-color: transparent;\n border-color: transparent;\n color: var(--syn-color-primary-500);\n }\n\n .button--text:active:not(.button--disabled) {\n background-color: transparent;\n border-color: transparent;\n color: var(--syn-color-primary-700);\n }\n\n /*\n * Size modifiers\n */\n\n .button--small {\n height: auto;\n min-height: var(--syn-input-height-small);\n font-size: var(--syn-button-font-size-small);\n line-height: calc(var(--syn-input-height-small) - var(--syn-input-border-width) * 2);\n border-radius: var(--syn-input-border-radius-small);\n }\n\n .button--medium {\n height: auto;\n min-height: var(--syn-input-height-medium);\n font-size: var(--syn-button-font-size-medium);\n line-height: calc(var(--syn-input-height-medium) - var(--syn-input-border-width) * 2);\n border-radius: var(--syn-input-border-radius-medium);\n }\n\n .button--large {\n height: auto;\n min-height: var(--syn-input-height-large);\n font-size: var(--syn-button-font-size-large);\n line-height: calc(var(--syn-input-height-large) - var(--syn-input-border-width) * 2);\n border-radius: var(--syn-input-border-radius-large);\n }\n\n /*\n * Caret modifier\n */\n\n .button--caret .button__suffix {\n display: none;\n }\n\n .button--caret .button__caret {\n height: auto;\n }\n\n /*\n * Loading modifier\n */\n\n .button--loading {\n position: relative;\n cursor: wait;\n }\n\n .button--loading .button__prefix,\n .button--loading .button__label,\n .button--loading .button__suffix,\n .button--loading .button__caret {\n visibility: hidden;\n }\n\n .button--loading syn-spinner {\n --indicator-color: currentColor;\n position: absolute;\n font-size: 1em;\n height: 1em;\n width: 1em;\n top: calc(50% - 0.5em);\n left: calc(50% - 0.5em);\n }\n\n /*\n * Badges\n */\n\n .button ::slotted(syn-badge) {\n position: absolute;\n top: 0;\n right: 0;\n translate: 50% -50%;\n pointer-events: none;\n }\n\n .button--rtl ::slotted(syn-badge) {\n right: auto;\n left: 0;\n translate: -50% -50%;\n }\n\n /*\n * Button spacing\n */\n\n .button--has-label.button--small .button__label {\n padding: 0 var(--syn-spacing-small);\n }\n\n .button--has-label.button--medium .button__label {\n padding: 0 var(--syn-spacing-medium);\n }\n\n .button--has-label.button--large .button__label {\n padding: 0 var(--syn-spacing-large);\n }\n\n .button--has-prefix.button--small {\n padding-inline-start: var(--syn-spacing-x-small);\n }\n\n .button--has-prefix.button--small .button__label {\n padding-inline-start: var(--syn-spacing-x-small);\n }\n\n .button--has-prefix.button--medium {\n padding-inline-start: var(--syn-spacing-small);\n }\n\n .button--has-prefix.button--medium .button__label {\n padding-inline-start: var(--syn-spacing-small);\n }\n\n .button--has-prefix.button--large {\n padding-inline-start: var(--syn-spacing-small);\n }\n\n .button--has-prefix.button--large .button__label {\n padding-inline-start: var(--syn-spacing-small);\n }\n\n .button--has-suffix.button--small,\n .button--caret.button--small {\n padding-inline-end: var(--syn-spacing-x-small);\n }\n\n .button--has-suffix.button--small .button__label,\n .button--caret.button--small .button__label {\n padding-inline-end: var(--syn-spacing-x-small);\n }\n\n .button--has-suffix.button--medium,\n .button--caret.button--medium {\n padding-inline-end: var(--syn-spacing-small);\n }\n\n .button--has-suffix.button--medium .button__label,\n .button--caret.button--medium .button__label {\n padding-inline-end: var(--syn-spacing-small);\n }\n\n .button--has-suffix.button--large,\n .button--caret.button--large {\n padding-inline-end: var(--syn-spacing-small);\n }\n\n .button--has-suffix.button--large .button__label,\n .button--caret.button--large .button__label {\n padding-inline-end: var(--syn-spacing-small);\n }\n\n /*\n * Button groups support a variety of button types (e.g. buttons with tooltips, buttons as dropdown triggers, etc.).\n * This means buttons aren't always direct descendants of the button group, thus we can't target them with the\n * ::slotted selector. To work around this, the button group component does some magic to add these special classes to\n * buttons and we style them here instead.\n */\n\n :host(.syn-button-group__button--first:not(.syn-button-group__button--last)) .button {\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n }\n\n :host(.syn-button-group__button--inner) .button {\n border-radius: 0;\n }\n\n :host(.syn-button-group__button--last:not(.syn-button-group__button--first)) .button {\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n }\n\n /* All except the first */\n :host(.syn-button-group__button:not(.syn-button-group__button--first)) {\n margin-inline-start: calc(-1 * var(--syn-input-border-width));\n }\n\n /* Add a visual separator between solid buttons */\n :host(\n .syn-button-group__button:not(\n .syn-button-group__button--first,\n .syn-button-group__button--radio,\n [variant='filled']\n ):not(:hover)\n )\n .button:after {\n content: '';\n position: absolute;\n top: 0;\n inset-inline-start: 0;\n bottom: 0;\n border-left: solid 1px rgb(128 128 128 / 33%);\n mix-blend-mode: multiply;\n }\n\n /* Bump hovered, focused, and checked buttons up so their focus ring isn't clipped */\n :host(.syn-button-group__button--hover) {\n z-index: 1;\n }\n\n /* Focus and checked are always on top */\n :host(.syn-button-group__button--focus),\n :host(.syn-button-group__button[checked]) {\n z-index: 2;\n }\n\n ${customStyles}\n`;\n\n"],
5
+ "mappings": ";;;;;;;;AAMA,SAAS,WAAW;AAIpB,IAAO,wBAAQ;AAAA;AAAA,IAEX,wBAAe;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;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;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;AAAA;AAAA;AAAA;AAAA,IAsWf,4BAAY;AAAA;",
6
+ "names": []
7
+ }
@@ -0,0 +1,12 @@
1
+ import {
2
+ SynInput
3
+ } from "./chunk.EFGGZW6Y.js";
4
+
5
+ // src/components/input/input.ts
6
+ var input_default = SynInput;
7
+ SynInput.define("syn-input");
8
+
9
+ export {
10
+ input_default
11
+ };
12
+ //# sourceMappingURL=chunk.3XRGNU3R.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/components/input/input.ts"],
4
+ "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport SynInput from './input.component.js';\n\nexport * from './input.component.js';\nexport default SynInput;\n\nSynInput.define('syn-input');\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'syn-input': SynInput;\n }\n}\n"],
5
+ "mappings": ";;;;;AASA,IAAO,gBAAQ;AAEf,SAAS,OAAO,WAAW;",
6
+ "names": []
7
+ }
@@ -0,0 +1,12 @@
1
+ import {
2
+ SynButton
3
+ } from "./chunk.HLUOHJUC.js";
4
+
5
+ // src/components/button/button.ts
6
+ var button_default = SynButton;
7
+ SynButton.define("syn-button");
8
+
9
+ export {
10
+ button_default
11
+ };
12
+ //# sourceMappingURL=chunk.4OMRXGQ5.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/components/button/button.ts"],
4
+ "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport SynButton from './button.component.js';\n\nexport * from './button.component.js';\nexport default SynButton;\n\nSynButton.define('syn-button');\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'syn-button': SynButton;\n }\n}\n"],
5
+ "mappings": ";;;;;AASA,IAAO,iBAAQ;AAEf,UAAU,OAAO,YAAY;",
6
+ "names": []
7
+ }
@@ -0,0 +1,45 @@
1
+ import {
2
+ library_default_default
3
+ } from "./chunk.6C4JXZZN.js";
4
+ import {
5
+ library_system_default
6
+ } from "./chunk.U7ZJ22QM.js";
7
+
8
+ // src/components/icon/library.ts
9
+ var registry = [library_default_default, library_system_default];
10
+ var watchedIcons = [];
11
+ function watchIcon(icon) {
12
+ watchedIcons.push(icon);
13
+ }
14
+ function unwatchIcon(icon) {
15
+ watchedIcons = watchedIcons.filter((el) => el !== icon);
16
+ }
17
+ function getIconLibrary(name) {
18
+ return registry.find((lib) => lib.name === name);
19
+ }
20
+ function registerIconLibrary(name, options) {
21
+ unregisterIconLibrary(name);
22
+ registry.push({
23
+ name,
24
+ resolver: options.resolver,
25
+ mutator: options.mutator,
26
+ spriteSheet: options.spriteSheet
27
+ });
28
+ watchedIcons.forEach((icon) => {
29
+ if (icon.library === name) {
30
+ icon.setIcon();
31
+ }
32
+ });
33
+ }
34
+ function unregisterIconLibrary(name) {
35
+ registry = registry.filter((lib) => lib.name !== name);
36
+ }
37
+
38
+ export {
39
+ watchIcon,
40
+ unwatchIcon,
41
+ getIconLibrary,
42
+ registerIconLibrary,
43
+ unregisterIconLibrary
44
+ };
45
+ //# sourceMappingURL=chunk.5OIEI73E.js.map