@api-client/ui 0.2.13 → 0.3.1

package/build/src/md/ripple/internals/ripple.styles.js

@@ -21,8 +21,7 @@ export default css `
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   }
 
-  .surface::before,
-  .surface::after {
+  .surface::before {
     position: absolute;
     opacity: 0;
     pointer-events: none;
@@ -37,19 +36,10 @@ export default css `
     inset: 0;
   }
 
-  .surface::after {
-    transition: opacity 375ms linear;
-    transform-origin: center center;
-  }
-
   .focused::before {
     transition-duration: 75ms;
   }
 
-  .pressed::after {
-    transition-duration: 105ms;
-  }
-
   .surface {
     border-radius: var(--md-ripple-state-layer-shape, 0);
   }
@@ -58,14 +48,6 @@ export default css `
     background-color: var(--md-ripple-hover-state-layer-color, var(--md-sys-color-primary));
   }
 
-  .surface::after {
-    background: radial-gradient(
-      closest-side,
-      var(--md-ripple-pressed-state-layer-color, var(--md-sys-color-primary)) max(100% - 70px, 65%),
-      transparent 100%
-    );
-  }
-
   .surface.hovered::before {
     opacity: var(--md-ripple-hover-state-layer-opacity, var(--md-sys-state-hover-state-layer-opacity));
     background-color: var(--md-ripple-hover-state-layer-color, var(--md-sys-color-primary));
@@ -76,8 +58,14 @@ export default css `
     background-color: var(--md-ripple-focus-state-layer-color, var(--md-sys-color-primary));
   }
 
