@fluentui/web-components 3.0.0-beta.34 → 3.0.0-beta.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +11 -2
  2. package/dist/dts/text/text.d.ts +40 -1
  3. package/dist/esm/text/text.js +91 -1
  4. package/dist/esm/text/text.js.map +1 -1
  5. package/dist/esm/text/text.styles.js +56 -57
  6. package/dist/esm/text/text.styles.js.map +1 -1
  7. package/dist/web-components.d.ts +40 -1
  8. package/dist/web-components.js +94 -3
  9. package/dist/web-components.min.js +91 -91
  10. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,12 +1,21 @@
1
1
  # Change Log - @fluentui/web-components
2
2
 
3
- This log was last generated on Mon, 24 Jun 2024 04:05:55 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 25 Jun 2024 04:06:27 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [3.0.0-beta.35](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.35)
8
+
9
+ Tue, 25 Jun 2024 04:06:27 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.34..@fluentui/web-components_v3.0.0-beta.35)
11
+
12
+ ### Changes
13
+
14
+ - updates the Text component to use Element Internals custom states for presentational attributes ([PR #31770](https://github.com/microsoft/fluentui/pull/31770) by 13071055+chrisdholt@users.noreply.github.com)
15
+
7
16
  ## [3.0.0-beta.34](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.34)
8
17
 
9
- Mon, 24 Jun 2024 04:05:55 GMT
18
+ Mon, 24 Jun 2024 04:06:02 GMT
10
19
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.33..@fluentui/web-components_v3.0.0-beta.34)
11
20
 
12
21
  ### Changes
package/dist/dts/text/text.d.ts CHANGED
@@ -5,6 +5,12 @@ import type { TextAlign, TextFont, TextSize, TextWeight } from './text.options.j
5
5
  * @public
6
6
  */
7
7
  export declare class Text extends FASTElement {
8
+ /**
9
+ * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
10
+ *
11
+ * @internal
12
+ */
13
+ elementInternals: ElementInternals;
8
14
  /**
9
15
  * The text will not wrap
10
16
  * NOTE: In Fluent UI React v9 this is "wrap"
@@ -64,6 +70,12 @@ export declare class Text extends FASTElement {
64
70
  *
65
71
  */
66
72
  size?: TextSize;
73
+ /**
74
+ * Handles changes to size attribute custom states
75
+ * @param prev - the previous state
76
+ * @param next - the next state
77
+ */
78
+ sizeChanged(prev: TextSize | undefined, next: TextSize | undefined): void;
67
79
  /**
68
80
  * THe Text font
69
81
  *
@@ -73,13 +85,25 @@ export declare class Text extends FASTElement {
73
85
  */
74
86
  font?: TextFont;
75
87
  /**
76
- * THe Text weight
88
+ * Handles changes to font attribute custom states
89
+ * @param prev - the previous state
90
+ * @param next - the next state
91
+ */
92
+ fontChanged(prev: TextFont | undefined, next: TextFont | undefined): void;
93
+ /**
94
+ * The Text weight
77
95
  *
78
96
  * @public
79
97
  * @remarks
80
98
  * HTML Attribute: weight
81
99
  */
82
100
  weight?: TextWeight;
101
+ /**
102
+ * Handles changes to weight attribute custom states
103
+ * @param prev - the previous state
104
+ * @param next - the next state
105
+ */
106
+ weightChanged(prev: TextWeight | undefined, next: TextWeight | undefined): void;
83
107
  /**
84
108
  * THe Text align
85
109
  *
@@ -88,4 +112,19 @@ export declare class Text extends FASTElement {
88
112
  * HTML Attribute: align
89
113
  */
90
114
  align?: TextAlign;
115
+ /**
116
+ * Handles changes to align attribute custom states
117
+ * @param prev - the previous state
118
+ * @param next - the next state
119
+ */
120
+ alignChanged(prev: TextAlign | undefined, next: TextAlign | undefined): void;
121
+ connectedCallback(): void;
122
+ disconnectedCallback(): void;
123
+ /**
124
+ * Handles changes to observable properties
125
+ * @internal
126
+ * @param source - the source of the change
127
+ * @param propertyName - the property name being changed
128
+ */
129
+ handleChange(source: any, propertyName: string): void;
91
130
  }
package/dist/esm/text/text.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import { __decorate } from "tslib";
2
- import { attr, FASTElement } from '@microsoft/fast-element';
2
+ import { attr, FASTElement, Observable } from '@microsoft/fast-element';
3
+ import { toggleState } from '../utils/element-internals.js';
3
4
  /**
4
5
  * The base class used for constructing a fluent-text custom element
5
6
  * @public
@@ -7,6 +8,12 @@ import { attr, FASTElement } from '@microsoft/fast-element';
7
8
  export class Text extends FASTElement {
8
9
  constructor() {
9
10
  super(...arguments);
11
+ /**
12
+ * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
13
+ *
14
+ * @internal
15
+ */
16
+ this.elementInternals = this.attachInternals();
10
17
  /**
11
18
  * The text will not wrap
12
19
  * NOTE: In Fluent UI React v9 this is "wrap"
@@ -58,6 +65,89 @@ export class Text extends FASTElement {
58
65
  */
59
66
  this.block = false;
60
67
  }
