@aquera/nile-elements 2.0.9 → 2.0.10
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/README.md +8 -0
- package/demo/nxtgen-classes.css +5 -5
- package/demo/nxtgen-dark.css +25 -25
- package/demo/nxtgen-properties.css +2 -2
- package/demo/nxtgen-utilities.css +5 -5
- package/demo/nxtgen.css +5 -5
- package/demo/utilities.css +2 -2
- package/demo/variables.css +2 -2
- package/dist/index.js +17 -14
- package/dist/nile-badge/nile-badge.css.cjs.js +1 -1
- package/dist/nile-badge/nile-badge.css.cjs.js.map +1 -1
- package/dist/nile-badge/nile-badge.css.esm.js +2 -2
- package/dist/nile-button-toggle/nile-button-toggle.css.cjs.js +1 -1
- package/dist/nile-button-toggle/nile-button-toggle.css.cjs.js.map +1 -1
- package/dist/nile-button-toggle/nile-button-toggle.css.esm.js +2 -2
- package/dist/nile-code-editor/nile-code-editor.cjs.js +1 -1
- package/dist/nile-code-editor/nile-code-editor.cjs.js.map +1 -1
- package/dist/nile-code-editor/nile-code-editor.esm.js +1 -1
- package/dist/nile-menu-item/nile-menu-item.css.cjs.js +1 -1
- package/dist/nile-menu-item/nile-menu-item.css.cjs.js.map +1 -1
- package/dist/nile-menu-item/nile-menu-item.css.esm.js +1 -1
- package/dist/nile-rich-text-editor/nile-rich-text-editor.css.cjs.js +1 -1
- package/dist/nile-rich-text-editor/nile-rich-text-editor.css.cjs.js.map +1 -1
- package/dist/nile-rich-text-editor/nile-rich-text-editor.css.esm.js +5 -2
- package/dist/nile-toast/nile-toast.css.cjs.js +1 -1
- package/dist/nile-toast/nile-toast.css.cjs.js.map +1 -1
- package/dist/nile-toast/nile-toast.css.esm.js +5 -5
- package/dist/src/nile-badge/nile-badge.css.js +2 -2
- package/dist/src/nile-badge/nile-badge.css.js.map +1 -1
- package/dist/src/nile-button-toggle/nile-button-toggle.css.js +2 -2
- package/dist/src/nile-button-toggle/nile-button-toggle.css.js.map +1 -1
- package/dist/src/nile-code-editor/nile-code-editor.d.ts +1 -1
- package/dist/src/nile-code-editor/nile-code-editor.js +2 -2
- package/dist/src/nile-code-editor/nile-code-editor.js.map +1 -1
- package/dist/src/nile-menu-item/nile-menu-item.css.js +1 -1
- package/dist/src/nile-menu-item/nile-menu-item.css.js.map +1 -1
- package/dist/src/nile-rich-text-editor/nile-rich-text-editor.css.js +5 -2
- package/dist/src/nile-rich-text-editor/nile-rich-text-editor.css.js.map +1 -1
- package/dist/src/nile-toast/nile-toast.css.js +5 -5
- package/dist/src/nile-toast/nile-toast.css.js.map +1 -1
- package/dist/src/version.js +1 -1
- package/dist/src/version.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/version.cjs.js +1 -1
- package/dist/version.cjs.js.map +1 -1
- package/dist/version.esm.js +1 -1
- package/package.json +1 -1
- package/src/nile-badge/nile-badge.css.ts +2 -2
- package/src/nile-button-toggle/nile-button-toggle.css.ts +2 -2
- package/src/nile-code-editor/nile-code-editor.ts +2 -2
- package/src/nile-menu-item/nile-menu-item.css.ts +1 -1
- package/src/nile-rich-text-editor/nile-rich-text-editor.css.ts +5 -2
- package/src/nile-toast/nile-toast.css.ts +5 -5
package/README.md
CHANGED
|
@@ -91,6 +91,14 @@ To run a local development server that serves the basic demo located in `demo/in
|
|
|
91
91
|
|
|
92
92
|
In this section, you can find the updates for each release of `nile-elements`. It's a good practice to maintain detailed release notes to help users and developers understand what changes have been made from one version to another and how these changes might affect their projects.
|
|
93
93
|
|
|
94
|
+
#### Version 2.0.10 (September 24, 2026)
|
|
95
|
+
- Badge: The `gray` variant's border, in both the default and `pill-outline` styles, now falls back to `--ng-componentcolors-utility-gray-300` instead of `-200`. In dark mode `-200` (`graydarkmode-800`) sat almost on top of the badge fill (`graydarkmode-900`), so the border barely showed (UIF-1363)
|
|
96
|
+
- Button Toggle: The active toggle's text color, including on hover, now falls back to `--ng-colors-text-brand-primary-900` instead of `--ng-colors-bg-brand-solid`, so the label is colored with a text token rather than a background token (UIF-1365)
|
|
97
|
+
- Code Editor: The active-line highlight (`highlightActiveLine()`) is now added in both themes; previously it was only added alongside One Dark, so light mode had no active-line highlight (`basicSetup` turns it off). One Dark itself is still applied only in dark mode (UIF-1361)
|
|
98
|
+
- Menu Item: The hover background now falls back to `--ng-colors-bg-primary-hover` instead of `--ng-colors-bg-secondary-hover`, matching the surface the menu sits on (UIF-1366)
|
|
99
|
+
- Rich Text Editor: The host, the editable area and `nile-rte-preview` now set their text color to `--ng-colors-text-primary-900` explicitly, so content no longer inherits a color that is unreadable on the dark editor background. Image captions now use `--ng-colors-text-tertiary-600` and the empty-state placeholder uses `--ng-colors-text-placeholder`, both in place of `--ng-colors-text-secondary` (UIF-1359)
|
|
100
|
+
- Toast: The border of all five variants (`success`, `info`, `warning`, `error`, `gray`) now falls back to `--ng-colors-border-primary` instead of `--ng-colors-border-secondary-alt`, which in dark mode matched the toast background and hid the edge (UIF-1364)
|
|
101
|
+
|
|
94
102
|
#### Version 2.0.9 (September 22, 2026)
|
|
95
103
|
- Nile Select: Fixed multiselect issues — the `+N` indicator showing a stale count after the component was hidden and re-shown, the `+N` indicator not being recalculated after the selected values were edited, selection and deselection causing sibling components to flicker, long selected values being truncated so the remove (×) button became unreachable, and a long free-text value pushing the remove (×) button out of view in editable multi-value mode. Adds `chipMinWidth` (default `110`), `chipMaxWidth` (default `180`) and `showTooltip` (off by default) (UIF-1335, UIF-1336, UIF-1337, UIF-1338, UIF-1339)
|
|
96
104
|
- Nile Virtual Select: Fixed long selected values being truncated so the remove (×) button became unreachable. Adds `chipMinWidth` (default `110`), `chipMaxWidth` (default `180`) and `showTooltip` (off by default) (UIF-1338)
|
package/demo/nxtgen-classes.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
/* @nile-version 1.3.
|
|
2
|
-
:root { --nile-version: "1.3.
|
|
1
|
+
/* @nile-version 1.3.3 */
|
|
2
|
+
:root { --nile-version: "1.3.3"; }
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* Do not edit directly
|
|
@@ -4159,7 +4159,7 @@
|
|
|
4159
4159
|
/* colors-text-white: var(--ng-color-base-white) */
|
|
4160
4160
|
.ng-text-white { color: var(--ng-colors-text-white); }
|
|
4161
4161
|
|
|
4162
|
-
/* colors-text-disabled: var(--ng-color-graylightmode-
|
|
4162
|
+
/* colors-text-disabled: var(--ng-color-graylightmode-400) */
|
|
4163
4163
|
.ng-text-disabled { color: var(--ng-colors-text-disabled); }
|
|
4164
4164
|
|
|
4165
4165
|
/* colors-text-placeholder: var(--ng-color-graylightmode-500) */
|
|
@@ -4210,10 +4210,10 @@
|
|
|
4210
4210
|
/* colors-border-neutral: var(--ng-color-graylightmode-400) */
|
|
4211
4211
|
.ng-border-neutral { border-color: var(--ng-colors-border-neutral); }
|
|
4212
4212
|
|
|
4213
|
-
/* colors-border-disabled: var(--ng-color-graylightmode-
|
|
4213
|
+
/* colors-border-disabled: var(--ng-color-graylightmode-200) */
|
|
4214
4214
|
.ng-border-disabled { border-color: var(--ng-colors-border-disabled); }
|
|
4215
4215
|
|
|
4216
|
-
/* colors-border-disabled-subtle: var(--ng-color-graylightmode-
|
|
4216
|
+
/* colors-border-disabled-subtle: var(--ng-color-graylightmode-300) */
|
|
4217
4217
|
.ng-border-disabled-subtle { border-color: var(--ng-colors-border-disabled-subtle); }
|
|
4218
4218
|
|
|
4219
4219
|
/* colors-border-brand: var(--ng-color-bluedark-500) */
|
package/demo/nxtgen-dark.css
CHANGED
|
@@ -449,7 +449,7 @@
|
|
|
449
449
|
--ng-colors-text-quaternary-500: var(--ng-color-graylightmode-500);
|
|
450
450
|
--ng-colors-text-quaternary-on-brand: var(--ng-color-bluedark-300);
|
|
451
451
|
--ng-colors-text-white: var(--ng-color-base-white);
|
|
452
|
-
--ng-colors-text-disabled: var(--ng-color-graylightmode-
|
|
452
|
+
--ng-colors-text-disabled: var(--ng-color-graylightmode-400);
|
|
453
453
|
--ng-colors-text-placeholder: var(--ng-color-graylightmode-500);
|
|
454
454
|
--ng-colors-text-placeholder-subtle: var(--ng-color-graylightmode-300);
|
|
455
455
|
--ng-colors-text-brand-primary-900: var(--ng-color-bluedark-900);
|
|
@@ -466,8 +466,8 @@
|
|
|
466
466
|
--ng-colors-border-secondary-alt: #00000014;
|
|
467
467
|
--ng-colors-border-tertiary: var(--ng-color-graylightmode-100);
|
|
468
468
|
--ng-colors-border-neutral: var(--ng-color-graylightmode-400);
|
|
469
|
-
--ng-colors-border-disabled: var(--ng-color-graylightmode-
|
|
470
|
-
--ng-colors-border-disabled-subtle: var(--ng-color-graylightmode-
|
|
469
|
+
--ng-colors-border-disabled: var(--ng-color-graylightmode-200);
|
|
470
|
+
--ng-colors-border-disabled-subtle: var(--ng-color-graylightmode-300);
|
|
471
471
|
--ng-colors-border-brand: var(--ng-color-bluedark-500);
|
|
472
472
|
--ng-colors-border-brand-alt: var(--ng-color-bluedark-600);
|
|
473
473
|
--ng-colors-border-error: var(--ng-color-error-500);
|
|
@@ -893,10 +893,10 @@
|
|
|
893
893
|
--ng-colors-border-primary: var(--ng-color-graydarkmode-600);
|
|
894
894
|
--ng-colors-border-secondary: var(--ng-color-graydarkmode-700);
|
|
895
895
|
--ng-colors-border-secondary-alt: var(--ng-color-graydarkmode-800);
|
|
896
|
-
--ng-colors-border-tertiary: var(--ng-color-graydarkmode-800);
|
|
897
|
-
--ng-colors-border-neutral: var(--ng-color-graydarkmode-
|
|
896
|
+
--ng-colors-border-tertiary: var(--ng-color-graydarkmode-800);
|
|
897
|
+
--ng-colors-border-neutral: var(--ng-color-graydarkmode-500);
|
|
898
898
|
--ng-colors-border-disabled: var(--ng-color-graydarkmode-700);
|
|
899
|
-
--ng-colors-border-disabled-subtle: var(--ng-color-graydarkmode-
|
|
899
|
+
--ng-colors-border-disabled-subtle: var(--ng-color-graydarkmode-700);
|
|
900
900
|
--ng-colors-border-brand: var(--ng-color-bluedark-400);
|
|
901
901
|
--ng-colors-border-brand-alt: var(--ng-color-bluedark-500);
|
|
902
902
|
--ng-colors-border-error: var(--ng-color-error-400);
|
|
@@ -931,7 +931,7 @@
|
|
|
931
931
|
|
|
932
932
|
--ng-componentcolors-utility-gray-100: var(--ng-color-graydarkmode-800);
|
|
933
933
|
--ng-componentcolors-utility-gray-200: var(--ng-color-graydarkmode-800);
|
|
934
|
-
--ng-componentcolors-utility-gray-300: var(--ng-color-graydarkmode-
|
|
934
|
+
--ng-componentcolors-utility-gray-300: var(--ng-color-graydarkmode-600);
|
|
935
935
|
--ng-componentcolors-utility-gray-400: var(--ng-color-graydarkmode-600);
|
|
936
936
|
--ng-componentcolors-utility-gray-500: var(--ng-color-graydarkmode-500);
|
|
937
937
|
--ng-componentcolors-utility-gray-600: var(--ng-color-graydarkmode-400);
|
|
@@ -1060,7 +1060,7 @@
|
|
|
1060
1060
|
--ng-colors-fg-tertiary-hover: var(--ng-color-graydarkmode-300);
|
|
1061
1061
|
--ng-colors-fg-quaternary-400: var(--ng-color-graydarkmode-500);
|
|
1062
1062
|
--ng-colors-fg-quaternary-hover: var(--ng-color-graydarkmode-400);
|
|
1063
|
-
--ng-colors-fg-disabled: var(--ng-color-graydarkmode-
|
|
1063
|
+
--ng-colors-fg-disabled: var(--ng-color-graydarkmode-500);
|
|
1064
1064
|
--ng-colors-fg-disabled-subtle: var(--ng-color-graydarkmode-700);
|
|
1065
1065
|
--ng-colors-fg-brand-primary-600: var(--ng-color-bluedark-400);
|
|
1066
1066
|
--ng-colors-fg-brand-secondary-500: var(--ng-color-bluedark-400);
|
|
@@ -1071,7 +1071,7 @@
|
|
|
1071
1071
|
--ng-colors-fg-warning-secondary: var(--ng-color-warning-400);
|
|
1072
1072
|
--ng-colors-fg-success-primary: var(--ng-color-success-400);
|
|
1073
1073
|
--ng-colors-fg-success-secondary: var(--ng-color-success-400);
|
|
1074
|
-
--ng-colors-bg-primary: var(--ng-color-graydarkmode-800);
|
|
1074
|
+
--ng-colors-bg-primary: var(--ng-color-graydarkmode-800);
|
|
1075
1075
|
--ng-colors-effects-focus-ring: var(--ng-color-bluedark-400);
|
|
1076
1076
|
--ng-colors-effects-focus-ring-error: var(--ng-color-error-400);
|
|
1077
1077
|
--ng-colors-effects-shadow-xs: #0000004D;
|
|
@@ -1095,19 +1095,19 @@
|
|
|
1095
1095
|
--ng-colors-effects-shadow-3xl-02: #00000033;
|
|
1096
1096
|
--ng-colors-effects-shadow-skeumorphic-inner: #0000004D;
|
|
1097
1097
|
--ng-colors-effects-shadow-skeumorphic-inner-border: var(--ng-colors-border-primary);
|
|
1098
|
-
--ng-colors-bg-primary-alt: var(--ng-color-graydarkmode-800);
|
|
1098
|
+
--ng-colors-bg-primary-alt: var(--ng-color-graydarkmode-800);
|
|
1099
1099
|
--ng-colors-bg-primary-hover: var(--ng-color-graydarkmode-900);
|
|
1100
1100
|
--ng-colors-bg-primary-solid: var(--ng-color-graydarkmode-100);
|
|
1101
1101
|
--ng-colors-bg-secondary: var(--ng-color-graydarkmode-900);
|
|
1102
1102
|
--ng-colors-bg-secondary-alt: var(--ng-color-graydarkmode-900);
|
|
1103
1103
|
--ng-colors-bg-secondary-hover: var(--ng-color-graydarkmode-800);
|
|
1104
|
-
--ng-colors-bg-secondary-subtle: var(--ng-color-graydarkmode-800);
|
|
1104
|
+
--ng-colors-bg-secondary-subtle: var(--ng-color-graydarkmode-800);
|
|
1105
1105
|
--ng-colors-bg-secondary-solid: var(--ng-color-graydarkmode-400);
|
|
1106
|
-
--ng-colors-bg-tertiary: var(--ng-color-graydarkmode-950);
|
|
1106
|
+
--ng-colors-bg-tertiary: var(--ng-color-graydarkmode-950);
|
|
1107
1107
|
--ng-colors-bg-quaternary: var(--ng-color-graydarkmode-700);
|
|
1108
1108
|
--ng-colors-bg-quaternary-alt: var(--ng-color-graydarkmode-600);
|
|
1109
1109
|
--ng-colors-bg-active: var(--ng-color-graydarkmode-900);
|
|
1110
|
-
--ng-colors-bg-disabled: var(--ng-color-graydarkmode-
|
|
1110
|
+
--ng-colors-bg-disabled: var(--ng-color-graydarkmode-700);
|
|
1111
1111
|
--ng-colors-bg-disabled-subtle: var(--ng-color-graydarkmode-800);
|
|
1112
1112
|
--ng-colors-bg-overlay: var(--ng-color-base-black);
|
|
1113
1113
|
--ng-colors-bg-brand-primary: var(--ng-color-bluedark-950);
|
|
@@ -1248,7 +1248,7 @@
|
|
|
1248
1248
|
--ng-colors-text-quaternary-500: var(--ng-color-graylightmode-500);
|
|
1249
1249
|
--ng-colors-text-quaternary-on-brand: var(--ng-color-bluedark-300);
|
|
1250
1250
|
--ng-colors-text-white: var(--ng-color-base-white);
|
|
1251
|
-
--ng-colors-text-disabled: var(--ng-color-graylightmode-
|
|
1251
|
+
--ng-colors-text-disabled: var(--ng-color-graylightmode-400);
|
|
1252
1252
|
--ng-colors-text-placeholder: var(--ng-color-graylightmode-500);
|
|
1253
1253
|
--ng-colors-text-placeholder-subtle: var(--ng-color-graylightmode-300);
|
|
1254
1254
|
--ng-colors-text-brand-primary-900: var(--ng-color-bluedark-900);
|
|
@@ -1265,8 +1265,8 @@
|
|
|
1265
1265
|
--ng-colors-border-secondary-alt: #00000014;
|
|
1266
1266
|
--ng-colors-border-tertiary: var(--ng-color-graylightmode-100);
|
|
1267
1267
|
--ng-colors-border-neutral: var(--ng-color-graylightmode-400);
|
|
1268
|
-
--ng-colors-border-disabled: var(--ng-color-graylightmode-
|
|
1269
|
-
--ng-colors-border-disabled-subtle: var(--ng-color-graylightmode-
|
|
1268
|
+
--ng-colors-border-disabled: var(--ng-color-graylightmode-200);
|
|
1269
|
+
--ng-colors-border-disabled-subtle: var(--ng-color-graylightmode-300);
|
|
1270
1270
|
--ng-colors-border-brand: var(--ng-color-bluedark-500);
|
|
1271
1271
|
--ng-colors-border-brand-alt: var(--ng-color-bluedark-600);
|
|
1272
1272
|
--ng-colors-border-error: var(--ng-color-error-500);
|
|
@@ -1692,10 +1692,10 @@
|
|
|
1692
1692
|
--ng-colors-border-primary: var(--ng-color-graydarkmode-600);
|
|
1693
1693
|
--ng-colors-border-secondary: var(--ng-color-graydarkmode-700);
|
|
1694
1694
|
--ng-colors-border-secondary-alt: var(--ng-color-graydarkmode-800);
|
|
1695
|
-
--ng-colors-border-tertiary: var(--ng-color-graydarkmode-800);
|
|
1696
|
-
--ng-colors-border-neutral: var(--ng-color-graydarkmode-
|
|
1695
|
+
--ng-colors-border-tertiary: var(--ng-color-graydarkmode-800);
|
|
1696
|
+
--ng-colors-border-neutral: var(--ng-color-graydarkmode-500);
|
|
1697
1697
|
--ng-colors-border-disabled: var(--ng-color-graydarkmode-700);
|
|
1698
|
-
--ng-colors-border-disabled-subtle: var(--ng-color-graydarkmode-
|
|
1698
|
+
--ng-colors-border-disabled-subtle: var(--ng-color-graydarkmode-700);
|
|
1699
1699
|
--ng-colors-border-brand: var(--ng-color-bluedark-400);
|
|
1700
1700
|
--ng-colors-border-brand-alt: var(--ng-color-bluedark-500);
|
|
1701
1701
|
--ng-colors-border-error: var(--ng-color-error-400);
|
|
@@ -1730,7 +1730,7 @@
|
|
|
1730
1730
|
|
|
1731
1731
|
--ng-componentcolors-utility-gray-100: var(--ng-color-graydarkmode-800);
|
|
1732
1732
|
--ng-componentcolors-utility-gray-200: var(--ng-color-graydarkmode-800);
|
|
1733
|
-
--ng-componentcolors-utility-gray-300: var(--ng-color-graydarkmode-
|
|
1733
|
+
--ng-componentcolors-utility-gray-300: var(--ng-color-graydarkmode-600);
|
|
1734
1734
|
--ng-componentcolors-utility-gray-400: var(--ng-color-graydarkmode-600);
|
|
1735
1735
|
--ng-componentcolors-utility-gray-500: var(--ng-color-graydarkmode-500);
|
|
1736
1736
|
--ng-componentcolors-utility-gray-600: var(--ng-color-graydarkmode-400);
|
|
@@ -1859,7 +1859,7 @@
|
|
|
1859
1859
|
--ng-colors-fg-tertiary-hover: var(--ng-color-graydarkmode-300);
|
|
1860
1860
|
--ng-colors-fg-quaternary-400: var(--ng-color-graydarkmode-500);
|
|
1861
1861
|
--ng-colors-fg-quaternary-hover: var(--ng-color-graydarkmode-400);
|
|
1862
|
-
--ng-colors-fg-disabled: var(--ng-color-graydarkmode-
|
|
1862
|
+
--ng-colors-fg-disabled: var(--ng-color-graydarkmode-500);
|
|
1863
1863
|
--ng-colors-fg-disabled-subtle: var(--ng-color-graydarkmode-700);
|
|
1864
1864
|
--ng-colors-fg-brand-primary-600: var(--ng-color-bluedark-400);
|
|
1865
1865
|
--ng-colors-fg-brand-secondary-500: var(--ng-color-bluedark-400);
|
|
@@ -1894,19 +1894,19 @@
|
|
|
1894
1894
|
--ng-colors-effects-shadow-3xl-02: #00000033;
|
|
1895
1895
|
--ng-colors-effects-shadow-skeumorphic-inner: #0000004D;
|
|
1896
1896
|
--ng-colors-effects-shadow-skeumorphic-inner-border: var(--ng-colors-border-primary);
|
|
1897
|
-
--ng-colors-bg-primary-alt: var(--ng-color-graydarkmode-800);
|
|
1897
|
+
--ng-colors-bg-primary-alt: var(--ng-color-graydarkmode-800);
|
|
1898
1898
|
--ng-colors-bg-primary-hover: var(--ng-color-graydarkmode-900);
|
|
1899
1899
|
--ng-colors-bg-primary-solid: var(--ng-color-graydarkmode-100);
|
|
1900
1900
|
--ng-colors-bg-secondary: var(--ng-color-graydarkmode-900);
|
|
1901
1901
|
--ng-colors-bg-secondary-alt: var(--ng-color-graydarkmode-900);
|
|
1902
1902
|
--ng-colors-bg-secondary-hover: var(--ng-color-graydarkmode-800);
|
|
1903
|
-
--ng-colors-bg-secondary-subtle: var(--ng-color-graydarkmode-800);
|
|
1903
|
+
--ng-colors-bg-secondary-subtle: var(--ng-color-graydarkmode-800);
|
|
1904
1904
|
--ng-colors-bg-secondary-solid: var(--ng-color-graydarkmode-400);
|
|
1905
|
-
--ng-colors-bg-tertiary: var(--ng-color-graydarkmode-950);
|
|
1905
|
+
--ng-colors-bg-tertiary: var(--ng-color-graydarkmode-950);
|
|
1906
1906
|
--ng-colors-bg-quaternary: var(--ng-color-graydarkmode-700);
|
|
1907
1907
|
--ng-colors-bg-quaternary-alt: var(--ng-color-graydarkmode-600);
|
|
1908
1908
|
--ng-colors-bg-active: var(--ng-color-graydarkmode-900);
|
|
1909
|
-
--ng-colors-bg-disabled: var(--ng-color-graydarkmode-
|
|
1909
|
+
--ng-colors-bg-disabled: var(--ng-color-graydarkmode-700);
|
|
1910
1910
|
--ng-colors-bg-disabled-subtle: var(--ng-color-graydarkmode-800);
|
|
1911
1911
|
--ng-colors-bg-overlay: var(--ng-color-base-black);
|
|
1912
1912
|
--ng-colors-bg-brand-primary: var(--ng-color-bluedark-950);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
/* @nile-version 1.3.
|
|
2
|
-
:root { --nile-version: "1.3.
|
|
1
|
+
/* @nile-version 1.3.3 */
|
|
2
|
+
:root { --nile-version: "1.3.3"; }
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* Do not edit directly
|
|
@@ -9407,7 +9407,7 @@
|
|
|
9407
9407
|
/* colors-text-white: var(--ng-color-base-white) */
|
|
9408
9408
|
.ng-text-white { color: var(--ng-colors-text-white); }
|
|
9409
9409
|
|
|
9410
|
-
/* colors-text-disabled: var(--ng-color-graylightmode-
|
|
9410
|
+
/* colors-text-disabled: var(--ng-color-graylightmode-400) */
|
|
9411
9411
|
.ng-text-disabled { color: var(--ng-colors-text-disabled); }
|
|
9412
9412
|
|
|
9413
9413
|
/* colors-text-placeholder: var(--ng-color-graylightmode-500) */
|
|
@@ -9458,10 +9458,10 @@
|
|
|
9458
9458
|
/* colors-border-neutral: var(--ng-color-graylightmode-400) */
|
|
9459
9459
|
.ng-border-neutral { border-color: var(--ng-colors-border-neutral); }
|
|
9460
9460
|
|
|
9461
|
-
/* colors-border-disabled: var(--ng-color-graylightmode-
|
|
9461
|
+
/* colors-border-disabled: var(--ng-color-graylightmode-200) */
|
|
9462
9462
|
.ng-border-disabled { border-color: var(--ng-colors-border-disabled); }
|
|
9463
9463
|
|
|
9464
|
-
/* colors-border-disabled-subtle: var(--ng-color-graylightmode-
|
|
9464
|
+
/* colors-border-disabled-subtle: var(--ng-color-graylightmode-300) */
|
|
9465
9465
|
.ng-border-disabled-subtle { border-color: var(--ng-colors-border-disabled-subtle); }
|
|
9466
9466
|
|
|
9467
9467
|
/* colors-border-brand: var(--ng-color-bluedark-500) */
|
package/demo/nxtgen.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
/* @nile-version 1.3.
|
|
2
|
-
:root { --nile-version: "1.3.
|
|
1
|
+
/* @nile-version 1.3.3 */
|
|
2
|
+
:root { --nile-version: "1.3.3"; }
|
|
3
3
|
|
|
4
4
|
/* _Primitives - Style */
|
|
5
5
|
|
|
@@ -448,7 +448,7 @@
|
|
|
448
448
|
--ng-colors-text-quaternary-500: var(--ng-color-graylightmode-500);
|
|
449
449
|
--ng-colors-text-quaternary-on-brand: var(--ng-color-bluedark-300);
|
|
450
450
|
--ng-colors-text-white: var(--ng-color-base-white);
|
|
451
|
-
--ng-colors-text-disabled: var(--ng-color-graylightmode-
|
|
451
|
+
--ng-colors-text-disabled: var(--ng-color-graylightmode-400);
|
|
452
452
|
--ng-colors-text-placeholder: var(--ng-color-graylightmode-500);
|
|
453
453
|
--ng-colors-text-placeholder-subtle: var(--ng-color-graylightmode-300);
|
|
454
454
|
--ng-colors-text-brand-primary-900: var(--ng-color-bluedark-900);
|
|
@@ -465,8 +465,8 @@
|
|
|
465
465
|
--ng-colors-border-secondary-alt: #00000014;
|
|
466
466
|
--ng-colors-border-tertiary: var(--ng-color-graylightmode-100);
|
|
467
467
|
--ng-colors-border-neutral: var(--ng-color-graylightmode-400);
|
|
468
|
-
--ng-colors-border-disabled: var(--ng-color-graylightmode-
|
|
469
|
-
--ng-colors-border-disabled-subtle: var(--ng-color-graylightmode-
|
|
468
|
+
--ng-colors-border-disabled: var(--ng-color-graylightmode-200);
|
|
469
|
+
--ng-colors-border-disabled-subtle: var(--ng-color-graylightmode-300);
|
|
470
470
|
--ng-colors-border-brand: var(--ng-color-bluedark-500);
|
|
471
471
|
--ng-colors-border-brand-alt: var(--ng-color-bluedark-600);
|
|
472
472
|
--ng-colors-border-error: var(--ng-color-error-500);
|
package/demo/utilities.css
CHANGED
package/demo/variables.css
CHANGED
package/dist/index.js
CHANGED
|
@@ -2557,7 +2557,7 @@ const Ie=1,je=2,ze=3,me=4,Te=e=>(...t)=>({_$litDirective$:e,values:t});let xe=cl
|
|
|
2557
2557
|
color: var(--nile-badge-color-font-gray, var(--ng-componentcolors-utility-gray-700));
|
|
2558
2558
|
border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
|
|
2559
2559
|
border-style: solid;
|
|
2560
|
-
border-color: var(--nile-badge-color-border-color-gray, var(--ng-componentcolors-utility-gray-
|
|
2560
|
+
border-color: var(--nile-badge-color-border-color-gray, var(--ng-componentcolors-utility-gray-300));
|
|
2561
2561
|
background: var(--nile-badge-color-background-gray, var(--ng-componentcolors-utility-gray-50));
|
|
2562
2562
|
}
|
|
2563
2563
|
|
|
@@ -2606,7 +2606,7 @@ const Ie=1,je=2,ze=3,me=4,Te=e=>(...t)=>({_$litDirective$:e,values:t});let xe=cl
|
|
|
2606
2606
|
}
|
|
2607
2607
|
|
|
2608
2608
|
.badge--gray.badge--pill-outline {
|
|
2609
|
-
border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-gray, var(--ng-componentcolors-utility-gray-
|
|
2609
|
+
border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-gray, var(--ng-componentcolors-utility-gray-300));
|
|
2610
2610
|
}
|
|
2611
2611
|
|
|
2612
2612
|
|
|
@@ -7468,7 +7468,7 @@ class Ys{constructor(e){this._element=null;const t=e??window;this._node=t,e&&(th
|
|
|
7468
7468
|
}
|
|
7469
7469
|
|
|
7470
7470
|
:host(:hover:not([active], [aria-disabled='true'], :focus-visible)) .menu-item {
|
|
7471
|
-
background-color: var(--nile-colors-neutral-100,var(--ng-colors-bg-
|
|
7471
|
+
background-color: var(--nile-colors-neutral-100,var(--ng-colors-bg-primary-hover));
|
|
7472
7472
|
color: var(--nile-colors-dark-900,var(--ng-colors-text-secondary-hover));
|
|
7473
7473
|
}
|
|
7474
7474
|
|
|
@@ -11104,12 +11104,12 @@ ${this.showMonthDropdown||this.showYearDropdown?R`
|
|
|
11104
11104
|
|
|
11105
11105
|
.nile-button-toggle__active {
|
|
11106
11106
|
background-color: var( --nile-colors-neutral-500, var(--ng-colors-bg-brand-primary) );
|
|
11107
|
-
color: var(--nile-colors-dark-900, var(--ng-colors-
|
|
11107
|
+
color: var(--nile-colors-dark-900, var(--ng-colors-text-brand-primary-900));
|
|
11108
11108
|
}
|
|
11109
11109
|
|
|
11110
11110
|
.nile-button-toggle__active:hover {
|
|
11111
11111
|
background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-brand-primary));
|
|
11112
|
-
color: var(--nile-colors-dark-900, var(--ng-colors-
|
|
11112
|
+
color: var(--nile-colors-dark-900, var(--ng-colors-text-brand-primary-900));
|
|
11113
11113
|
}
|
|
11114
11114
|
|
|
11115
11115
|
.nile-button-toggle__disabled {
|
|
@@ -12298,7 +12298,7 @@ ${this.showMonthDropdown||this.showYearDropdown?R`
|
|
|
12298
12298
|
<nile-form-error-message
|
|
12299
12299
|
>${this.errorMessage}</nile-form-error-message
|
|
12300
12300
|
>
|
|
12301
|
-
`:""}`}createNewView(e=!0){this.view&&this.view.destroy(),this.createState(),this.view=new aN({state:this.viewState,parent:this.codeEditor}),this.view.dom.addEventListener("keydown",(e=>{this.checkForSpaceKey(e),this.handleEscapeKey(e)}),!0),e&&this.emit("nile-after-update",{createNewView:this.createNewView,codeMirrorInstance:this.view},!1)}checkForSpaceKey(e){"Space"!==e.code||e.ctrlKey?this.isSpacePressed=!1:this.isSpacePressed=!0}closeCompletion(){this.view&&lT(this.view)}handleEscapeKey(e){"Escape"===e.key&&this.view&&null!==function(e){let t=e.field(iT,!1);return t&&t.active.some((e=>e.isPending))?"pending":t&&t.active.some((e=>0!=e.state))?"active":null}(this.view.state)&&(e.stopPropagation(),e.preventDefault(),lT(this.view))}createState(){const e=this.lineNumbersComp.of(this.getLineNumbersExension()),t=this.readOnlyComp.of(this.getReadOnlyExtension()),i=this.restrictSingleLineComp.of(this.getSingleLineExtension()),n=this.placeholderComp.of(this.getPlaceholderExtension()),o=this.themeComp.of(this.getCustomThemeExtension()),r=this.defaultSyntaxHighlightingComp.of(this.getDefaultSyntaxHighlightingExtension()),s=this.autoCompleteStyleComp.of(this.getAutoCompleteStyleExtension()),a=this.getLanguageExtension(),l=this.customCompletionComp.of(DA.data.of({autocomplete:this.customAutocomplete}));return this.viewState=kc.create({doc:this.multiline?this.value:zb(this.value),extensions:[sb({highlightActiveLine:!1,foldGutter:this.enableFoldGutters,enableSearch:this.enableSearch}),e,t,i,l,n,r,this.autoCompletionComp.of(GT({aboveCursor:this.aboveCursor})),a,this.darkThemeComp.of(this.getDarkThemeExtension()),o,s,this.getTabCompletionKeymap(),aN.updateListener.of((e=>{e.docChanged&&(this.debounce?this.emitAfterTimeout({value:this.view.state.doc.toString()}):this.emit("nile-change",{value:this.view.state.doc.toString()}))})),aN.domEventHandlers({focus:()=>this.dispatchEvent(new Event("nile-focus")),blur:()=>this.dispatchEvent(new Event("nile-blur"))})]}),this.viewState}getNestedSuggestions(e,t,i){if(!function(e){return/^([a-zA-Z_$][\w$]*)(\.[a-zA-Z_$][\w$]*|\[\s*(['"]?[a-zA-Z0-9_$]*['"]?)\s*\])*([\.\[])?$/.test(e)}(t)||![".","["].includes(t.at(-1)))return null;const n=function(e){const t=/([a-zA-Z_$][\w$]*)(\[(?:[^\]]+)\]|\.[a-zA-Z_$][\w$]*)*/g,i=[...e.matchAll(t)];if(i.length>0){const t=[i[0][1]],n=e.match(/\[(.*?)\]|\.(\w+)/g)||[];for(const e of n)e.startsWith("[")?t.push(e.slice(1,-1).replace(/['"]/g,"")):e.startsWith(".")&&t.push(e.slice(1));return t}return null}(t);if(!n)return null;const o=i.replace(/["'\[]/g,""),r=o!==i,s="["===t.at(-1);if("."===t.at(-1)&&r)return null;let a=function(e,t){return t.reduce(((e,t)=>e&&"object"==typeof e?e[t]:null),e)}(this.customAutoCompletions,n);return a&&"object"==typeof a?(o&&(a=Object.fromEntries(Object.entries(a).filter((([e])=>e.toLowerCase().startsWith(o.toLowerCase()))))),{from:e.pos-o.length,options:Object.keys(a).map((e=>({label:e,type:"property",info:`Key of ${n[n.length-1]}`,apply:this.allowVariableInCustomSuggestion||!s||r?e:`'${e}'`,boost:999})))}):null}getTopLevelSuggestions(e,t){const i=t.match(/([a-zA-Z_$][\w$]*)$/);if(!i){if(""===t.trim()&&!this.isSpacePressed){const t=Object.keys(this.customAutoCompletions).filter((e=>Object.keys(this.customAutoCompletions[e]).length)).map((e=>({label:e,type:"property",apply:e,boost:999})));return this.customCompletionsPaths.length&&this.customCompletionsPaths.forEach((e=>{t.push({label:""+e,type:"property",apply:""+e,boost:998})})),{from:e.pos,options:t}}return null}const n=Object.keys(this.customAutoCompletions).filter((e=>Object.keys(this.customAutoCompletions[e]).length&&e.toLowerCase().startsWith(t.toLowerCase()))).map((e=>({label:e,type:"property",apply:e,boost:999})));return this.customCompletionsPaths.length&&this.customCompletionsPaths.filter((e=>e.toLocaleLowerCase().includes(t.toLocaleLowerCase()))).forEach((e=>{n.push({label:""+e,type:"property",apply:""+e,boost:998})})),{from:e.pos-i[1].length,options:n}}emitAfterTimeout(e){this.timeOut&&clearTimeout(this.timeOut),this.timeOut=setTimeout((()=>this.emit("nile-change",e,!1)),this.debounceTimeout)}focusAtPosition(e=this.view.state.doc.toString().length){this.view&&(this.view.dispatch({selection:{anchor:e}}),this.view.focus())}singleLineMultiLineToggle(){this.view.dispatch({changes:{from:0,to:this.view.state.doc.length,insert:this.multiline?this.value:zb(this.value)}})}getLineNumbersExension(){return!this.multiline&&this.lineNumbers||this.multiline&&this.lineNumbersMultiline?function(e={}){return[Bp.of(e),Qp(),Gp]}():[]}getLanguageExtension(){switch(this.language){case"sql":return function(e={}){let t=e.dialect||sO;return new ky(t.language,[rO(e),nO(t,!!e.upperCaseKeywords)])}();case"json":return new ky(MO);case"html":return function(e={}){let t,i="";!1===e.matchClosingTags&&(i="noMatch"),!0===e.selfClosingTags&&(i=(i?i+" ":"")+"selfClosing"),(e.nestedLanguages&&e.nestedLanguages.length||e.nestedAttributes&&e.nestedAttributes.length)&&(t=QO((e.nestedLanguages||[]).concat(Kf),(e.nestedAttributes||[]).concat(eb)));let n=t?tb.configure({wrap:t,dialect:i}):i?ib.configure({dialect:i}):ib;return new ky(n,[ib.data.of({autocomplete:Xf(e)}),!1!==e.autoCloseTags?ob:[],Lf().support,new ky(Mf,Mf.data.of({autocomplete:lf})).support])}();default:return function(e={}){let t=e.jsx?e.typescript?zA:jA:e.typescript?IA:DA,i=e.typescript?aA.concat(xA):sA.concat(TA);return new ky(t,[DA.data.of({autocomplete:fm(NA,Om(i))}),DA.data.of({autocomplete:pA}),e.jsx?fA:[]])}()}}getReadOnlyExtension(){if(this.disabled)return[kc.readOnly.of(!0),aN.editable.of(!1)];if(this.readonly){const e=[kc.readOnly.of(!0)];return this.hideReadOnlyCursor&&e.push(aN.theme(Ib)),e}return[]}getSingleLineExtension(){return this.multiline?[]:kc.transactionFilter.of((e=>e.newDoc.lines>1?[]:e))}getPlaceholderExtension(){return this.placeholder?function(e){return Md.fromClass(class{constructor(t){this.view=t,this.placeholder=e?dg.set([dg.widget({widget:new qN(e),side:1}).range(0)]):dg.none}get decorations(){return this.view.state.doc.length?dg.none:this.placeholder}},{decorations:e=>e.decorations})}(this.placeholder):[]}parseColor(e){const t=e.match(/^#([0-9a-f]{3,8})$/i)?.[1];if(t){const e=t.length<=4?t.slice(0,3).replace(/./g,(e=>e+e)):t.slice(0,6);return 6!==e.length?null:[0,2,4].map((t=>parseInt(e.slice(t,t+2),16)))}const i=e.match(/^rgba?\(([^)]+)\)$/i)?.[1].split(/[\s,/]+/).map(Number);return i&&i.length>=3&&i.slice(0,3).every((e=>!isNaN(e)))?[i[0],i[1],i[2]]:null}isDarkTheme(){const e=document.documentElement.getAttribute("data-theme");if("dark"===e)return!0;if("light"===e)return!1;const t=getComputedStyle(document.documentElement).getPropertyValue("--ng-colors-bg-primary").trim(),i=this.parseColor(t);return!!i&&(299*i[0]+587*i[1]+114*i[2])/1e3<128}getDarkThemeExtension(){return this.isDarkTheme()?[Nb,HN()]:[]}getDefaultSyntaxHighlightingExtension(){if(this.disableSyntaxHighlighting)return[];return function(e,t){let i,n=[AI];return e instanceof jI&&(e.module&&n.push(aN.styleModule.of(e.module)),i=e.themeType),(null==t?void 0:t.fallback)?n.push(mI.of(e)):i?n.push(zI.computeN([aN.darkTheme],(t=>t.facet(aN.darkTheme)==("dark"==i)?[e]:[]))):n.push(zI.of(e)),n}(this.isDarkTheme()?pb:OI,{fallback:!0})}getCustomThemeExtension(){return this.customThemeCSS?this.defaultFont?[aN.theme(this.customThemeCSS),aN.theme(yb),aN.theme(Db)]:[aN.theme(this.customThemeCSS),aN.theme(yb)]:this.defaultFont?[aN.theme(yb),aN.theme(Db)]:[aN.theme(yb)]}getAutoCompleteStyleExtension(e){if(this.autoCompleteStyle?.width){const t=(e||(this.codeEditor?this.codeEditor.getBoundingClientRect().width:300))*parseFloat(this.autoCompleteStyle.width.replace("%",""))/100,i=this.autoCompleteStyle.multiline?{overflow:"visible",textOverflow:"unset",whiteSpace:"normal",wordWrap:"break-word"}:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"};return[sp({position:"fixed",tooltipSpace:()=>{const e=this.codeEditor.getBoundingClientRect();return{left:e.left,top:0,right:e.right,bottom:1e3}}}),aN.theme({".cm-tooltip.cm-tooltip-autocomplete":{maxWidth:t-15+"px !important"},".cm-tooltip.cm-tooltip-autocomplete > ul > li":{...i,maxWidth:"100%"},".cm-tooltip.cm-tooltip-autocomplete > ul":{minWidth:"unset !important"}})]}return[]}updateAutocompleteWidth(e){this.view&&this.view.dispatch({effects:this.autoCompleteStyleComp.reconfigure(this.getAutoCompleteStyleExtension(e))})}restrictSingleLine(){return kc.transactionFilter.of((e=>e.newDoc.lines>1?[]:e))}};function zb(e){return e?e.replace(/\s+/g," ").trim():""}e([pe(".code__editor__container")],jb.prototype,"codeEditor",void 0),e([de({type:String,reflect:!0,attribute:!0})],jb.prototype,"value",void 0),e([de({type:String,reflect:!0,attribute:!0})],jb.prototype,"expandIcon",void 0),e([de({type:String,reflect:!0,attribute:!0})],jb.prototype,"placeholder",void 0),e([de({type:Object,reflect:!0,attribute:!0})],jb.prototype,"customAutoCompletions",void 0),e([de({type:Array,reflect:!0,attribute:!0})],jb.prototype,"customCompletionsPaths",void 0),e([de({type:String,reflect:!0,attribute:!0})],jb.prototype,"language",void 0),e([de({type:String,reflect:!0,attribute:"error-message"})],jb.prototype,"errorMessage",void 0),e([de({type:Boolean,reflect:!0,attribute:!0})],jb.prototype,"error",void 0),e([de({type:Boolean,reflect:!0,attribute:!0})],jb.prototype,"enableSearch",void 0),e([de({type:Boolean,reflect:!0,attribute:!0})],jb.prototype,"noborder",void 0),e([de({type:Boolean,reflect:!0,attribute:!0})],jb.prototype,"multiline",void 0),e([de({type:Boolean,reflect:!0,attribute:!0})],jb.prototype,"enableFoldGutters",void 0),e([de({type:Boolean,reflect:!0,attribute:!0})],jb.prototype,"allowVariableInCustomSuggestion",void 0),e([de({type:Boolean,reflect:!0,attribute:!0})],jb.prototype,"lineNumbers",void 0),e([de({type:Boolean,reflect:!0,attribute:!1})],jb.prototype,"disableSyntaxHighlighting",void 0),e([de({type:Object,attribute:!1})],jb.prototype,"customThemeCSS",void 0),e([de({type:Boolean,reflect:!0,attribute:!0})],jb.prototype,"lineNumbersMultiline",void 0),e([de({type:Boolean,reflect:!0,attribute:!0})],jb.prototype,"hasScroller",void 0),e([de({type:Boolean,reflect:!0,attribute:!0})],jb.prototype,"expandable",void 0),e([de({type:Boolean,reflect:!0,attribute:!0})],jb.prototype,"readonly",void 0),e([de({type:Boolean,reflect:!0,attribute:!0})],jb.prototype,"disabled",void 0),e([de({type:Boolean,reflect:!0,attribute:!0})],jb.prototype,"debounce",void 0),e([de({type:Number,reflect:!0,attribute:!0})],jb.prototype,"debounceTimeout",void 0),e([de({type:Boolean,reflect:!0,attribute:!0})],jb.prototype,"aboveCursor",void 0),e([de({type:Boolean,reflect:!0,attribute:!0})],jb.prototype,"tabCompletion",void 0),e([de({type:Boolean,reflect:!0,attribute:!0})],jb.prototype,"defaultFont",void 0),e([de({type:Object,attribute:!1})],jb.prototype,"autoCompleteStyle",void 0),e([de({type:Boolean,reflect:!0,attribute:!0})],jb.prototype,"hideReadOnlyCursor",void 0),jb=e([ce("nile-code-editor")],jb);const mb=s`
|
|
12301
|
+
`:""}`}createNewView(e=!0){this.view&&this.view.destroy(),this.createState(),this.view=new aN({state:this.viewState,parent:this.codeEditor}),this.view.dom.addEventListener("keydown",(e=>{this.checkForSpaceKey(e),this.handleEscapeKey(e)}),!0),e&&this.emit("nile-after-update",{createNewView:this.createNewView,codeMirrorInstance:this.view},!1)}checkForSpaceKey(e){"Space"!==e.code||e.ctrlKey?this.isSpacePressed=!1:this.isSpacePressed=!0}closeCompletion(){this.view&&lT(this.view)}handleEscapeKey(e){"Escape"===e.key&&this.view&&null!==function(e){let t=e.field(iT,!1);return t&&t.active.some((e=>e.isPending))?"pending":t&&t.active.some((e=>0!=e.state))?"active":null}(this.view.state)&&(e.stopPropagation(),e.preventDefault(),lT(this.view))}createState(){const e=this.lineNumbersComp.of(this.getLineNumbersExension()),t=this.readOnlyComp.of(this.getReadOnlyExtension()),i=this.restrictSingleLineComp.of(this.getSingleLineExtension()),n=this.placeholderComp.of(this.getPlaceholderExtension()),o=this.themeComp.of(this.getCustomThemeExtension()),r=this.defaultSyntaxHighlightingComp.of(this.getDefaultSyntaxHighlightingExtension()),s=this.autoCompleteStyleComp.of(this.getAutoCompleteStyleExtension()),a=this.getLanguageExtension(),l=this.customCompletionComp.of(DA.data.of({autocomplete:this.customAutocomplete}));return this.viewState=kc.create({doc:this.multiline?this.value:zb(this.value),extensions:[sb({highlightActiveLine:!1,foldGutter:this.enableFoldGutters,enableSearch:this.enableSearch}),e,t,i,l,n,r,this.autoCompletionComp.of(GT({aboveCursor:this.aboveCursor})),a,this.darkThemeComp.of(this.getDarkThemeExtension()),o,s,this.getTabCompletionKeymap(),aN.updateListener.of((e=>{e.docChanged&&(this.debounce?this.emitAfterTimeout({value:this.view.state.doc.toString()}):this.emit("nile-change",{value:this.view.state.doc.toString()}))})),aN.domEventHandlers({focus:()=>this.dispatchEvent(new Event("nile-focus")),blur:()=>this.dispatchEvent(new Event("nile-blur"))})]}),this.viewState}getNestedSuggestions(e,t,i){if(!function(e){return/^([a-zA-Z_$][\w$]*)(\.[a-zA-Z_$][\w$]*|\[\s*(['"]?[a-zA-Z0-9_$]*['"]?)\s*\])*([\.\[])?$/.test(e)}(t)||![".","["].includes(t.at(-1)))return null;const n=function(e){const t=/([a-zA-Z_$][\w$]*)(\[(?:[^\]]+)\]|\.[a-zA-Z_$][\w$]*)*/g,i=[...e.matchAll(t)];if(i.length>0){const t=[i[0][1]],n=e.match(/\[(.*?)\]|\.(\w+)/g)||[];for(const e of n)e.startsWith("[")?t.push(e.slice(1,-1).replace(/['"]/g,"")):e.startsWith(".")&&t.push(e.slice(1));return t}return null}(t);if(!n)return null;const o=i.replace(/["'\[]/g,""),r=o!==i,s="["===t.at(-1);if("."===t.at(-1)&&r)return null;let a=function(e,t){return t.reduce(((e,t)=>e&&"object"==typeof e?e[t]:null),e)}(this.customAutoCompletions,n);return a&&"object"==typeof a?(o&&(a=Object.fromEntries(Object.entries(a).filter((([e])=>e.toLowerCase().startsWith(o.toLowerCase()))))),{from:e.pos-o.length,options:Object.keys(a).map((e=>({label:e,type:"property",info:`Key of ${n[n.length-1]}`,apply:this.allowVariableInCustomSuggestion||!s||r?e:`'${e}'`,boost:999})))}):null}getTopLevelSuggestions(e,t){const i=t.match(/([a-zA-Z_$][\w$]*)$/);if(!i){if(""===t.trim()&&!this.isSpacePressed){const t=Object.keys(this.customAutoCompletions).filter((e=>Object.keys(this.customAutoCompletions[e]).length)).map((e=>({label:e,type:"property",apply:e,boost:999})));return this.customCompletionsPaths.length&&this.customCompletionsPaths.forEach((e=>{t.push({label:""+e,type:"property",apply:""+e,boost:998})})),{from:e.pos,options:t}}return null}const n=Object.keys(this.customAutoCompletions).filter((e=>Object.keys(this.customAutoCompletions[e]).length&&e.toLowerCase().startsWith(t.toLowerCase()))).map((e=>({label:e,type:"property",apply:e,boost:999})));return this.customCompletionsPaths.length&&this.customCompletionsPaths.filter((e=>e.toLocaleLowerCase().includes(t.toLocaleLowerCase()))).forEach((e=>{n.push({label:""+e,type:"property",apply:""+e,boost:998})})),{from:e.pos-i[1].length,options:n}}emitAfterTimeout(e){this.timeOut&&clearTimeout(this.timeOut),this.timeOut=setTimeout((()=>this.emit("nile-change",e,!1)),this.debounceTimeout)}focusAtPosition(e=this.view.state.doc.toString().length){this.view&&(this.view.dispatch({selection:{anchor:e}}),this.view.focus())}singleLineMultiLineToggle(){this.view.dispatch({changes:{from:0,to:this.view.state.doc.length,insert:this.multiline?this.value:zb(this.value)}})}getLineNumbersExension(){return!this.multiline&&this.lineNumbers||this.multiline&&this.lineNumbersMultiline?function(e={}){return[Bp.of(e),Qp(),Gp]}():[]}getLanguageExtension(){switch(this.language){case"sql":return function(e={}){let t=e.dialect||sO;return new ky(t.language,[rO(e),nO(t,!!e.upperCaseKeywords)])}();case"json":return new ky(MO);case"html":return function(e={}){let t,i="";!1===e.matchClosingTags&&(i="noMatch"),!0===e.selfClosingTags&&(i=(i?i+" ":"")+"selfClosing"),(e.nestedLanguages&&e.nestedLanguages.length||e.nestedAttributes&&e.nestedAttributes.length)&&(t=QO((e.nestedLanguages||[]).concat(Kf),(e.nestedAttributes||[]).concat(eb)));let n=t?tb.configure({wrap:t,dialect:i}):i?ib.configure({dialect:i}):ib;return new ky(n,[ib.data.of({autocomplete:Xf(e)}),!1!==e.autoCloseTags?ob:[],Lf().support,new ky(Mf,Mf.data.of({autocomplete:lf})).support])}();default:return function(e={}){let t=e.jsx?e.typescript?zA:jA:e.typescript?IA:DA,i=e.typescript?aA.concat(xA):sA.concat(TA);return new ky(t,[DA.data.of({autocomplete:fm(NA,Om(i))}),DA.data.of({autocomplete:pA}),e.jsx?fA:[]])}()}}getReadOnlyExtension(){if(this.disabled)return[kc.readOnly.of(!0),aN.editable.of(!1)];if(this.readonly){const e=[kc.readOnly.of(!0)];return this.hideReadOnlyCursor&&e.push(aN.theme(Ib)),e}return[]}getSingleLineExtension(){return this.multiline?[]:kc.transactionFilter.of((e=>e.newDoc.lines>1?[]:e))}getPlaceholderExtension(){return this.placeholder?function(e){return Md.fromClass(class{constructor(t){this.view=t,this.placeholder=e?dg.set([dg.widget({widget:new qN(e),side:1}).range(0)]):dg.none}get decorations(){return this.view.state.doc.length?dg.none:this.placeholder}},{decorations:e=>e.decorations})}(this.placeholder):[]}parseColor(e){const t=e.match(/^#([0-9a-f]{3,8})$/i)?.[1];if(t){const e=t.length<=4?t.slice(0,3).replace(/./g,(e=>e+e)):t.slice(0,6);return 6!==e.length?null:[0,2,4].map((t=>parseInt(e.slice(t,t+2),16)))}const i=e.match(/^rgba?\(([^)]+)\)$/i)?.[1].split(/[\s,/]+/).map(Number);return i&&i.length>=3&&i.slice(0,3).every((e=>!isNaN(e)))?[i[0],i[1],i[2]]:null}isDarkTheme(){const e=document.documentElement.getAttribute("data-theme");if("dark"===e)return!0;if("light"===e)return!1;const t=getComputedStyle(document.documentElement).getPropertyValue("--ng-colors-bg-primary").trim(),i=this.parseColor(t);return!!i&&(299*i[0]+587*i[1]+114*i[2])/1e3<128}getDarkThemeExtension(){return[HN(),...this.isDarkTheme()?[Nb]:[]]}getDefaultSyntaxHighlightingExtension(){if(this.disableSyntaxHighlighting)return[];return function(e,t){let i,n=[AI];return e instanceof jI&&(e.module&&n.push(aN.styleModule.of(e.module)),i=e.themeType),(null==t?void 0:t.fallback)?n.push(mI.of(e)):i?n.push(zI.computeN([aN.darkTheme],(t=>t.facet(aN.darkTheme)==("dark"==i)?[e]:[]))):n.push(zI.of(e)),n}(this.isDarkTheme()?pb:OI,{fallback:!0})}getCustomThemeExtension(){return this.customThemeCSS?this.defaultFont?[aN.theme(this.customThemeCSS),aN.theme(yb),aN.theme(Db)]:[aN.theme(this.customThemeCSS),aN.theme(yb)]:this.defaultFont?[aN.theme(yb),aN.theme(Db)]:[aN.theme(yb)]}getAutoCompleteStyleExtension(e){if(this.autoCompleteStyle?.width){const t=(e||(this.codeEditor?this.codeEditor.getBoundingClientRect().width:300))*parseFloat(this.autoCompleteStyle.width.replace("%",""))/100,i=this.autoCompleteStyle.multiline?{overflow:"visible",textOverflow:"unset",whiteSpace:"normal",wordWrap:"break-word"}:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"};return[sp({position:"fixed",tooltipSpace:()=>{const e=this.codeEditor.getBoundingClientRect();return{left:e.left,top:0,right:e.right,bottom:1e3}}}),aN.theme({".cm-tooltip.cm-tooltip-autocomplete":{maxWidth:t-15+"px !important"},".cm-tooltip.cm-tooltip-autocomplete > ul > li":{...i,maxWidth:"100%"},".cm-tooltip.cm-tooltip-autocomplete > ul":{minWidth:"unset !important"}})]}return[]}updateAutocompleteWidth(e){this.view&&this.view.dispatch({effects:this.autoCompleteStyleComp.reconfigure(this.getAutoCompleteStyleExtension(e))})}restrictSingleLine(){return kc.transactionFilter.of((e=>e.newDoc.lines>1?[]:e))}};function zb(e){return e?e.replace(/\s+/g," ").trim():""}e([pe(".code__editor__container")],jb.prototype,"codeEditor",void 0),e([de({type:String,reflect:!0,attribute:!0})],jb.prototype,"value",void 0),e([de({type:String,reflect:!0,attribute:!0})],jb.prototype,"expandIcon",void 0),e([de({type:String,reflect:!0,attribute:!0})],jb.prototype,"placeholder",void 0),e([de({type:Object,reflect:!0,attribute:!0})],jb.prototype,"customAutoCompletions",void 0),e([de({type:Array,reflect:!0,attribute:!0})],jb.prototype,"customCompletionsPaths",void 0),e([de({type:String,reflect:!0,attribute:!0})],jb.prototype,"language",void 0),e([de({type:String,reflect:!0,attribute:"error-message"})],jb.prototype,"errorMessage",void 0),e([de({type:Boolean,reflect:!0,attribute:!0})],jb.prototype,"error",void 0),e([de({type:Boolean,reflect:!0,attribute:!0})],jb.prototype,"enableSearch",void 0),e([de({type:Boolean,reflect:!0,attribute:!0})],jb.prototype,"noborder",void 0),e([de({type:Boolean,reflect:!0,attribute:!0})],jb.prototype,"multiline",void 0),e([de({type:Boolean,reflect:!0,attribute:!0})],jb.prototype,"enableFoldGutters",void 0),e([de({type:Boolean,reflect:!0,attribute:!0})],jb.prototype,"allowVariableInCustomSuggestion",void 0),e([de({type:Boolean,reflect:!0,attribute:!0})],jb.prototype,"lineNumbers",void 0),e([de({type:Boolean,reflect:!0,attribute:!1})],jb.prototype,"disableSyntaxHighlighting",void 0),e([de({type:Object,attribute:!1})],jb.prototype,"customThemeCSS",void 0),e([de({type:Boolean,reflect:!0,attribute:!0})],jb.prototype,"lineNumbersMultiline",void 0),e([de({type:Boolean,reflect:!0,attribute:!0})],jb.prototype,"hasScroller",void 0),e([de({type:Boolean,reflect:!0,attribute:!0})],jb.prototype,"expandable",void 0),e([de({type:Boolean,reflect:!0,attribute:!0})],jb.prototype,"readonly",void 0),e([de({type:Boolean,reflect:!0,attribute:!0})],jb.prototype,"disabled",void 0),e([de({type:Boolean,reflect:!0,attribute:!0})],jb.prototype,"debounce",void 0),e([de({type:Number,reflect:!0,attribute:!0})],jb.prototype,"debounceTimeout",void 0),e([de({type:Boolean,reflect:!0,attribute:!0})],jb.prototype,"aboveCursor",void 0),e([de({type:Boolean,reflect:!0,attribute:!0})],jb.prototype,"tabCompletion",void 0),e([de({type:Boolean,reflect:!0,attribute:!0})],jb.prototype,"defaultFont",void 0),e([de({type:Object,attribute:!1})],jb.prototype,"autoCompleteStyle",void 0),e([de({type:Boolean,reflect:!0,attribute:!0})],jb.prototype,"hideReadOnlyCursor",void 0),jb=e([ce("nile-code-editor")],jb);const mb=s`
|
|
12302
12302
|
:host {
|
|
12303
12303
|
display: contents;
|
|
12304
12304
|
-webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
|
|
@@ -12346,7 +12346,7 @@ ${this.showMonthDropdown||this.showYearDropdown?R`
|
|
|
12346
12346
|
}
|
|
12347
12347
|
|
|
12348
12348
|
.alert--success {
|
|
12349
|
-
border: 1px solid var(--nile-toast-color-border-success, var(--ng-colors-border-
|
|
12349
|
+
border: 1px solid var(--nile-toast-color-border-success, var(--ng-colors-border-primary));
|
|
12350
12350
|
background: var(--nile-toast-color-background-success, var(--ng-colors-bg-primary-alt));
|
|
12351
12351
|
box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));
|
|
12352
12352
|
}
|
|
@@ -12356,7 +12356,7 @@ ${this.showMonthDropdown||this.showYearDropdown?R`
|
|
|
12356
12356
|
}
|
|
12357
12357
|
|
|
12358
12358
|
.alert--info {
|
|
12359
|
-
border: 1px solid var(--nile-toast-color-border-info, var(--ng-colors-border-
|
|
12359
|
+
border: 1px solid var(--nile-toast-color-border-info, var(--ng-colors-border-primary));
|
|
12360
12360
|
background: var(--nile-toast-color-background-info, var(--ng-colors-bg-primary-alt));
|
|
12361
12361
|
box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));
|
|
12362
12362
|
}
|
|
@@ -12366,7 +12366,7 @@ ${this.showMonthDropdown||this.showYearDropdown?R`
|
|
|
12366
12366
|
}
|
|
12367
12367
|
|
|
12368
12368
|
.alert--warning {
|
|
12369
|
-
border: 1px solid var(--nile-toast-color-border-warning, var(--ng-colors-border-
|
|
12369
|
+
border: 1px solid var(--nile-toast-color-border-warning, var(--ng-colors-border-primary));
|
|
12370
12370
|
background: var(--nile-toast-color-background-warning, var(--ng-colors-bg-primary-alt));
|
|
12371
12371
|
box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));
|
|
12372
12372
|
}
|
|
@@ -12376,7 +12376,7 @@ ${this.showMonthDropdown||this.showYearDropdown?R`
|
|
|
12376
12376
|
}
|
|
12377
12377
|
|
|
12378
12378
|
.alert--error {
|
|
12379
|
-
border: 1px solid var(--nile-toast-color-border-error, var(--ng-colors-border-
|
|
12379
|
+
border: 1px solid var(--nile-toast-color-border-error, var(--ng-colors-border-primary));
|
|
12380
12380
|
background: var(--nile-toast-color-background-error, var(--ng-colors-bg-primary-alt));
|
|
12381
12381
|
box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));
|
|
12382
12382
|
}
|
|
@@ -12386,7 +12386,7 @@ ${this.showMonthDropdown||this.showYearDropdown?R`
|
|
|
12386
12386
|
}
|
|
12387
12387
|
|
|
12388
12388
|
.alert--gray {
|
|
12389
|
-
border: 1px solid var(--nile-toast-color-border-gray, var(--ng-colors-border-
|
|
12389
|
+
border: 1px solid var(--nile-toast-color-border-gray, var(--ng-colors-border-primary));
|
|
12390
12390
|
background: var(--nile-toast-color-background-gray, var(--ng-colors-bg-primary-alt));
|
|
12391
12391
|
box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));
|
|
12392
12392
|
}
|
|
@@ -19192,6 +19192,7 @@ nile-badge::part(content) {
|
|
|
19192
19192
|
position: relative;
|
|
19193
19193
|
display: block;
|
|
19194
19194
|
font-family: inherit;
|
|
19195
|
+
color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
|
|
19195
19196
|
}
|
|
19196
19197
|
|
|
19197
19198
|
|
|
@@ -19221,6 +19222,7 @@ nile-badge::part(content) {
|
|
|
19221
19222
|
width: 100%;
|
|
19222
19223
|
padding: 12px;
|
|
19223
19224
|
background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
|
|
19225
|
+
color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
|
|
19224
19226
|
border-radius: 0 0 8px 8px;
|
|
19225
19227
|
outline: none;
|
|
19226
19228
|
tab-size: 4;
|
|
@@ -19261,6 +19263,7 @@ nile-rte-preview {
|
|
|
19261
19263
|
background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
|
|
19262
19264
|
box-sizing: border-box;
|
|
19263
19265
|
word-wrap: break-word;
|
|
19266
|
+
color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
|
|
19264
19267
|
}
|
|
19265
19268
|
|
|
19266
19269
|
nile-rich-text-editor[disabled] nile-rte-preview {
|
|
@@ -19426,7 +19429,7 @@ nile-rte-preview figure.rte-image img {
|
|
|
19426
19429
|
nile-rte-preview figure.rte-image figcaption {
|
|
19427
19430
|
margin-top: 6px;
|
|
19428
19431
|
font-size: 0.875em;
|
|
19429
|
-
color: var(--nile-colors-neutral-600, var(--ng-colors-text-
|
|
19432
|
+
color: var(--nile-colors-neutral-600, var(--ng-colors-text-tertiary-600));
|
|
19430
19433
|
}
|
|
19431
19434
|
|
|
19432
19435
|
.editor figure.rte-image {
|
|
@@ -19453,7 +19456,7 @@ nile-rich-text-editor[disabled] .editor figure.rte-image {
|
|
|
19453
19456
|
|
|
19454
19457
|
.editor.empty::before {
|
|
19455
19458
|
content: attr(data-placeholder);
|
|
19456
|
-
color: var(--nile-colors-neutral-500, var(--ng-colors-text-
|
|
19459
|
+
color: var(--nile-colors-neutral-500, var(--ng-colors-text-placeholder));
|
|
19457
19460
|
position: absolute;
|
|
19458
19461
|
font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
|
|
19459
19462
|
pointer-events: none;
|
|
@@ -19636,7 +19639,7 @@ nile-rich-text-editor[disabled] .editor figure.rte-image {
|
|
|
19636
19639
|
${this._renderTrigger()}
|
|
19637
19640
|
${e}
|
|
19638
19641
|
</nile-popover>
|
|
19639
|
-
`:e}};e([de({type:String,attribute:!0,reflect:!0})],NS.prototype,"type",void 0),e([de({type:String,attribute:!0,reflect:!0})],NS.prototype,"value",void 0),e([de({type:String,reflect:!0})],NS.prototype,"swatchTooltip",void 0),e([de({type:Number,reflect:!0})],NS.prototype,"recentColorsCount",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"noFill",void 0),e([de({type:String,reflect:!0})],NS.prototype,"mode",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showCanvas",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showHue",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showInputs",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showActions",void 0),e([de({type:Boolean,reflect:!0,attribute:!0})],NS.prototype,"open",void 0),e([de({attribute:"palette",converter:{fromAttribute:e=>{try{const t=JSON.parse(e);return Array.isArray(t)?t.map((e=>"string"==typeof e?{color:e,name:e}:e&&"string"==typeof e.color?{color:e.color,name:e.name||e.color}:null)).filter(Boolean):[]}catch{return[]}},toAttribute:e=>JSON.stringify(e)}})],NS.prototype,"palette",void 0),e([he()],NS.prototype,"_view",void 0),e([he()],NS.prototype,"_recentColors",void 0),e([he()],NS.prototype,"_hue",void 0),e([he()],NS.prototype,"_sat",void 0),e([he()],NS.prototype,"_val",void 0),e([he()],NS.prototype,"_colorMode",void 0),e([he()],NS.prototype,"_hexInput",void 0),e([he()],NS.prototype,"_r",void 0),e([he()],NS.prototype,"_g",void 0),e([he()],NS.prototype,"_b",void 0),NS=e([ce("nile-color-picker")],NS);function pS(){return function(){if("undefined"==typeof window||"function"!=typeof getComputedStyle)return null;try{return getComputedStyle(document.documentElement).getPropertyValue("--nile-version").trim().replace(/^["']|["']$/g,"")||null}catch{return null}}()??"1.3.
|
|
19642
|
+
`:e}};e([de({type:String,attribute:!0,reflect:!0})],NS.prototype,"type",void 0),e([de({type:String,attribute:!0,reflect:!0})],NS.prototype,"value",void 0),e([de({type:String,reflect:!0})],NS.prototype,"swatchTooltip",void 0),e([de({type:Number,reflect:!0})],NS.prototype,"recentColorsCount",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"noFill",void 0),e([de({type:String,reflect:!0})],NS.prototype,"mode",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showCanvas",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showHue",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showInputs",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showActions",void 0),e([de({type:Boolean,reflect:!0,attribute:!0})],NS.prototype,"open",void 0),e([de({attribute:"palette",converter:{fromAttribute:e=>{try{const t=JSON.parse(e);return Array.isArray(t)?t.map((e=>"string"==typeof e?{color:e,name:e}:e&&"string"==typeof e.color?{color:e.color,name:e.name||e.color}:null)).filter(Boolean):[]}catch{return[]}},toAttribute:e=>JSON.stringify(e)}})],NS.prototype,"palette",void 0),e([he()],NS.prototype,"_view",void 0),e([he()],NS.prototype,"_recentColors",void 0),e([he()],NS.prototype,"_hue",void 0),e([he()],NS.prototype,"_sat",void 0),e([he()],NS.prototype,"_val",void 0),e([he()],NS.prototype,"_colorMode",void 0),e([he()],NS.prototype,"_hexInput",void 0),e([he()],NS.prototype,"_r",void 0),e([he()],NS.prototype,"_g",void 0),e([he()],NS.prototype,"_b",void 0),NS=e([ce("nile-color-picker")],NS);function pS(){return function(){if("undefined"==typeof window||"function"!=typeof getComputedStyle)return null;try{return getComputedStyle(document.documentElement).getPropertyValue("--nile-version").trim().replace(/^["']|["']$/g,"")||null}catch{return null}}()??"1.3.3"}if("undefined"!=typeof window){window.nileElementsVersion='"2.0.10"';let e=null;Object.defineProperty(window,"nileVersion",{configurable:!0,get:()=>e??pS(),set:t=>{e=t}}),window.process=window.process||{env:{NODE_ENV:"production"}}}const DS=s`
|
|
19640
19643
|
:host {
|
|
19641
19644
|
/* Geometry. Values come from design tokens wherever one exists; the bare
|
|
19642
19645
|
pixels are shell geometry with no matching token. */
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
System.register(["lit"],function(_export,_context){"use strict";var o,_templateObject,r;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){o=_lit.css;}],execute:function execute(){_export("s",r=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n .badge {\n padding: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) var(--nile-spacing-sm, var(--ng-spacing-md-alt));\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-full));\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n height: var(--nile-height-22px, var(--ng-height-24px));\n }\n\n .badge__content {\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n font-style: normal;\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n line-height: var(--nile-type-scale-5, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n }\n\n .badge--primary {\n background: var(--nile-badge-color-background-primary, var(--ng-componentcolors-utility-brand-50));\n color: var(--nile-badge-color-font-primary, var(--ng-componentcolors-utility-brand-700));\n }\n\n .badge--normal {\n background: var(--nile-badge-color-background-normal, var(--ng-componentcolors-utility-gray-50));\n }\n\n .badge--info {\n background: var(--nile-badge-color-background-info, var(--ng-componentcolors-utility-blue-light-50));\n }\n\n /* for v2 */\n\n .badge--pill-outline {\n background: transparent ;\n }\n .badge--pink {\n color: var(--nile-badge-color-font-pink, var(--ng-componentcolors-utility-pink-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-pink, var(--ng-componentcolors-utility-pink-200));\n background: var(--nile-badge-color-background-pink, var(--ng-componentcolors-utility-pink-50));\n }\n\n .badge--orange {\n color: var(--nile-badge-color-font-orange, var(--ng-componentcolors-utility-orange-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-orange, var(--ng-componentcolors-utility-orange-dark-200));\n background: var(--nile-badge-color-background-orange, var(--ng-componentcolors-utility-orange-dark-50));\n }\n\n .badge--purple {\n color: var(--nile-badge-color-font-purple, var(--ng-componentcolors-utility-purple-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-purple, var(--ng-componentcolors-utility-purple-200));\n background: var(--nile-badge-color-background-purple, var(--ng-componentcolors-utility-purple-50));\n }\n\n .badge--indigo {\n color: var(--nile-badge-color-font-indigo, var(--ng-componentcolors-utility-indigo-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-indigo, var(--ng-componentcolors-utility-indigo-200));\n background: var(--nile-badge-color-background-indigo, var(--ng-componentcolors-utility-indigo-50));\n }\n\n .badge--blue {\n color: var(--nile-badge-color-font-blue, var(--ng-componentcolors-utility-blue-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-blue, var(--ng-componentcolors-utility-blue-200));\n background: var(--nile-badge-color-background-blue, var(--ng-componentcolors-utility-blue-50));\n }\n .badge--blue-light {\n color:var(--nile-badge-color-font-bluelight, var(--ng-componentcolors-utility-blue-light-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-bluelight, var(--ng-componentcolors-utility-blue-light-200));\n background: var(--nile-badge-color-background-bluelight, var(--ng-componentcolors-utility-blue-light-50));\n }\n\n .badge--gray-blue {\n color: var(--nile-badge-color-font-grayblue, var(--ng-componentcolors-utility-gray-blue-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-grayblue, var(--ng-componentcolors-utility-gray-blue-200));\n background: var(--nile-badge-color-background-grayblue, var(--ng-componentcolors-utility-gray-blue-50));\n }\n\n .badge--success {\n color: var(--nile-badge-color-font-success, var(--ng-componentcolors-utility-success-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-success, var(--ng-componentcolors-utility-success-200));\n background: var(--nile-badge-color-background-success, var(--ng-componentcolors-utility-success-50));\n }\n .badge--warning {\n color: var(--nile-badge-color-font-warning, var(--ng-componentcolors-utility-warning-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-warning, var(--ng-componentcolors-utility-warning-200));\n background: var(--nile-badge-color-background-warning, var(--ng-componentcolors-utility-warning-50));\n }\n\n .badge--error {\n color: var(--nile-badge-color-font-error, var(--ng-componentcolors-utility-error-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-error, var(--ng-componentcolors-utility-error-200));\n background: var(--nile-badge-color-background-error, var(--ng-componentcolors-utility-error-50));\n }\n\n .badge--brand {\n color: var(--nile-badge-color-font-brand, var(--ng-componentcolors-utility-brand-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-brand, var(--ng-componentcolors-utility-brand-200));\n background: var(--nile-badge-color-background-brand, var(--ng-componentcolors-utility-brand-50));\n }\n\n .badge--gray {\n color: var(--nile-badge-color-font-gray, var(--ng-componentcolors-utility-gray-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-gray, var(--ng-componentcolors-utility-gray-200));\n background: var(--nile-badge-color-background-gray, var(--ng-componentcolors-utility-gray-50));\n }\n\n .badge--pink.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-pink, var(--ng-componentcolors-utility-pink-200));\n }\n\n .badge--orange.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-orange, var(--ng-componentcolors-utility-orange-dark-200));\n }\n\n .badge--purple.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-purple, var(--ng-componentcolors-utility-purple-200));\n }\n\n .badge--indigo.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-indigo, var(--ng-componentcolors-utility-indigo-200));\n }\n\n .badge--blue.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-blue, var(--ng-componentcolors-utility-blue-200));\n }\n\n .badge--blue-light.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-bluelight, var(--ng-componentcolors-utility-blue-light-200));\n }\n\n .badge--gray-blue.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-gray, var(--ng-componentcolors-utility-gray-blue-200));\n }\n\n .badge--success.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-success, var(--ng-componentcolors-utility-success-200));\n }\n\n .badge--warning.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-warning, var(--ng-componentcolors-utility-warning-200));\n }\n\n .badge--error.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-error, var(--ng-componentcolors-utility-error-200));\n }\n\n .badge--brand.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-brand, var(--ng-componentcolors-utility-brand-200));\n }\n\n .badge--gray.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-gray, var(--ng-componentcolors-utility-gray-200));\n }\n\n\n\n .badge--rounded {\n padding: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) var(--nile-spacing-md, var(--ng-spacing-md-alt));\n border-radius: var(--nile-radius-full, var(--ng-radius-full));\n }\n"]))));}};});
|
|
1
|
+
System.register(["lit"],function(_export,_context){"use strict";var o,_templateObject,r;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){o=_lit.css;}],execute:function execute(){_export("s",r=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n .badge {\n padding: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) var(--nile-spacing-sm, var(--ng-spacing-md-alt));\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-full));\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n height: var(--nile-height-22px, var(--ng-height-24px));\n }\n\n .badge__content {\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n font-style: normal;\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n line-height: var(--nile-type-scale-5, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n }\n\n .badge--primary {\n background: var(--nile-badge-color-background-primary, var(--ng-componentcolors-utility-brand-50));\n color: var(--nile-badge-color-font-primary, var(--ng-componentcolors-utility-brand-700));\n }\n\n .badge--normal {\n background: var(--nile-badge-color-background-normal, var(--ng-componentcolors-utility-gray-50));\n }\n\n .badge--info {\n background: var(--nile-badge-color-background-info, var(--ng-componentcolors-utility-blue-light-50));\n }\n\n /* for v2 */\n\n .badge--pill-outline {\n background: transparent ;\n }\n .badge--pink {\n color: var(--nile-badge-color-font-pink, var(--ng-componentcolors-utility-pink-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-pink, var(--ng-componentcolors-utility-pink-200));\n background: var(--nile-badge-color-background-pink, var(--ng-componentcolors-utility-pink-50));\n }\n\n .badge--orange {\n color: var(--nile-badge-color-font-orange, var(--ng-componentcolors-utility-orange-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-orange, var(--ng-componentcolors-utility-orange-dark-200));\n background: var(--nile-badge-color-background-orange, var(--ng-componentcolors-utility-orange-dark-50));\n }\n\n .badge--purple {\n color: var(--nile-badge-color-font-purple, var(--ng-componentcolors-utility-purple-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-purple, var(--ng-componentcolors-utility-purple-200));\n background: var(--nile-badge-color-background-purple, var(--ng-componentcolors-utility-purple-50));\n }\n\n .badge--indigo {\n color: var(--nile-badge-color-font-indigo, var(--ng-componentcolors-utility-indigo-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-indigo, var(--ng-componentcolors-utility-indigo-200));\n background: var(--nile-badge-color-background-indigo, var(--ng-componentcolors-utility-indigo-50));\n }\n\n .badge--blue {\n color: var(--nile-badge-color-font-blue, var(--ng-componentcolors-utility-blue-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-blue, var(--ng-componentcolors-utility-blue-200));\n background: var(--nile-badge-color-background-blue, var(--ng-componentcolors-utility-blue-50));\n }\n .badge--blue-light {\n color:var(--nile-badge-color-font-bluelight, var(--ng-componentcolors-utility-blue-light-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-bluelight, var(--ng-componentcolors-utility-blue-light-200));\n background: var(--nile-badge-color-background-bluelight, var(--ng-componentcolors-utility-blue-light-50));\n }\n\n .badge--gray-blue {\n color: var(--nile-badge-color-font-grayblue, var(--ng-componentcolors-utility-gray-blue-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-grayblue, var(--ng-componentcolors-utility-gray-blue-200));\n background: var(--nile-badge-color-background-grayblue, var(--ng-componentcolors-utility-gray-blue-50));\n }\n\n .badge--success {\n color: var(--nile-badge-color-font-success, var(--ng-componentcolors-utility-success-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-success, var(--ng-componentcolors-utility-success-200));\n background: var(--nile-badge-color-background-success, var(--ng-componentcolors-utility-success-50));\n }\n .badge--warning {\n color: var(--nile-badge-color-font-warning, var(--ng-componentcolors-utility-warning-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-warning, var(--ng-componentcolors-utility-warning-200));\n background: var(--nile-badge-color-background-warning, var(--ng-componentcolors-utility-warning-50));\n }\n\n .badge--error {\n color: var(--nile-badge-color-font-error, var(--ng-componentcolors-utility-error-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-error, var(--ng-componentcolors-utility-error-200));\n background: var(--nile-badge-color-background-error, var(--ng-componentcolors-utility-error-50));\n }\n\n .badge--brand {\n color: var(--nile-badge-color-font-brand, var(--ng-componentcolors-utility-brand-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-brand, var(--ng-componentcolors-utility-brand-200));\n background: var(--nile-badge-color-background-brand, var(--ng-componentcolors-utility-brand-50));\n }\n\n .badge--gray {\n color: var(--nile-badge-color-font-gray, var(--ng-componentcolors-utility-gray-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-gray, var(--ng-componentcolors-utility-gray-300));\n background: var(--nile-badge-color-background-gray, var(--ng-componentcolors-utility-gray-50));\n }\n\n .badge--pink.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-pink, var(--ng-componentcolors-utility-pink-200));\n }\n\n .badge--orange.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-orange, var(--ng-componentcolors-utility-orange-dark-200));\n }\n\n .badge--purple.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-purple, var(--ng-componentcolors-utility-purple-200));\n }\n\n .badge--indigo.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-indigo, var(--ng-componentcolors-utility-indigo-200));\n }\n\n .badge--blue.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-blue, var(--ng-componentcolors-utility-blue-200));\n }\n\n .badge--blue-light.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-bluelight, var(--ng-componentcolors-utility-blue-light-200));\n }\n\n .badge--gray-blue.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-gray, var(--ng-componentcolors-utility-gray-blue-200));\n }\n\n .badge--success.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-success, var(--ng-componentcolors-utility-success-200));\n }\n\n .badge--warning.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-warning, var(--ng-componentcolors-utility-warning-200));\n }\n\n .badge--error.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-error, var(--ng-componentcolors-utility-error-200));\n }\n\n .badge--brand.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-brand, var(--ng-componentcolors-utility-brand-200));\n }\n\n .badge--gray.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-gray, var(--ng-componentcolors-utility-gray-300));\n }\n\n\n\n .badge--rounded {\n padding: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) var(--nile-spacing-md, var(--ng-spacing-md-alt));\n border-radius: var(--nile-radius-full, var(--ng-radius-full));\n }\n"]))));}};});
|
|
2
2
|
//# sourceMappingURL=nile-badge.css.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-badge.css.cjs.js","sources":["../../../src/nile-badge/nile-badge.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Tag CSS\n */\nexport const styles = css`\n :host {\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n .badge {\n padding: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) var(--nile-spacing-sm, var(--ng-spacing-md-alt));\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-full));\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n height: var(--nile-height-22px, var(--ng-height-24px));\n }\n\n .badge__content {\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n font-style: normal;\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n line-height: var(--nile-type-scale-5, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n }\n\n .badge--primary {\n background: var(--nile-badge-color-background-primary, var(--ng-componentcolors-utility-brand-50));\n color: var(--nile-badge-color-font-primary, var(--ng-componentcolors-utility-brand-700));\n }\n\n .badge--normal {\n background: var(--nile-badge-color-background-normal, var(--ng-componentcolors-utility-gray-50));\n }\n\n .badge--info {\n background: var(--nile-badge-color-background-info, var(--ng-componentcolors-utility-blue-light-50));\n }\n\n /* for v2 */\n\n .badge--pill-outline {\n background: transparent ;\n }\n .badge--pink {\n color: var(--nile-badge-color-font-pink, var(--ng-componentcolors-utility-pink-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-pink, var(--ng-componentcolors-utility-pink-200));\n background: var(--nile-badge-color-background-pink, var(--ng-componentcolors-utility-pink-50));\n }\n\n .badge--orange {\n color: var(--nile-badge-color-font-orange, var(--ng-componentcolors-utility-orange-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-orange, var(--ng-componentcolors-utility-orange-dark-200));\n background: var(--nile-badge-color-background-orange, var(--ng-componentcolors-utility-orange-dark-50));\n }\n\n .badge--purple {\n color: var(--nile-badge-color-font-purple, var(--ng-componentcolors-utility-purple-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-purple, var(--ng-componentcolors-utility-purple-200));\n background: var(--nile-badge-color-background-purple, var(--ng-componentcolors-utility-purple-50));\n }\n\n .badge--indigo {\n color: var(--nile-badge-color-font-indigo, var(--ng-componentcolors-utility-indigo-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-indigo, var(--ng-componentcolors-utility-indigo-200));\n background: var(--nile-badge-color-background-indigo, var(--ng-componentcolors-utility-indigo-50));\n }\n\n .badge--blue {\n color: var(--nile-badge-color-font-blue, var(--ng-componentcolors-utility-blue-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-blue, var(--ng-componentcolors-utility-blue-200));\n background: var(--nile-badge-color-background-blue, var(--ng-componentcolors-utility-blue-50));\n }\n .badge--blue-light {\n color:var(--nile-badge-color-font-bluelight, var(--ng-componentcolors-utility-blue-light-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-bluelight, var(--ng-componentcolors-utility-blue-light-200));\n background: var(--nile-badge-color-background-bluelight, var(--ng-componentcolors-utility-blue-light-50));\n }\n\n .badge--gray-blue {\n color: var(--nile-badge-color-font-grayblue, var(--ng-componentcolors-utility-gray-blue-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-grayblue, var(--ng-componentcolors-utility-gray-blue-200));\n background: var(--nile-badge-color-background-grayblue, var(--ng-componentcolors-utility-gray-blue-50));\n }\n\n .badge--success {\n color: var(--nile-badge-color-font-success, var(--ng-componentcolors-utility-success-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-success, var(--ng-componentcolors-utility-success-200));\n background: var(--nile-badge-color-background-success, var(--ng-componentcolors-utility-success-50));\n }\n .badge--warning {\n color: var(--nile-badge-color-font-warning, var(--ng-componentcolors-utility-warning-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-warning, var(--ng-componentcolors-utility-warning-200));\n background: var(--nile-badge-color-background-warning, var(--ng-componentcolors-utility-warning-50));\n }\n\n .badge--error {\n color: var(--nile-badge-color-font-error, var(--ng-componentcolors-utility-error-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-error, var(--ng-componentcolors-utility-error-200));\n background: var(--nile-badge-color-background-error, var(--ng-componentcolors-utility-error-50));\n }\n\n .badge--brand {\n color: var(--nile-badge-color-font-brand, var(--ng-componentcolors-utility-brand-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-brand, var(--ng-componentcolors-utility-brand-200));\n background: var(--nile-badge-color-background-brand, var(--ng-componentcolors-utility-brand-50));\n }\n\n .badge--gray {\n color: var(--nile-badge-color-font-gray, var(--ng-componentcolors-utility-gray-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-gray, var(--ng-componentcolors-utility-gray-200));\n background: var(--nile-badge-color-background-gray, var(--ng-componentcolors-utility-gray-50));\n }\n\n .badge--pink.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-pink, var(--ng-componentcolors-utility-pink-200));\n }\n\n .badge--orange.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-orange, var(--ng-componentcolors-utility-orange-dark-200));\n }\n\n .badge--purple.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-purple, var(--ng-componentcolors-utility-purple-200));\n }\n\n .badge--indigo.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-indigo, var(--ng-componentcolors-utility-indigo-200));\n }\n\n .badge--blue.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-blue, var(--ng-componentcolors-utility-blue-200));\n }\n\n .badge--blue-light.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-bluelight, var(--ng-componentcolors-utility-blue-light-200));\n }\n\n .badge--gray-blue.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-gray, var(--ng-componentcolors-utility-gray-blue-200));\n }\n\n .badge--success.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-success, var(--ng-componentcolors-utility-success-200));\n }\n\n .badge--warning.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-warning, var(--ng-componentcolors-utility-warning-200));\n }\n\n .badge--error.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-error, var(--ng-componentcolors-utility-error-200));\n }\n\n .badge--brand.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-brand, var(--ng-componentcolors-utility-brand-200));\n }\n\n .badge--gray.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-gray, var(--ng-componentcolors-utility-gray-200));\n }\n\n\n\n .badge--rounded {\n padding: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) var(--nile-spacing-md, var(--ng-spacing-md-alt));\n border-radius: var(--nile-radius-full, var(--ng-radius-full));\n }\n`;\nexport default [styles];\n\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
|
|
1
|
+
{"version":3,"file":"nile-badge.css.cjs.js","sources":["../../../src/nile-badge/nile-badge.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Tag CSS\n */\nexport const styles = css`\n :host {\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n .badge {\n padding: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) var(--nile-spacing-sm, var(--ng-spacing-md-alt));\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-full));\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n height: var(--nile-height-22px, var(--ng-height-24px));\n }\n\n .badge__content {\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n font-style: normal;\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n line-height: var(--nile-type-scale-5, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n }\n\n .badge--primary {\n background: var(--nile-badge-color-background-primary, var(--ng-componentcolors-utility-brand-50));\n color: var(--nile-badge-color-font-primary, var(--ng-componentcolors-utility-brand-700));\n }\n\n .badge--normal {\n background: var(--nile-badge-color-background-normal, var(--ng-componentcolors-utility-gray-50));\n }\n\n .badge--info {\n background: var(--nile-badge-color-background-info, var(--ng-componentcolors-utility-blue-light-50));\n }\n\n /* for v2 */\n\n .badge--pill-outline {\n background: transparent ;\n }\n .badge--pink {\n color: var(--nile-badge-color-font-pink, var(--ng-componentcolors-utility-pink-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-pink, var(--ng-componentcolors-utility-pink-200));\n background: var(--nile-badge-color-background-pink, var(--ng-componentcolors-utility-pink-50));\n }\n\n .badge--orange {\n color: var(--nile-badge-color-font-orange, var(--ng-componentcolors-utility-orange-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-orange, var(--ng-componentcolors-utility-orange-dark-200));\n background: var(--nile-badge-color-background-orange, var(--ng-componentcolors-utility-orange-dark-50));\n }\n\n .badge--purple {\n color: var(--nile-badge-color-font-purple, var(--ng-componentcolors-utility-purple-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-purple, var(--ng-componentcolors-utility-purple-200));\n background: var(--nile-badge-color-background-purple, var(--ng-componentcolors-utility-purple-50));\n }\n\n .badge--indigo {\n color: var(--nile-badge-color-font-indigo, var(--ng-componentcolors-utility-indigo-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-indigo, var(--ng-componentcolors-utility-indigo-200));\n background: var(--nile-badge-color-background-indigo, var(--ng-componentcolors-utility-indigo-50));\n }\n\n .badge--blue {\n color: var(--nile-badge-color-font-blue, var(--ng-componentcolors-utility-blue-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-blue, var(--ng-componentcolors-utility-blue-200));\n background: var(--nile-badge-color-background-blue, var(--ng-componentcolors-utility-blue-50));\n }\n .badge--blue-light {\n color:var(--nile-badge-color-font-bluelight, var(--ng-componentcolors-utility-blue-light-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-bluelight, var(--ng-componentcolors-utility-blue-light-200));\n background: var(--nile-badge-color-background-bluelight, var(--ng-componentcolors-utility-blue-light-50));\n }\n\n .badge--gray-blue {\n color: var(--nile-badge-color-font-grayblue, var(--ng-componentcolors-utility-gray-blue-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-grayblue, var(--ng-componentcolors-utility-gray-blue-200));\n background: var(--nile-badge-color-background-grayblue, var(--ng-componentcolors-utility-gray-blue-50));\n }\n\n .badge--success {\n color: var(--nile-badge-color-font-success, var(--ng-componentcolors-utility-success-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-success, var(--ng-componentcolors-utility-success-200));\n background: var(--nile-badge-color-background-success, var(--ng-componentcolors-utility-success-50));\n }\n .badge--warning {\n color: var(--nile-badge-color-font-warning, var(--ng-componentcolors-utility-warning-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-warning, var(--ng-componentcolors-utility-warning-200));\n background: var(--nile-badge-color-background-warning, var(--ng-componentcolors-utility-warning-50));\n }\n\n .badge--error {\n color: var(--nile-badge-color-font-error, var(--ng-componentcolors-utility-error-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-error, var(--ng-componentcolors-utility-error-200));\n background: var(--nile-badge-color-background-error, var(--ng-componentcolors-utility-error-50));\n }\n\n .badge--brand {\n color: var(--nile-badge-color-font-brand, var(--ng-componentcolors-utility-brand-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-brand, var(--ng-componentcolors-utility-brand-200));\n background: var(--nile-badge-color-background-brand, var(--ng-componentcolors-utility-brand-50));\n }\n\n .badge--gray {\n color: var(--nile-badge-color-font-gray, var(--ng-componentcolors-utility-gray-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-gray, var(--ng-componentcolors-utility-gray-300));\n background: var(--nile-badge-color-background-gray, var(--ng-componentcolors-utility-gray-50));\n }\n\n .badge--pink.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-pink, var(--ng-componentcolors-utility-pink-200));\n }\n\n .badge--orange.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-orange, var(--ng-componentcolors-utility-orange-dark-200));\n }\n\n .badge--purple.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-purple, var(--ng-componentcolors-utility-purple-200));\n }\n\n .badge--indigo.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-indigo, var(--ng-componentcolors-utility-indigo-200));\n }\n\n .badge--blue.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-blue, var(--ng-componentcolors-utility-blue-200));\n }\n\n .badge--blue-light.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-bluelight, var(--ng-componentcolors-utility-blue-light-200));\n }\n\n .badge--gray-blue.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-gray, var(--ng-componentcolors-utility-gray-blue-200));\n }\n\n .badge--success.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-success, var(--ng-componentcolors-utility-success-200));\n }\n\n .badge--warning.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-warning, var(--ng-componentcolors-utility-warning-200));\n }\n\n .badge--error.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-error, var(--ng-componentcolors-utility-error-200));\n }\n\n .badge--brand.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-brand, var(--ng-componentcolors-utility-brand-200));\n }\n\n .badge--gray.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-gray, var(--ng-componentcolors-utility-gray-300));\n }\n\n\n\n .badge--rounded {\n padding: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) var(--nile-spacing-md, var(--ng-spacing-md-alt));\n border-radius: var(--nile-radius-full, var(--ng-radius-full));\n }\n`;\nexport default [styles];\n\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
|
|
@@ -132,7 +132,7 @@ import{css as o}from"lit";const r=o`
|
|
|
132
132
|
color: var(--nile-badge-color-font-gray, var(--ng-componentcolors-utility-gray-700));
|
|
133
133
|
border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
|
|
134
134
|
border-style: solid;
|
|
135
|
-
border-color: var(--nile-badge-color-border-color-gray, var(--ng-componentcolors-utility-gray-
|
|
135
|
+
border-color: var(--nile-badge-color-border-color-gray, var(--ng-componentcolors-utility-gray-300));
|
|
136
136
|
background: var(--nile-badge-color-background-gray, var(--ng-componentcolors-utility-gray-50));
|
|
137
137
|
}
|
|
138
138
|
|
|
@@ -181,7 +181,7 @@ import{css as o}from"lit";const r=o`
|
|
|
181
181
|
}
|
|
182
182
|
|
|
183
183
|
.badge--gray.badge--pill-outline {
|
|
184
|
-
border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-gray, var(--ng-componentcolors-utility-gray-
|
|
184
|
+
border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-gray, var(--ng-componentcolors-utility-gray-300));
|
|
185
185
|
}
|
|
186
186
|
|
|
187
187
|
|