-  .surface.pressed::after {
+  .surface.pressed::before {
     opacity: var(--md-ripple-pressed-state-layer-opacity, var(--md-sys-state-pressed-state-layer-opacity));
+    /* background-color: var(--md-ripple-pressed-state-layer-color, var(--md-sys-color-primary)); */
+    background: radial-gradient(
+      closest-side,
+      var(--md-ripple-pressed-state-layer-color, var(--md-sys-color-primary)) max(100% - 70px, 65%),
+      transparent 100%
+    );
   }
 
   .surface.unbounded {

package/build/src/md/ripple/internals/ripple.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ripple.styles.js","sourceRoot":"","sources":["../../../../../src/md/ripple/internals/ripple.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoFjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n    overflow: hidden;\n    display: flex;\n  }\n\n  :host([disabled]) {\n    opacity: 0;\n  }\n\n  .surface {\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n    overflow: hidden;\n    outline: none;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  }\n\n  .surface::before,\n  .surface::after {\n    position: absolute;\n    opacity: 0;\n    pointer-events: none;\n    z-index: -1;\n    content: '';\n  }\n\n  .surface::before {\n    transition:\n      opacity 15ms linear,\n      background-color 15ms linear;\n    inset: 0;\n  }\n\n  .surface::after {\n    transition: opacity 375ms linear;\n    transform-origin: center center;\n  }\n\n  .focused::before {\n    transition-duration: 75ms;\n  }\n\n  .pressed::after {\n    transition-duration: 105ms;\n  }\n\n  .surface {\n    border-radius: var(--md-ripple-state-layer-shape, 0);\n  }\n\n  .surface::before {\n    background-color: var(--md-ripple-hover-state-layer-color, var(--md-sys-color-primary));\n  }\n\n  .surface::after {\n    background: radial-gradient(\n      closest-side,\n      var(--md-ripple-pressed-state-layer-color, var(--md-sys-color-primary)) max(100% - 70px, 65%),\n      transparent 100%\n    );\n  }\n\n  .surface.hovered::before {\n    opacity: var(--md-ripple-hover-state-layer-opacity, var(--md-sys-state-hover-state-layer-opacity));\n    background-color: var(--md-ripple-hover-state-layer-color, var(--md-sys-color-primary));\n  }\n\n  .surface.focused::before {\n    opacity: var(--md-ripple-focus-state-layer-opacity, var(--md-sys-state-focus-state-layer-opacity));\n    background-color: var(--md-ripple-focus-state-layer-color, var(--md-sys-color-primary));\n  }\n\n  .surface.pressed::after {\n    opacity: var(--md-ripple-pressed-state-layer-opacity, var(--md-sys-state-pressed-state-layer-opacity));\n  }\n\n  .surface.unbounded {\n    border-radius: var(--md-ripple-state-layer-shape, 9999px);\n  }\n`\n"]}
+{"version":3,"file":"ripple.styles.js","sourceRoot":"","sources":["../../../../../src/md/ripple/internals/ripple.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwEjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n    overflow: hidden;\n    display: flex;\n  }\n\n  :host([disabled]) {\n    opacity: 0;\n  }\n\n  .surface {\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n    overflow: hidden;\n    outline: none;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  }\n\n  .surface::before {\n    position: absolute;\n    opacity: 0;\n    pointer-events: none;\n    z-index: -1;\n    content: '';\n  }\n\n  .surface::before {\n    transition:\n      opacity 15ms linear,\n      background-color 15ms linear;\n    inset: 0;\n  }\n\n  .focused::before {\n    transition-duration: 75ms;\n  }\n\n  .surface {\n    border-radius: var(--md-ripple-state-layer-shape, 0);\n  }\n\n  .surface::before {\n    background-color: var(--md-ripple-hover-state-layer-color, var(--md-sys-color-primary));\n  }\n\n  .surface.hovered::before {\n    opacity: var(--md-ripple-hover-state-layer-opacity, var(--md-sys-state-hover-state-layer-opacity));\n    background-color: var(--md-ripple-hover-state-layer-color, var(--md-sys-color-primary));\n  }\n\n  .surface.focused::before {\n    opacity: var(--md-ripple-focus-state-layer-opacity, var(--md-sys-state-focus-state-layer-opacity));\n    background-color: var(--md-ripple-focus-state-layer-color, var(--md-sys-color-primary));\n  }\n\n  .surface.pressed::before {\n    opacity: var(--md-ripple-pressed-state-layer-opacity, var(--md-sys-state-pressed-state-layer-opacity));\n    /* background-color: var(--md-ripple-pressed-state-layer-color, var(--md-sys-color-primary)); */\n    background: radial-gradient(\n      closest-side,\n      var(--md-ripple-pressed-state-layer-color, var(--md-sys-color-primary)) max(100% - 70px, 65%),\n      transparent 100%\n    );\n  }\n\n  .surface.unbounded {\n    border-radius: var(--md-ripple-state-layer-shape, 9999px);\n  }\n`\n"]}

package/build/src/md/snackbar/internals/Snackbar.d.ts

@@ -1,5 +1,5 @@
 import { LitElement, nothing, PropertyValues, TemplateResult } from 'lit';
-import '../../button/ui-text-button.js';
+import '../../button/ui-button.js';
 import '../../icon-button/ui-icon-button.js';
 import '../../icons/ui-icon.js';
 /**

package/build/src/md/snackbar/internals/Snackbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../../../../src/md/snackbar/internals/Snackbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AAI/E,OAAO,gCAAgC,CAAA;AACvC,OAAO,qCAAqC,CAAA;AAC5C,OAAO,wBAAwB,CAAA;AAE/B;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBAAa,QAAS,SAAQ,UAAU;IACtC;;;;;;;;;;OAUG;IAC0B,QAAQ,CAAC,UAAU,UAAQ;IAExD;;;;;OAKG;IAC0B,QAAQ,CAAC,WAAW,UAAO;IAExD;;;;;;OAMG;IACyB,QAAQ,CAAC,OAAO,SAAO;IAEnD;;;;;;OAMG;IACyB,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAA;IAE/D;;;;OAIG;IAC0B,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,SAAS,CAAA;IAEhE;;;;OAIG;IACyC,QAAQ,CAAC,IAAI,EAAE,OAAO,GAAG,SAAS,CAAA;IAE9E,SAAS,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAE7B,SAAS,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;IAExB,SAAS,CAAC,WAAW,CAAC,EAAE,MAAM,CAAA;IAE9B,SAAS,CAAC,WAAW,CAAC,EAAE,MAAM,CAAA;;cAUX,OAAO,CAAC,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAU1D;;OAEG;IACH,OAAO,IAAI,IAAI;IAKf,SAAS,CAAC,YAAY,IAAI,IAAI;IAW9B,SAAS,CAAC,UAAU,IAAI,IAAI;IAO5B,SAAS,CAAC,cAAc,IAAI,IAAI;IAIhC,SAAS,CAAC,iBAAiB,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAQhD,SAAS,CAAC,eAAe,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAoB9C,SAAS,CAAC,aAAa,IAAI,IAAI;IAK/B,SAAS,CAAC,oBAAoB,IAAI,IAAI;IAStC,SAAS,CAAC,YAAY,IAAI,IAAI;cAIX,MAAM,IAAI,cAAc;IAc3C,SAAS,CAAC,YAAY,IAAI,cAAc,GAAG,OAAO,OAAO;IAUzD,SAAS,CAAC,UAAU,IAAI,cAAc,GAAG,OAAO,OAAO;CAWxD"}
+{"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../../../../src/md/snackbar/internals/Snackbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AAI/E,OAAO,2BAA2B,CAAA;AAClC,OAAO,qCAAqC,CAAA;AAC5C,OAAO,wBAAwB,CAAA;AAE/B;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBAAa,QAAS,SAAQ,UAAU;IACtC;;;;;;;;;;OAUG;IAC0B,QAAQ,CAAC,UAAU,UAAQ;IAExD;;;;;OAKG;IAC0B,QAAQ,CAAC,WAAW,UAAO;IAExD;;;;;;OAMG;IACyB,QAAQ,CAAC,OAAO,SAAO;IAEnD;;;;;;OAMG;IACyB,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAA;IAE/D;;;;OAIG;IAC0B,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,SAAS,CAAA;IAEhE;;;;OAIG;IACyC,QAAQ,CAAC,IAAI,EAAE,OAAO,GAAG,SAAS,CAAA;IAE9E,SAAS,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAE7B,SAAS,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;IAExB,SAAS,CAAC,WAAW,CAAC,EAAE,MAAM,CAAA;IAE9B,SAAS,CAAC,WAAW,CAAC,EAAE,MAAM,CAAA;;cAUX,OAAO,CAAC,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAU1D;;OAEG;IACH,OAAO,IAAI,IAAI;IAKf,SAAS,CAAC,YAAY,IAAI,IAAI;IAW9B,SAAS,CAAC,UAAU,IAAI,IAAI;IAO5B,SAAS,CAAC,cAAc,IAAI,IAAI;IAIhC,SAAS,CAAC,iBAAiB,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAQhD,SAAS,CAAC,eAAe,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAoB9C,SAAS,CAAC,aAAa,IAAI,IAAI;IAK/B,SAAS,CAAC,oBAAoB,IAAI,IAAI;IAStC,SAAS,CAAC,YAAY,IAAI,IAAI;cAIX,MAAM,IAAI,cAAc;IAc3C,SAAS,CAAC,YAAY,IAAI,cAAc,GAAG,OAAO,OAAO;IAYzD,SAAS,CAAC,UAAU,IAAI,cAAc,GAAG,OAAO,OAAO;CAWxD"}

package/build/src/md/snackbar/internals/Snackbar.js

@@ -3,7 +3,7 @@ import { html, LitElement, nothing } from 'lit';
 import { cancelEvent } from '@api-client/core/lib/events/Utils.js';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import '../../button/ui-text-button.js';
+import '../../button/ui-button.js';
 import '../../icon-button/ui-icon-button.js';
 import '../../icons/ui-icon.js';
 /**
@@ -256,7 +256,9 @@ let Snackbar = (() => {
                 return nothing;
             }
             return html `
-      <ui-text-button class="action" @click="${this.actionHandler}" @action="${cancelEvent}">${action}</ui-text-button>
+      <ui-button color="text" class="action" @click="${this.actionHandler}" @action="${cancelEvent}"
+        >${action}</ui-button
+      >
     `;
         }
         renderIcon() {

package/build/src/md/snackbar/internals/Snackbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Snackbar.js","sourceRoot":"","sources":["../../../../../src/md/snackbar/internals/Snackbar.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, PropertyValues, TemplateResult } from 'lit'\nimport { cancelEvent } from '@api-client/core/lib/events/Utils.js'\nimport { property } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport '../../button/ui-text-button.js'\nimport '../../icon-button/ui-icon-button.js'\nimport '../../icons/ui-icon.js'\n\n/**\n * Snackbars provide brief messages about app processes at the bottom of the screen.\n *\n * Snackbars inform users of a process that an app has performed or will perform.\n * They appear temporarily, towards the bottom of the screen.\n * They shouldn’t interrupt the user experience, and they don’t require user input to disappear.\n *\n * Only one snackbar may be displayed at a time.\n *\n * A snackbar can contain a single action. \"Dismiss\" or \"cancel\" actions are optional.\n *\n * Snackbars communicate messages that are minimally interruptive and don’t require user action.\n *\n * **Caution**, Do not use this element directly.\n *\n * A snackbar is the UI to render in the application. It does not care whether another\n * message is already rendered. Use `SnackNotifications` to manage notification system.\n * The `SnackNotifications` will position toasts directly under the `body` which will make\n * it easier to manage especially when relative / absolute positioning is used.\n *\n * @fires open - When the open state changes. Note, this event is not dispatched when it was programmatically closed.\n * @fires dismiss - When the message was closed via the API.\n * @fires action - When the action button was activated.\n */\nexport class Snackbar extends LitElement {\n  /**\n   * When set the snackbar does not timeout.\n   * It has to be cancelled by user interaction or programmatically.\n   *\n   * When the `cancellable` is set to false the user won't be able to dismiss the\n   * snackbar and the application must remove the snackbar after the process\n   * finish. Otherwise another snackbar won't appear.\n   *\n   * @default false\n   * @attribute\n   */\n  @property({ type: Boolean }) accessor persistent = false\n\n  /**\n   * Whether the snackbar can be cancelled via user interaction.\n   *\n   * @default true\n   * @attribute\n   */\n  @property({ type: Boolean }) accessor cancellable = true\n\n  /**\n   * The time in milliseconds after which the message is removed.\n   * Has not effect when `persistent` flag is set.\n   *\n   * @default 5000\n   * @attribute\n   */\n  @property({ type: Number }) accessor timeout = 5000\n\n  /**\n   * The action to render next to the message.\n   * There can be only one action.\n   * It is only rendered when `actionCallback` is set.\n   *\n   * @attribute\n   */\n  @property({ type: String }) accessor action: string | undefined\n\n  /**\n   * Whether to render affordable \"close\" icon.\n   *\n   * @attribute\n   */\n  @property({ type: Boolean }) accessor close: boolean | undefined\n\n  /**\n   * Whether the message is being rendered.\n   *\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor open: boolean | undefined\n\n  protected dismissed?: boolean\n\n  protected timer?: number\n\n  protected touchXStart?: number\n\n  protected touchYStart?: number\n\n  constructor() {\n    super()\n\n    this.addEventListener('touchstart', this.touchstartHandler.bind(this), { passive: true })\n    this.addEventListener('touchend', this.touchendHandler.bind(this), { passive: true })\n    this.addEventListener('transitionend', this.transitionendHandler.bind(this), { passive: true })\n  }\n\n  protected override updated(cp: PropertyValues<this>): void {\n    if (cp.has('open')) {\n      if (this.open) {\n        this.setupTimeout()\n      } else {\n        this.clearTimer()\n      }\n    }\n  }\n\n  /**\n   * Dismisses the snackbar\n   */\n  dismiss(): void {\n    this.dismissed = true\n    this.open = false\n  }\n\n  protected setupTimeout(): void {\n    const { timeout = 5000, persistent } = this\n    this.clearTimer()\n    if (persistent) {\n      return\n    }\n    this.timer = setTimeout(() => {\n      this.timeoutHandler()\n    }, timeout) as unknown as number\n  }\n\n  protected clearTimer(): void {\n    if (this.timer) {\n      clearTimeout(this.timer)\n      this.timer = undefined\n    }\n  }\n\n  protected timeoutHandler(): void {\n    this.open = false\n  }\n\n  protected touchstartHandler(e: TouchEvent): void {\n    if (this.cancellable === false) {\n      return\n    }\n    this.touchXStart = e.changedTouches[0].screenX\n    this.touchYStart = e.changedTouches[0].screenY\n  }\n\n  protected touchendHandler(e: TouchEvent): void {\n    if (this.cancellable === false) {\n      return\n    }\n    const { touchXStart, touchYStart } = this\n    if (typeof touchXStart !== 'number' || typeof touchYStart !== 'number') {\n      return\n    }\n    this.touchXStart = undefined\n    this.touchYStart = undefined\n    const endX = e.changedTouches[0].screenX\n    const endY = e.changedTouches[0].screenY\n    const xDelta = Math.abs(endX - touchXStart)\n    const yDelta = Math.abs(endY - touchYStart)\n    const threshold = 20\n    if (xDelta > threshold || yDelta > threshold) {\n      this.open = false\n    }\n  }\n\n  protected actionHandler(): void {\n    this.dispatchEvent(new Event('action'))\n    this.dismiss()\n  }\n\n  protected transitionendHandler(): void {\n    if (!this.dismissed) {\n      this.dispatchEvent(new Event('open'))\n    } else {\n      this.dismissed = false\n      this.dispatchEvent(new Event('dismiss'))\n    }\n  }\n\n  protected closeHandler(): void {\n    this.open = false\n  }\n\n  protected override render(): TemplateResult {\n    const classes = {\n      body: true,\n      withAction: !!this.action,\n      withClose: !!this.close,\n    }\n    return html`\n      <div class=\"${classMap(classes)}\">\n        <slot></slot>\n      </div>\n      ${this.renderAction()} ${this.renderIcon()}\n    `\n  }\n\n  protected renderAction(): TemplateResult | typeof nothing {\n    const { action } = this\n    if (!action) {\n      return nothing\n    }\n    return html`\n      <ui-text-button class=\"action\" @click=\"${this.actionHandler}\" @action=\"${cancelEvent}\">${action}</ui-text-button>\n    `\n  }\n\n  protected renderIcon(): TemplateResult | typeof nothing {\n    const { close } = this\n    if (!close) {\n      return nothing\n    }\n    return html`\n      <ui-icon-button @click=\"${this.closeHandler}\" class=\"icon\" @action=\"${cancelEvent}\">\n        <ui-icon icon=\"close\"></ui-icon>\n      </ui-icon-button>\n    `\n  }\n}\n"]}
+{"version":3,"file":"Snackbar.js","sourceRoot":"","sources":["../../../../../src/md/snackbar/internals/Snackbar.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, PropertyValues, TemplateResult } from 'lit'\nimport { cancelEvent } from '@api-client/core/lib/events/Utils.js'\nimport { property } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport '../../button/ui-button.js'\nimport '../../icon-button/ui-icon-button.js'\nimport '../../icons/ui-icon.js'\n\n/**\n * Snackbars provide brief messages about app processes at the bottom of the screen.\n *\n * Snackbars inform users of a process that an app has performed or will perform.\n * They appear temporarily, towards the bottom of the screen.\n * They shouldn’t interrupt the user experience, and they don’t require user input to disappear.\n *\n * Only one snackbar may be displayed at a time.\n *\n * A snackbar can contain a single action. \"Dismiss\" or \"cancel\" actions are optional.\n *\n * Snackbars communicate messages that are minimally interruptive and don’t require user action.\n *\n * **Caution**, Do not use this element directly.\n *\n * A snackbar is the UI to render in the application. It does not care whether another\n * message is already rendered. Use `SnackNotifications` to manage notification system.\n * The `SnackNotifications` will position toasts directly under the `body` which will make\n * it easier to manage especially when relative / absolute positioning is used.\n *\n * @fires open - When the open state changes. Note, this event is not dispatched when it was programmatically closed.\n * @fires dismiss - When the message was closed via the API.\n * @fires action - When the action button was activated.\n */\nexport class Snackbar extends LitElement {\n  /**\n   * When set the snackbar does not timeout.\n   * It has to be cancelled by user interaction or programmatically.\n   *\n   * When the `cancellable` is set to false the user won't be able to dismiss the\n   * snackbar and the application must remove the snackbar after the process\n   * finish. Otherwise another snackbar won't appear.\n   *\n   * @default false\n   * @attribute\n   */\n  @property({ type: Boolean }) accessor persistent = false\n\n  /**\n   * Whether the snackbar can be cancelled via user interaction.\n   *\n   * @default true\n   * @attribute\n   */\n  @property({ type: Boolean }) accessor cancellable = true\n\n  /**\n   * The time in milliseconds after which the message is removed.\n   * Has not effect when `persistent` flag is set.\n   *\n   * @default 5000\n   * @attribute\n   */\n  @property({ type: Number }) accessor timeout = 5000\n\n  /**\n   * The action to render next to the message.\n   * There can be only one action.\n   * It is only rendered when `actionCallback` is set.\n   *\n   * @attribute\n   */\n  @property({ type: String }) accessor action: string | undefined\n\n  /**\n   * Whether to render affordable \"close\" icon.\n   *\n   * @attribute\n   */\n  @property({ type: Boolean }) accessor close: boolean | undefined\n\n  /**\n   * Whether the message is being rendered.\n   *\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor open: boolean | undefined\n\n  protected dismissed?: boolean\n\n  protected timer?: number\n\n  protected touchXStart?: number\n\n  protected touchYStart?: number\n\n  constructor() {\n    super()\n\n    this.addEventListener('touchstart', this.touchstartHandler.bind(this), { passive: true })\n    this.addEventListener('touchend', this.touchendHandler.bind(this), { passive: true })\n    this.addEventListener('transitionend', this.transitionendHandler.bind(this), { passive: true })\n  }\n\n  protected override updated(cp: PropertyValues<this>): void {\n    if (cp.has('open')) {\n      if (this.open) {\n        this.setupTimeout()\n      } else {\n        this.clearTimer()\n      }\n    }\n  }\n\n  /**\n   * Dismisses the snackbar\n   */\n  dismiss(): void {\n    this.dismissed = true\n    this.open = false\n  }\n\n  protected setupTimeout(): void {\n    const { timeout = 5000, persistent } = this\n    this.clearTimer()\n    if (persistent) {\n      return\n    }\n    this.timer = setTimeout(() => {\n      this.timeoutHandler()\n    }, timeout) as unknown as number\n  }\n\n  protected clearTimer(): void {\n    if (this.timer) {\n      clearTimeout(this.timer)\n      this.timer = undefined\n    }\n  }\n\n  protected timeoutHandler(): void {\n    this.open = false\n  }\n\n  protected touchstartHandler(e: TouchEvent): void {\n    if (this.cancellable === false) {\n      return\n    }\n    this.touchXStart = e.changedTouches[0].screenX\n    this.touchYStart = e.changedTouches[0].screenY\n  }\n\n  protected touchendHandler(e: TouchEvent): void {\n    if (this.cancellable === false) {\n      return\n    }\n    const { touchXStart, touchYStart } = this\n    if (typeof touchXStart !== 'number' || typeof touchYStart !== 'number') {\n      return\n    }\n    this.touchXStart = undefined\n    this.touchYStart = undefined\n    const endX = e.changedTouches[0].screenX\n    const endY = e.changedTouches[0].screenY\n    const xDelta = Math.abs(endX - touchXStart)\n    const yDelta = Math.abs(endY - touchYStart)\n    const threshold = 20\n    if (xDelta > threshold || yDelta > threshold) {\n      this.open = false\n    }\n  }\n\n  protected actionHandler(): void {\n    this.dispatchEvent(new Event('action'))\n    this.dismiss()\n  }\n\n  protected transitionendHandler(): void {\n    if (!this.dismissed) {\n      this.dispatchEvent(new Event('open'))\n    } else {\n      this.dismissed = false\n      this.dispatchEvent(new Event('dismiss'))\n    }\n  }\n\n  protected closeHandler(): void {\n    this.open = false\n  }\n\n  protected override render(): TemplateResult {\n    const classes = {\n      body: true,\n      withAction: !!this.action,\n      withClose: !!this.close,\n    }\n    return html`\n      <div class=\"${classMap(classes)}\">\n        <slot></slot>\n      </div>\n      ${this.renderAction()} ${this.renderIcon()}\n    `\n  }\n\n  protected renderAction(): TemplateResult | typeof nothing {\n    const { action } = this\n    if (!action) {\n      return nothing\n    }\n    return html`\n      <ui-button color=\"text\" class=\"action\" @click=\"${this.actionHandler}\" @action=\"${cancelEvent}\"\n        >${action}</ui-button\n      >\n    `\n  }\n\n  protected renderIcon(): TemplateResult | typeof nothing {\n    const { close } = this\n    if (!close) {\n      return nothing\n    }\n    return html`\n      <ui-icon-button @click=\"${this.closeHandler}\" class=\"icon\" @action=\"${cancelEvent}\">\n        <ui-icon icon=\"close\"></ui-icon>\n      </ui-icon-button>\n    `\n  }\n}\n"]}

package/build/src/md/text-field/internals/common.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"common.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/text-field/internals/common.styles.ts"],"names":[],"mappings":";AAEA,wBAwLC"}
+{"version":3,"file":"common.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/text-field/internals/common.styles.ts"],"names":[],"mappings":";AAEA,wBA8LC"}