68
+ /**
69
+ * Handles changes to size attribute custom states
70
+ * @param prev - the previous state
71
+ * @param next - the next state
72
+ */
73
+ sizeChanged(prev, next) {
74
+ if (prev) {
75
+ toggleState(this.elementInternals, `size-${prev}`, false);
76
+ }
77
+ if (next) {
78
+ toggleState(this.elementInternals, `size-${next}`, true);
79
+ }
80
+ }
81
+ /**
82
+ * Handles changes to font attribute custom states
83
+ * @param prev - the previous state
84
+ * @param next - the next state
85
+ */
86
+ fontChanged(prev, next) {
87
+ if (prev) {
88
+ toggleState(this.elementInternals, prev, false);
89
+ }
90
+ if (next) {
91
+ toggleState(this.elementInternals, next, true);
92
+ }
93
+ }
94
+ /**
95
+ * Handles changes to weight attribute custom states
96
+ * @param prev - the previous state
97
+ * @param next - the next state
98
+ */
99
+ weightChanged(prev, next) {
100
+ if (prev) {
101
+ toggleState(this.elementInternals, prev, false);
102
+ }
103
+ if (next) {
104
+ toggleState(this.elementInternals, next, true);
105
+ }
106
+ }
107
+ /**
108
+ * Handles changes to align attribute custom states
109
+ * @param prev - the previous state
110
+ * @param next - the next state
111
+ */
112
+ alignChanged(prev, next) {
113
+ if (prev) {
114
+ toggleState(this.elementInternals, prev, false);
115
+ }
116
+ if (next) {
117
+ toggleState(this.elementInternals, next, true);
118
+ }
119
+ }
120
+ connectedCallback() {
121
+ super.connectedCallback();
122
+ Observable.getNotifier(this).subscribe(this);
123
+ Object.keys(this.$fastController.definition.attributeLookup).forEach(key => {
124
+ this.handleChange(this, key);
125
+ });
126
+ }
127
+ disconnectedCallback() {
128
+ super.disconnectedCallback();
129
+ Observable.getNotifier(this).unsubscribe(this);
130
+ }
131
+ /**
132
+ * Handles changes to observable properties
133
+ * @internal
134
+ * @param source - the source of the change
135
+ * @param propertyName - the property name being changed
136
+ */
137
+ handleChange(source, propertyName) {
138
+ switch (propertyName) {
139
+ case 'nowrap':
140
+ case 'truncate':
141
+ case 'italic':
142
+ case 'underline':
143
+ case 'strikethrough':
144
+ case 'block':
145
+ toggleState(this.elementInternals, propertyName, !!this[propertyName]);
146
+ break;
147
+ default:
148
+ break;
149
+ }
150
+ }
61
151
  }
