@api-client/ui 0.2.13 → 0.3.1

package/build/src/md/button/internals/base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.js","sourceRoot":"","sources":["../../../../../src/md/button/internals/base.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing, type PropertyValues, type TemplateResult } from 'lit'\nimport { property, query } from 'lit/decorators.js'\nimport { UiElement } from '../../UiElement.js'\nimport type { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionController.js'\nimport { isDisabled, setDisabled } from '../../../lib/disabled.js'\nimport type UiRipple from '../../ripple/internals/ripple.js'\n\nimport '../../ripple/ui-ripple.js'\nimport '@material/web/focus/md-focus-ring.js'\n\nexport type ButtonType = 'submit' | 'reset' | 'button'\nexport type MdButtonShape = 'round' | 'square'\nexport type MdButtonSize = 'xs' | 's' | 'm' | 'l' | 'xl'\n\n/**\n * A material design button with M3 Expressive features - CSS-native implementation.\n *\n * @slot icon - A slot for the icon element\n * @slot - The default slot for the label\n * @attribute {string} form - The form associated with this element when the element is outside the form.\n * @fires {ToggleEvent} toggle - Fired when the `toggle` property is true and the button is clicked,\n *                               changing its selection state.\n *                               The event's `newState` and `oldState` properties (string values: 'selected' or\n *                               'unselected') detail this selection change.\n */\nexport default class BaseButton extends UiElement {\n  static readonly formAssociated = true\n\n  #internals = this.attachInternals()\n\n  /**\n   * The form associated with this element\n   * @attribute\n   */\n  get form(): HTMLFormElement | null | string {\n    return this.#internals.form\n  }\n\n  get validity() {\n    return this.#internals.validity\n  }\n\n  get validationMessage() {\n    return this.#internals.validationMessage\n  }\n\n  get willValidate() {\n    return this.#internals.willValidate\n  }\n\n  /**\n   * The name of the button, submitted as a pair with the button's value as part of the form data.\n   * @attribute\n   */\n  @property({ type: String }) accessor name: string | undefined\n\n  #value?: string\n\n  get value(): string | undefined {\n    return this.#value\n  }\n\n  /**\n   * Defines the value associated with the button's name when it's submitted with the form data.\n   * @attribute\n   */\n  @property({ type: String })\n  set value(value: string | undefined) {\n    if (this.#value === value) {\n      return\n    }\n    this.#value = value\n    this.#internals?.setFormValue(value || null)\n  }\n\n  /**\n   * Whether to render the icon at the inline end of the label rather than the inline start.\n   * @attribute\n   */\n  @property({ type: Boolean, attribute: 'trailingicon', reflect: true }) accessor trailingIcon = false\n\n  /**\n   * The default behavior of the button.\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) accessor type: ButtonType = 'button'\n\n  /**\n   * When set, the button is a toggle button.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor toggle = false\n\n  /**\n   * Indicates that the button is currently selected.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor selected = false\n\n  /**\n   * The shape of the button.\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) accessor shape: MdButtonShape = 'round'\n\n  /**\n   * The size of the button.\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) accessor size: MdButtonSize = 's'\n\n  get disabled(): boolean {\n    return isDisabled(this)\n  }\n\n  /**\n   * When set, the button is in a disabled state.\n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean })\n  set disabled(value: boolean) {\n    const old = isDisabled(this)\n    setDisabled(this, value)\n    this.requestUpdate('disabled', old)\n  }\n\n  @query('ui-ripple') protected accessor ripple!: UiRipple | null\n\n  constructor() {\n    super()\n    this.actionController.cancelKeyboardEvents = true\n    this.addEventListener('keydown', this.handleKeyDown.bind(this))\n    this.addEventListener('keyup', this.handleKeyUp.bind(this))\n    this.addEventListener('click', this.handleClick.bind(this))\n    this.addEventListener('pointerdown', this.handlePointerDown.bind(this))\n    this.addEventListener('pointerup', this.handlePointerUp.bind(this))\n    this.addEventListener('pointercancel', this.handlePointerCancel.bind(this))\n    this.addEventListener('pointerleave', this.handlePointerLeave.bind(this))\n    this.addEventListener('pointerenter', this.handlePointerEnter.bind(this))\n    this.addEventListener('contextmenu', this.handleContextMenu.bind(this))\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'button')\n    }\n    if (!this.hasAttribute('tabindex') && !this.disabled) {\n      this.setAttribute('tabindex', '0')\n    }\n  }\n\n  protected override updated(cp: PropertyValues<this>): void {\n    super.updated(cp)\n\n    // If the button is disabled, remove the tabindex attribute\n    if (cp.has('disabled')) {\n      if (this.disabled) {\n        this.removeAttribute('tabindex')\n      } else if (!this.hasAttribute('tabindex')) {\n        this.setAttribute('tabindex', '0')\n      }\n    }\n\n    if (cp.has('toggle') || cp.has('selected')) {\n      this.updatePressedState()\n    }\n  }\n\n  protected updatePressedState(): void {\n    if (this.toggle) {\n      this.ariaPressed = String(this.selected)\n    } else {\n      this.selected = false\n      this.removeAttribute('aria-pressed')\n    }\n  }\n\n  checkValidity() {\n    return this.#internals.checkValidity()\n  }\n\n  reportValidity() {\n    return this.#internals.reportValidity()\n  }\n\n  protected override firstUpdated(): void {\n    this.#internals?.setFormValue(this.value || null)\n  }\n\n  override beginPress(options: BeginPressConfig): void {\n    super.beginPress(options)\n    this.classList.add('pressed')\n    this.ripple?.beginFocus()\n  }\n\n  override endPress(config: EndPressConfig): void {\n    super.endPress(config)\n    this.classList.remove('pressed')\n    this.ripple?.endFocus()\n    const { cancelled, reason } = config\n    if (cancelled) {\n      return\n    }\n    const allowedReasons = reason === 'enter' || reason === 'space'\n    if (this.type === 'submit' && (!reason || allowedReasons)) {\n      this.handleSubmit()\n    } else if (allowedReasons) {\n      this.click()\n    }\n  }\n\n  override handleClick(e: MouseEvent): void {\n    super.handleClick(e)\n    if (this.disabled) {\n      e.preventDefault()\n      e.stopPropagation()\n      return\n    }\n\n    if (this.toggle) {\n      this.selected = !this.selected\n      const e = new ToggleEvent('toggle', {\n        bubbles: true,\n        composed: true,\n        newState: this.selected ? 'selected' : 'unselected',\n        oldState: this.selected ? 'unselected' : 'selected',\n      })\n      this.dispatchEvent(e)\n    }\n    this.endPress({ cancelled: false, actionData: { event: e } })\n  }\n\n  protected handleSubmit(): void {\n    const { name, value, type, disabled, form } = this\n    if (!form || !type || disabled) {\n      return\n    }\n    const typedForm = form as HTMLFormElement\n    let button: HTMLButtonElement | undefined\n    if (name || value) {\n      button = document.createElement('button')\n      if (name) {\n        button.name = name\n      }\n      if (value) {\n        button.value = value\n      }\n      button.type = type\n      button.hidden = true\n      typedForm.append(button)\n    }\n    try {\n      typedForm.requestSubmit(button)\n    } catch {\n      // Ignore errors\n    }\n    if (button) {\n      typedForm.removeChild(button)\n    }\n  }\n\n  override handlePointerEnter(e: PointerEvent): void {\n    super.handlePointerEnter(e)\n    if (this.ripple) {\n      this.ripple.beginHover(e)\n    }\n  }\n\n  override handlePointerLeave(e: PointerEvent): void {\n    super.handlePointerLeave(e)\n    if (this.ripple) {\n      this.ripple.endHover()\n    }\n  }\n\n  protected override render(): TemplateResult {\n    const { trailingIcon = false } = this\n    const icon = this.renderIcon()\n\n    return html`\n      ${this.renderFocusRing()} ${this.renderRipple()} ${trailingIcon ? nothing : icon}\n      <slot></slot>\n      ${trailingIcon ? icon : nothing}\n    `\n  }\n\n  protected renderIcon(): TemplateResult {\n    return html`<slot name=\"icon\"></slot>`\n  }\n\n  protected renderFocusRing(): TemplateResult {\n    return html`<md-focus-ring part=\"focus-ring\" class=\"focus-ring\" .control=\"${this as HTMLElement}\"></md-focus-ring>`\n  }\n\n  protected renderRipple(): TemplateResult {\n    return html`<ui-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></ui-ripple>`\n  }\n}\n"]}

package/build/src/md/button/internals/button.d.ts

@@ -1,82 +1,14 @@
-import { TemplateResult } from 'lit';
-import { UiElement } from '../../UiElement.js';
-import { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionController.js';
-import UiRipple from '../../ripple/internals/ripple.js';
-import '../../ripple/ui-ripple.js';
-import '@material/web/focus/md-focus-ring.js';
+import BaseButton from './base.js';
+export type { ButtonType, MdButtonShape, MdButtonSize } from './base.js';
+export type MdButtonColor = 'elevated' | 'filled' | 'outlined' | 'text' | 'tonal';
 /**
- * A material design button.
- *
- * Note, this control is form associated.
- *
- * @slot icon - A slot for the icon element
- * @slot - The default slot for the label
- * @attribute {string} form - The form associated with this element when the element is outside the form.
- *                   It should be the id of the form element within the same document.
+ * A material design button with M3 Expressive features - CSS-native implementation.
  */
-export default class UiButton extends UiElement {
-    #private;
-    static readonly formAssociated = true;
+export default class Button extends BaseButton {
     /**
-     * The form associated with this element
-     * @attribute {string} form - The form associated with this element when the element is outside the form.
-     *                   It should be the id of the form element within the same document.
-     */
-    get form(): HTMLFormElement | null;
-    get validity(): ValidityState;
-    get validationMessage(): string;
-    get willValidate(): boolean;
-    /**
-     * Determines when the element has an icon in the "icon" slot.
-     */
-    protected accessor hasIcon: boolean;
-    /**
-     * The name of the button, submitted as a pair with the button's value as part of the form data,
-     * when that button is used to submit the form.
-     * @attribute
-     */
-    accessor name: string | undefined;
-    get value(): string | undefined;
-    /**
-     * Defines the value associated with the button's name when it's submitted with the form data.
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value}
-     * @attribute
-     */
-    set value(value: string | undefined);
-    /**
-     * Whether to render the icon at the inline end of the label rather than the
-     * inline start.
+     * The color of the button.
      * @attribute
      */
-    accessor trailingIcon: boolean;
-    protected accessor ripple: Promise<UiRipple | null>;
-    /**
-     * The default behavior of the button.
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type}
-     * @attribute
-     */
-    accessor type: 'submit' | 'reset' | 'button';
-    get disabled(): boolean;
-    /**
-     * When set, the button is a disabled state.
-     * @attribute
-     */
-    set disabled(value: boolean);
-    constructor();
-    connectedCallback(): void;
-    checkValidity(): boolean;
-    reportValidity(): boolean;
-    protected firstUpdated(): void;
-    protected pressRipple(): Promise<void>;
-    protected endRipple(): Promise<void>;
-    beginPress(options: BeginPressConfig): void;
-    endPress(config: EndPressConfig): void;
-    protected handleSubmit(): void;
-    /**
-     * Sets the `_hasIcon` state property when the "icon" slot change event is dispatched.
-     */
-    protected handleSlotChange(e: Event): void;
-    protected render(): TemplateResult;
-    protected renderIcon(): TemplateResult;
+    accessor color: MdButtonColor;
 }
 //# sourceMappingURL=button.d.ts.map

package/build/src/md/button/internals/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../../src/md/button/internals/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAA;AAGnD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAC9C,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAA;AAC3F,OAAO,QAAQ,MAAM,kCAAkC,CAAA;AAGvD,OAAO,2BAA2B,CAAA;AAClC,OAAO,sCAAsC,CAAA;AAE7C;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,SAAS;;IAC7C,MAAM,CAAC,QAAQ,CAAC,cAAc,QAAO;IAIrC;;;;OAIG;IACH,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;IAED,IAAI,QAAQ,kBAEX;IAED,IAAI,iBAAiB,WAEpB;IAED,IAAI,YAAY,YAEf;IAED;;OAEG;IACM,SAAS,CAAC,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAA;IAE5C;;;;OAIG;IACyB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAA;IAI7D,IAAI,KAAK,IAAI,MAAM,GAAG,SAAS,CAE9B;IAED;;;;OAIG;IACH,IACI,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAMlC;IAED;;;;OAIG;IACoE,QAAQ,CAAC,YAAY,UAAQ;IAE3E,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAG,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAA;IAE7E;;;;OAIG;IACwC,QAAQ,CAAC,IAAI,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAW;IAElG,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED;;;OAGG;IACH,IACI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAI1B;;IAiBQ,iBAAiB,IAAI,IAAI;IAUlC,aAAa;IAIb,cAAc;cAIK,YAAY,IAAI,IAAI;cAIvB,WAAW,IAAI,OAAO,CAAC,IAAI,CAAC;cAO5B,SAAS,IAAI,OAAO,CAAC,IAAI,CAAC;IAKjC,UAAU,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAK3C,QAAQ,CAAC,MAAM,EAAE,cAAc,GAAG,IAAI;IAe/C,SAAS,CAAC,YAAY,IAAI,IAAI;IA4B9B;;OAEG;IACH,SAAS,CAAC,gBAAgB,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;cAKvB,MAAM,IAAI,cAAc;IAuB3C,SAAS,CAAC,UAAU,IAAI,cAAc;CAGvC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../../src/md/button/internals/button.ts"],"names":[],"mappings":"AACA,OAAO,UAAU,MAAM,WAAW,CAAA;AAClC,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAExE,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,CAAA;AAEjF;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,UAAU;IAC5C;;;OAGG;IACwC,QAAQ,CAAC,KAAK,EAAE,aAAa,CAAW;CACpF"}

package/build/src/md/button/internals/button.js

@@ -1,262 +1,33 @@
 import { __esDecorate, __runInitializers } from "tslib";
-import { html, nothing } from 'lit';
-import { property, queryAsync, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { UiElement } from '../../UiElement.js';
-import { isDisabled, setDisabled } from '../../../lib/disabled.js';
-import '../../ripple/ui-ripple.js';
-import '@material/web/focus/md-focus-ring.js';
-let UiButton = (() => {
-    let _classSuper = UiElement;
-    let _instanceExtraInitializers = [];
-    let _hasIcon_decorators;
-    let _hasIcon_initializers = [];
-    let _hasIcon_extraInitializers = [];
-    let _name_decorators;
-    let _name_initializers = [];
-    let _name_extraInitializers = [];
-    let _set_value_decorators;
-    let _trailingIcon_decorators;
-    let _trailingIcon_initializers = [];
-    let _trailingIcon_extraInitializers = [];
-    let _ripple_decorators;
-    let _ripple_initializers = [];
-    let _ripple_extraInitializers = [];
-    let _type_decorators;
-    let _type_initializers = [];
-    let _type_extraInitializers = [];
-    let _set_disabled_decorators;
-    return class UiButton extends _classSuper {
+import { property } from 'lit/decorators.js';
+import BaseButton from './base.js';
+let Button = (() => {
+    let _classSuper = BaseButton;
+    let _color_decorators;
+    let _color_initializers = [];
+    let _color_extraInitializers = [];
+    return class Button extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            _hasIcon_decorators = [state()];
-            _name_decorators = [property({ type: String })];
-            _set_value_decorators = [property({ type: String })];
-            _trailingIcon_decorators = [property({ type: Boolean, attribute: 'trailingicon', reflect: true })];
-            _ripple_decorators = [queryAsync('ui-ripple')];
-            _type_decorators = [property({ type: String, reflect: true })];
-            _set_disabled_decorators = [property({ reflect: true, type: Boolean })];
-            __esDecorate(this, null, _hasIcon_decorators, { kind: "accessor", name: "hasIcon", static: false, private: false, access: { has: obj => "hasIcon" in obj, get: obj => obj.hasIcon, set: (obj, value) => { obj.hasIcon = value; } }, metadata: _metadata }, _hasIcon_initializers, _hasIcon_extraInitializers);
-            __esDecorate(this, null, _name_decorators, { kind: "accessor", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
-            __esDecorate(this, null, _set_value_decorators, { kind: "setter", name: "value", static: false, private: false, access: { has: obj => "value" in obj, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _trailingIcon_decorators, { kind: "accessor", name: "trailingIcon", static: false, private: false, access: { has: obj => "trailingIcon" in obj, get: obj => obj.trailingIcon, set: (obj, value) => { obj.trailingIcon = value; } }, metadata: _metadata }, _trailingIcon_initializers, _trailingIcon_extraInitializers);
-            __esDecorate(this, null, _ripple_decorators, { kind: "accessor", name: "ripple", static: false, private: false, access: { has: obj => "ripple" in obj, get: obj => obj.ripple, set: (obj, value) => { obj.ripple = value; } }, metadata: _metadata }, _ripple_initializers, _ripple_extraInitializers);
-            __esDecorate(this, null, _type_decorators, { kind: "accessor", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_extraInitializers);
-            __esDecorate(this, null, _set_disabled_decorators, { kind: "setter", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, null, _instanceExtraInitializers);
+            _color_decorators = [property({ type: String, reflect: true })];
+            __esDecorate(this, null, _color_decorators, { kind: "accessor", name: "color", static: false, private: false, access: { has: obj => "color" in obj, get: obj => obj.color, set: (obj, value) => { obj.color = value; } }, metadata: _metadata }, _color_initializers, _color_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
-        static formAssociated = true;
-        #internals = (__runInitializers(this, _instanceExtraInitializers), this.attachInternals());
+        #color_accessor_storage = __runInitializers(this, _color_initializers, 'filled');
         /**
-         * The form associated with this element
-         * @attribute {string} form - The form associated with this element when the element is outside the form.
-         *                   It should be the id of the form element within the same document.
-         */
-        get form() {
-            return this.#internals.form;
-        }
-        get validity() {
-            return this.#internals.validity;
-        }
-        get validationMessage() {
-            return this.#internals.validationMessage;
-        }
-        get willValidate() {
-            return this.#internals.willValidate;
-        }
-        #hasIcon_accessor_storage = __runInitializers(this, _hasIcon_initializers, void 0);
-        /**
-         * Determines when the element has an icon in the "icon" slot.
-         */
-        get hasIcon() { return this.#hasIcon_accessor_storage; }
-        set hasIcon(value) { this.#hasIcon_accessor_storage = value; }
-        #name_accessor_storage = (__runInitializers(this, _hasIcon_extraInitializers), __runInitializers(this, _name_initializers, void 0));
-        /**
-         * The name of the button, submitted as a pair with the button's value as part of the form data,
-         * when that button is used to submit the form.
-         * @attribute
-         */
-        get name() { return this.#name_accessor_storage; }
-        set name(value) { this.#name_accessor_storage = value; }
-        #value = __runInitializers(this, _name_extraInitializers);
-        get value() {
-            return this.#value;
-        }
-        /**
-         * Defines the value associated with the button's name when it's submitted with the form data.
-         * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value}
-         * @attribute
-         */
-        set value(value) {
-            if (this.#value === value) {
-                return;
-            }
-            this.#value = value;
-            this.#internals?.setFormValue(value || null);
-        }
-        #trailingIcon_accessor_storage = __runInitializers(this, _trailingIcon_initializers, false);
-        /**
-         * Whether to render the icon at the inline end of the label rather than the
-         * inline start.
-         * @attribute
-         */
-        get trailingIcon() { return this.#trailingIcon_accessor_storage; }
-        set trailingIcon(value) { this.#trailingIcon_accessor_storage = value; }
-        #ripple_accessor_storage = (__runInitializers(this, _trailingIcon_extraInitializers), __runInitializers(this, _ripple_initializers, void 0));
-        get ripple() { return this.#ripple_accessor_storage; }
-        set ripple(value) { this.#ripple_accessor_storage = value; }
-        #type_accessor_storage = (__runInitializers(this, _ripple_extraInitializers), __runInitializers(this, _type_initializers, 'button'));
-        /**
-         * The default behavior of the button.
-         * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type}
+         * The color of the button.
          * @attribute
          */
-        get type() { return this.#type_accessor_storage; }
-        set type(value) { this.#type_accessor_storage = value; }
-        get disabled() {
-            return isDisabled(this);
-        }
-        /**
-         * When set, the button is a disabled state.
-         * @attribute
-         */
-        set disabled(value) {
-            const old = isDisabled(this);
-            setDisabled(this, value);
-            this.requestUpdate('disabled', old);
-        }
+        get color() { return this.#color_accessor_storage; }
+        set color(value) { this.#color_accessor_storage = value; }
         constructor() {
-            super();
-            __runInitializers(this, _type_extraInitializers);
-            this.hasIcon = false;
-            this.actionController.cancelKeyboardEvents = true;
-            this.addEventListener('keydown', this.handleKeyDown.bind(this));
-            this.addEventListener('keyup', this.handleKeyUp.bind(this));
-            this.addEventListener('click', this.handleClick.bind(this));
-            this.addEventListener('pointerdown', this.handlePointerDown.bind(this));
-            this.addEventListener('pointerup', this.handlePointerUp.bind(this));
-            this.addEventListener('pointercancel', this.handlePointerCancel.bind(this));
-            this.addEventListener('pointerleave', this.handlePointerLeave.bind(this));
-            this.addEventListener('contextmenu', this.handleContextMenu.bind(this));
-        }
-        connectedCallback() {
-            super.connectedCallback();
-            if (!this.hasAttribute('role')) {
-                this.setAttribute('role', 'button');
-            }
-            if (!this.hasAttribute('tabindex') && !this.disabled) {
-                this.setAttribute('tabindex', '0');
-            }
-        }
-        checkValidity() {
-            return this.#internals.checkValidity();
-        }
-        reportValidity() {
-            return this.#internals.reportValidity();
-        }
-        firstUpdated() {
-            this.#internals?.setFormValue(this.value || null);
-        }
-        async pressRipple() {
-            const element = await this.ripple;
-            if (element && !element.isPressed) {
-                element.beginPress();
-            }
-        }
-        async endRipple() {
-            const element = await this.ripple;
-            element?.endPress();
-        }
-        beginPress(options) {
-            super.beginPress(options);
-            this.pressRipple();
-        }
-        endPress(config) {
-            super.endPress(config);
-            this.endRipple();
-            const { cancelled, reason } = config;
-            if (cancelled) {
-                return;
-            }
-            const allowedReasons = reason === 'enter' || reason === 'space';
-            if (this.type === 'submit' && (!reason || allowedReasons)) {
-                this.handleSubmit();
-            }
-            else if (allowedReasons) {
-                this.click();
-            }
-        }
-        handleSubmit() {
-            const { name, value, type, disabled, form } = this;
-            if (!form || !type || disabled) {
-                return;
-            }
-            let button;
-            if (name || value) {
-                button = document.createElement('button');
-                if (name) {
-                    button.name = name;
-                }
-                if (value) {
-                    button.value = value;
-                }
-                button.type = type;
-                button.hidden = true;
-                form.append(button);
-            }
-            try {
-                form.requestSubmit(button);
-            }
-            catch {
-                // ...
-            }
-            if (button) {
-                form.removeChild(button);
-            }
-        }
-        /**
-         * Sets the `_hasIcon` state property when the "icon" slot change event is dispatched.
-         */
-        handleSlotChange(e) {
-            const slot = e.target;
-            this.hasIcon = !!slot.assignedNodes().length;
-        }
-        render() {
-            const { pressed = false, trailingIcon = false } = this;
-            const containerClasses = classMap({
-                surface: true,
-                withIcon: this.hasIcon,
-                pressed,
-            });
-            const icon = this.renderIcon();
-            return html `
-      <md-focus-ring part="focus-ring" .control="${this}"></md-focus-ring>
-      <ui-ripple class="ripple" ?disabled="${this.disabled}"></ui-ripple>
-      <div class="${containerClasses}" id="container">
-        <div class="container"></div>
-        <div class="state"></div>
-        <div class="content">
-          ${trailingIcon ? nothing : icon}
-          <slot></slot>
-          ${trailingIcon ? icon : nothing}
-        </div>
-      </div>
-    `;
-        }
-        renderIcon() {
-            return html `<slot name="icon" @slotchange="${this.handleSlotChange}"></slot>`;
+            super(...arguments);
+            __runInitializers(this, _color_extraInitializers);
         }
     };
 })();
 /**
- * A material design button.
- *
- * Note, this control is form associated.
- *
- * @slot icon - A slot for the icon element
- * @slot - The default slot for the label
- * @attribute {string} form - The form associated with this element when the element is outside the form.
- *                   It should be the id of the form element within the same document.
+ * A material design button with M3 Expressive features - CSS-native implementation.
  */
-export default UiButton;
+export default Button;
 //# sourceMappingURL=button.js.map

package/build/src/md/button/internals/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../../src/md/button/internals/button.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing, TemplateResult } from 'lit'\nimport { property, queryAsync, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { UiElement } from '../../UiElement.js'\nimport { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionController.js'\nimport UiRipple from '../../ripple/internals/ripple.js'\nimport { isDisabled, setDisabled } from '../../../lib/disabled.js'\n\nimport '../../ripple/ui-ripple.js'\nimport '@material/web/focus/md-focus-ring.js'\n\n/**\n * A material design button.\n *\n * Note, this control is form associated.\n *\n * @slot icon - A slot for the icon element\n * @slot - The default slot for the label\n * @attribute {string} form - The form associated with this element when the element is outside the form.\n *                   It should be the id of the form element within the same document.\n */\nexport default class UiButton extends UiElement {\n  static readonly formAssociated = true\n\n  #internals = this.attachInternals()\n\n  /**\n   * The form associated with this element\n   * @attribute {string} form - The form associated with this element when the element is outside the form.\n   *                   It should be the id of the form element within the same document.\n   */\n  get form(): HTMLFormElement | null {\n    return this.#internals.form\n  }\n\n  get validity() {\n    return this.#internals.validity\n  }\n\n  get validationMessage() {\n    return this.#internals.validationMessage\n  }\n\n  get willValidate() {\n    return this.#internals.willValidate\n  }\n\n  /**\n   * Determines when the element has an icon in the \"icon\" slot.\n   */\n  @state() protected accessor hasIcon: boolean\n\n  /**\n   * The name of the button, submitted as a pair with the button's value as part of the form data,\n   * when that button is used to submit the form.\n   * @attribute\n   */\n  @property({ type: String }) accessor name: string | undefined\n\n  #value?: string\n\n  get value(): string | undefined {\n    return this.#value\n  }\n\n  /**\n   * Defines the value associated with the button's name when it's submitted with the form data.\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value}\n   * @attribute\n   */\n  @property({ type: String })\n  set value(value: string | undefined) {\n    if (this.#value === value) {\n      return\n    }\n    this.#value = value\n    this.#internals?.setFormValue(value || null)\n  }\n\n  /**\n   * Whether to render the icon at the inline end of the label rather than the\n   * inline start.\n   * @attribute\n   */\n  @property({ type: Boolean, attribute: 'trailingicon', reflect: true }) accessor trailingIcon = false\n\n  @queryAsync('ui-ripple') protected accessor ripple!: Promise<UiRipple | null>\n\n  /**\n   * The default behavior of the button.\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type}\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) accessor type: 'submit' | 'reset' | 'button' = 'button'\n\n  get disabled(): boolean {\n    return isDisabled(this)\n  }\n\n  /**\n   * When set, the button is a disabled state.\n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean })\n  set disabled(value: boolean) {\n    const old = isDisabled(this)\n    setDisabled(this, value)\n    this.requestUpdate('disabled', old)\n  }\n\n  constructor() {\n    super()\n\n    this.hasIcon = false\n    this.actionController.cancelKeyboardEvents = true\n    this.addEventListener('keydown', this.handleKeyDown.bind(this))\n    this.addEventListener('keyup', this.handleKeyUp.bind(this))\n    this.addEventListener('click', this.handleClick.bind(this))\n    this.addEventListener('pointerdown', this.handlePointerDown.bind(this))\n    this.addEventListener('pointerup', this.handlePointerUp.bind(this))\n    this.addEventListener('pointercancel', this.handlePointerCancel.bind(this))\n    this.addEventListener('pointerleave', this.handlePointerLeave.bind(this))\n    this.addEventListener('contextmenu', this.handleContextMenu.bind(this))\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'button')\n    }\n    if (!this.hasAttribute('tabindex') && !this.disabled) {\n      this.setAttribute('tabindex', '0')\n    }\n  }\n\n  checkValidity() {\n    return this.#internals.checkValidity()\n  }\n\n  reportValidity() {\n    return this.#internals.reportValidity()\n  }\n\n  protected override firstUpdated(): void {\n    this.#internals?.setFormValue(this.value || null)\n  }\n\n  protected async pressRipple(): Promise<void> {\n    const element = await this.ripple\n    if (element && !element.isPressed) {\n      element.beginPress()\n    }\n  }\n\n  protected async endRipple(): Promise<void> {\n    const element = await this.ripple\n    element?.endPress()\n  }\n\n  override beginPress(options: BeginPressConfig): void {\n    super.beginPress(options)\n    this.pressRipple()\n  }\n\n  override endPress(config: EndPressConfig): void {\n    super.endPress(config)\n    this.endRipple()\n    const { cancelled, reason } = config\n    if (cancelled) {\n      return\n    }\n    const allowedReasons = reason === 'enter' || reason === 'space'\n    if (this.type === 'submit' && (!reason || allowedReasons)) {\n      this.handleSubmit()\n    } else if (allowedReasons) {\n      this.click()\n    }\n  }\n\n  protected handleSubmit(): void {\n    const { name, value, type, disabled, form } = this\n    if (!form || !type || disabled) {\n      return\n    }\n    let button: HTMLButtonElement | undefined\n    if (name || value) {\n      button = document.createElement('button')\n      if (name) {\n        button.name = name\n      }\n      if (value) {\n        button.value = value\n      }\n      button.type = type\n      button.hidden = true\n      form.append(button)\n    }\n    try {\n      form.requestSubmit(button)\n    } catch {\n      // ...\n    }\n    if (button) {\n      form.removeChild(button)\n    }\n  }\n\n  /**\n   * Sets the `_hasIcon` state property when the \"icon\" slot change event is dispatched.\n   */\n  protected handleSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement\n    this.hasIcon = !!slot.assignedNodes().length\n  }\n\n  protected override render(): TemplateResult {\n    const { pressed = false, trailingIcon = false } = this\n    const containerClasses = classMap({\n      surface: true,\n      withIcon: this.hasIcon,\n      pressed,\n    })\n    const icon = this.renderIcon()\n    return html`\n      <md-focus-ring part=\"focus-ring\" .control=\"${this as HTMLElement}\"></md-focus-ring>\n      <ui-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></ui-ripple>\n      <div class=\"${containerClasses}\" id=\"container\">\n        <div class=\"container\"></div>\n        <div class=\"state\"></div>\n        <div class=\"content\">\n          ${trailingIcon ? nothing : icon}\n          <slot></slot>\n          ${trailingIcon ? icon : nothing}\n        </div>\n      </div>\n    `\n  }\n\n  protected renderIcon(): TemplateResult {\n    return html`<slot name=\"icon\" @slotchange=\"${this.handleSlotChange}\"></slot>`\n  }\n}\n"]}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../../src/md/button/internals/button.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,UAAU,MAAM,WAAW,CAAA;;sBAQE,UAAU;;;;iBAAzB,MAAO,SAAQ,WAAU;;;iCAK3C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;YAAC,oKAAS,KAAK,6BAAL,KAAK,qFAA0B;;;QAAxC,uEAAgC,QAAQ,EAAA;QAJnF;;;WAGG;QACwC,IAAS,KAAK,2CAA0B;QAAxC,IAAS,KAAK,iDAA0B;;;;;;;AARrF;;GAEG;AACH,sBAMC","sourcesContent":["import { property } from 'lit/decorators.js'\nimport BaseButton from './base.js'\nexport type { ButtonType, MdButtonShape, MdButtonSize } from './base.js'\n\nexport type MdButtonColor = 'elevated' | 'filled' | 'outlined' | 'text' | 'tonal'\n\n/**\n * A material design button with M3 Expressive features - CSS-native implementation.\n */\nexport default class Button extends BaseButton {\n  /**\n   * The color of the button.\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) accessor color: MdButtonColor = 'filled'\n}\n"]}

package/build/src/md/button/internals/{button-styles.d.ts → button.styles.d.ts}

@@ -1,3 +1,3 @@
 declare const _default: import("lit").CSSResult;
 export default _default;
-//# sourceMappingURL=button-styles.d.ts.map
+//# sourceMappingURL=button.styles.d.ts.map

package/build/src/md/button/internals/button.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/button/internals/button.styles.ts"],"names":[],"mappings":";AAGA,wBA2TC"}