@fluentui/web-components 3.0.0-beta.23 → 3.0.0-beta.25

package/dist/esm/text-input/text-input.definition.js

@@ -13,5 +13,8 @@ export const definition = TextInput.compose({
     name: `${FluentDesignSystem.prefix}-text-input`,
     template,
     styles,
+    shadowOptions: {
+        delegatesFocus: true,
+    },
 });
 //# sourceMappingURL=text-input.definition.js.map

package/dist/esm/text-input/text-input.definition.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-input.definition.js","sourceRoot":"","sources":["../../../src/text-input/text-input.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAEpD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,SAAS,CAAC,OAAO,CAAC;IAC1C,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,aAAa;IAC/C,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}
+{"version":3,"file":"text-input.definition.js","sourceRoot":"","sources":["../../../src/text-input/text-input.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAEpD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,SAAS,CAAC,OAAO,CAAC;IAC1C,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,aAAa;IAC/C,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACb,cAAc,EAAE,IAAI;KACrB;CACF,CAAC,CAAC"}

package/dist/esm/text-input/text-input.js

@@ -1,6 +1,5 @@
 import { __decorate } from "tslib";
 import { attr, FASTElement, nullableNumberConverter, Observable, observable } from '@microsoft/fast-element';
-import { keyEnter } from '@microsoft/fast-web-utilities';
 import { StartEnd } from '../patterns/start-end.js';
 import { applyMixins } from '../utils/apply-mixins.js';
 import { ImplicitSubmissionBlockingTypes, TextInputType } from './text-input.options.js';
@@ -71,9 +70,9 @@ export class TextInput extends FASTElement {
      *
      * @internal
      */
-    readonlyChanged() {
+    readOnlyChanged() {
         if (this.$fastController.isConnected) {
-            this.elementInternals.ariaReadOnly = `${!!this.readonly}`;
+            this.elementInternals.ariaReadOnly = `${!!this.readOnly}`;
         }
     }
     /**
@@ -107,7 +106,7 @@ export class TextInput extends FASTElement {
      * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validationMessage | `ElementInternals.validationMessage`} property.
      */
     get validationMessage() {
-        return this.elementInternals.validationMessage;
+        return this.elementInternals.validationMessage || this.control.validationMessage;
     }
     /**
      * The current value of the input.
@@ -146,6 +145,17 @@ export class TextInput extends FASTElement {
     get form() {
         return this.elementInternals.form;
     }
+    /**
+     * Handles the internal control's `keypress` event.
+     *
+     * @internal
+     */
+    beforeinputHandler(e) {
+        if (e.inputType === 'insertLineBreak') {
+            this.implicitSubmit();
+        }
+        return true;
+    }
     /**
      * Change event handler for inner control.
      *
@@ -155,23 +165,48 @@ export class TextInput extends FASTElement {
      * proxies the change event, emitting a `change` event whenever the internal control emits a `change` event.
      */
     changeHandler(e) {
-        e.preventDefault();
         this.setValidity();
         this.$emit('change', e, {
             bubbles: true,
-            cancelable: false,
-            composed: false,
+            composed: true,
         });
+        return true;
+    }
+    /**
+     * Checks the validity of the element and returns the result.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/checkValidity | `HTMLInputElement.checkValidity()`} method.
+     */
+    checkValidity() {
+        return this.elementInternals.checkValidity();
+    }
+    /**
+     * Clicks the inner control when the component is clicked.
+     *
+     * @param e - the event object
+     */
+    clickHandler(e) {
+        var _a;
+        if (this.isSameNode(e.target)) {
+            (_a = this.control) === null || _a === void 0 ? void 0 : _a.click();
+        }
     }
     connectedCallback() {
         super.connectedCallback();
-        this.addEventListener('keypress', this.keypressHandler);
         this.setFormValue(this.value);
         this.setValidity();
     }
-    disconnectedCallback() {
-        this.removeEventListener('keypress', this.keypressHandler);
-        super.disconnectedCallback();
+    /**
+     * Focuses the inner control when the component is focused.
+     *
+     * @param e - the event object
+     * @public
+     */
+    focusinHandler(e) {
+        var _a;
+        (_a = this.control) === null || _a === void 0 ? void 0 : _a.focus();
     }
     /**
      * Resets the value to its initial value when the form is reset.
@@ -220,12 +255,13 @@ export class TextInput extends FASTElement {
         return true;
     }
     /**
-     * Handles the internal control's `keypress` event.
+     * Handles the internal control's `keydown` event.
      *
+     * @param e - the event object
      * @internal
      */
-    keypressHandler(e) {
-        if (e.key === keyEnter) {
+    keydownHandler(e) {
+        if (e.key === 'Enter') {
             this.implicitSubmit();
         }
         return true;
@@ -243,6 +279,26 @@ export class TextInput extends FASTElement {
         this.control.select();
         this.$emit('select');
     }
+    /**
+     * Sets the custom validity message.
+     * @param message - The message to set
+     *
+     * @public
+     */
+    setCustomValidity(message) {
+        this.elementInternals.setValidity({ customError: true }, message);
+        this.reportValidity();
+    }
+    /**
+     * Reports the validity of the element.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/reportValidity | `HTMLInputElement.reportValidity()`} method.
+     */
+    reportValidity() {
+        return this.elementInternals.reportValidity();
+    }
     /**
      * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
      *
@@ -260,12 +316,14 @@ export class TextInput extends FASTElement {
      *
      * @internal
      */
-    setValidity(flags = this.control.validity, message = this.control.validationMessage, anchor = this.control) {
-        if (this.disabled) {
-            this.elementInternals.setValidity({});
-            return;
+    setValidity(flags = this.control.validity, message = this.validationMessage, anchor = this.control) {
+        if (this.$fastController.isConnected) {
+            if (this.disabled) {
+                this.elementInternals.setValidity({});
+                return;
+            }
+            this.elementInternals.setValidity(flags, message, anchor);
         }
-        this.elementInternals.setValidity(flags, message !== null && message !== void 0 ? message : '', anchor);
     }
 }
 /**
@@ -325,7 +383,7 @@ __decorate([
 ], TextInput.prototype, "placeholder", void 0);
 __decorate([
     attr({ attribute: 'readonly', mode: 'boolean' })
-], TextInput.prototype, "readonly", void 0);
+], TextInput.prototype, "readOnly", void 0);
 __decorate([
     attr({ mode: 'boolean' })
 ], TextInput.prototype, "required", void 0);

package/dist/esm/text-input/text-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-input.js","sourceRoot":"","sources":["../../../src/text-input/text-input.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"text-input.js","sourceRoot":"","sources":["../../../src/text-input/text-input.ts"],"names":[],"mappings":"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"}

package/dist/esm/text-input/text-input.styles.js

@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { borderRadiusMedium, colorCompoundBrandStroke, colorCompoundBrandStrokePressed, colorNeutralBackground1, colorNeutralBackground3, colorNeutralBackgroundInverted, colorNeutralForeground1, colorNeutralForeground3, colorNeutralForeground4, colorNeutralForegroundDisabled, colorNeutralForegroundInverted, colorNeutralStroke1, colorNeutralStroke1Hover, colorNeutralStroke1Pressed, colorNeutralStrokeAccessible, colorNeutralStrokeAccessibleHover, colorNeutralStrokeAccessiblePressed, colorNeutralStrokeDisabled, colorTransparentBackground, colorTransparentStroke, colorTransparentStrokeInteractive, curveAccelerateMid, curveDecelerateMid, durationNormal, durationUltraFast, fontFamilyBase, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontSizeBase500, fontSizeBase600, fontWeightRegular, lineHeightBase200, lineHeightBase300, lineHeightBase400, shadow2, spacingHorizontalM, spacingHorizontalMNudge, spacingHorizontalS, spacingHorizontalSNudge, spacingHorizontalXS, spacingHorizontalXXS, spacingVerticalXS, strokeWidthThin, } from '../theme/design-tokens.js';
+import { borderRadiusMedium, colorCompoundBrandStroke, colorCompoundBrandStrokePressed, colorNeutralBackground1, colorNeutralBackground3, colorNeutralBackgroundInverted, colorNeutralForeground1, colorNeutralForeground3, colorNeutralForeground4, colorNeutralForegroundDisabled, colorNeutralForegroundInverted, colorNeutralStroke1, colorNeutralStroke1Hover, colorNeutralStroke1Pressed, colorNeutralStrokeAccessible, colorNeutralStrokeAccessibleHover, colorNeutralStrokeAccessiblePressed, colorNeutralStrokeDisabled, colorPaletteRedBorder2, colorTransparentBackground, colorTransparentStroke, colorTransparentStrokeInteractive, curveAccelerateMid, curveDecelerateMid, durationNormal, durationUltraFast, fontFamilyBase, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontSizeBase500, fontSizeBase600, fontWeightRegular, lineHeightBase200, lineHeightBase300, lineHeightBase400, shadow2, spacingHorizontalM, spacingHorizontalMNudge, spacingHorizontalS, spacingHorizontalSNudge, spacingHorizontalXS, spacingHorizontalXXS, spacingVerticalXS, strokeWidthThin, } from '../theme/design-tokens.js';
 import { display } from '../utils/display.js';
 /**
  * Styles for the TextInput component.
@@ -30,19 +30,25 @@ export const styles = css `
   }
 
   .root {
-    position: relative;
-    box-sizing: border-box;
-    height: 32px;
-    display: inline-flex;
     align-items: center;
-    flex-direction: row;
-    width: 100%;
-    padding: 0 ${spacingHorizontalMNudge};
+    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: '';
@@ -70,7 +76,6 @@ export const styles = css `
     font-weight: ${fontWeightRegular};
     font-size: ${fontSizeBase300};
     border: none;
-    background: transparent;
     vertical-align: center;
   }
   .control:focus-visible {

package/dist/esm/text-input/text-input.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-input.styles.js","sourceRoot":"","sources":["../../../src/text-input/text-input.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,wBAAwB,EACxB,+BAA+B,EAC/B,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,8BAA8B,EAC9B,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,0BAA0B,EAC1B,0BAA0B,EAC1B,sBAAsB,EACtB,iCAAiC,EACjC,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,OAAO,EACP,kBAAkB,EAClB,uBAAuB,EACvB,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,EACnB,oBAAoB,EACpB,iBAAiB,EACjB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAkB,GAAG,CAAA;IACpC,OAAO,CAAC,OAAO,CAAC;;;mBAGD,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;;aAKvB,uBAAuB;sBACd,iBAAiB;;0BAEb,mBAAmB;;;;;;;;;;;;;;;;iBAgB5B,uBAAuB;cAC1B,eAAe,UAAU,mBAAmB;2BAC/B,4BAA4B;qBAClC,kBAAkB;WAC5B,oBAAoB;;;;;;;;;uBASR,kBAAkB;yBAChB,kBAAkB,IAAI,kBAAkB;+BAClC,wBAAwB;;;;2BAI5B,iBAAiB;wBACpB,kBAAkB;;;;;;aAM7B,uBAAuB;qBACf,kBAAkB;kBACrB,0BAA0B;mBACzB,cAAc;mBACd,iBAAiB;iBACnB,eAAe;;;;;;;;;;aAUnB,uBAAuB;;;;;;;aAOvB,uBAAuB;iBACnB,eAAe;;;qBAGX,oBAAoB;;;oBAGrB,oBAAoB;WAC7B,mBAAmB;;;oBAGV,wBAAwB;2BACjB,iCAAiC;;;oBAGxC,0BAA0B;;;;;;;;;2BASnB,cAAc;wBACjB,kBAAkB;;;2BAGf,+BAA+B;;;cAG5C,eAAe,UAAU,mBAAmB;;;aAG7C,uBAAuB;;;kBAGlB,0BAA0B;cAC9B,eAAe,UAAU,0BAA0B;;;;;aAKpD,8BAA8B;;;aAG9B,8BAA8B;wBACnB,8BAA8B;;;iBAGrC,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;WAIzB,oBAAoB;iBACd,uBAAuB;;;;iBAIvB,eAAe;;;iBAGf,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;WAIzB,kBAAkB;iBACZ,kBAAkB;;;;iBAIlB,eAAe;;;kBAGd,0BAA0B;;;qBAGvB,eAAe,UAAU,4BAA4B;;;2BAG/C,iCAAiC;;;2BAGjC,mCAAmC;;;;2BAInC,mCAAmC;;;2BAGnC,0BAA0B;;;;cAIvC,eAAe,UAAU,sBAAsB;kBAC3C,OAAO;;;kBAGP,uBAAuB;;;kBAGvB,uBAAuB;;;;oBAIrB,iCAAiC;;;;oBAIjC,iCAAiC;kBACnC,uBAAuB;;CAExC,CAAC"}
+{"version":3,"file":"text-input.styles.js","sourceRoot":"","sources":["../../../src/text-input/text-input.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,wBAAwB,EACxB,+BAA+B,EAC/B,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,8BAA8B,EAC9B,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,0BAA0B,EAC1B,sBAAsB,EACtB,0BAA0B,EAC1B,sBAAsB,EACtB,iCAAiC,EACjC,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,OAAO,EACP,kBAAkB,EAClB,uBAAuB,EACvB,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,EACnB,oBAAoB,EACpB,iBAAiB,EACjB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAkB,GAAG,CAAA;IACpC,OAAO,CAAC,OAAO,CAAC;;;mBAGD,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;;aAKvB,uBAAuB;sBACd,iBAAiB;;0BAEb,mBAAmB;;;;;;;;;;wBAUrB,uBAAuB;cACjC,eAAe,UAAU,mBAAmB;2BAC/B,4BAA4B;qBAClC,kBAAkB;;;;;WAK5B,oBAAoB;iBACd,uBAAuB;;;;;;oBAMpB,sBAAsB;;;;;;;;;;uBAUnB,kBAAkB;yBAChB,kBAAkB,IAAI,kBAAkB;+BAClC,wBAAwB;;;;2BAI5B,iBAAiB;wBACpB,kBAAkB;;;;;;aAM7B,uBAAuB;qBACf,kBAAkB;kBACrB,0BAA0B;mBACzB,cAAc;mBACd,iBAAiB;iBACnB,eAAe;;;;;;;;;aASnB,uBAAuB;;;;;;;aAOvB,uBAAuB;iBACnB,eAAe;;;qBAGX,oBAAoB;;;oBAGrB,oBAAoB;WAC7B,mBAAmB;;;oBAGV,wBAAwB;2BACjB,iCAAiC;;;oBAGxC,0BAA0B;;;;;;;;;2BASnB,cAAc;wBACjB,kBAAkB;;;2BAGf,+BAA+B;;;cAG5C,eAAe,UAAU,mBAAmB;;;aAG7C,uBAAuB;;;kBAGlB,0BAA0B;cAC9B,eAAe,UAAU,0BAA0B;;;;;aAKpD,8BAA8B;;;aAG9B,8BAA8B;wBACnB,8BAA8B;;;iBAGrC,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;WAIzB,oBAAoB;iBACd,uBAAuB;;;;iBAIvB,eAAe;;;iBAGf,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;WAIzB,kBAAkB;iBACZ,kBAAkB;;;;iBAIlB,eAAe;;;kBAGd,0BAA0B;;;qBAGvB,eAAe,UAAU,4BAA4B;;;2BAG/C,iCAAiC;;;2BAGjC,mCAAmC;;;;2BAInC,mCAAmC;;;2BAGnC,0BAA0B;;;;cAIvC,eAAe,UAAU,sBAAsB;kBAC3C,OAAO;;;kBAGP,uBAAuB;;;kBAGvB,uBAAuB;;;;oBAIrB,iCAAiC;;;;oBAIjC,iCAAiC;kBACnC,uBAAuB;;CAExC,CAAC"}

package/dist/esm/text-input/text-input.template.js

@@ -8,42 +8,48 @@ import { whitespaceFilter } from '../utils/index.js';
  */
 export function textInputTemplate(options = {}) {
     return html `
-    <label part="label" for="control" class="label" ${ref('controlLabel')}>
-      <slot
-        ${slotted({
+    <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({
         property: 'defaultSlottedNodes',
         filter: whitespaceFilter,
     })}
-      ></slot>
-    </label>
-    <div class="root" part="root">
-      ${startSlotTemplate(options)}
-      <input
-        class="control"
-        part="control"
-        id="control"
-        @change="${(x, c) => x.changeHandler(c.event)}"
-        @input="${(x, c) => x.inputHandler(c.event)}"
-        ?autofocus="${x => x.autofocus}"
-        autocomplete="${x => x.autocomplete}"
-        ?disabled="${x => x.disabled}"
-        list="${x => x.list}"
-        maxlength="${x => x.maxlength}"
-        minlength="${x => x.minlength}"
-        ?multiple="${x => x.multiple}"
-        name="${x => x.name}"
-        pattern="${x => x.pattern}"
-        placeholder="${x => x.placeholder}"
-        ?readonly="${x => x.readonly}"
-        ?required="${x => x.required}"
-        size="${x => x.size}"
-        spellcheck="${x => x.spellcheck}"
-        type="${x => x.type}"
-        value="${x => x.initialValue}"
-        ${ref('control')}
-      />
-      ${endSlotTemplate(options)}
-    </div>
+        ></slot>
+      </label>
+      <div class="root" part="root">
+        ${startSlotTemplate(options)}
+        <input
+          class="control"
+          part="control"
+          id="control"
+          @change="${(x, c) => x.changeHandler(c.event)}"
+          @input="${(x, c) => x.inputHandler(c.event)}"
+          ?autofocus="${x => x.autofocus}"
+          autocomplete="${x => x.autocomplete}"
+          ?disabled="${x => x.disabled}"
+          list="${x => x.list}"
+          maxlength="${x => x.maxlength}"
+          minlength="${x => x.minlength}"
+          ?multiple="${x => x.multiple}"
+          name="${x => x.name}"
+          pattern="${x => x.pattern}"
+          placeholder="${x => x.placeholder}"
+          ?readonly="${x => x.readOnly}"
+          ?required="${x => x.required}"
+          size="${x => x.size}"
+          spellcheck="${x => x.spellcheck}"
+          type="${x => x.type}"
+          value="${x => x.initialValue}"
+          ${ref('control')}
+        />
+        ${endSlotTemplate(options)}
+      </div>
+    </template>
   `;
 }
 /**

package/dist/esm/text-input/text-input.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-input.template.js","sourceRoot":"","sources":["../../../src/text-input/text-input.template.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC1E,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAIrD;;;;GAIG;AACH,MAAM,UAAU,iBAAiB,CAAsB,UAA4B,EAAE;IACnF,OAAO,IAAI,CAAG;sDACsC,GAAG,CAAC,cAAc,CAAC;;UAE/D,OAAO,CAAC;QACR,QAAQ,EAAE,qBAAqB;QAC/B,MAAM,EAAE,gBAAgB;KACzB,CAAC;;;;QAIF,iBAAiB,CAAC,OAAO,CAAC;;;;;mBAKf,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAmB,CAAC;kBACjD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;sBAC3C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;wBACd,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;qBACtB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;gBACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;qBACN,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;qBAChB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;qBAChB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;gBACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;mBACR,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;uBACV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;qBACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;qBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;gBACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;sBACL,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;gBACvB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;iBACV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;UAC1B,GAAG,CAAC,SAAS,CAAC;;QAEhB,eAAe,CAAC,OAAO,CAAC;;GAE7B,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAmC,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"text-input.template.js","sourceRoot":"","sources":["../../../src/text-input/text-input.template.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC1E,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAIrD;;;;GAIG;AACH,MAAM,UAAU,iBAAiB,CAAsB,UAA4B,EAAE;IACnF,OAAO,IAAI,CAAG;;sBAEM,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,KAAmB,CAAC;kBACzD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAmB,CAAC;kBACjD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAsB,CAAC;;wDAEd,GAAG,CAAC,cAAc,CAAC;;YAE/D,OAAO,CAAC;QACR,QAAQ,EAAE,qBAAqB;QAC/B,MAAM,EAAE,gBAAgB;KACzB,CAAC;;;;UAIF,iBAAiB,CAAC,OAAO,CAAC;;;;;qBAKf,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAmB,CAAC;oBACjD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;wBAC3C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;0BACd,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;uBACtB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;kBACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;uBACN,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;uBAChB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;uBAChB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;kBACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;qBACR,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;yBACV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;uBACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;uBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;kBACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;wBACL,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;kBACvB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;mBACV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;YAC1B,GAAG,CAAC,SAAS,CAAC;;UAEhB,eAAe,CAAC,OAAO,CAAC;;;GAG/B,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAmC,iBAAiB,EAAE,CAAC"}

package/dist/esm/theme/set-theme.js

@@ -7,7 +7,16 @@ const tokenNames = Object.keys(tokens);
  */
 export const setTheme = (theme) => {
     for (const t of tokenNames) {
-        document.body.style.setProperty(`--${t}`, theme[t]);
+        if ('registerProperty' in CSS) {
+            CSS.registerProperty({
+                name: `--${t}`,
+                inherits: true,
+                initialValue: theme[t],
+            });
+        }
+        else {
+            document.body.style.setProperty(`--${t}`, theme[t]);
+        }
     }
 };
 /**

package/dist/esm/theme/set-theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"set-theme.js","sourceRoot":"","sources":["../../../src/theme/set-theme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,MAAM,oBAAoB,CAAC;AAE7C,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAoB,CAAC;AAE1D;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAY,EAAE,EAAE;IACvC,KAAK,MAAM,CAAC,IAAI,UAAU,EAAE;QAC1B,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,CAAW,CAAC,CAAC;KAC/D;AACH,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,OAAoB,EAAE,KAAY,EAAE,EAAE;IAChE,KAAK,MAAM,CAAC,IAAI,UAAU,EAAE;QAC1B,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,CAAW,CAAC,CAAC;KACzD;AACH,CAAC,CAAC"}
+{"version":3,"file":"set-theme.js","sourceRoot":"","sources":["../../../src/theme/set-theme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,MAAM,oBAAoB,CAAC;AAE7C,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAoB,CAAC;AAE1D;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAY,EAAE,EAAE;IACvC,KAAK,MAAM,CAAC,IAAI,UAAU,EAAE;QAC1B,IAAI,kBAAkB,IAAI,GAAG,EAAE;YAC7B,GAAG,CAAC,gBAAgB,CAAC;gBACnB,IAAI,EAAE,KAAK,CAAC,EAAE;gBACd,QAAQ,EAAE,IAAI;gBACd,YAAY,EAAE,KAAK,CAAC,CAAC,CAAW;aACjC,CAAC,CAAC;SACJ;aAAM;YACL,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,CAAW,CAAC,CAAC;SAC/D;KACF;AACH,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,OAAoB,EAAE,KAAY,EAAE,EAAE;IAChE,KAAK,MAAM,CAAC,IAAI,UAAU,EAAE;QAC1B,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,CAAW,CAAC,CAAC;KACzD;AACH,CAAC,CAAC"}

package/dist/esm/utils/element-internals.js

@@ -0,0 +1,32 @@
+/**
+ * Check if the browser supports Custom States.
+ * @public
+ */
+export const CustomStatesSetSupported = CSS.supports('selector(:state(g))');
+/**
+ * This function is used to toggle a state on the control. If the browser supports Custom States, the state is toggled
+ * on the `ElementInternals.states` set. If the browser does not support Custom States, the state is toggled on the host
+ * element as an attribute with the format `state--{state}`.
+ *
+ * @see The {@link https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet | CustomStateSet} interface
+ * @see The {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | ElementInternals} interface
+ * @see The CSS {@link https://developer.mozilla.org/en-US/docs/Web/CSS/:state | `:state()`} pseudo-class
+ *
+ * @param elementInternals - the `ElementInternals` instance for the component
+ * @param state - the state to toggle
+ * @param force - force the state to be toggled on or off
+ * @internal
+ */
+export function toggleState(elementInternals, state, force) {
+    if (!CustomStatesSetSupported) {
+        elementInternals.shadowRoot.host.toggleAttribute(`state--${state}`, force);
+        return;
+    }
+    force = force !== null && force !== void 0 ? force : !elementInternals.states.has(state);
+    if (force) {
+        elementInternals.states.add(state);
+        return;
+    }
+    elementInternals.states.delete(state);
+}
+//# sourceMappingURL=element-internals.js.map

package/dist/esm/utils/element-internals.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"element-internals.js","sourceRoot":"","sources":["../../../src/utils/element-internals.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,CAAC,QAAQ,CAAC,qBAAqB,CAAC,CAAC;AAE5E;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,WAAW,CAAC,gBAAkC,EAAE,KAAa,EAAE,KAAe;IAC5F,IAAI,CAAC,wBAAwB,EAAE;QAC7B,gBAAgB,CAAC,UAAW,CAAC,IAAI,CAAC,eAAe,CAAC,UAAU,KAAK,EAAE,EAAE,KAAK,CAAC,CAAC;QAC5E,OAAO;KACR;IAED,KAAK,GAAG,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IAErD,IAAI,KAAK,EAAE;QACT,gBAAgB,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QACnC,OAAO;KACR;IAED,gBAAgB,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AACxC,CAAC"}