62
152
  __decorate([
63
153
  attr({ mode: 'boolean' })
package/dist/esm/text/text.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"text.js","sourceRoot":"","sources":["../../../src/text/text.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG5D;;;GAGG;AACH,MAAM,OAAO,IAAK,SAAQ,WAAW;IAArC;;QACE;;;;;;;;WAQG;QAEH,WAAM,GAAY,KAAK,CAAC;QAExB;;;;;;WAMG;QAEH,aAAQ,GAAY,KAAK,CAAC;QAE1B;;;;;;WAMG;QAEH,WAAM,GAAY,KAAK,CAAC;QAExB;;;;;;WAMG;QAEH,cAAS,GAAY,KAAK,CAAC;QAE3B;;;;;;WAMG;QAEH,kBAAa,GAAY,KAAK,CAAC;QAE/B;;;;;;WAMG;QAEH,UAAK,GAAY,KAAK,CAAC;IA0CzB,CAAC;CAAA;AA5FC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;oCACF;AAUxB;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;sCACA;AAU1B;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;oCACF;AAUxB;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;uCACC;AAU3B;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;2CACK;AAU/B;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;mCACH;AAWvB;IADC,IAAI;kCACW;AAUhB;IADC,IAAI;kCACW;AAUhB;IADC,IAAI;oCACe;AAUpB;IADC,IAAI;mCACa"}
1
+ {"version":3,"file":"text.js","sourceRoot":"","sources":["../../../src/text/text.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAG5D;;;GAGG;AACH,MAAM,OAAO,IAAK,SAAQ,WAAW;IAArC;;QACE;;;;WAIG;QACI,qBAAgB,GAAqB,IAAI,CAAC,eAAe,EAAE,CAAC;QAEnE;;;;;;;;WAQG;QAEH,WAAM,GAAY,KAAK,CAAC;QAExB;;;;;;WAMG;QAEH,aAAQ,GAAY,KAAK,CAAC;QAE1B;;;;;;WAMG;QAEH,WAAM,GAAY,KAAK,CAAC;QAExB;;;;;;WAMG;QAEH,cAAS,GAAY,KAAK,CAAC;QAE3B;;;;;;WAMG;QAEH,kBAAa,GAAY,KAAK,CAAC;QAE/B;;;;;;WAMG;QAEH,UAAK,GAAY,KAAK,CAAC;IAuIzB,CAAC;IA1HC;;;;OAIG;IACI,WAAW,CAAC,IAA0B,EAAE,IAA0B;QACvE,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,QAAQ,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC;SAC3D;QACD,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,QAAQ,IAAI,EAAE,EAAE,IAAI,CAAC,CAAC;SAC1D;IACH,CAAC;IAYD;;;;OAIG;IACI,WAAW,CAAC,IAA0B,EAAE,IAA0B;QACvE,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;SACjD;QACD,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;SAChD;IACH,CAAC;IAYD;;;;OAIG;IACI,aAAa,CAAC,IAA4B,EAAE,IAA4B;QAC7E,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;SACjD;QACD,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;SAChD;IACH,CAAC;IAYD;;;;OAIG;IACI,YAAY,CAAC,IAA2B,EAAE,IAA2B;QAC1E,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;SACjD;QACD,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;SAChD;IACH,CAAC;IAEM,iBAAiB;QACtB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;QAE7C,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YACzE,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;QAC/B,CAAC,CAAC,CAAC;IACL,CAAC;IAEM,oBAAoB;QACzB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE7B,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IACjD,CAAC;IAED;;;;;OAKG;IACI,YAAY,CAAC,MAAW,EAAE,YAAoB;QACnD,QAAQ,YAAY,EAAE;YACpB,KAAK,QAAQ,CAAC;YACd,KAAK,UAAU,CAAC;YAChB,KAAK,QAAQ,CAAC;YACd,KAAK,WAAW,CAAC;YACjB,KAAK,eAAe,CAAC;YACrB,KAAK,OAAO;gBACV,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,YAAY,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;gBACvE,MAAM;YACR;gBACE,MAAM;SACT;IACH,CAAC;CACF;AAzLC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;oCACF;AAUxB;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;sCACA;AAU1B;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;oCACF;AAUxB;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;uCACC;AAU3B;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;2CACK;AAU/B;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;mCACH;AAWvB;IADC,IAAI;kCACW;AAwBhB;IADC,IAAI;kCACW;AAwBhB;IADC,IAAI;oCACe;AAwBpB;IADC,IAAI;mCACa"}
package/dist/esm/text/text.styles.js CHANGED
@@ -1,6 +1,26 @@
1
1
  import { css } from '@microsoft/fast-element';
2
2
  import { display } from '../utils/index.js';
3
3
  import { fontFamilyBase, fontFamilyMonospace, fontFamilyNumeric, fontSizeBase100, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontSizeBase500, fontSizeBase600, fontSizeHero1000, fontSizeHero700, fontSizeHero800, fontSizeHero900, fontWeightBold, fontWeightMedium, fontWeightRegular, fontWeightSemibold, lineHeightBase100, lineHeightBase200, lineHeightBase300, lineHeightBase400, lineHeightBase500, lineHeightBase600, lineHeightHero1000, lineHeightHero700, lineHeightHero800, lineHeightHero900, } from '../theme/design-tokens.js';
4
+ /**
5
+ * Selector for the `nowrap` state.
6
+ * @public
7
+ */
8
+ const nowrapState = css.partial `:is([state--nowrap], :state(nowrap))`;
9
+ /**
10
+ * Selector for the `truncate` state.
11
+ * @public
12
+ */
13
+ const truncateState = css.partial `:is([state--truncate], :state(truncate))`;
14
+ /**
15
+ * Selector for the `underline` state.
16
+ * @public
17
+ */
18
+ const underlineState = css.partial `:is([state--underline], :state(underline))`;
19
+ /**
20
+ * Selector for the `strikethrough` state.
21
+ * @public
22
+ */
23
+ const strikethroughState = css.partial `:is([state--strikethrough], :state(strikethrough))`;
4
24
  /** Text styles
5
25
  * @public
6
26
  */
@@ -9,127 +29,106 @@ export const styles = css `
9
29
 
10
30
  :host {
11
31
  contain: content;
12
- }
13
-
14
- ::slotted(*) {
15
32
  font-family: ${fontFamilyBase};
16
33
  font-size: ${fontSizeBase300};
17
34
  line-height: ${lineHeightBase300};
18
35
  font-weight: ${fontWeightRegular};
19
36
  text-align: start;
20
- white-space: normal;
21
- overflow: visible;
22
- text-overflow: clip;
23
- margin: 0;
24
- display: inline;
25
37
  }
26
38
 
27
- :host([nowrap]) ::slotted(*),
28
- :host([nowrap]) {
39
+ :host(${nowrapState}),
40
+ :host(${nowrapState}) ::slotted(*) {
29
41
  white-space: nowrap;
30
42
  overflow: hidden;
31
43
  }
32
- :host([truncate]) ::slotted(*),
33
- :host([truncate]) {
44
+ :host(${truncateState}),
45
+ :host(${truncateState}) ::slotted(*) {
34
46
  text-overflow: ellipsis;
35
47
  }
36
- :host([block]),
37
- :host([block]) ::slotted(*),
38
- :host([block]) {
48
+ :host(:is([state--block], :state(block))) {
39
49
  display: block;
40
50
  }
41
- :host([italic]) ::slotted(*),
42
- :host([italic]) {
51
+ :host(:is([state--italic], :state(italic))) {
43
52
  font-style: italic;
44
53
  }
45
- :host([underline]) ::slotted(*),
46
- :host([underline]) {
54
+ :host(${underlineState}) {
47
55
  text-decoration-line: underline;
48
56
  }
49
- :host([strikethrough]) ::slotted(*),
50
- :host([strikethrough]) {
57
+ :host(${strikethroughState}) {
51
58
  text-decoration-line: line-through;
52
59
  }
53
- :host([underline][strikethrough]) ::slotted(*),
54
- :host([underline][strikethrough]) {
60
+ :host(${underlineState}${strikethroughState}) {
55
61
  text-decoration-line: line-through underline;
56
62
  }
57
- :host([size='100']) ::slotted(*),
58
- :host([size='100']) {
63
+ :host(:is([state--size-100], :state(size-100))) {
59
64
  font-size: ${fontSizeBase100};
60
65
  line-height: ${lineHeightBase100};
61
66
  }
62
- :host([size='200']) ::slotted(*),
63
- :host([size='200']) {
67
+ :host(:is([state--size-200], :state(size-200))) {
64
68
  font-size: ${fontSizeBase200};
65
69
  line-height: ${lineHeightBase200};
66
70
  }
67
- :host([size='400']) ::slotted(*),
68
- :host([size='400']) {
71
+ :host(:is([state--size-400], :state(size-400))) {
69
72
  font-size: ${fontSizeBase400};
70
73
  line-height: ${lineHeightBase400};
71
74
  }
72
- :host([size='500']) ::slotted(*),
73
- :host([size='500']) {
75
+ :host(:is([state--size-500], :state(size-500))) {
74
76
  font-size: ${fontSizeBase500};
75
77
  line-height: ${lineHeightBase500};
76
78
  }
77
- :host([size='600']) ::slotted(*),
78
- :host([size='600']) {
79
+ :host(:is([state--size-600], :state(size-600))) {
79
80
  font-size: ${fontSizeBase600};
80
81
  line-height: ${lineHeightBase600};
81
82
  }
82
- :host([size='700']) ::slotted(*),
83
- :host([size='700']) {
83
+ :host(:is([state--size-700], :state(size-700))) {
84
84
  font-size: ${fontSizeHero700};
85
85
  line-height: ${lineHeightHero700};
86
86
  }
87
- :host([size='800']) ::slotted(*),
88
- :host([size='800']) {
87
+ :host(:is([state--size-800], :state(size-800))) {
89
88
  font-size: ${fontSizeHero800};
90
89
  line-height: ${lineHeightHero800};
91
90
  }
92
- :host([size='900']) ::slotted(*),
93
- :host([size='900']) {
91
+ :host(:is([state--size-900], :state(size-900))) {
94
92
  font-size: ${fontSizeHero900};
95
93
  line-height: ${lineHeightHero900};
96
94
  }
97
- :host([size='1000']) ::slotted(*),
98
- :host([size='1000']) {
95
+ :host(:is([state--size-1000], :state(size-1000))) {
99
96
  font-size: ${fontSizeHero1000};
100
97
  line-height: ${lineHeightHero1000};
101
98
  }
102
- :host([font='monospace']) ::slotted(*),
103
- :host([font='monospace']) {
99
+ :host(:is([state--monospace], :state(monospace))) {
104
100
  font-family: ${fontFamilyMonospace};
105
101
  }
106
- :host([font='numeric']) ::slotted(*),
107
- :host([font='numeric']) {
102
+ :host(:is([state--numeric], :state(numeric))) {
108
103
  font-family: ${fontFamilyNumeric};
109
104
  }
110
- :host([weight='medium']) ::slotted(*),
111
- :host([weight='medium']) {
105
+ :host(:is([state--medium], :state(medium))) {
112
106
  font-weight: ${fontWeightMedium};
113
107
  }
114
- :host([weight='semibold']) ::slotted(*),
115
- :host([weight='semibold']) {
108
+ :host(:is([state--semibold], :state(semibold))) {
116
109
  font-weight: ${fontWeightSemibold};
117
110
  }
118
- :host([weight='bold']) ::slotted(*),
119
- :host([weight='bold']) {
111
+ :host(:is([state--bold], :state(bold))) {
120
112
  font-weight: ${fontWeightBold};
121
113
  }
122
- :host([align='center']) ::slotted(*),
123
- :host([align='center']) {
114
+ :host(:is([state--center], :state(center))) {
124
115
  text-align: center;
125
116
  }
126
- :host([align='end']) ::slotted(*),
127
- :host([align='end']) {
117
+ :host(:is([state--end], :state(end))) {
128
118
  text-align: end;
129
119
  }
130
- :host([align='justify']) ::slotted(*),
131
- :host([align='justify']) {
120
+ :host(:is([state--justify], :state(justify))) {
132
121
  text-align: justify;
133
122
  }
123
+
124
+ ::slotted(*) {
125
+ display: inherit;
126
+ font: inherit;
127
+ line-height: inherit;
128
+ text-decoration-line: inherit;
129
+ text-align: inherit;
130
+ text-decoration-line: inherit;
131
+ margin: 0;
132
+ }
134
133
  `;
135
134
  //# sourceMappingURL=text.styles.js.map
package/dist/esm/text/text.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"text.styles.js","sourceRoot":"","sources":["../../../src/text/text.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EACL,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,eAAe,EACf,cAAc,EACd,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,QAAQ,CAAC;;;;;;;mBAOF,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAyCnB,eAAe;mBACb,iBAAiB;;;;iBAInB,eAAe;mBACb,iBAAiB;;;;iBAInB,eAAe;mBACb,iBAAiB;;;;iBAInB,eAAe;mBACb,iBAAiB;;;;iBAInB,eAAe;mBACb,iBAAiB;;;;iBAInB,eAAe;mBACb,iBAAiB;;;;iBAInB,eAAe;mBACb,iBAAiB;;;;iBAInB,eAAe;mBACb,iBAAiB;;;;iBAInB,gBAAgB;mBACd,kBAAkB;;;;mBAIlB,mBAAmB;;;;mBAInB,iBAAiB;;;;mBAIjB,gBAAgB;;;;mBAIhB,kBAAkB;;;;mBAIlB,cAAc;;;;;;;;;;;;;;CAchC,CAAC"}
1
+ {"version":3,"file":"text.styles.js","sourceRoot":"","sources":["../../../src/text/text.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EACL,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,eAAe,EACf,cAAc,EACd,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,2BAA2B,CAAC;AAEnC;;;GAGG;AACH,MAAM,WAAW,GAAG,GAAG,CAAC,OAAO,CAAA,sCAAsC,CAAC;AAEtE;;;GAGG;AACH,MAAM,aAAa,GAAG,GAAG,CAAC,OAAO,CAAA,0CAA0C,CAAC;AAE5E;;;GAGG;AACH,MAAM,cAAc,GAAG,GAAG,CAAC,OAAO,CAAA,4CAA4C,CAAC;AAE/E;;;GAGG;AACH,MAAM,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAAA,oDAAoD,CAAC;AAE3F;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,QAAQ,CAAC;;;;mBAIF,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;UAI1B,WAAW;UACX,WAAW;;;;UAIX,aAAa;UACb,aAAa;;;;;;;;;UASb,cAAc;;;UAGd,kBAAkB;;;UAGlB,cAAc,GAAG,kBAAkB;;;;iBAI5B,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;mBACb,iBAAiB;;;iBAGnB,gBAAgB;mBACd,kBAAkB;;;mBAGlB,mBAAmB;;;mBAGnB,iBAAiB;;;mBAGjB,gBAAgB;;;mBAGhB,kBAAkB;;;mBAGlB,cAAc;;;;;;;;;;;;;;;;;;;;;CAqBhC,CAAC"}
package/dist/web-components.d.ts CHANGED
@@ -7349,6 +7349,12 @@ export declare const TabTemplate: ElementViewTemplate<Tab, any>;
7349
7349
  * @public
7350
7350
  */
7351
7351
  declare class Text_2 extends FASTElement {
7352
+ /**
7353
+ * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
7354
+ *
7355
+ * @internal
7356
+ */
7357
+ elementInternals: ElementInternals;
7352
7358
  /**
7353
7359
  * The text will not wrap
7354
7360
  * NOTE: In Fluent UI React v9 this is "wrap"
@@ -7408,6 +7414,12 @@ declare class Text_2 extends FASTElement {
7408
7414
  *
7409
7415
  */
7410
7416
  size?: TextSize;
7417
+ /**
7418
+ * Handles changes to size attribute custom states
7419
+ * @param prev - the previous state
7420
+ * @param next - the next state
7421
+ */
7422
+ sizeChanged(prev: TextSize | undefined, next: TextSize | undefined): void;
7411
7423
  /**
7412
7424
  * THe Text font
7413
7425
  *
@@ -7417,13 +7429,25 @@ declare class Text_2 extends FASTElement {
7417
7429
  */
7418
7430
  font?: TextFont;
7419
7431
  /**
7420
- * THe Text weight
7432
+ * Handles changes to font attribute custom states
7433
+ * @param prev - the previous state
7434
+ * @param next - the next state
7435
+ */
7436
+ fontChanged(prev: TextFont | undefined, next: TextFont | undefined): void;
7437
+ /**
7438
+ * The Text weight
7421
7439
  *
7422
7440
  * @public
7423
7441
  * @remarks
7424
7442
  * HTML Attribute: weight
7425
7443
  */
7426
7444
  weight?: TextWeight;
7445
+ /**
7446
+ * Handles changes to weight attribute custom states
7447
+ * @param prev - the previous state
7448
+ * @param next - the next state
7449
+ */
7450
+ weightChanged(prev: TextWeight | undefined, next: TextWeight | undefined): void;
7427
7451
  /**
7428
7452
  * THe Text align
7429
7453
  *
@@ -7432,6 +7456,21 @@ declare class Text_2 extends FASTElement {
7432
7456
  * HTML Attribute: align
7433
7457
  */
7434
7458
  align?: TextAlign;
7459
+ /**
7460
+ * Handles changes to align attribute custom states
7461
+ * @param prev - the previous state
7462
+ * @param next - the next state
7463
+ */
7464
+ alignChanged(prev: TextAlign | undefined, next: TextAlign | undefined): void;
7465
+ connectedCallback(): void;
7466
+ disconnectedCallback(): void;
7467
+ /**
7468
+ * Handles changes to observable properties
7469
+ * @internal
7470
+ * @param source - the source of the change
7471
+ * @param propertyName - the property name being changed
7472
+ */
7473
+ handleChange(source: any, propertyName: string): void;
7435
7474
  }
7436
7475
  export { Text_2 as Text }
7437
7476
 
package/dist/web-components.js CHANGED
@@ -4380,7 +4380,7 @@ const outlineState = css.partial`:is([state--outline], :state(outline))`;
4380
4380
  const strongState = css.partial`:is([state--strong], :state(strong))`;
4381
4381
  const subtleState = css.partial`:is([state--subtle], :state(subtle))`;
4382
4382
  const tintState = css.partial`:is([state--tint], :state(tint))`;
4383
- const underlineState = css.partial`:is([state--underline], :state(underline))`;
4383
+ const underlineState$1 = css.partial`:is([state--underline], :state(underline))`;
4384
4384
  const transparentState = css.partial`:is([state--transparent], :state(transparent))`;
4385
4385
  const circularState = css.partial`:is([state--circular], :state(circular))`;
4386
4386
  const roundedState = css.partial`:is([state--rounded], :state(rounded))`;
@@ -9911,7 +9911,7 @@ applyMixins(TextInput, StartEnd);
9911
9911
  const styles$2 = css`
9912
9912
  ${display("block")}
9913
9913
 
9914
- :host{font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};max-width:400px}.label{display:flex;color:${colorNeutralForeground1};padding-bottom:${spacingVerticalXS};flex-shrink:0;padding-inline-end:${spacingHorizontalXS}}.label[hidden],:host(:empty) .label{display:none}.root{align-items:center;background-color:${colorNeutralBackground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};border-bottom-color:${colorNeutralStrokeAccessible};border-radius:${borderRadiusMedium};box-sizing:border-box;height:32px;display:inline-flex;flex-direction:row;gap:${spacingHorizontalXXS};padding:0 ${spacingHorizontalMNudge};position:relative;width:100%}:has(.control:user-invalid){border-color:${colorPaletteRedBorder2}}.root::after{box-sizing:border-box;content:'';position:absolute;left:-1px;bottom:0px;right:-1px;height:max(2px,${borderRadiusMedium});border-radius:0 0 ${borderRadiusMedium} ${borderRadiusMedium};border-bottom:2px solid ${colorCompoundBrandStroke};clip-path:inset(calc(100% - 2px) 1px 0px);transform:scaleX(0);transition-property:transform;transition-duration:${durationUltraFast};transition-delay:${curveAccelerateMid}}.control{width:100%;height:100%;box-sizing:border-box;color:${colorNeutralForeground1};border-radius:${borderRadiusMedium};background:${colorTransparentBackground};font-family:${fontFamilyBase};font-weight:${fontWeightRegular};font-size:${fontSizeBase300};border:none;vertical-align:center}.control:focus-visible{outline:0;border:0}.control::placeholder{color:${colorNeutralForeground4}}:host ::slotted([slot='start']),:host ::slotted([slot='end']){display:flex;align-items:center;justify-content:center;color:${colorNeutralForeground3};font-size:${fontSizeBase500}}:host ::slotted([slot='start']){padding-right:${spacingHorizontalXXS}}:host ::slotted([slot='end']){padding-left:${spacingHorizontalXXS};gap:${spacingHorizontalXS}}:host(:hover) .root{border-color:${colorNeutralStroke1Hover};border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host(:active) .root{border-color:${colorNeutralStroke1Pressed}}:host(:focus-within) .root{outline:transparent solid 2px;border-bottom:0}:host(:focus-within) .root::after{transform:scaleX(1);transition-property:transform;transition-duration:${durationNormal};transition-delay:${curveDecelerateMid}}:host(:focus-within:active) .root:after{border-bottom-color:${colorCompoundBrandStrokePressed}}:host(${outlineState}:focus-within) .root{border:${strokeWidthThin} solid ${colorNeutralStroke1}}:host(:focus-within) .control{color:${colorNeutralForeground1}}:host([disabled]) .root{background:${colorTransparentBackground};border:${strokeWidthThin} solid ${colorNeutralStrokeDisabled}}:host([disabled]) .control::placeholder,:host([disabled]) ::slotted([slot='start']),:host([disabled]) ::slotted([slot='end']){color:${colorNeutralForegroundDisabled}}::selection{color:${colorNeutralForegroundInverted};background-color:${colorNeutralBackgroundInverted}}:host(${smallState}) .control{font-size:${fontSizeBase200};font-weight:${fontWeightRegular};line-height:${lineHeightBase200}}:host(${smallState}) .root{height:24px;gap:${spacingHorizontalXXS};padding:0 ${spacingHorizontalSNudge}}:host(${smallState}) ::slotted([slot='start']),:host(${smallState}) ::slotted([slot='end']){font-size:${fontSizeBase400}}:host(${largeState}) .control{font-size:${fontSizeBase400};font-weight:${fontWeightRegular};line-height:${lineHeightBase400}}:host(${largeState}) .root{height:40px;gap:${spacingHorizontalS};padding:0 ${spacingHorizontalM}}:host(${largeState}) ::slotted([slot='start']),:host(${largeState}) ::slotted([slot='end']){font-size:${fontSizeBase600}}:host(${underlineState}) .root{background:${colorTransparentBackground};border:0;border-radius:0;border-bottom:${strokeWidthThin} solid ${colorNeutralStrokeAccessible}}:host(${underlineState}:hover) .root{border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host(${underlineState}:active) .root{border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host(${underlineState}:focus-within) .root{border:0;border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host(${underlineState}[disabled]) .root{border-bottom-color:${colorNeutralStrokeDisabled}}:host(${filledLighterState}) .root,:host(${filledDarkerState}) .root{border:${strokeWidthThin} solid ${colorTransparentStroke};box-shadow:${shadow2}}:host(${filledLighterState}) .root{background:${colorNeutralBackground1}}:host(${filledDarkerState}) .root{background:${colorNeutralBackground3}}:host(${filledLighterState}:hover) .root,:host(${filledDarkerState}:hover) .root{border-color:${colorTransparentStrokeInteractive}}:host(${filledLighterState}:active) .root,:host(${filledDarkerState}:active) .root{border-color:${colorTransparentStrokeInteractive};background:${colorNeutralBackground3}}`;
9914
+ :host{font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};max-width:400px}.label{display:flex;color:${colorNeutralForeground1};padding-bottom:${spacingVerticalXS};flex-shrink:0;padding-inline-end:${spacingHorizontalXS}}.label[hidden],:host(:empty) .label{display:none}.root{align-items:center;background-color:${colorNeutralBackground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};border-bottom-color:${colorNeutralStrokeAccessible};border-radius:${borderRadiusMedium};box-sizing:border-box;height:32px;display:inline-flex;flex-direction:row;gap:${spacingHorizontalXXS};padding:0 ${spacingHorizontalMNudge};position:relative;width:100%}:has(.control:user-invalid){border-color:${colorPaletteRedBorder2}}.root::after{box-sizing:border-box;content:'';position:absolute;left:-1px;bottom:0px;right:-1px;height:max(2px,${borderRadiusMedium});border-radius:0 0 ${borderRadiusMedium} ${borderRadiusMedium};border-bottom:2px solid ${colorCompoundBrandStroke};clip-path:inset(calc(100% - 2px) 1px 0px);transform:scaleX(0);transition-property:transform;transition-duration:${durationUltraFast};transition-delay:${curveAccelerateMid}}.control{width:100%;height:100%;box-sizing:border-box;color:${colorNeutralForeground1};border-radius:${borderRadiusMedium};background:${colorTransparentBackground};font-family:${fontFamilyBase};font-weight:${fontWeightRegular};font-size:${fontSizeBase300};border:none;vertical-align:center}.control:focus-visible{outline:0;border:0}.control::placeholder{color:${colorNeutralForeground4}}:host ::slotted([slot='start']),:host ::slotted([slot='end']){display:flex;align-items:center;justify-content:center;color:${colorNeutralForeground3};font-size:${fontSizeBase500}}:host ::slotted([slot='start']){padding-right:${spacingHorizontalXXS}}:host ::slotted([slot='end']){padding-left:${spacingHorizontalXXS};gap:${spacingHorizontalXS}}:host(:hover) .root{border-color:${colorNeutralStroke1Hover};border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host(:active) .root{border-color:${colorNeutralStroke1Pressed}}:host(:focus-within) .root{outline:transparent solid 2px;border-bottom:0}:host(:focus-within) .root::after{transform:scaleX(1);transition-property:transform;transition-duration:${durationNormal};transition-delay:${curveDecelerateMid}}:host(:focus-within:active) .root:after{border-bottom-color:${colorCompoundBrandStrokePressed}}:host(${outlineState}:focus-within) .root{border:${strokeWidthThin} solid ${colorNeutralStroke1}}:host(:focus-within) .control{color:${colorNeutralForeground1}}:host([disabled]) .root{background:${colorTransparentBackground};border:${strokeWidthThin} solid ${colorNeutralStrokeDisabled}}:host([disabled]) .control::placeholder,:host([disabled]) ::slotted([slot='start']),:host([disabled]) ::slotted([slot='end']){color:${colorNeutralForegroundDisabled}}::selection{color:${colorNeutralForegroundInverted};background-color:${colorNeutralBackgroundInverted}}:host(${smallState}) .control{font-size:${fontSizeBase200};font-weight:${fontWeightRegular};line-height:${lineHeightBase200}}:host(${smallState}) .root{height:24px;gap:${spacingHorizontalXXS};padding:0 ${spacingHorizontalSNudge}}:host(${smallState}) ::slotted([slot='start']),:host(${smallState}) ::slotted([slot='end']){font-size:${fontSizeBase400}}:host(${largeState}) .control{font-size:${fontSizeBase400};font-weight:${fontWeightRegular};line-height:${lineHeightBase400}}:host(${largeState}) .root{height:40px;gap:${spacingHorizontalS};padding:0 ${spacingHorizontalM}}:host(${largeState}) ::slotted([slot='start']),:host(${largeState}) ::slotted([slot='end']){font-size:${fontSizeBase600}}:host(${underlineState$1}) .root{background:${colorTransparentBackground};border:0;border-radius:0;border-bottom:${strokeWidthThin} solid ${colorNeutralStrokeAccessible}}:host(${underlineState$1}:hover) .root{border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host(${underlineState$1}:active) .root{border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host(${underlineState$1}:focus-within) .root{border:0;border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host(${underlineState$1}[disabled]) .root{border-bottom-color:${colorNeutralStrokeDisabled}}:host(${filledLighterState}) .root,:host(${filledDarkerState}) .root{border:${strokeWidthThin} solid ${colorTransparentStroke};box-shadow:${shadow2}}:host(${filledLighterState}) .root{background:${colorNeutralBackground1}}:host(${filledDarkerState}) .root{background:${colorNeutralBackground3}}:host(${filledLighterState}:hover) .root,:host(${filledDarkerState}:hover) .root{border-color:${colorTransparentStrokeInteractive}}:host(${filledLighterState}:active) .root,:host(${filledDarkerState}:active) .root{border-color:${colorTransparentStrokeInteractive};background:${colorNeutralBackground3}}`;
9915
9915
 
9916
9916
  function textInputTemplate(options = {}) {
9917
9917
  return html`<template @beforeinput="${(x, c) => x.beforeinputHandler(c.event)}" @focusin="${(x, c) => x.focusinHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}"><label part="label" for="control" class="label" ${ref("controlLabel")}><slot ${slotted({
@@ -9943,6 +9943,12 @@ var __decorateClass$1 = (decorators, target, key, kind) => {
9943
9943
  class Text extends FASTElement {
9944
9944
  constructor() {
9945
9945
  super(...arguments);
9946
+ /**
9947
+ * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
9948
+ *
9949
+ * @internal
9950
+ */
9951
+ this.elementInternals = this.attachInternals();
9946
9952
  this.nowrap = false;
9947
9953
  this.truncate = false;
9948
9954
  this.italic = false;
@@ -9950,6 +9956,87 @@ class Text extends FASTElement {
9950
9956
  this.strikethrough = false;
9951
9957
  this.block = false;
9952
9958
  }
9959
+ /**
9960
+ * Handles changes to size attribute custom states
9961
+ * @param prev - the previous state
9962
+ * @param next - the next state
9963
+ */
9964
+ sizeChanged(prev, next) {
9965
+ if (prev) {
9966
+ toggleState(this.elementInternals, `size-${prev}`, false);
9967
+ }
9968
+ if (next) {
9969
+ toggleState(this.elementInternals, `size-${next}`, true);
9970
+ }
9971
+ }
9972
+ /**
9973
+ * Handles changes to font attribute custom states
9974
+ * @param prev - the previous state
9975
+ * @param next - the next state
9976
+ */
9977
+ fontChanged(prev, next) {
9978
+ if (prev) {
9979
+ toggleState(this.elementInternals, prev, false);
9980
+ }
9981
+ if (next) {
9982
+ toggleState(this.elementInternals, next, true);
9983
+ }
9984
+ }
9985
+ /**
9986
+ * Handles changes to weight attribute custom states
9987
+ * @param prev - the previous state
9988
+ * @param next - the next state
9989
+ */
9990
+ weightChanged(prev, next) {
9991
+ if (prev) {
9992
+ toggleState(this.elementInternals, prev, false);
9993
+ }
9994
+ if (next) {
9995
+ toggleState(this.elementInternals, next, true);
9996
+ }
9997
+ }
9998
+ /**
9999
+ * Handles changes to align attribute custom states
10000
+ * @param prev - the previous state
10001
+ * @param next - the next state
10002
+ */
10003
+ alignChanged(prev, next) {
10004
+ if (prev) {
10005
+ toggleState(this.elementInternals, prev, false);
10006
+ }
10007
+ if (next) {
10008
+ toggleState(this.elementInternals, next, true);
10009
+ }
10010
+ }
10011
+ connectedCallback() {
10012
+ super.connectedCallback();
10013
+ Observable.getNotifier(this).subscribe(this);
10014
+ Object.keys(this.$fastController.definition.attributeLookup).forEach(key => {
10015
+ this.handleChange(this, key);
10016
+ });
10017
+ }
10018
+ disconnectedCallback() {
10019
+ super.disconnectedCallback();
10020
+ Observable.getNotifier(this).unsubscribe(this);
10021
+ }
10022
+ /**
10023
+ * Handles changes to observable properties
10024
+ * @internal
10025
+ * @param source - the source of the change
10026
+ * @param propertyName - the property name being changed
10027
+ */
10028
+ handleChange(source, propertyName) {
10029
+ switch (propertyName) {
10030
+ case "nowrap":
10031
+ case "truncate":
10032
+ case "italic":
10033
+ case "underline":
10034
+ case "strikethrough":
10035
+ case "block":
10036
+ toggleState(this.elementInternals, propertyName, !!this[propertyName]);
10037
+ break;
10038
+ }
10039
+ }
9953
10040
  }
9954
10041
  __decorateClass$1([attr({
9955
10042
  mode: "boolean"
@@ -9974,10 +10061,14 @@ __decorateClass$1([attr], Text.prototype, "font", 2);
9974
10061
  __decorateClass$1([attr], Text.prototype, "weight", 2);
9975
10062
  __decorateClass$1([attr], Text.prototype, "align", 2);
9976
10063
 
10064
+ const nowrapState = css.partial`:is([state--nowrap], :state(nowrap))`;
10065
+ const truncateState = css.partial`:is([state--truncate], :state(truncate))`;
10066
+ const underlineState = css.partial`:is([state--underline], :state(underline))`;
10067
+ const strikethroughState = css.partial`:is([state--strikethrough], :state(strikethrough))`;
9977
10068
  const styles$1 = css`
9978
10069
  ${display("inline")}
9979
10070
 
9980
- :host{contain:content}::slotted(*){font-family:${fontFamilyBase};font-size:${fontSizeBase300};line-height:${lineHeightBase300};font-weight:${fontWeightRegular};text-align:start;white-space:normal;overflow:visible;text-overflow:clip;margin:0;display:inline}:host([nowrap]) ::slotted(*),:host([nowrap]){white-space:nowrap;overflow:hidden}:host([truncate]) ::slotted(*),:host([truncate]){text-overflow:ellipsis}:host([block]),:host([block]) ::slotted(*),:host([block]){display:block}:host([italic]) ::slotted(*),:host([italic]){font-style:italic}:host([underline]) ::slotted(*),:host([underline]){text-decoration-line:underline}:host([strikethrough]) ::slotted(*),:host([strikethrough]){text-decoration-line:line-through}:host([underline][strikethrough]) ::slotted(*),:host([underline][strikethrough]){text-decoration-line:line-through underline}:host([size='100']) ::slotted(*),:host([size='100']){font-size:${fontSizeBase100};line-height:${lineHeightBase100}}:host([size='200']) ::slotted(*),:host([size='200']){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='400']) ::slotted(*),:host([size='400']){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='500']) ::slotted(*),:host([size='500']){font-size:${fontSizeBase500};line-height:${lineHeightBase500}}:host([size='600']) ::slotted(*),:host([size='600']){font-size:${fontSizeBase600};line-height:${lineHeightBase600}}:host([size='700']) ::slotted(*),:host([size='700']){font-size:${fontSizeHero700};line-height:${lineHeightHero700}}:host([size='800']) ::slotted(*),:host([size='800']){font-size:${fontSizeHero800};line-height:${lineHeightHero800}}:host([size='900']) ::slotted(*),:host([size='900']){font-size:${fontSizeHero900};line-height:${lineHeightHero900}}:host([size='1000']) ::slotted(*),:host([size='1000']){font-size:${fontSizeHero1000};line-height:${lineHeightHero1000}}:host([font='monospace']) ::slotted(*),:host([font='monospace']){font-family:${fontFamilyMonospace}}:host([font='numeric']) ::slotted(*),:host([font='numeric']){font-family:${fontFamilyNumeric}}:host([weight='medium']) ::slotted(*),:host([weight='medium']){font-weight:${fontWeightMedium}}:host([weight='semibold']) ::slotted(*),:host([weight='semibold']){font-weight:${fontWeightSemibold}}:host([weight='bold']) ::slotted(*),:host([weight='bold']){font-weight:${fontWeightBold}}:host([align='center']) ::slotted(*),:host([align='center']){text-align:center}:host([align='end']) ::slotted(*),:host([align='end']){text-align:end}:host([align='justify']) ::slotted(*),:host([align='justify']){text-align:justify}`;
10071
+ :host{contain:content;font-family:${fontFamilyBase};font-size:${fontSizeBase300};line-height:${lineHeightBase300};font-weight:${fontWeightRegular};text-align:start}:host(${nowrapState}),:host(${nowrapState}) ::slotted(*){white-space:nowrap;overflow:hidden}:host(${truncateState}),:host(${truncateState}) ::slotted(*){text-overflow:ellipsis}:host(:is([state--block],:state(block))){display:block}:host(:is([state--italic],:state(italic))){font-style:italic}:host(${underlineState}){text-decoration-line:underline}:host(${strikethroughState}){text-decoration-line:line-through}:host(${underlineState}${strikethroughState}){text-decoration-line:line-through underline}:host(:is([state--size-100],:state(size-100))){font-size:${fontSizeBase100};line-height:${lineHeightBase100}}:host(:is([state--size-200],:state(size-200))){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host(:is([state--size-400],:state(size-400))){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host(:is([state--size-500],:state(size-500))){font-size:${fontSizeBase500};line-height:${lineHeightBase500}}:host(:is([state--size-600],:state(size-600))){font-size:${fontSizeBase600};line-height:${lineHeightBase600}}:host(:is([state--size-700],:state(size-700))){font-size:${fontSizeHero700};line-height:${lineHeightHero700}}:host(:is([state--size-800],:state(size-800))){font-size:${fontSizeHero800};line-height:${lineHeightHero800}}:host(:is([state--size-900],:state(size-900))){font-size:${fontSizeHero900};line-height:${lineHeightHero900}}:host(:is([state--size-1000],:state(size-1000))){font-size:${fontSizeHero1000};line-height:${lineHeightHero1000}}:host(:is([state--monospace],:state(monospace))){font-family:${fontFamilyMonospace}}:host(:is([state--numeric],:state(numeric))){font-family:${fontFamilyNumeric}}:host(:is([state--medium],:state(medium))){font-weight:${fontWeightMedium}}:host(:is([state--semibold],:state(semibold))){font-weight:${fontWeightSemibold}}:host(:is([state--bold],:state(bold))){font-weight:${fontWeightBold}}:host(:is([state--center],:state(center))){text-align:center}:host(:is([state--end],:state(end))){text-align:end}:host(:is([state--justify],:state(justify))){text-align:justify}::slotted(*){display:inherit;font:inherit;line-height:inherit;text-decoration-line:inherit;text-align:inherit;text-decoration-line:inherit;margin:0}`;
9981
10072
 
9982
10073
  const template$1 = html`<slot></slot>`;
9983
10074