@ni/nimble-components 1.0.0-beta.98 → 1.1.1
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 +63 -3
- package/dist/esm/button/index.d.ts +16 -0
- package/dist/esm/button/index.js +23 -1
- package/dist/esm/button/index.js.map +1 -1
- package/dist/esm/button/types.d.ts +4 -5
- package/dist/esm/button/types.js +1 -10
- package/dist/esm/button/types.js.map +1 -1
- package/dist/esm/checkbox/index.d.ts +11 -1
- package/dist/esm/checkbox/index.js +8 -2
- package/dist/esm/checkbox/index.js.map +1 -1
- package/dist/esm/checkbox/styles.js +4 -4
- package/dist/esm/checkbox/styles.js.map +1 -1
- package/dist/esm/drawer/index.d.ts +7 -3
- package/dist/esm/drawer/index.js +8 -9
- package/dist/esm/drawer/index.js.map +1 -1
- package/dist/esm/drawer/styles.js +8 -7
- package/dist/esm/drawer/styles.js.map +1 -1
- package/dist/esm/drawer/types.d.ts +2 -0
- package/dist/esm/drawer/types.js.map +1 -1
- package/dist/esm/icon-base/styles.js +6 -6
- package/dist/esm/icon-base/styles.js.map +1 -1
- package/dist/esm/icon-base/template.js +1 -1
- package/dist/esm/icon-base/types.d.ts +11 -0
- package/dist/esm/icon-base/types.js +12 -0
- package/dist/esm/icon-base/types.js.map +1 -0
- package/dist/esm/icons/access-control.d.ts +5 -0
- package/dist/esm/icons/access-control.js.map +1 -1
- package/dist/esm/icons/admin.d.ts +5 -0
- package/dist/esm/icons/admin.js.map +1 -1
- package/dist/esm/icons/administration.d.ts +5 -0
- package/dist/esm/icons/administration.js.map +1 -1
- package/dist/esm/icons/all-icons.d.ts +11 -0
- package/dist/esm/icons/all-icons.js +11 -0
- package/dist/esm/icons/all-icons.js.map +1 -1
- package/dist/esm/icons/check.d.ts +5 -0
- package/dist/esm/icons/check.js.map +1 -1
- package/dist/esm/icons/custom-applications.d.ts +5 -0
- package/dist/esm/icons/custom-applications.js.map +1 -1
- package/dist/esm/icons/custom-status.d.ts +12 -0
- package/dist/esm/icons/custom-status.js +12 -0
- package/dist/esm/icons/custom-status.js.map +1 -0
- package/dist/esm/icons/delete.d.ts +5 -0
- package/dist/esm/icons/delete.js.map +1 -1
- package/dist/esm/icons/done.d.ts +12 -0
- package/dist/esm/icons/done.js +12 -0
- package/dist/esm/icons/done.js.map +1 -0
- package/dist/esm/icons/fail.d.ts +12 -0
- package/dist/esm/icons/fail.js +12 -0
- package/dist/esm/icons/fail.js.map +1 -0
- package/dist/esm/icons/login.d.ts +5 -0
- package/dist/esm/icons/login.js.map +1 -1
- package/dist/esm/icons/logout.d.ts +5 -0
- package/dist/esm/icons/logout.js.map +1 -1
- package/dist/esm/icons/looping.d.ts +12 -0
- package/dist/esm/icons/looping.js +12 -0
- package/dist/esm/icons/looping.js.map +1 -0
- package/dist/esm/icons/managed-systems.d.ts +5 -0
- package/dist/esm/icons/managed-systems.js.map +1 -1
- package/dist/esm/icons/measurement-data-analysis.d.ts +5 -0
- package/dist/esm/icons/measurement-data-analysis.js.map +1 -1
- package/dist/esm/icons/running.d.ts +12 -0
- package/dist/esm/icons/running.js +12 -0
- package/dist/esm/icons/running.js.map +1 -0
- package/dist/esm/icons/settings.d.ts +5 -0
- package/dist/esm/icons/settings.js.map +1 -1
- package/dist/esm/icons/skipped.d.ts +12 -0
- package/dist/esm/icons/skipped.js +12 -0
- package/dist/esm/icons/skipped.js.map +1 -0
- package/dist/esm/icons/status.d.ts +12 -0
- package/dist/esm/icons/status.js +12 -0
- package/dist/esm/icons/status.js.map +1 -0
- package/dist/esm/icons/succeeded.d.ts +12 -0
- package/dist/esm/icons/succeeded.js +12 -0
- package/dist/esm/icons/succeeded.js.map +1 -0
- package/dist/esm/icons/terminated.d.ts +12 -0
- package/dist/esm/icons/terminated.js +12 -0
- package/dist/esm/icons/terminated.js.map +1 -0
- package/dist/esm/icons/test-insights.d.ts +5 -0
- package/dist/esm/icons/test-insights.js.map +1 -1
- package/dist/esm/icons/timed-out.d.ts +12 -0
- package/dist/esm/icons/timed-out.js +12 -0
- package/dist/esm/icons/timed-out.js.map +1 -0
- package/dist/esm/icons/utilities.d.ts +5 -0
- package/dist/esm/icons/utilities.js.map +1 -1
- package/dist/esm/icons/waiting.d.ts +12 -0
- package/dist/esm/icons/waiting.js +12 -0
- package/dist/esm/icons/waiting.js.map +1 -0
- package/dist/esm/listbox-option/index.d.ts +5 -0
- package/dist/esm/listbox-option/index.js +2 -0
- package/dist/esm/listbox-option/index.js.map +1 -1
- package/dist/esm/menu/index.d.ts +8 -1
- package/dist/esm/menu/index.js +5 -2
- package/dist/esm/menu/index.js.map +1 -1
- package/dist/esm/menu-item/index.d.ts +9 -12
- package/dist/esm/menu-item/index.js +5 -2
- package/dist/esm/menu-item/index.js.map +1 -1
- package/dist/esm/nimble-components/src/button/index.d.ts +33 -0
- package/dist/esm/nimble-components/src/button/types.d.ts +8 -0
- package/dist/esm/nimble-components/src/checkbox/index.d.ts +12 -0
- package/dist/esm/{button → nimble-components/src/checkbox}/styles.d.ts +0 -0
- package/dist/esm/nimble-components/src/drawer/animations.d.ts +14 -0
- package/dist/esm/nimble-components/src/drawer/index.d.ts +43 -0
- package/dist/esm/nimble-components/src/drawer/styles.d.ts +1 -0
- package/dist/esm/nimble-components/src/drawer/types.d.ts +12 -0
- package/dist/esm/nimble-components/src/icon-base/index.d.ts +12 -0
- package/dist/esm/nimble-components/src/icon-base/styles.d.ts +1 -0
- package/dist/esm/nimble-components/src/icon-base/template.d.ts +2 -0
- package/dist/esm/nimble-components/src/icon-base/types.d.ts +11 -0
- package/dist/esm/nimble-components/src/icons/access-control.d.ts +12 -0
- package/dist/esm/nimble-components/src/icons/admin.d.ts +12 -0
- package/dist/esm/nimble-components/src/icons/administration.d.ts +12 -0
- package/dist/esm/nimble-components/src/icons/all-icons.d.ts +24 -0
- package/dist/esm/nimble-components/src/icons/check.d.ts +12 -0
- package/dist/esm/nimble-components/src/icons/custom-applications.d.ts +12 -0
- package/dist/esm/nimble-components/src/icons/custom-status.d.ts +12 -0
- package/dist/esm/nimble-components/src/icons/delete.d.ts +12 -0
- package/dist/esm/nimble-components/src/icons/done.d.ts +12 -0
- package/dist/esm/nimble-components/src/icons/fail.d.ts +12 -0
- package/dist/esm/nimble-components/src/icons/login.d.ts +12 -0
- package/dist/esm/nimble-components/src/icons/logout.d.ts +12 -0
- package/dist/esm/nimble-components/src/icons/looping.d.ts +12 -0
- package/dist/esm/nimble-components/src/icons/managed-systems.d.ts +12 -0
- package/dist/esm/nimble-components/src/icons/measurement-data-analysis.d.ts +12 -0
- package/dist/esm/nimble-components/src/icons/running.d.ts +12 -0
- package/dist/esm/nimble-components/src/icons/settings.d.ts +12 -0
- package/dist/esm/nimble-components/src/icons/skipped.d.ts +12 -0
- package/dist/esm/nimble-components/src/icons/status.d.ts +12 -0
- package/dist/esm/nimble-components/src/icons/succeeded.d.ts +12 -0
- package/dist/esm/nimble-components/src/icons/terminated.d.ts +12 -0
- package/dist/esm/nimble-components/src/icons/test-insights.d.ts +12 -0
- package/dist/esm/nimble-components/src/icons/timed-out.d.ts +12 -0
- package/dist/esm/nimble-components/src/icons/utilities.d.ts +12 -0
- package/dist/esm/nimble-components/src/icons/waiting.d.ts +12 -0
- package/dist/esm/nimble-components/src/listbox-option/index.d.ts +15 -0
- package/dist/esm/nimble-components/src/listbox-option/styles.d.ts +1 -0
- package/dist/esm/nimble-components/src/menu/index.d.ts +12 -0
- package/dist/esm/nimble-components/src/menu/styles.d.ts +1 -0
- package/dist/esm/nimble-components/src/menu-item/index.d.ts +12 -0
- package/dist/esm/nimble-components/src/menu-item/styles.d.ts +1 -0
- package/dist/esm/nimble-components/src/number-field/index.d.ts +12 -0
- package/dist/esm/nimble-components/src/number-field/styles.d.ts +1 -0
- package/dist/esm/nimble-components/src/patterns/button/styles.d.ts +1 -0
- package/dist/esm/nimble-components/src/patterns/button/types.d.ts +10 -0
- package/dist/esm/nimble-components/src/select/index.d.ts +16 -0
- package/dist/esm/nimble-components/src/select/styles.d.ts +1 -0
- package/dist/esm/nimble-components/src/tab/index.d.ts +12 -0
- package/dist/esm/nimble-components/src/tab/styles.d.ts +1 -0
- package/dist/esm/nimble-components/src/tab-panel/index.d.ts +12 -0
- package/dist/esm/nimble-components/src/tab-panel/styles.d.ts +1 -0
- package/dist/esm/nimble-components/src/tabs/index.d.ts +12 -0
- package/dist/esm/nimble-components/src/tabs/styles.d.ts +1 -0
- package/dist/esm/nimble-components/src/tabs-toolbar/index.d.ts +12 -0
- package/dist/esm/nimble-components/src/tabs-toolbar/styles.d.ts +1 -0
- package/dist/esm/nimble-components/src/tabs-toolbar/template.d.ts +1 -0
- package/dist/esm/nimble-components/src/testing/async-helpers.d.ts +10 -0
- package/dist/esm/nimble-components/src/text-field/index.d.ts +12 -0
- package/dist/esm/nimble-components/src/text-field/styles.d.ts +1 -0
- package/dist/esm/nimble-components/src/text-field/types.d.ts +3 -0
- package/dist/esm/nimble-components/src/theme-provider/design-token-comments.d.ts +6 -0
- package/dist/esm/nimble-components/src/theme-provider/design-token-names.d.ts +11 -0
- package/dist/esm/nimble-components/src/theme-provider/design-tokens.d.ts +42 -0
- package/dist/esm/nimble-components/src/theme-provider/index.d.ts +22 -0
- package/dist/esm/nimble-components/src/theme-provider/styles.d.ts +1 -0
- package/dist/esm/nimble-components/src/theme-provider/template.d.ts +2 -0
- package/dist/esm/{theme-provider/themes.d.ts → nimble-components/src/theme-provider/types.d.ts} +2 -1
- package/dist/esm/nimble-components/src/toggle-button/index.d.ts +33 -0
- package/dist/esm/nimble-components/src/toggle-button/styles.d.ts +1 -0
- package/dist/esm/nimble-components/src/toggle-button/template.d.ts +2 -0
- package/dist/esm/nimble-components/src/toggle-button/types.d.ts +6 -0
- package/dist/esm/nimble-components/src/tree-item/index.d.ts +34 -0
- package/dist/esm/nimble-components/src/tree-item/styles.d.ts +3 -0
- package/dist/esm/nimble-components/src/tree-view/index.d.ts +22 -0
- package/dist/esm/nimble-components/src/tree-view/styles.d.ts +1 -0
- package/dist/esm/nimble-components/src/tree-view/types.d.ts +7 -0
- package/dist/esm/{button/behaviors.d.ts → nimble-components/src/utilities/style/appearance.d.ts} +1 -1
- package/dist/esm/nimble-components/src/utilities/style/direction.d.ts +34 -0
- package/dist/esm/nimble-components/src/utilities/style/focus.d.ts +11 -0
- package/dist/esm/nimble-components/src/utilities/style/prefers-reduced-motion.d.ts +4 -0
- package/dist/esm/nimble-components/src/utilities/style/theme.d.ts +44 -0
- package/dist/esm/number-field/index.d.ts +8 -2
- package/dist/esm/number-field/index.js +8 -1
- package/dist/esm/number-field/index.js.map +1 -1
- package/dist/esm/number-field/styles.js +3 -3
- package/dist/esm/number-field/styles.js.map +1 -1
- package/dist/esm/patterns/button/styles.d.ts +1 -0
- package/dist/esm/{button → patterns/button}/styles.js +24 -14
- package/dist/esm/patterns/button/styles.js.map +1 -0
- package/dist/esm/patterns/button/types.d.ts +10 -0
- package/dist/esm/patterns/button/types.js +11 -0
- package/dist/esm/patterns/button/types.js.map +1 -0
- package/dist/esm/select/index.d.ts +6 -2
- package/dist/esm/select/index.js +9 -5
- package/dist/esm/select/index.js.map +1 -1
- package/dist/esm/tab/index.d.ts +11 -1
- package/dist/esm/tab/index.js +8 -1
- package/dist/esm/tab/index.js.map +1 -1
- package/dist/esm/tab-panel/index.d.ts +11 -1
- package/dist/esm/tab-panel/index.js +8 -1
- package/dist/esm/tab-panel/index.js.map +1 -1
- package/dist/esm/tabs/index.d.ts +11 -1
- package/dist/esm/tabs/index.js +8 -1
- package/dist/esm/tabs/index.js.map +1 -1
- package/dist/esm/tabs-toolbar/index.d.ts +7 -1
- package/dist/esm/tabs-toolbar/index.js +1 -1
- package/dist/esm/tabs-toolbar/index.js.map +1 -1
- package/dist/esm/tabs-toolbar/styles.js +3 -2
- package/dist/esm/tabs-toolbar/styles.js.map +1 -1
- package/dist/esm/testing/async-helpers.d.ts +10 -0
- package/dist/esm/testing/async-helpers.js +12 -0
- package/dist/esm/testing/async-helpers.js.map +1 -0
- package/dist/esm/text-field/index.d.ts +8 -2
- package/dist/esm/text-field/index.js +8 -1
- package/dist/esm/text-field/index.js.map +1 -1
- package/dist/esm/text-field/styles.js +20 -8
- package/dist/esm/text-field/styles.js.map +1 -1
- package/dist/esm/text-field/types.d.ts +3 -0
- package/dist/esm/text-field/types.js +3 -0
- package/dist/esm/text-field/types.js.map +1 -0
- package/dist/esm/theme-provider/design-token-comments.d.ts +6 -0
- package/dist/esm/theme-provider/design-token-comments.js +45 -0
- package/dist/esm/theme-provider/design-token-comments.js.map +1 -0
- package/dist/esm/theme-provider/design-token-names.d.ts +11 -0
- package/dist/esm/theme-provider/design-token-names.js +51 -0
- package/dist/esm/theme-provider/design-token-names.js.map +1 -0
- package/dist/esm/theme-provider/design-tokens.d.ts +4 -10
- package/dist/esm/theme-provider/design-tokens.js +94 -109
- package/dist/esm/theme-provider/design-tokens.js.map +1 -1
- package/dist/esm/theme-provider/index.d.ts +18 -6
- package/dist/esm/theme-provider/index.js +51 -26
- package/dist/esm/theme-provider/index.js.map +1 -1
- package/dist/esm/theme-provider/styles.d.ts +1 -0
- package/dist/esm/theme-provider/styles.js +7 -0
- package/dist/esm/theme-provider/styles.js.map +1 -0
- package/dist/esm/theme-provider/template.d.ts +2 -2
- package/dist/esm/theme-provider/template.js.map +1 -1
- package/dist/esm/theme-provider/types.d.ts +7 -0
- package/dist/esm/theme-provider/types.js +8 -0
- package/dist/esm/theme-provider/types.js.map +1 -0
- package/dist/esm/toggle-button/index.d.ts +33 -0
- package/dist/esm/toggle-button/index.js +43 -0
- package/dist/esm/toggle-button/index.js.map +1 -0
- package/dist/esm/toggle-button/styles.d.ts +1 -0
- package/dist/esm/toggle-button/styles.js +31 -0
- package/dist/esm/toggle-button/styles.js.map +1 -0
- package/dist/esm/toggle-button/template.d.ts +2 -0
- package/dist/esm/toggle-button/template.js +25 -0
- package/dist/esm/toggle-button/template.js.map +1 -0
- package/dist/esm/toggle-button/types.d.ts +6 -0
- package/dist/esm/toggle-button/types.js +2 -0
- package/dist/esm/toggle-button/types.js.map +1 -0
- package/dist/esm/tree-item/index.d.ts +7 -1
- package/dist/esm/tree-item/index.js +13 -12
- package/dist/esm/tree-item/index.js.map +1 -1
- package/dist/esm/tree-item/styles.js +9 -7
- package/dist/esm/tree-item/styles.js.map +1 -1
- package/dist/esm/tree-view/index.d.ts +9 -3
- package/dist/esm/tree-view/index.js +4 -3
- package/dist/esm/tree-view/index.js.map +1 -1
- package/dist/esm/tree-view/types.d.ts +2 -1
- package/dist/esm/tree-view/types.js +5 -5
- package/dist/esm/tree-view/types.js.map +1 -1
- package/dist/esm/utilities/style/appearance.d.ts +12 -0
- package/dist/esm/{button/behaviors.js → utilities/style/appearance.js} +1 -1
- package/dist/esm/utilities/style/appearance.js.map +1 -0
- package/dist/esm/utilities/style/direction.d.ts +34 -0
- package/dist/esm/utilities/style/direction.js +78 -0
- package/dist/esm/utilities/style/direction.js.map +1 -0
- package/dist/esm/utilities/style/focus.js +1 -1
- package/dist/esm/utilities/style/focus.js.map +1 -1
- package/dist/esm/utilities/style/prefers-reduced-motion.d.ts +4 -0
- package/dist/esm/utilities/style/prefers-reduced-motion.js +5 -0
- package/dist/esm/utilities/style/prefers-reduced-motion.js.map +1 -0
- package/dist/esm/utilities/style/theme.d.ts +44 -0
- package/dist/esm/utilities/style/theme.js +116 -0
- package/dist/esm/utilities/style/theme.js.map +1 -0
- package/dist/fonts.scss +3 -0
- package/dist/tokens-internal.scss +255 -0
- package/dist/tokens.scss +132 -0
- package/package.json +29 -20
- package/dist/esm/button/behaviors.js.map +0 -1
- package/dist/esm/button/styles.js.map +0 -1
- package/dist/esm/testing/dom-next-update.d.ts +0 -4
- package/dist/esm/testing/dom-next-update.js +0 -6
- package/dist/esm/testing/dom-next-update.js.map +0 -1
- package/dist/esm/theme-provider/themes.js +0 -8
- package/dist/esm/theme-provider/themes.js.map +0 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
2
|
import { display } from '@microsoft/fast-foundation';
|
|
3
|
-
import { focusVisible } from '
|
|
4
|
-
import {
|
|
5
|
-
import { appearanceBehavior } from '
|
|
3
|
+
import { focusVisible } from '../../utilities/style/focus';
|
|
4
|
+
import { actionColorRgbPartial, borderColorHover, borderColorRgbPartial, borderWidth, buttonContentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, fillColorSelected, fontFamily, iconColor, smallDelay, standardPadding } from '../../theme-provider/design-tokens';
|
|
5
|
+
import { appearanceBehavior } from '../../utilities/style/appearance';
|
|
6
6
|
import { ButtonAppearance } from './types';
|
|
7
7
|
export const styles = css `
|
|
8
8
|
${display('inline-flex')}
|
|
@@ -21,6 +21,7 @@ export const styles = css `
|
|
|
21
21
|
/*
|
|
22
22
|
Not sure why but this is needed to get buttons with icons and buttons
|
|
23
23
|
without icons to align on the same line when the button is inline-flex
|
|
24
|
+
See: https://github.com/microsoft/fast/issues/5414
|
|
24
25
|
*/ ''}
|
|
25
26
|
vertical-align: middle;
|
|
26
27
|
}
|
|
@@ -52,6 +53,11 @@ export const styles = css `
|
|
|
52
53
|
transition: box-shadow ${smallDelay};
|
|
53
54
|
}
|
|
54
55
|
|
|
56
|
+
:host([content-hidden]) .control {
|
|
57
|
+
width: ${controlHeight};
|
|
58
|
+
padding: 0px;
|
|
59
|
+
}
|
|
60
|
+
|
|
55
61
|
@media (prefers-reduced-motion) {
|
|
56
62
|
.control {
|
|
57
63
|
transition-duration: 0s;
|
|
@@ -83,12 +89,16 @@ export const styles = css `
|
|
|
83
89
|
display: contents;
|
|
84
90
|
}
|
|
85
91
|
|
|
92
|
+
:host([content-hidden]) .content {
|
|
93
|
+
display: none;
|
|
94
|
+
}
|
|
95
|
+
|
|
86
96
|
[part='start'] {
|
|
87
97
|
display: contents;
|
|
88
98
|
}
|
|
89
99
|
|
|
90
100
|
slot[name='start']::slotted(*) {
|
|
91
|
-
|
|
101
|
+
${iconColor.cssCustomProperty}: ${buttonContentFontColor};
|
|
92
102
|
}
|
|
93
103
|
|
|
94
104
|
:host([disabled]) slot[name='start']::slotted(*) {
|
|
@@ -103,7 +113,7 @@ export const styles = css `
|
|
|
103
113
|
.withBehaviors(appearanceBehavior(ButtonAppearance.Outline, css `
|
|
104
114
|
.control {
|
|
105
115
|
background-color: transparent;
|
|
106
|
-
border-color: rgba(${
|
|
116
|
+
border-color: rgba(${actionColorRgbPartial}, 0.3);
|
|
107
117
|
}
|
|
108
118
|
|
|
109
119
|
.control:hover {
|
|
@@ -118,12 +128,12 @@ export const styles = css `
|
|
|
118
128
|
|
|
119
129
|
.control:active {
|
|
120
130
|
background-color: ${fillColorSelected};
|
|
121
|
-
border-color:
|
|
131
|
+
border-color: ${fillColorSelected};
|
|
122
132
|
}
|
|
123
133
|
|
|
124
134
|
.control[disabled] {
|
|
125
135
|
background-color: transparent;
|
|
126
|
-
border-color: rgba(${
|
|
136
|
+
border-color: rgba(${borderColorRgbPartial}, 0.2);
|
|
127
137
|
}
|
|
128
138
|
`), appearanceBehavior(ButtonAppearance.Ghost, css `
|
|
129
139
|
.control {
|
|
@@ -143,7 +153,7 @@ export const styles = css `
|
|
|
143
153
|
|
|
144
154
|
.control:active {
|
|
145
155
|
background-color: ${fillColorSelected};
|
|
146
|
-
border-color:
|
|
156
|
+
border-color: ${fillColorSelected};
|
|
147
157
|
}
|
|
148
158
|
|
|
149
159
|
.control[disabled] {
|
|
@@ -152,28 +162,28 @@ export const styles = css `
|
|
|
152
162
|
}
|
|
153
163
|
`), appearanceBehavior(ButtonAppearance.Block, css `
|
|
154
164
|
.control {
|
|
155
|
-
background-color: rgba(${
|
|
165
|
+
background-color: rgba(${borderColorRgbPartial}, 0.1);
|
|
156
166
|
border-color: transparent;
|
|
157
167
|
}
|
|
158
168
|
|
|
159
169
|
.control:hover {
|
|
160
|
-
background-color: rgba(${
|
|
170
|
+
background-color: rgba(${borderColorRgbPartial}, 0.1);
|
|
161
171
|
border-color: ${borderColorHover};
|
|
162
172
|
}
|
|
163
173
|
|
|
164
174
|
.control${focusVisible} {
|
|
165
|
-
background-color: rgba(${
|
|
175
|
+
background-color: rgba(${borderColorRgbPartial}, 0.1);
|
|
166
176
|
border-color: ${borderColorHover};
|
|
167
177
|
}
|
|
168
178
|
|
|
169
179
|
.control:active {
|
|
170
180
|
background-color: ${fillColorSelected};
|
|
171
|
-
border-color:
|
|
181
|
+
border-color: ${fillColorSelected};
|
|
172
182
|
}
|
|
173
183
|
|
|
174
184
|
.control[disabled] {
|
|
175
|
-
background-color: rgba(${
|
|
176
|
-
border-color:
|
|
185
|
+
background-color: rgba(${borderColorRgbPartial}, 0.1);
|
|
186
|
+
border-color: transparent;
|
|
177
187
|
}
|
|
178
188
|
`));
|
|
179
189
|
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,sBAAsB,EACtB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,iBAAiB,EACjB,UAAU,EACV,SAAS,EACT,UAAU,EACV,eAAe,EAClB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;kBAIV,aAAa;iBACd,sBAAsB;uBAChB,UAAU;qBACZ,eAAe;;;;;UAK1B;AACE;;;;EAIE,CAAC,EACP;;;;;iBAKS,wBAAwB;;;;;;;;kBAQvB,WAAW;;;;;;;;;;;;;;qBAcR,eAAe;iCACH,UAAU;;;;iBAI1B,aAAa;;;;;;;;;;;kCAWI,WAAW,IAAI,gBAAgB;;;;cAInD,YAAY;kCACQ,WAAW,IAAI,gBAAgB;mBAC9C,WAAW,UAAU,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;UA2B9C,SAAS,CAAC,iBAAiB,KAAK,sBAAsB;;;;;;;;;;CAU/D;IACG,kBAAkB;KACjB,aAAa,CACV,kBAAkB,CACd,gBAAgB,CAAC,OAAO,EACxB,GAAG,CAAA;;;yCAG0B,qBAAqB;;;;;oCAK1B,gBAAgB;;;0BAG1B,YAAY;;oCAEF,gBAAgB;;;;wCAIZ,iBAAiB;oCACrB,iBAAiB;;;;;yCAKZ,qBAAqB;;aAEjD,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;;;;;;;oCAQqB,gBAAgB;;;0BAG1B,YAAY;;oCAEF,gBAAgB;;;;wCAIZ,iBAAiB;oCACrB,iBAAiB;;;;;;;aAOxC,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;6CAE8B,qBAAqB;;;;;6CAKrB,qBAAqB;oCAC9B,gBAAgB;;;0BAG1B,YAAY;6CACO,qBAAqB;oCAC9B,gBAAgB;;;;wCAIZ,iBAAiB;oCACrB,iBAAiB;;;;6CAIR,qBAAqB;;;aAGrD,CACJ,CACJ,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Types of button appearance.
|
|
3
|
+
* @public
|
|
4
|
+
*/
|
|
5
|
+
export var ButtonAppearance;
|
|
6
|
+
(function (ButtonAppearance) {
|
|
7
|
+
ButtonAppearance["Outline"] = "outline";
|
|
8
|
+
ButtonAppearance["Ghost"] = "ghost";
|
|
9
|
+
ButtonAppearance["Block"] = "block";
|
|
10
|
+
})(ButtonAppearance || (ButtonAppearance = {}));
|
|
11
|
+
//# sourceMappingURL=types.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/patterns/button/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAN,IAAY,gBAIX;AAJD,WAAY,gBAAgB;IACxB,uCAAmB,CAAA;IACnB,mCAAe,CAAA;IACf,mCAAe,CAAA;AACnB,CAAC,EAJW,gBAAgB,KAAhB,gBAAgB,QAI3B"}
|
|
@@ -1,5 +1,10 @@
|
|
|
1
|
-
import { Select as FoundationSelect
|
|
1
|
+
import { Select as FoundationSelect } from '@microsoft/fast-foundation';
|
|
2
2
|
export type { Select };
|
|
3
|
+
declare global {
|
|
4
|
+
interface HTMLElementTagNameMap {
|
|
5
|
+
'nimble-select': Select;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
3
8
|
/**
|
|
4
9
|
* A nimble-styed HTML select
|
|
5
10
|
*/
|
|
@@ -9,4 +14,3 @@ declare class Select extends FoundationSelect {
|
|
|
9
14
|
setPositioning(): void;
|
|
10
15
|
connectedCallback(): void;
|
|
11
16
|
}
|
|
12
|
-
export declare const nimbleSelect: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<SelectOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<SelectOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
|
package/dist/esm/select/index.js
CHANGED
|
@@ -15,10 +15,12 @@ class Select extends FoundationSelect {
|
|
|
15
15
|
// the options property will not be set yet. As a workaround, we mark the listbox-option element with
|
|
16
16
|
// the selected attribute, which will set the initial value correctly.
|
|
17
17
|
if (value !== null && this.options.length === 0) {
|
|
18
|
-
const
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
18
|
+
const options = this.querySelectorAll('option,[role="option"]');
|
|
19
|
+
options.forEach(option => {
|
|
20
|
+
if (option.getAttribute('value') === value) {
|
|
21
|
+
option.setAttribute('selected', '');
|
|
22
|
+
}
|
|
23
|
+
});
|
|
22
24
|
}
|
|
23
25
|
}
|
|
24
26
|
// Workaround for https://github.com/microsoft/fast/issues/5123
|
|
@@ -36,8 +38,10 @@ class Select extends FoundationSelect {
|
|
|
36
38
|
this.setPositioning();
|
|
37
39
|
}
|
|
38
40
|
}
|
|
39
|
-
|
|
41
|
+
const nimbleSelect = Select.compose({
|
|
40
42
|
baseName: 'select',
|
|
43
|
+
baseClass: FoundationSelect,
|
|
44
|
+
// @ts-expect-error FAST templates have incorrect type, see: https://github.com/microsoft/fast/issues/5047
|
|
41
45
|
template,
|
|
42
46
|
styles,
|
|
43
47
|
indicator: controlsArrowExpanderDown16X16.data
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,MAAM,IAAI,gBAAgB,EAE1B,cAAc,IAAI,QAAQ,EAC7B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,8BAA8B,EAAE,MAAM,sDAAsD,CAAC;AACtG,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,MAAM,IAAI,gBAAgB,EAE1B,cAAc,IAAI,QAAQ,EAC7B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,8BAA8B,EAAE,MAAM,sDAAsD,CAAC;AACtG,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAUlC;;GAEG;AACH,MAAM,MAAO,SAAQ,gBAAgB;IACjC,IAAW,KAAK;QACZ,OAAO,KAAK,CAAC,KAAK,CAAC;IACvB,CAAC;IAED,IAAW,KAAK,CAAC,KAAa;QAC1B,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC;QAEpB,+DAA+D;QAC/D,qGAAqG;QACrG,qGAAqG;QACrG,sEAAsE;QACtE,IAAI,KAAK,KAAK,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;YAC7C,MAAM,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC;YAChE,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;gBACrB,IAAI,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,KAAK,KAAK,EAAE;oBACxC,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;iBACvC;YACL,CAAC,CAAC,CAAC;SACN;IACL,CAAC;IAED,+DAA+D;IACxD,cAAc;QACjB,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE;YACnC,qDAAqD;YACrD,mDAAmD;YACnD,OAAO;SACV;QACD,KAAK,CAAC,cAAc,EAAE,CAAC;IAC3B,CAAC;IAEM,iBAAiB;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,kEAAkE;QAClE,IAAI,CAAC,cAAc,EAAE,CAAC;IAC1B,CAAC;CACJ;AAED,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAgB;IAC/C,QAAQ,EAAE,QAAQ;IAClB,SAAS,EAAE,gBAAgB;IAC3B,0GAA0G;IAC1G,QAAQ;IACR,MAAM;IACN,SAAS,EAAE,8BAA8B,CAAC,IAAI;CACjD,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC"}
|
package/dist/esm/tab/index.d.ts
CHANGED
|
@@ -1,2 +1,12 @@
|
|
|
1
|
-
import { Tab } from '@microsoft/fast-foundation';
|
|
1
|
+
import { Tab as FoundationTab } from '@microsoft/fast-foundation';
|
|
2
2
|
export type { Tab };
|
|
3
|
+
declare global {
|
|
4
|
+
interface HTMLElementTagNameMap {
|
|
5
|
+
'nimble-tab': Tab;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* A nimble-styled HTML tab
|
|
10
|
+
*/
|
|
11
|
+
declare class Tab extends FoundationTab {
|
|
12
|
+
}
|
package/dist/esm/tab/index.js
CHANGED
|
@@ -1,7 +1,14 @@
|
|
|
1
|
-
import { DesignSystem, Tab, tabTemplate as template } from '@microsoft/fast-foundation';
|
|
1
|
+
import { DesignSystem, Tab as FoundationTab, tabTemplate as template } from '@microsoft/fast-foundation';
|
|
2
2
|
import { styles } from './styles';
|
|
3
|
+
/**
|
|
4
|
+
* A nimble-styled HTML tab
|
|
5
|
+
*/
|
|
6
|
+
class Tab extends FoundationTab {
|
|
7
|
+
}
|
|
3
8
|
const nimbleTab = Tab.compose({
|
|
4
9
|
baseName: 'tab',
|
|
10
|
+
baseClass: FoundationTab,
|
|
11
|
+
// @ts-expect-error FAST templates have incorrect type, see: https://github.com/microsoft/fast/issues/5047
|
|
5
12
|
template,
|
|
6
13
|
styles
|
|
7
14
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tab/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,GAAG,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tab/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,GAAG,IAAI,aAAa,EACpB,WAAW,IAAI,QAAQ,EAC1B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAUlC;;GAEG;AACH,MAAM,GAAI,SAAQ,aAAa;CAAG;AAElC,MAAM,SAAS,GAAG,GAAG,CAAC,OAAO,CAAC;IAC1B,QAAQ,EAAE,KAAK;IACf,SAAS,EAAE,aAAa;IACxB,0GAA0G;IAC1G,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,SAAS,EAAE,CAAC,CAAC"}
|
|
@@ -1,2 +1,12 @@
|
|
|
1
|
-
import { TabPanel } from '@microsoft/fast-foundation';
|
|
1
|
+
import { TabPanel as FoundationTabPanel } from '@microsoft/fast-foundation';
|
|
2
2
|
export type { TabPanel };
|
|
3
|
+
declare global {
|
|
4
|
+
interface HTMLElementTagNameMap {
|
|
5
|
+
'nimble-tab-panel': TabPanel;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* A nimble-styled tab panel
|
|
10
|
+
*/
|
|
11
|
+
declare class TabPanel extends FoundationTabPanel {
|
|
12
|
+
}
|
|
@@ -1,7 +1,14 @@
|
|
|
1
|
-
import { DesignSystem, TabPanel, tabPanelTemplate as template } from '@microsoft/fast-foundation';
|
|
1
|
+
import { DesignSystem, TabPanel as FoundationTabPanel, tabPanelTemplate as template } from '@microsoft/fast-foundation';
|
|
2
2
|
import { styles } from './styles';
|
|
3
|
+
/**
|
|
4
|
+
* A nimble-styled tab panel
|
|
5
|
+
*/
|
|
6
|
+
class TabPanel extends FoundationTabPanel {
|
|
7
|
+
}
|
|
3
8
|
const nimbleTabPanel = TabPanel.compose({
|
|
4
9
|
baseName: 'tab-panel',
|
|
10
|
+
baseClass: FoundationTabPanel,
|
|
11
|
+
// @ts-expect-error FAST templates have incorrect type, see: https://github.com/microsoft/fast/issues/5047
|
|
5
12
|
template,
|
|
6
13
|
styles
|
|
7
14
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tab-panel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,QAAQ,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tab-panel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,QAAQ,IAAI,kBAAkB,EAC9B,gBAAgB,IAAI,QAAQ,EAC/B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAUlC;;GAEG;AACH,MAAM,QAAS,SAAQ,kBAAkB;CAAG;AAE5C,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC;IACpC,QAAQ,EAAE,WAAW;IACrB,SAAS,EAAE,kBAAkB;IAC7B,0GAA0G;IAC1G,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC"}
|
package/dist/esm/tabs/index.d.ts
CHANGED
|
@@ -1,2 +1,12 @@
|
|
|
1
|
-
import { Tabs } from '@microsoft/fast-foundation';
|
|
1
|
+
import { Tabs as FoundationTabs } from '@microsoft/fast-foundation';
|
|
2
2
|
export type { Tabs };
|
|
3
|
+
declare global {
|
|
4
|
+
interface HTMLElementTagNameMap {
|
|
5
|
+
'nimble-tabs': Tabs;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* A nimble-styled tabs control
|
|
10
|
+
*/
|
|
11
|
+
declare class Tabs extends FoundationTabs {
|
|
12
|
+
}
|
package/dist/esm/tabs/index.js
CHANGED
|
@@ -1,7 +1,14 @@
|
|
|
1
|
-
import { DesignSystem, Tabs, tabsTemplate as template } from '@microsoft/fast-foundation';
|
|
1
|
+
import { DesignSystem, Tabs as FoundationTabs, tabsTemplate as template } from '@microsoft/fast-foundation';
|
|
2
2
|
import { styles } from './styles';
|
|
3
|
+
/**
|
|
4
|
+
* A nimble-styled tabs control
|
|
5
|
+
*/
|
|
6
|
+
class Tabs extends FoundationTabs {
|
|
7
|
+
}
|
|
3
8
|
const nimbleTabs = Tabs.compose({
|
|
4
9
|
baseName: 'tabs',
|
|
10
|
+
baseClass: FoundationTabs,
|
|
11
|
+
// @ts-expect-error FAST templates have incorrect type, see: https://github.com/microsoft/fast/issues/5047
|
|
5
12
|
template,
|
|
6
13
|
styles
|
|
7
14
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,IAAI,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,IAAI,IAAI,cAAc,EAEtB,YAAY,IAAI,QAAQ,EAC3B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAUlC;;GAEG;AACH,MAAM,IAAK,SAAQ,cAAc;CAAG;AAEpC,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAc;IACzC,QAAQ,EAAE,MAAM;IAChB,SAAS,EAAE,cAAc;IACzB,0GAA0G;IAC1G,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC,CAAC"}
|
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
import { FoundationElement } from '@microsoft/fast-foundation';
|
|
2
|
+
export type { TabsToolbar };
|
|
3
|
+
declare global {
|
|
4
|
+
interface HTMLElementTagNameMap {
|
|
5
|
+
'nimble-tabs-toolbar': TabsToolbar;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
2
8
|
/**
|
|
3
9
|
* A nimble-styled container for toolbar content next to tabs.
|
|
4
10
|
*/
|
|
5
|
-
|
|
11
|
+
declare class TabsToolbar extends FoundationElement {
|
|
6
12
|
}
|
|
@@ -4,7 +4,7 @@ import { template } from './template';
|
|
|
4
4
|
/**
|
|
5
5
|
* A nimble-styled container for toolbar content next to tabs.
|
|
6
6
|
*/
|
|
7
|
-
|
|
7
|
+
class TabsToolbar extends FoundationElement {
|
|
8
8
|
}
|
|
9
9
|
const nimbleTabsToolbar = TabsToolbar.compose({
|
|
10
10
|
baseName: 'tabs-toolbar',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tabs-toolbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tabs-toolbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAUtC;;GAEG;AACH,MAAM,WAAY,SAAQ,iBAAiB;CAAG;AAE9C,MAAM,iBAAiB,GAAG,WAAW,CAAC,OAAO,CAAC;IAC1C,QAAQ,EAAE,cAAc;IACxB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,iBAAiB,EAAE,CAAC,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
2
|
import { display } from '@microsoft/fast-foundation';
|
|
3
|
-
import {
|
|
3
|
+
import { borderColorRgbPartial, borderWidth, contentFontColor, contentFontSize, controlHeight, fontFamily, standardPadding } from '../theme-provider/design-tokens';
|
|
4
4
|
export const styles = css `
|
|
5
5
|
${display('flex')}
|
|
6
6
|
|
|
@@ -16,7 +16,8 @@ export const styles = css `
|
|
|
16
16
|
.separator {
|
|
17
17
|
display: inline-block;
|
|
18
18
|
height: 24px;
|
|
19
|
-
border-left: calc(${borderWidth} * 2) solid
|
|
19
|
+
border-left: calc(${borderWidth} * 2) solid
|
|
20
|
+
rgba(${borderColorRgbPartial}, 0.3);
|
|
20
21
|
margin: calc(${standardPadding} / 4) calc(${standardPadding} / 2);
|
|
21
22
|
}
|
|
22
23
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tabs-toolbar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tabs-toolbar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,qBAAqB,EACrB,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,aAAa,EACb,UAAU,EACV,eAAe,EAClB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;kBAIH,aAAa;;uBAER,UAAU;qBACZ,eAAe;iBACnB,gBAAgB;;;;;;4BAML,WAAW;mBACpB,qBAAqB;uBACjB,eAAe,cAAc,eAAe;;CAElE,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Allows test code to wait for components to complete pending asynchronous updates that resulted
|
|
3
|
+
* from DOM interactions like property or attribute changes.
|
|
4
|
+
*/
|
|
5
|
+
export declare const waitForUpdatesAsync: () => Promise<void>;
|
|
6
|
+
/**
|
|
7
|
+
* Allows test code to force components to synchronously complete normally asynchronous pending
|
|
8
|
+
* updates that resulted from DOM interactions like property or attribute changes.
|
|
9
|
+
*/
|
|
10
|
+
export declare const processUpdates: () => void;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { DOM } from '@microsoft/fast-element';
|
|
2
|
+
/**
|
|
3
|
+
* Allows test code to wait for components to complete pending asynchronous updates that resulted
|
|
4
|
+
* from DOM interactions like property or attribute changes.
|
|
5
|
+
*/
|
|
6
|
+
export const waitForUpdatesAsync = async () => DOM.nextUpdate();
|
|
7
|
+
/**
|
|
8
|
+
* Allows test code to force components to synchronously complete normally asynchronous pending
|
|
9
|
+
* updates that resulted from DOM interactions like property or attribute changes.
|
|
10
|
+
*/
|
|
11
|
+
export const processUpdates = () => DOM.processUpdates();
|
|
12
|
+
//# sourceMappingURL=async-helpers.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"async-helpers.js","sourceRoot":"","sources":["../../../src/testing/async-helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C;;;GAGG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,KAAK,IAAmB,EAAE,CAAC,GAAG,CAAC,UAAU,EAAE,CAAC;AAE/E;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,GAAS,EAAE,CAAC,GAAG,CAAC,cAAc,EAAE,CAAC"}
|
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
import { TextField as FoundationTextField } from '@microsoft/fast-foundation';
|
|
2
|
+
export type { TextField };
|
|
3
|
+
declare global {
|
|
4
|
+
interface HTMLElementTagNameMap {
|
|
5
|
+
'nimble-text-field': TextField;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
2
8
|
/**
|
|
3
9
|
* A nimble-styed HTML text input
|
|
4
10
|
*/
|
|
5
|
-
declare
|
|
6
|
-
|
|
11
|
+
declare class TextField extends FoundationTextField {
|
|
12
|
+
}
|
|
@@ -1,8 +1,15 @@
|
|
|
1
1
|
import { DesignSystem, TextField as FoundationTextField, textFieldTemplate as template } from '@microsoft/fast-foundation';
|
|
2
2
|
import { statusAlarmActive16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
|
|
3
3
|
import { styles } from './styles';
|
|
4
|
-
|
|
4
|
+
/**
|
|
5
|
+
* A nimble-styed HTML text input
|
|
6
|
+
*/
|
|
7
|
+
class TextField extends FoundationTextField {
|
|
8
|
+
}
|
|
9
|
+
const nimbleTextField = TextField.compose({
|
|
5
10
|
baseName: 'text-field',
|
|
11
|
+
baseClass: FoundationTextField,
|
|
12
|
+
// @ts-expect-error FAST templates have incorrect type, see: https://github.com/microsoft/fast/issues/5047
|
|
6
13
|
template,
|
|
7
14
|
styles,
|
|
8
15
|
shadowOptions: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/text-field/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,SAAS,IAAI,mBAAmB,EAEhC,iBAAiB,IAAI,QAAQ,EAChC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,sBAAsB,EAAE,MAAM,sDAAsD,CAAC;AAC9F,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/text-field/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,SAAS,IAAI,mBAAmB,EAEhC,iBAAiB,IAAI,QAAQ,EAChC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,sBAAsB,EAAE,MAAM,sDAAsD,CAAC;AAC9F,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAUlC;;GAEG;AACH,MAAM,SAAU,SAAQ,mBAAmB;CAAG;AAE9C,MAAM,eAAe,GAAG,SAAS,CAAC,OAAO,CAAmB;IACxD,QAAQ,EAAE,YAAY;IACtB,SAAS,EAAE,mBAAmB;IAC9B,0GAA0G;IAC1G,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;IACD,GAAG,EAAE,sBAAsB,CAAC,IAAI;CACnC,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,eAAe,EAAE,CAAC,CAAC"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
2
|
import { display } from '@microsoft/fast-foundation';
|
|
3
|
-
import {
|
|
3
|
+
import { borderColorRgbPartial, borderColorHover, borderWidth, contentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, failColor, fillColorSelectedRgbPartial, fontFamily, iconSize, labelFontColor, labelFontFamily, labelFontSize, labelFontWeight, labelHeight, labelTextTransform, smallDelay } from '../theme-provider/design-tokens';
|
|
4
|
+
import { Theme } from '../theme-provider/types';
|
|
5
|
+
import { themeBehavior } from '../utilities/style/theme';
|
|
4
6
|
export const styles = css `
|
|
5
7
|
${display('inline-block')}
|
|
6
8
|
|
|
@@ -24,7 +26,7 @@ export const styles = css `
|
|
|
24
26
|
flex-direction: row;
|
|
25
27
|
border-radius: 0px;
|
|
26
28
|
font-family: ${fontFamily};
|
|
27
|
-
border-bottom: ${borderWidth} solid rgba(${
|
|
29
|
+
border-bottom: ${borderWidth} solid rgba(${borderColorRgbPartial}, 0.3);
|
|
28
30
|
padding-bottom: 1px;
|
|
29
31
|
transition: border-bottom ${smallDelay}, padding-bottom ${smallDelay};
|
|
30
32
|
align-items: flex-end;
|
|
@@ -73,10 +75,6 @@ export const styles = css `
|
|
|
73
75
|
border: none;
|
|
74
76
|
}
|
|
75
77
|
|
|
76
|
-
.control::-ms-reveal {
|
|
77
|
-
filter: ${passwordRevealFilter};
|
|
78
|
-
}
|
|
79
|
-
|
|
80
78
|
.control:hover,
|
|
81
79
|
.control:focus,
|
|
82
80
|
.control:disabled,
|
|
@@ -86,7 +84,7 @@ export const styles = css `
|
|
|
86
84
|
|
|
87
85
|
.control::selection {
|
|
88
86
|
color: ${labelFontColor};
|
|
89
|
-
background: rgba(${
|
|
87
|
+
background: rgba(${fillColorSelectedRgbPartial}, 0.3);
|
|
90
88
|
}
|
|
91
89
|
|
|
92
90
|
.control::placeholder {
|
|
@@ -138,5 +136,19 @@ export const styles = css `
|
|
|
138
136
|
:host([disabled]) [part='end'] path {
|
|
139
137
|
fill: ${contentFontColorDisabled};
|
|
140
138
|
}
|
|
141
|
-
|
|
139
|
+
`.withBehaviors(themeBehavior(css `
|
|
140
|
+
${'' /* Light theme */}
|
|
141
|
+
.control::-ms-reveal {
|
|
142
|
+
filter: invert(0%);
|
|
143
|
+
}
|
|
144
|
+
`, css `
|
|
145
|
+
${'' /* Dark theme */}
|
|
146
|
+
.control::-ms-reveal {
|
|
147
|
+
filter: invert(100%);
|
|
148
|
+
}
|
|
149
|
+
`,
|
|
150
|
+
// Color theme
|
|
151
|
+
Theme.Dark,
|
|
152
|
+
// LegacyBlue theme
|
|
153
|
+
Theme.Light));
|
|
142
154
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,SAAS,EACT,2BAA2B,EAC3B,UAAU,EACV,QAAQ,EACR,cAAc,EACd,eAAe,EACf,aAAa,EACb,eAAe,EACf,WAAW,EACX,kBAAkB,EAClB,UAAU,EACb,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;uBAGN,UAAU;qBACZ,eAAe;;;iBAGnB,gBAAgB;uBACV,WAAW,MAAM,aAAa;;;;iBAIpC,wBAAwB;;;;;;;;;uBASlB,UAAU;yBACR,WAAW,eAAe,qBAAqB;;oCAEpC,UAAU,oBAAoB,UAAU;;;;;;;;;;;mCAWzC,gBAAgB;;;;;yBAK1B,WAAW,UAAU,SAAS;;;;mCAIpB,SAAS;;;;;;yBAMnB,WAAW,UAAU,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA6BrD,cAAc;2BACJ,2BAA2B;;;;iBAIrC,cAAc;;;;;;;;;;;;iBAYd,wBAAwB;;;;;iBAKxB,cAAc;uBACR,eAAe;qBACjB,aAAa;uBACX,eAAe;uBACf,WAAW;0BACR,kBAAkB;;;;;;;;;;;;;;;kBAe1B,QAAQ;iBACT,QAAQ;;;;gBAIT,SAAS;;;;gBAIT,wBAAwB;;CAEvC,CAAC,aAAa,CACP,aAAa,CACT,GAAG,CAAA;cACD,EAAE,CAAC,iBAAiB;;;;SAIzB,EACG,GAAG,CAAA;cACD,EAAE,CAAC,gBAAgB;;;;SAIxB;AACG,cAAc;AACd,KAAK,CAAC,IAAI;AACV,mBAAmB;AACnB,KAAK,CAAC,KAAK,CACd,CACJ,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/text-field/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAE3D,OAAO,EAAE,aAAa,EAAE,CAAC"}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
export const comments = {
|
|
2
|
+
actionColorRgbPartial: '',
|
|
3
|
+
applicationBackgroundColor: 'Background color for the application.',
|
|
4
|
+
fillColorSelected: '',
|
|
5
|
+
fillColorSelectedRgbPartial: '',
|
|
6
|
+
fillColorSelectedHover: '',
|
|
7
|
+
fillColorHover: '',
|
|
8
|
+
borderColor: '',
|
|
9
|
+
borderColorRgbPartial: '',
|
|
10
|
+
failColor: '',
|
|
11
|
+
warningColor: '',
|
|
12
|
+
passColor: '',
|
|
13
|
+
borderColorHover: '',
|
|
14
|
+
iconColor: '',
|
|
15
|
+
popupBoxShadowColor: '',
|
|
16
|
+
popupBorderColor: '',
|
|
17
|
+
controlHeight: '',
|
|
18
|
+
standardPadding: '',
|
|
19
|
+
labelHeight: '',
|
|
20
|
+
borderWidth: '',
|
|
21
|
+
iconSize: '',
|
|
22
|
+
drawerWidth: '',
|
|
23
|
+
fontFamily: '',
|
|
24
|
+
labelFontFamily: '',
|
|
25
|
+
groupLabelFontFamily: '',
|
|
26
|
+
drawerHeaderFontFamily: '',
|
|
27
|
+
labelFontSize: '',
|
|
28
|
+
contentFontSize: '',
|
|
29
|
+
groupLabelFontSize: '',
|
|
30
|
+
drawerHeaderFontSize: '',
|
|
31
|
+
groupLabelFontWeight: '',
|
|
32
|
+
labelFontWeight: '',
|
|
33
|
+
labelFontColor: '',
|
|
34
|
+
groupLabelFontColor: '',
|
|
35
|
+
contentFontColor: '',
|
|
36
|
+
buttonContentFontColor: '',
|
|
37
|
+
labelFontColorDisabled: '',
|
|
38
|
+
labelTextTransform: '',
|
|
39
|
+
groupLabelTextTransform: '',
|
|
40
|
+
contentFontColorDisabled: '',
|
|
41
|
+
smallDelay: '',
|
|
42
|
+
mediumDelay: '',
|
|
43
|
+
drawerAnimationDurationMs: ''
|
|
44
|
+
};
|
|
45
|
+
//# sourceMappingURL=design-token-comments.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"design-token-comments.js","sourceRoot":"","sources":["../../../src/theme-provider/design-token-comments.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,QAAQ,GAA4C;IAC7D,qBAAqB,EAAE,EAAE;IACzB,0BAA0B,EAAE,uCAAuC;IACnE,iBAAiB,EAAE,EAAE;IACrB,2BAA2B,EAAE,EAAE;IAC/B,sBAAsB,EAAE,EAAE;IAC1B,cAAc,EAAE,EAAE;IAClB,WAAW,EAAE,EAAE;IACf,qBAAqB,EAAE,EAAE;IACzB,SAAS,EAAE,EAAE;IACb,YAAY,EAAE,EAAE;IAChB,SAAS,EAAE,EAAE;IACb,gBAAgB,EAAE,EAAE;IACpB,SAAS,EAAE,EAAE;IACb,mBAAmB,EAAE,EAAE;IACvB,gBAAgB,EAAE,EAAE;IACpB,aAAa,EAAE,EAAE;IACjB,eAAe,EAAE,EAAE;IACnB,WAAW,EAAE,EAAE;IACf,WAAW,EAAE,EAAE;IACf,QAAQ,EAAE,EAAE;IACZ,WAAW,EAAE,EAAE;IACf,UAAU,EAAE,EAAE;IACd,eAAe,EAAE,EAAE;IACnB,oBAAoB,EAAE,EAAE;IACxB,sBAAsB,EAAE,EAAE;IAC1B,aAAa,EAAE,EAAE;IACjB,eAAe,EAAE,EAAE;IACnB,kBAAkB,EAAE,EAAE;IACtB,oBAAoB,EAAE,EAAE;IACxB,oBAAoB,EAAE,EAAE;IACxB,eAAe,EAAE,EAAE;IACnB,cAAc,EAAE,EAAE;IAClB,mBAAmB,EAAE,EAAE;IACvB,gBAAgB,EAAE,EAAE;IACpB,sBAAsB,EAAE,EAAE;IAC1B,sBAAsB,EAAE,EAAE;IAC1B,kBAAkB,EAAE,EAAE;IACtB,uBAAuB,EAAE,EAAE;IAC3B,wBAAwB,EAAE,EAAE;IAC5B,UAAU,EAAE,EAAE;IACd,WAAW,EAAE,EAAE;IACf,yBAAyB,EAAE,EAAE;CAChC,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type * as TokensNamespace from './design-tokens';
|
|
2
|
+
declare type TokenName = keyof typeof TokensNamespace;
|
|
3
|
+
export declare const tokenNames: {
|
|
4
|
+
readonly [key in TokenName]: string;
|
|
5
|
+
};
|
|
6
|
+
export declare const styleNameFromTokenName: (tokenName: string) => string;
|
|
7
|
+
export declare const cssPropertyFromTokenName: (tokenName: string) => string;
|
|
8
|
+
export declare const scssPropertyFromTokenName: (tokenName: string) => string;
|
|
9
|
+
export declare const scssInternalPropertyFromTokenName: (tokenName: string) => string;
|
|
10
|
+
export declare const scssInternalPropertySetterMarkdown: (tokenName: string, property: string) => string;
|
|
11
|
+
export {};
|