package/build/src/md/text-field/internals/common.styles.js

@@ -134,11 +134,11 @@ export default css `
   .supporting-text {
     padding-top: 4px;
     color: var(--md-sys-color-on-surface-variant);
-    font-family: var(--md-sys-typescale-body-medium-font);
-    font-weight: var(--md-sys-typescale-body-medium-weight);
-    font-size: var(--md-sys-typescale-body-medium-size);
-    letter-spacing: var(--md-sys-typescale-body-medium-tracking);
-    line-height: var(--md-sys-typescale-body-medium-height);
+    font-family: var(--md-sys-typescale-body-small-font);
+    font-weight: var(--md-sys-typescale-body-small-weight);
+    font-size: var(--md-sys-typescale-body-small-size);
+    letter-spacing: var(--md-sys-typescale-body-small-tracking);
+    line-height: var(--md-sys-typescale-body-small-height);
     display: flex;
     justify-content: space-between;
     padding: 0 16px;
@@ -152,6 +152,11 @@ export default css `
     margin-right: 16px;
   }
 
+  .supporting-text-end {
+    margin-left: auto;
+    flex-shrink: 0;
+  }
+
   :host([disabled]) {
     pointer-events: none;
   }
@@ -170,6 +175,7 @@ export default css `
   }
 
   :host([invalid]) .label,
+  :host([invalid]:focus-within) .label,
   :host([invalid]) .supporting-text,
   :host([invalid]) .end ::slotted(*) {
     color: var(--md-sys-color-error);

package/build/src/md/text-field/internals/common.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"common.styles.js","sourceRoot":"","sources":["../../../../../src/md/text-field/internals/common.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwLjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: inline-flex;\n    flex-direction: column;\n    vertical-align: top;\n    outline: none;\n    -webkit-tap-highlight-color: transparent;\n    cursor: text;\n\n    min-width: 200px;\n  }\n\n  .surface {\n    height: 56px;\n    position: relative;\n    display: flex;\n    align-items: center;\n    cursor: inherit;\n  }\n\n  .container {\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n    border-radius: inherit;\n  }\n\n  .content {\n    height: inherit;\n    display: flex;\n    align-items: center;\n    justify-content: start;\n    box-sizing: border-box;\n    position: relative;\n    z-index: 2;\n    flex: 1;\n    cursor: inherit;\n  }\n\n  .body {\n    flex: 1;\n    box-sizing: border-box;\n    position: relative;\n    cursor: inherit;\n  }\n\n  .label {\n    color: var(--md-sys-color-on-surface-variant);\n\n    max-width: 100%;\n    pointer-events: none;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    z-index: 3;\n\n    font-family: var(--md-sys-typescale-body-large-font);\n    font-weight: var(--md-sys-typescale-body-large-weight);\n    font-size: var(--md-sys-typescale-body-large-size);\n    letter-spacing: var(--md-sys-typescale-body-large-tracking);\n    line-height: var(--md-sys-typescale-body-large-height);\n\n    transform-origin: left center;\n    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .input {\n    caret-color: var(--md-sys-color-primary);\n    color: var(--md-sys-color-on-surface);\n    height: 24px; /* ??? */\n    flex: 1; /* ??? */\n    white-space: nowrap;\n    overflow: hidden;\n    background: transparent;\n    border: none;\n    outline: none;\n    padding: 0;\n    margin: 0;\n    width: 1px;\n    cursor: inherit;\n\n    font-family: var(--md-sys-typescale-body-large-font);\n    font-weight: var(--md-sys-typescale-body-large-weight);\n    font-size: var(--md-sys-typescale-body-large-size);\n    letter-spacing: var(--md-sys-typescale-body-large-tracking);\n    line-height: var(--md-sys-typescale-body-large-height);\n  }\n\n  .input:-webkit-autofill,\n  .input:autofill {\n    background-color: transparent !important;\n  }\n\n  .start,\n  .body,\n  .end {\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: start;\n  }\n\n  .start {\n    width: 16px;\n    min-width: 16px;\n  }\n\n  .start.prefixed {\n    width: 24px;\n    min-width: 24px;\n    margin-left: 12px;\n    margin-right: 16px;\n  }\n\n  .end {\n    width: 16px;\n    min-width: 16px;\n  }\n\n  .end.suffixed {\n    width: 24px;\n    min-width: 24px;\n    margin-right: 12px;\n    padding-right: 12px;\n    margin-left: 16px;\n  }\n\n  .end ::slotted(*),\n  .start ::slotted(*) {\n    cursor: default;\n  }\n\n  .supporting-text {\n    padding-top: 4px;\n    color: var(--md-sys-color-on-surface-variant);\n    font-family: var(--md-sys-typescale-body-medium-font);\n    font-weight: var(--md-sys-typescale-body-medium-weight);\n    font-size: var(--md-sys-typescale-body-medium-size);\n    letter-spacing: var(--md-sys-typescale-body-medium-tracking);\n    line-height: var(--md-sys-typescale-body-medium-height);\n    display: flex;\n    justify-content: space-between;\n    padding: 0 16px;\n  }\n\n  .supporting-text-start {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    flex: 1;\n    margin-right: 16px;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n  }\n\n  :host([disabled]) .container {\n    background-color: var(--md-sys-color-on-surface);\n    opacity: 0.04;\n  }\n\n  :host([disabled]) .label,\n  :host([disabled]) .input,\n  :host([disabled]) .end ::slotted(*),\n  :host([disabled]) .start ::slotted(*) {\n    color: var(--md-sys-color-on-surface);\n    opacity: 0.38;\n  }\n\n  :host([invalid]) .label,\n  :host([invalid]) .supporting-text,\n  :host([invalid]) .end ::slotted(*) {\n    color: var(--md-sys-color-error);\n  }\n\n  :host([invalid]:hover) .label,\n  :host([invalid]:hover) .end ::slotted(*) {\n    color: var(--md-sys-color-on-error-container);\n  }\n\n  .labelHidden .label {\n    display: none;\n  }\n`\n"]}
+{"version":3,"file":"common.styles.js","sourceRoot":"","sources":["../../../../../src/md/text-field/internals/common.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8LjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: inline-flex;\n    flex-direction: column;\n    vertical-align: top;\n    outline: none;\n    -webkit-tap-highlight-color: transparent;\n    cursor: text;\n\n    min-width: 200px;\n  }\n\n  .surface {\n    height: 56px;\n    position: relative;\n    display: flex;\n    align-items: center;\n    cursor: inherit;\n  }\n\n  .container {\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n    border-radius: inherit;\n  }\n\n  .content {\n    height: inherit;\n    display: flex;\n    align-items: center;\n    justify-content: start;\n    box-sizing: border-box;\n    position: relative;\n    z-index: 2;\n    flex: 1;\n    cursor: inherit;\n  }\n\n  .body {\n    flex: 1;\n    box-sizing: border-box;\n    position: relative;\n    cursor: inherit;\n  }\n\n  .label {\n    color: var(--md-sys-color-on-surface-variant);\n\n    max-width: 100%;\n    pointer-events: none;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    z-index: 3;\n\n    font-family: var(--md-sys-typescale-body-large-font);\n    font-weight: var(--md-sys-typescale-body-large-weight);\n    font-size: var(--md-sys-typescale-body-large-size);\n    letter-spacing: var(--md-sys-typescale-body-large-tracking);\n    line-height: var(--md-sys-typescale-body-large-height);\n\n    transform-origin: left center;\n    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .input {\n    caret-color: var(--md-sys-color-primary);\n    color: var(--md-sys-color-on-surface);\n    height: 24px; /* ??? */\n    flex: 1; /* ??? */\n    white-space: nowrap;\n    overflow: hidden;\n    background: transparent;\n    border: none;\n    outline: none;\n    padding: 0;\n    margin: 0;\n    width: 1px;\n    cursor: inherit;\n\n    font-family: var(--md-sys-typescale-body-large-font);\n    font-weight: var(--md-sys-typescale-body-large-weight);\n    font-size: var(--md-sys-typescale-body-large-size);\n    letter-spacing: var(--md-sys-typescale-body-large-tracking);\n    line-height: var(--md-sys-typescale-body-large-height);\n  }\n\n  .input:-webkit-autofill,\n  .input:autofill {\n    background-color: transparent !important;\n  }\n\n  .start,\n  .body,\n  .end {\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: start;\n  }\n\n  .start {\n    width: 16px;\n    min-width: 16px;\n  }\n\n  .start.prefixed {\n    width: 24px;\n    min-width: 24px;\n    margin-left: 12px;\n    margin-right: 16px;\n  }\n\n  .end {\n    width: 16px;\n    min-width: 16px;\n  }\n\n  .end.suffixed {\n    width: 24px;\n    min-width: 24px;\n    margin-right: 12px;\n    padding-right: 12px;\n    margin-left: 16px;\n  }\n\n  .end ::slotted(*),\n  .start ::slotted(*) {\n    cursor: default;\n  }\n\n  .supporting-text {\n    padding-top: 4px;\n    color: var(--md-sys-color-on-surface-variant);\n    font-family: var(--md-sys-typescale-body-small-font);\n    font-weight: var(--md-sys-typescale-body-small-weight);\n    font-size: var(--md-sys-typescale-body-small-size);\n    letter-spacing: var(--md-sys-typescale-body-small-tracking);\n    line-height: var(--md-sys-typescale-body-small-height);\n    display: flex;\n    justify-content: space-between;\n    padding: 0 16px;\n  }\n\n  .supporting-text-start {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    flex: 1;\n    margin-right: 16px;\n  }\n\n  .supporting-text-end {\n    margin-left: auto;\n    flex-shrink: 0;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n  }\n\n  :host([disabled]) .container {\n    background-color: var(--md-sys-color-on-surface);\n    opacity: 0.04;\n  }\n\n  :host([disabled]) .label,\n  :host([disabled]) .input,\n  :host([disabled]) .end ::slotted(*),\n  :host([disabled]) .start ::slotted(*) {\n    color: var(--md-sys-color-on-surface);\n    opacity: 0.38;\n  }\n\n  :host([invalid]) .label,\n  :host([invalid]:focus-within) .label,\n  :host([invalid]) .supporting-text,\n  :host([invalid]) .end ::slotted(*) {\n    color: var(--md-sys-color-error);\n  }\n\n  :host([invalid]:hover) .label,\n  :host([invalid]:hover) .end ::slotted(*) {\n    color: var(--md-sys-color-on-error-container);\n  }\n\n  .labelHidden .label {\n    display: none;\n  }\n`\n"]}

package/build/src/md/text-field/internals/filled.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"filled.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/text-field/internals/filled.styles.ts"],"names":[],"mappings":";AAEA,wBAwGC"}
+{"version":3,"file":"filled.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/text-field/internals/filled.styles.ts"],"names":[],"mappings":";AAEA,wBA+GC"}

package/build/src/md/text-field/internals/filled.styles.js

@@ -5,13 +5,16 @@ export default css `
     --_active-indicator-height: 1px;
     --_focus-active-indicator-color: var(--md-sys-color-primary, #6750a4);
     --_focus-active-indicator-height: 2px;
+    border-radius: var(--md-sys-shape-corner-extra-small-top);
   }
 
   .surface {
     height: 56px;
+    border-radius: inherit;
   }
 
   .container {
+    border-radius: inherit;
     background-color: var(--md-sys-color-surface-variant);
   }
 
@@ -83,6 +86,10 @@ export default css `
     border-bottom-color: var(--md-sys-color-on-error-container);
   }
 
+  :host([invalid]) .highlight::after {
+    border-bottom-color: var(--md-sys-color-error);
+  }
+
   .labelHidden .body {
     padding-top: 0;
   }

package/build/src/md/text-field/internals/filled.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"filled.styles.js","sourceRoot":"","sources":["../../../../../src/md/text-field/internals/filled.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwGjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    --_active-indicator-color: var(--md-sys-color-on-surface-variant);\n    --_active-indicator-height: 1px;\n    --_focus-active-indicator-color: var(--md-sys-color-primary, #6750a4);\n    --_focus-active-indicator-height: 2px;\n  }\n\n  .surface {\n    height: 56px;\n  }\n\n  .container {\n    background-color: var(--md-sys-color-surface-variant);\n  }\n\n  .body {\n    overflow: hidden;\n  }\n\n  .label {\n    position: absolute;\n    transform: translateY(-1.35rem) scale(0.8);\n    top: 50%;\n  }\n\n  .labelResting .label {\n    transform: translateY(-50%) scale(1);\n  }\n\n  :host(:focus-within) .label {\n    color: var(--md-sys-color-primary);\n  }\n\n  .highlight {\n    inset: auto 0px 0px;\n    pointer-events: none;\n    position: absolute;\n    width: 100%;\n    z-index: 4;\n  }\n\n  .highlight::before {\n    content: '';\n    border-bottom: 1px solid var(--md-sys-color-on-surface-variant);\n    inset: auto 0px 0px;\n    position: absolute;\n  }\n\n  .highlight::after {\n    content: '';\n    border-bottom-color: var(--md-sys-color-primary);\n    border-bottom-width: 2px;\n    border-bottom-style: solid;\n    opacity: 0;\n    transform: scaleX(0);\n    transform-origin: center center;\n\n    transition:\n      opacity 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s,\n      transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 150ms;\n\n    position: absolute;\n    inset: auto 0px 0px;\n  }\n\n  :host(:focus-within) .highlight::after {\n    opacity: 1;\n    transform: scaleX(1);\n  }\n\n  :host([disabled]) .highlight::before {\n    border-bottom-color: var(--md-sys-color-on-surface);\n    opacity: 0.38;\n  }\n\n  :host([invalid]) .highlight::before {\n    border-bottom-color: var(--md-sys-color-error);\n  }\n\n  :host([invalid]:hover) .highlight::before {\n    border-bottom-color: var(--md-sys-color-on-error-container);\n  }\n\n  .labelHidden .body {\n    padding-top: 0;\n  }\n\n  .container::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    opacity: 0;\n    background-color: var(--md-sys-color-on-surface-variant);\n    transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  :host(:hover) .container::before {\n    opacity: var(--md-sys-state-hover-state-layer-opacity);\n  }\n\n  .body {\n    padding-top: 1em;\n  }\n`\n"]}
+{"version":3,"file":"filled.styles.js","sourceRoot":"","sources":["../../../../../src/md/text-field/internals/filled.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+GjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    --_active-indicator-color: var(--md-sys-color-on-surface-variant);\n    --_active-indicator-height: 1px;\n    --_focus-active-indicator-color: var(--md-sys-color-primary, #6750a4);\n    --_focus-active-indicator-height: 2px;\n    border-radius: var(--md-sys-shape-corner-extra-small-top);\n  }\n\n  .surface {\n    height: 56px;\n    border-radius: inherit;\n  }\n\n  .container {\n    border-radius: inherit;\n    background-color: var(--md-sys-color-surface-variant);\n  }\n\n  .body {\n    overflow: hidden;\n  }\n\n  .label {\n    position: absolute;\n    transform: translateY(-1.35rem) scale(0.8);\n    top: 50%;\n  }\n\n  .labelResting .label {\n    transform: translateY(-50%) scale(1);\n  }\n\n  :host(:focus-within) .label {\n    color: var(--md-sys-color-primary);\n  }\n\n  .highlight {\n    inset: auto 0px 0px;\n    pointer-events: none;\n    position: absolute;\n    width: 100%;\n    z-index: 4;\n  }\n\n  .highlight::before {\n    content: '';\n    border-bottom: 1px solid var(--md-sys-color-on-surface-variant);\n    inset: auto 0px 0px;\n    position: absolute;\n  }\n\n  .highlight::after {\n    content: '';\n    border-bottom-color: var(--md-sys-color-primary);\n    border-bottom-width: 2px;\n    border-bottom-style: solid;\n    opacity: 0;\n    transform: scaleX(0);\n    transform-origin: center center;\n\n    transition:\n      opacity 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s,\n      transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 150ms;\n\n    position: absolute;\n    inset: auto 0px 0px;\n  }\n\n  :host(:focus-within) .highlight::after {\n    opacity: 1;\n    transform: scaleX(1);\n  }\n\n  :host([disabled]) .highlight::before {\n    border-bottom-color: var(--md-sys-color-on-surface);\n    opacity: 0.38;\n  }\n\n  :host([invalid]) .highlight::before {\n    border-bottom-color: var(--md-sys-color-error);\n  }\n\n  :host([invalid]:hover) .highlight::before {\n    border-bottom-color: var(--md-sys-color-on-error-container);\n  }\n\n  :host([invalid]) .highlight::after {\n    border-bottom-color: var(--md-sys-color-error);\n  }\n\n  .labelHidden .body {\n    padding-top: 0;\n  }\n\n  .container::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    opacity: 0;\n    background-color: var(--md-sys-color-on-surface-variant);\n    transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  :host(:hover) .container::before {\n    opacity: var(--md-sys-state-hover-state-layer-opacity);\n  }\n\n  .body {\n    padding-top: 1em;\n  }\n`\n"]}

package/build/src/md/text-field/internals/outlined.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"outlined.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/text-field/internals/outlined.styles.ts"],"names":[],"mappings":";AAEA,wBAwCC"}
+{"version":3,"file":"outlined.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/text-field/internals/outlined.styles.ts"],"names":[],"mappings":";AAEA,wBA4DC"}

package/build/src/md/text-field/internals/outlined.styles.js

@@ -1,5 +1,11 @@
 import { css } from 'lit';
 export default css `
+  :host {
+    --_border-color: var(--md-sys-color-outline);
+    --_outline-color: var(--md-sys-color-primary);
+    --_outline-width: 0px;
+  }
+
   .highlight {
     display: none;
   }
@@ -9,21 +15,35 @@ export default css `
   }
 
   .container {
-    border: 1px var(--md-sys-color-outline) solid;
-    outline: 0px solid var(--md-sys-color-primary);
-    outline-offset: -3px;
+    border: 1px var(--_border-color) solid;
+    outline: var(--_outline-width) solid var(--_outline-color);
+    outline-offset: calc(-1 * var(--_outline-width));
     transition:
       border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
-      outline-width 150ms cubic-bezier(0.4, 0, 0.2, 1);
+      outline-width 150ms cubic-bezier(0.4, 0, 0.2, 1),
+      outline-offset 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  :host(:hover:not(:focus-within):not([invalid])) {
+    --_border-color: var(--md-sys-color-on-surface);
+  }
+
+  :host(:focus-within:not([invalid])) {
+    --_border-color: var(--md-sys-color-primary);
+  }
+
+  :host(:focus-within) {
+    --_outline-width: 3px;
   }
 
-  :host(:hover:not(:focus-within)) .container {
-    border-color: var(--md-sys-color-on-surface);
+  :host([invalid]) {
+    --_border-color: var(--md-sys-color-error);
+    --_outline-color: var(--md-sys-color-error);
   }
 
-  :host(:focus-within) .container {
-    border-color: var(--md-sys-color-primary);
-    outline-width: 3px;
+  :host([invalid]:hover) {
+    --_outline-color: var(--md-sys-color-on-error-container);
+    --_border-color: var(--md-sys-color-on-error-container);
   }
 
   .label {

package/build/src/md/text-field/internals/outlined.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"outlined.styles.js","sourceRoot":"","sources":["../../../../../src/md/text-field/internals/outlined.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  .highlight {\n    display: none;\n  }\n\n  .surface {\n    border-radius: var(--md-sys-shape-corner-extra-small);\n  }\n\n  .container {\n    border: 1px var(--md-sys-color-outline) solid;\n    outline: 0px solid var(--md-sys-color-primary);\n    outline-offset: -3px;\n    transition:\n      border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),\n      outline-width 150ms cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  :host(:hover:not(:focus-within)) .container {\n    border-color: var(--md-sys-color-on-surface);\n  }\n\n  :host(:focus-within) .container {\n    border-color: var(--md-sys-color-primary);\n    outline-width: 3px;\n  }\n\n  .label {\n    padding: 0 4px;\n  }\n\n  .labelActive .label {\n    transform: translateY(calc(-100% - 2px)) scale(0.75);\n    position: absolute;\n    background-color: var(--md-sys-color-surface);\n  }\n\n  :host(:focus-within) .label {\n    color: var(--md-sys-color-primary);\n  }\n`\n"]}
+{"version":3,"file":"outlined.styles.js","sourceRoot":"","sources":["../../../../../src/md/text-field/internals/outlined.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    --_border-color: var(--md-sys-color-outline);\n    --_outline-color: var(--md-sys-color-primary);\n    --_outline-width: 0px;\n  }\n\n  .highlight {\n    display: none;\n  }\n\n  .surface {\n    border-radius: var(--md-sys-shape-corner-extra-small);\n  }\n\n  .container {\n    border: 1px var(--_border-color) solid;\n    outline: var(--_outline-width) solid var(--_outline-color);\n    outline-offset: calc(-1 * var(--_outline-width));\n    transition:\n      border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),\n      outline-width 150ms cubic-bezier(0.4, 0, 0.2, 1),\n      outline-offset 150ms cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  :host(:hover:not(:focus-within):not([invalid])) {\n    --_border-color: var(--md-sys-color-on-surface);\n  }\n\n  :host(:focus-within:not([invalid])) {\n    --_border-color: var(--md-sys-color-primary);\n  }\n\n  :host(:focus-within) {\n    --_outline-width: 3px;\n  }\n\n  :host([invalid]) {\n    --_border-color: var(--md-sys-color-error);\n    --_outline-color: var(--md-sys-color-error);\n  }\n\n  :host([invalid]:hover) {\n    --_outline-color: var(--md-sys-color-on-error-container);\n    --_border-color: var(--md-sys-color-on-error-container);\n  }\n\n  .label {\n    padding: 0 4px;\n  }\n\n  .labelActive .label {\n    transform: translateY(calc(-100% - 2px)) scale(0.75);\n    position: absolute;\n    background-color: var(--md-sys-color-surface);\n  }\n\n  :host(:focus-within) .label {\n    color: var(--md-sys-color-primary);\n  }\n`\n"]}

package/build/src/styles/m3/dialog.module.d.ts

@@ -9,8 +9,8 @@
  *    <h3>Title</h3> <!-- h1, h2, or h3 -->
  *    <!-- Any content -->
  *    <div class="dialog-buttons">
- *      <ui-text-button value="cancel" submit>Cancel</ui-text-button>
- *      <ui-text-button value="submit" submit>Create</ui-text-button>
+ *      <ui-button color="text" value="cancel" submit>Cancel</ui-button>
+ *      <ui-button color="text" value="submit" submit>Create</ui-button>
  *    </div>
  *  </form>
  * </dialog>

package/build/src/styles/m3/dialog.module.js

@@ -10,8 +10,8 @@ import { css } from 'lit';
  *    <h3>Title</h3> <!-- h1, h2, or h3 -->
  *    <!-- Any content -->
  *    <div class="dialog-buttons">
- *      <ui-text-button value="cancel" submit>Cancel</ui-text-button>
- *      <ui-text-button value="submit" submit>Create</ui-text-button>
+ *      <ui-button color="text" value="cancel" submit>Cancel</ui-button>
+ *      <ui-button color="text" value="submit" submit>Create</ui-button>
  *    </div>
  *  </form>
  * </dialog>

package/build/src/styles/m3/dialog.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.module.js","sourceRoot":"","sources":["../../../../src/styles/m3/dialog.module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyEjB,CAAA","sourcesContent":["import { css } from 'lit'\n\n/**\n * Definitions that style a `<dialog>` element as material dialog.\n *\n * The dialog has to have the following structure:\n *\n * ```html\n * <dialog>\n *  <form> <!-- optional -->\n *    <h3>Title</h3> <!-- h1, h2, or h3 -->\n *    <!-- Any content -->\n *    <div class=\"dialog-buttons\">\n *      <ui-text-button value=\"cancel\" submit>Cancel</ui-text-button>\n *      <ui-text-button value=\"submit\" submit>Create</ui-text-button>\n *    </div>\n *  </form>\n * </dialog>\n * ```\n */\nexport default css`\n  dialog {\n    border: none;\n    border-radius: var(--md-sys-shape-corner-extra-large);\n    background-color: var(--md-sys-color-surface);\n    box-shadow: var(--md-sys-elevation-3);\n    color: var(--md-sys-color-on-surface-variant);\n    padding: 24px;\n\n    font-family: var(--md-sys-typescale-body-medium-font);\n    font-weight: var(--md-sys-typescale-body-medium-weight);\n    font-size: var(--md-sys-typescale-body-medium-size);\n    letter-spacing: var(--md-sys-typescale-body-medium-tracking);\n    line-height: var(--md-sys-typescale-body-medium-height);\n  }\n\n  dialog::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    background-color: var(--md-sys-color-surface-tint);\n    opacity: 0.11;\n    pointer-events: none;\n  }\n\n  dialog h1,\n  dialog h2,\n  dialog h3 {\n    color: var(--md-sys-color-on-surface);\n    margin: 0;\n    padding: 0;\n    font-family: var(--md-sys-typescale-headline-small-font);\n    font-weight: var(--md-sys-typescale-headline-small-weight);\n    font-size: var(--md-sys-typescale-headline-small-size);\n    letter-spacing: var(--md-sys-typescale-headline-small-tracking);\n    line-height: var(--md-sys-typescale-headline-small-height);\n    margin-bottom: 16px;\n    text-align: center;\n  }\n\n  dialog .dialog-buttons {\n    margin-top: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: end;\n  }\n\n  dialog[open] {\n    animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-dialog;\n  }\n\n  dialog[open]::backdrop {\n    animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-backdrop;\n  }\n\n  @keyframes show-dialog {\n    from {\n      transform: translateY(-110%) scaleY(0);\n    }\n    to {\n      transform: translateY(0%) scaleY(1);\n    }\n  }\n\n  @keyframes show-backdrop {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n`\n"]}
+{"version":3,"file":"dialog.module.js","sourceRoot":"","sources":["../../../../src/styles/m3/dialog.module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyEjB,CAAA","sourcesContent":["import { css } from 'lit'\n\n/**\n * Definitions that style a `<dialog>` element as material dialog.\n *\n * The dialog has to have the following structure:\n *\n * ```html\n * <dialog>\n *  <form> <!-- optional -->\n *    <h3>Title</h3> <!-- h1, h2, or h3 -->\n *    <!-- Any content -->\n *    <div class=\"dialog-buttons\">\n *      <ui-button color=\"text\" value=\"cancel\" submit>Cancel</ui-button>\n *      <ui-button color=\"text\" value=\"submit\" submit>Create</ui-button>\n *    </div>\n *  </form>\n * </dialog>\n * ```\n */\nexport default css`\n  dialog {\n    border: none;\n    border-radius: var(--md-sys-shape-corner-extra-large);\n    background-color: var(--md-sys-color-surface);\n    box-shadow: var(--md-sys-elevation-3);\n    color: var(--md-sys-color-on-surface-variant);\n    padding: 24px;\n\n    font-family: var(--md-sys-typescale-body-medium-font);\n    font-weight: var(--md-sys-typescale-body-medium-weight);\n    font-size: var(--md-sys-typescale-body-medium-size);\n    letter-spacing: var(--md-sys-typescale-body-medium-tracking);\n    line-height: var(--md-sys-typescale-body-medium-height);\n  }\n\n  dialog::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    background-color: var(--md-sys-color-surface-tint);\n    opacity: 0.11;\n    pointer-events: none;\n  }\n\n  dialog h1,\n  dialog h2,\n  dialog h3 {\n    color: var(--md-sys-color-on-surface);\n    margin: 0;\n    padding: 0;\n    font-family: var(--md-sys-typescale-headline-small-font);\n    font-weight: var(--md-sys-typescale-headline-small-weight);\n    font-size: var(--md-sys-typescale-headline-small-size);\n    letter-spacing: var(--md-sys-typescale-headline-small-tracking);\n    line-height: var(--md-sys-typescale-headline-small-height);\n    margin-bottom: 16px;\n    text-align: center;\n  }\n\n  dialog .dialog-buttons {\n    margin-top: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: end;\n  }\n\n  dialog[open] {\n    animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-dialog;\n  }\n\n  dialog[open]::backdrop {\n    animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-backdrop;\n  }\n\n  @keyframes show-dialog {\n    from {\n      transform: translateY(-110%) scaleY(0);\n    }\n    to {\n      transform: translateY(0%) scaleY(1);\n    }\n  }\n\n  @keyframes show-backdrop {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n`\n"]}

package/build/src/styles/m3/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../../src/styles/m3/tokens.ts"],"names":[],"mappings":";AAEA,wBAueC"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../../src/styles/m3/tokens.ts"],"names":[],"mappings":";AAEA,wBAigBC"}