@rcarls/rc-button 0.4.0

package/dist/rc-button-Ct5C14lN.js

@@ -0,0 +1,413 @@
+import { css as p, LitElement as h, html as b } from "lit";
+import { property as a, query as u } from "lit/decorators.js";
+const y = p`
+  :host {
+    position: relative;
+    display: inline-grid;
+    vertical-align: middle;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  :host([full-width]) {
+    display: grid;
+    inline-size: 100%;
+  }
+
+  ::slotted(button) {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--rc-button-gap);
+    min-block-size: var(--rc-button-block-size);
+    min-inline-size: var(--rc-button-min-inline-size);
+    inline-size: var(--rc-button-inline-size);
+    padding-block: var(--rc-button-padding-block, revert);
+    padding-inline: var(--rc-button-padding-inline, revert);
+    border: var(--rc-button-border, revert);
+    border-radius: var(--rc-button-radius, revert);
+    background: var(--rc-button-bg, revert);
+    color: var(--rc-button-color, revert);
+    box-shadow: var(--rc-button-shadow, revert);
+    font: var(--rc-button-font, revert);
+    white-space: nowrap;
+    overflow: hidden;
+    box-sizing: border-box;
+    z-index: 0;
+    transition: var(--rc-button-transition, revert);
+  }
+
+  :host([full-width]) ::slotted(button) {
+    inline-size: 100%;
+  }
+
+  :host([icon-only]) ::slotted(button) {
+    inline-size: var(
+      --rc-button-icon-size,
+      var(--rc-button-block-size, var(--rc-control-block-size, 2.5rem))
+    );
+    min-inline-size: var(
+      --rc-button-icon-size,
+      var(--rc-button-block-size, var(--rc-control-block-size, 2.5rem))
+    );
+    padding-inline: 0;
+  }
+
+  :host([disabled]) ::slotted(button),
+  :host([pending]) ::slotted(button),
+  :host([progress]) ::slotted(button) {
+    cursor: default;
+  }
+
+  :host([pending]) ::slotted(button),
+  :host([progress]) ::slotted(button) {
+    color: var(--rc-button-busy-content-color, transparent);
+  }
+
+  :host([disabled]) ::slotted(button) {
+    opacity: var(--rc-button-disabled-opacity, revert);
+  }
+
+  [part='state-layer'],
+  [part='progress'] {
+    position: absolute;
+    inset: 0;
+    border-radius: var(--rc-button-radius, 0);
+    pointer-events: none;
+  }
+
+  [part='state-layer'] {
+    overflow: hidden;
+    z-index: 1;
+  }
+
+  [part='state-layer']::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: var(--rc-button-state-layer-bg, currentColor);
+    opacity: 0;
+    transition: opacity var(--rc-button-state-layer-duration, 150ms)
+      var(--rc-button-state-layer-easing, ease);
+  }
+
+  [part='state-layer']::after {
+    content: '';
+    position: absolute;
+    inset-inline-start: var(--_rc-button-ripple-x, 50%);
+    inset-block-start: var(--_rc-button-ripple-y, 50%);
+    inline-size: var(--_rc-button-ripple-size, 0);
+    block-size: var(--_rc-button-ripple-size, 0);
+    border-radius: 50%;
+    background: var(--_rc-button-ripple-color, currentColor);
+    opacity: 0;
+    pointer-events: none;
+    translate: -50% -50%;
+    scale: 0;
+  }
+
+  [part='state-layer'][data-rippling]::after {
+    animation: rc-button-ripple var(--_rc-button-ripple-duration, 0ms)
+      var(--_rc-button-ripple-easing, ease-out);
+  }
+
+  :host(:hover:not([disabled]):not([pending]):not([progress])) [part='state-layer']::before {
+    opacity: var(--rc-button-hover-state-layer-opacity, 0);
+  }
+
+  :host(:focus-within:not([disabled])) [part='state-layer']::before {
+    opacity: var(--rc-button-focus-state-layer-opacity, 0);
+  }
+
+  :host(:active:not([disabled]):not([pending]):not([progress])) [part='state-layer']::before {
+    opacity: var(--rc-button-pressed-state-layer-opacity, 0);
+  }
+
+  [part='progress'] {
+    display: none;
+    place-items: center;
+    color: var(--rc-button-progress-color, currentColor);
+    font: var(--rc-button-progress-font, 600 0.75rem / 1 sans-serif);
+    font-variant-numeric: tabular-nums;
+    z-index: 2;
+  }
+
+  :host([pending]) [part='progress'],
+  :host([progress]) [part='progress'] {
+    display: grid;
+  }
+
+  [part='progress']::before {
+    content: '';
+    box-sizing: border-box;
+    inline-size: var(--rc-button-progress-size, 1.25rem);
+    block-size: var(--rc-button-progress-size, 1.25rem);
+    border: var(--rc-button-progress-track-width, 2px) solid
+      var(--rc-button-progress-track-color, color-mix(in srgb, currentColor 24%, transparent));
+    border-block-start-color: var(--rc-button-progress-active-color, currentColor);
+    border-radius: 9999px;
+    animation: rc-button-progress-spin 900ms linear infinite;
+  }
+
+  [part='progress'][data-determinate]::before {
+    display: none;
+  }
+
+  @keyframes rc-button-progress-spin {
+    to {
+      rotate: 1turn;
+    }
+  }
+
+  @keyframes rc-button-ripple {
+    from {
+      opacity: var(--_rc-button-ripple-opacity, 0);
+      scale: 0;
+    }
+
+    70% {
+      opacity: var(--_rc-button-ripple-opacity, 0);
+    }
+
+    to {
+      opacity: 0;
+      scale: 1;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [part='state-layer'][data-rippling]::after {
+      animation-duration: 0ms;
+    }
+
+    [part='progress']::before {
+      animation-duration: 2s;
+    }
+  }
+
+  @media (forced-colors: active) {
+    ::slotted(button) {
+      border-color: ButtonBorder;
+      background: ButtonFace;
+      color: ButtonText;
+    }
+
+    [part='state-layer']::before {
+      background: Highlight;
+    }
+  }
+`;
+var f = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, o = (c, t, e, s) => {
+  for (var r = s > 1 ? void 0 : s ? _(t, e) : t, l = c.length - 1, d; l >= 0; l--)
+    (d = c[l]) && (r = (s ? d(t, e, r) : d(r)) || r);
+  return s && r && f(t, e, r), r;
+};
+const g = `
+@layer rc-base {
+  /*
+   * Icon-font utility classes commonly set display outside cascade layers.
+   * Hiding the inactive icon is structural, so it must win that declaration.
+   */
+  rc-button[selected] > button > [data-rc-button-icon] {
+    display: none !important;
+  }
+
+  rc-button:not([selected]) > button > [data-rc-button-selected-icon] {
+    display: none !important;
+  }
+}
+`, v = /* @__PURE__ */ new Set(["Enter", " "]);
+var n;
+const i = (n = class extends h {
+  constructor() {
+    super(), this.disabled = !1, this.pending = !1, this.progress = !1, this.toggle = !1, this.iconOnly = !1, this.fullWidth = !1, this._defaultSelected = !1, this._selectedInitialized = !1, this._$button = null, this._buttonObserver = null, this._disabledOwned = !1, this._ariaBusyOwned = !1, this._pressedOwned = !1, this._authorPressed = null, this._iconOnlyOwned = !1, this._slotMicrotaskQueued = !1, this.addEventListener("pointerdown", this._startRipple, { capture: !0 }), this.addEventListener("click", this._blockActivation, { capture: !0 }), this.addEventListener("click", this._handleToggleActivation), this.addEventListener(
+      "keydown",
+      (t) => {
+        v.has(t.key) && this._blockActivation(t);
+      },
+      { capture: !0 }
+    );
+  }
+  static _ensureBaseStyles(t) {
+    if (n._styledRoots.has(t))
+      return;
+    n._styledRoots.add(t);
+    const e = document.createElement("style");
+    e.setAttribute("data-rc-light-dom-base", "rc-button"), e.textContent = g, t instanceof Document ? t.head.append(e) : t.append(e);
+  }
+  get selected() {
+    return this._selected ?? this._uncontrolledSelected ?? this._defaultSelected;
+  }
+  set selected(t) {
+    const e = this.selected;
+    this._selected = t, this._selectedInitialized = !0, this._syncPressedState(), this.requestUpdate("selected", e);
+  }
+  get defaultSelected() {
+    return this._defaultSelected;
+  }
+  set defaultSelected(t) {
+    const e = this._defaultSelected;
+    this._defaultSelected = t, !this._selectedInitialized && this._selected === void 0 && (this._syncPressedState(), this.requestUpdate("selected", e)), this.requestUpdate("defaultSelected", e);
+  }
+  connectedCallback() {
+    super.connectedCallback(), n._ensureBaseStyles(this.getRootNode());
+  }
+  disconnectedCallback() {
+    this._buttonObserver?.disconnect(), this._buttonObserver = null, super.disconnectedCallback();
+  }
+  firstUpdated() {
+    this._syncSlottedButton();
+  }
+  updated(t) {
+    (t.has("disabled") || t.has("pending") || t.has("progress")) && this._syncNativeState(), (t.has("toggle") || t.has("selected")) && this._syncPressedState();
+  }
+  render() {
+    const t = this._progressPercentage;
+    return b`
+      <slot @slotchange=${this._handleSlotChange}></slot>
+      <span
+        part="state-layer"
+        aria-hidden="true"
+        @animationend=${this._handleRippleAnimationEnd}
+      ></span>
+      <span part="progress" aria-hidden="true" ?data-determinate=${t !== void 0}
+        >${t === void 0 ? "" : `${t}%`}</span
+      >
+    `;
+  }
+  get _progressPercentage() {
+    if (!(!this.progress || !Number.isFinite(this.progressValue)))
+      return Math.round(Math.min(100, Math.max(0, this.progressValue)));
+  }
+  _handleSlotChange() {
+    this._slotMicrotaskQueued || (this._slotMicrotaskQueued = !0, queueMicrotask(() => {
+      this._slotMicrotaskQueued = !1, this.isConnected && this._syncSlottedButton();
+    }));
+  }
+  _syncSlottedButton() {
+    const t = this._$slot?.assignedElements({ flatten: !0 }).find(
+      (e) => e instanceof HTMLButtonElement && e.parentElement === this
+    ) ?? null;
+    if (t === this._$button) {
+      this._classifyButton(), this._syncNativeState(), this._syncPressedState();
+      return;
+    }
+    this._restorePressedState(), this._buttonObserver?.disconnect(), this._buttonObserver = null, this._$button = t, this._disabledOwned = !1, this._ariaBusyOwned = !1, this._pressedOwned = !1, this._authorPressed = t?.getAttribute("aria-pressed") ?? null, t && (this._buttonObserver = new MutationObserver(() => {
+      this._classifyButton(), this._syncNativeState(), this._syncPressedState();
+    }), this._buttonObserver.observe(t, {
+      attributes: !0,
+      childList: !0,
+      subtree: !0,
+      characterData: !0
+    })), this._classifyButton(), this._syncNativeState(), this._syncPressedState();
+  }
+  _classifyButton() {
+    const t = this._$button, e = !!t?.querySelector(":scope > [data-rc-button-icon]"), s = !!t?.querySelector(":scope > [data-rc-button-selected-icon]"), r = this._hasLabel(t);
+    this.toggleAttribute("has-icon", e), this.toggleAttribute("has-selected-icon", s), this.toggleAttribute("has-label", r), t && e && !r ? this.iconOnly || (this._iconOnlyOwned = !0, this.iconOnly = !0) : this._iconOnlyOwned && (this._iconOnlyOwned = !1, this.iconOnly = !1);
+  }
+  _hasLabel(t) {
+    if (!t)
+      return !1;
+    if (t.querySelector(":scope > [data-rc-button-label]"))
+      return !0;
+    for (const e of t.childNodes) {
+      if (e.nodeType === Node.TEXT_NODE && e.textContent?.trim())
+        return !0;
+      if (e instanceof HTMLElement && !e.matches(
+        '[data-rc-button-icon], [data-rc-button-selected-icon], [data-rc-button-progress], [aria-hidden="true"]'
+      ) && e.textContent?.trim())
+        return !0;
+    }
+    return !1;
+  }
+  _syncNativeState() {
+    const t = this._$button;
+    if (!t)
+      return;
+    const e = this.disabled || this.pending || this.progress;
+    e && !t.disabled ? (this._disabledOwned = !0, t.disabled = !0) : !e && this._disabledOwned && (t.disabled = !1, this._disabledOwned = !1), this.pending || this.progress ? t.hasAttribute("aria-busy") || (t.setAttribute("aria-busy", "true"), this._ariaBusyOwned = !0) : this._ariaBusyOwned && (t.removeAttribute("aria-busy"), this._ariaBusyOwned = !1);
+  }
+  _syncPressedState() {
+    const t = this._$button;
+    if (t)
+      if (this.toggle) {
+        const e = this.selected ? "true" : "false";
+        t.getAttribute("aria-pressed") !== e && t.setAttribute("aria-pressed", e), this._pressedOwned = !0;
+      } else this._pressedOwned && this._restorePressedState();
+  }
+  _restorePressedState() {
+    const t = this._$button;
+    !t || !this._pressedOwned || (this._authorPressed === null ? t.removeAttribute("aria-pressed") : t.setAttribute("aria-pressed", this._authorPressed), this._pressedOwned = !1);
+  }
+  _handleToggleActivation(t) {
+    if (!this.toggle || this.disabled || this.pending || this.progress || t.defaultPrevented || !this._isChildButtonEvent(t))
+      return;
+    const e = this.selected, s = !e;
+    this._selected === void 0 && (this._uncontrolledSelected = s, this._selectedInitialized = !0, this._syncPressedState(), this.requestUpdate("selected", e)), this.dispatchEvent(
+      new CustomEvent("rc-button-toggle", {
+        bubbles: !0,
+        composed: !0,
+        detail: { selected: s }
+      })
+    );
+  }
+  _shouldBlockActivation() {
+    return this.pending || this.progress;
+  }
+  _isChildButtonEvent(t) {
+    return !!this._$button && t.composedPath().includes(this._$button);
+  }
+  _blockActivation(t) {
+    !this._shouldBlockActivation() || !this._isChildButtonEvent(t) || (t.preventDefault(), t.stopImmediatePropagation());
+  }
+  _startRipple(t) {
+    if (!t.isPrimary || t.button !== 0 || this.disabled || this.pending || this.progress || !this._isChildButtonEvent(t) || !this._$stateLayer || getComputedStyle(this).getPropertyValue("--_rc-button-ripple-enabled").trim() !== "1")
+      return;
+    const e = this._$button.getBoundingClientRect(), s = t.clientX - e.left, r = t.clientY - e.top, l = Math.hypot(Math.max(s, e.width - s), Math.max(r, e.height - r));
+    this._$stateLayer.style.setProperty("--_rc-button-ripple-x", `${s}px`), this._$stateLayer.style.setProperty("--_rc-button-ripple-y", `${r}px`), this._$stateLayer.style.setProperty("--_rc-button-ripple-size", `${l * 2}px`), this._$stateLayer.removeAttribute("data-rippling"), this._$stateLayer.getBoundingClientRect(), this._$stateLayer.setAttribute("data-rippling", "");
+  }
+  _handleRippleAnimationEnd(t) {
+    t.animationName === "rc-button-ripple" && this._$stateLayer.removeAttribute("data-rippling");
+  }
+}, n.styles = y, n._styledRoots = /* @__PURE__ */ new Set(), n);
+o([
+  a({ type: Boolean, reflect: !0 })
+], i.prototype, "disabled", 2);
+o([
+  a({ type: Boolean, reflect: !0 })
+], i.prototype, "pending", 2);
+o([
+  a({ type: Boolean, reflect: !0 })
+], i.prototype, "progress", 2);
+o([
+  a({ type: Number, attribute: "progress-value", reflect: !0 })
+], i.prototype, "progressValue", 2);
+o([
+  a({ type: Boolean, reflect: !0 })
+], i.prototype, "toggle", 2);
+o([
+  a({ type: Boolean, reflect: !0 })
+], i.prototype, "selected", 1);
+o([
+  a({ type: Boolean, attribute: "default-selected" })
+], i.prototype, "defaultSelected", 1);
+o([
+  a({ type: Boolean, attribute: "icon-only", reflect: !0 })
+], i.prototype, "iconOnly", 2);
+o([
+  a({ type: Boolean, attribute: "full-width", reflect: !0 })
+], i.prototype, "fullWidth", 2);
+o([
+  u("slot")
+], i.prototype, "_$slot", 2);
+o([
+  u('[part="state-layer"]')
+], i.prototype, "_$stateLayer", 2);
+let O = i;
+export {
+  O as R
+};
+//# sourceMappingURL=rc-button-Ct5C14lN.js.map

package/dist/rc-button-Ct5C14lN.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-button-Ct5C14lN.js","sources":["../src/rc-button.styles.ts","../src/rc-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const buttonStyles = css`\n  :host {\n    position: relative;\n    display: inline-grid;\n    vertical-align: middle;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  :host([full-width]) {\n    display: grid;\n    inline-size: 100%;\n  }\n\n  ::slotted(button) {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--rc-button-gap);\n    min-block-size: var(--rc-button-block-size);\n    min-inline-size: var(--rc-button-min-inline-size);\n    inline-size: var(--rc-button-inline-size);\n    padding-block: var(--rc-button-padding-block, revert);\n    padding-inline: var(--rc-button-padding-inline, revert);\n    border: var(--rc-button-border, revert);\n    border-radius: var(--rc-button-radius, revert);\n    background: var(--rc-button-bg, revert);\n    color: var(--rc-button-color, revert);\n    box-shadow: var(--rc-button-shadow, revert);\n    font: var(--rc-button-font, revert);\n    white-space: nowrap;\n    overflow: hidden;\n    box-sizing: border-box;\n    z-index: 0;\n    transition: var(--rc-button-transition, revert);\n  }\n\n  :host([full-width]) ::slotted(button) {\n    inline-size: 100%;\n  }\n\n  :host([icon-only]) ::slotted(button) {\n    inline-size: var(\n      --rc-button-icon-size,\n      var(--rc-button-block-size, var(--rc-control-block-size, 2.5rem))\n    );\n    min-inline-size: var(\n      --rc-button-icon-size,\n      var(--rc-button-block-size, var(--rc-control-block-size, 2.5rem))\n    );\n    padding-inline: 0;\n  }\n\n  :host([disabled]) ::slotted(button),\n  :host([pending]) ::slotted(button),\n  :host([progress]) ::slotted(button) {\n    cursor: default;\n  }\n\n  :host([pending]) ::slotted(button),\n  :host([progress]) ::slotted(button) {\n    color: var(--rc-button-busy-content-color, transparent);\n  }\n\n  :host([disabled]) ::slotted(button) {\n    opacity: var(--rc-button-disabled-opacity, revert);\n  }\n\n  [part='state-layer'],\n  [part='progress'] {\n    position: absolute;\n    inset: 0;\n    border-radius: var(--rc-button-radius, 0);\n    pointer-events: none;\n  }\n\n  [part='state-layer'] {\n    overflow: hidden;\n    z-index: 1;\n  }\n\n  [part='state-layer']::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background: var(--rc-button-state-layer-bg, currentColor);\n    opacity: 0;\n    transition: opacity var(--rc-button-state-layer-duration, 150ms)\n      var(--rc-button-state-layer-easing, ease);\n  }\n\n  [part='state-layer']::after {\n    content: '';\n    position: absolute;\n    inset-inline-start: var(--_rc-button-ripple-x, 50%);\n    inset-block-start: var(--_rc-button-ripple-y, 50%);\n    inline-size: var(--_rc-button-ripple-size, 0);\n    block-size: var(--_rc-button-ripple-size, 0);\n    border-radius: 50%;\n    background: var(--_rc-button-ripple-color, currentColor);\n    opacity: 0;\n    pointer-events: none;\n    translate: -50% -50%;\n    scale: 0;\n  }\n\n  [part='state-layer'][data-rippling]::after {\n    animation: rc-button-ripple var(--_rc-button-ripple-duration, 0ms)\n      var(--_rc-button-ripple-easing, ease-out);\n  }\n\n  :host(:hover:not([disabled]):not([pending]):not([progress])) [part='state-layer']::before {\n    opacity: var(--rc-button-hover-state-layer-opacity, 0);\n  }\n\n  :host(:focus-within:not([disabled])) [part='state-layer']::before {\n    opacity: var(--rc-button-focus-state-layer-opacity, 0);\n  }\n\n  :host(:active:not([disabled]):not([pending]):not([progress])) [part='state-layer']::before {\n    opacity: var(--rc-button-pressed-state-layer-opacity, 0);\n  }\n\n  [part='progress'] {\n    display: none;\n    place-items: center;\n    color: var(--rc-button-progress-color, currentColor);\n    font: var(--rc-button-progress-font, 600 0.75rem / 1 sans-serif);\n    font-variant-numeric: tabular-nums;\n    z-index: 2;\n  }\n\n  :host([pending]) [part='progress'],\n  :host([progress]) [part='progress'] {\n    display: grid;\n  }\n\n  [part='progress']::before {\n    content: '';\n    box-sizing: border-box;\n    inline-size: var(--rc-button-progress-size, 1.25rem);\n    block-size: var(--rc-button-progress-size, 1.25rem);\n    border: var(--rc-button-progress-track-width, 2px) solid\n      var(--rc-button-progress-track-color, color-mix(in srgb, currentColor 24%, transparent));\n    border-block-start-color: var(--rc-button-progress-active-color, currentColor);\n    border-radius: 9999px;\n    animation: rc-button-progress-spin 900ms linear infinite;\n  }\n\n  [part='progress'][data-determinate]::before {\n    display: none;\n  }\n\n  @keyframes rc-button-progress-spin {\n    to {\n      rotate: 1turn;\n    }\n  }\n\n  @keyframes rc-button-ripple {\n    from {\n      opacity: var(--_rc-button-ripple-opacity, 0);\n      scale: 0;\n    }\n\n    70% {\n      opacity: var(--_rc-button-ripple-opacity, 0);\n    }\n\n    to {\n      opacity: 0;\n      scale: 1;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    [part='state-layer'][data-rippling]::after {\n      animation-duration: 0ms;\n    }\n\n    [part='progress']::before {\n      animation-duration: 2s;\n    }\n  }\n\n  @media (forced-colors: active) {\n    ::slotted(button) {\n      border-color: ButtonBorder;\n      background: ButtonFace;\n      color: ButtonText;\n    }\n\n    [part='state-layer']::before {\n      background: Highlight;\n    }\n  }\n`;\n\nexport default buttonStyles;\n","import { LitElement, html } from 'lit';\nimport type { PropertyValues } from 'lit';\nimport { property, query } from 'lit/decorators.js';\n\nimport buttonStyles from './rc-button.styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'rc-button': RCButton;\n  }\n\n  interface HTMLElementEventMap {\n    'rc-button-toggle': CustomEvent<RCButtonToggleDetail>;\n  }\n}\n\nconst LIGHT_DOM_CSS = `\n@layer rc-base {\n  /*\n   * Icon-font utility classes commonly set display outside cascade layers.\n   * Hiding the inactive icon is structural, so it must win that declaration.\n   */\n  rc-button[selected] > button > [data-rc-button-icon] {\n    display: none !important;\n  }\n\n  rc-button:not([selected]) > button > [data-rc-button-selected-icon] {\n    display: none !important;\n  }\n}\n`;\n\nconst ACTIVATION_KEYS = new Set(['Enter', ' ']);\n\n/** Detail payload for `rc-button-toggle`. */\nexport interface RCButtonToggleDetail {\n  /** Requested selected state after user activation. */\n  selected: boolean;\n}\n\n/**\n * Structural button wrapper that preserves a direct native `<button>` child for\n * progressive enhancement, forms, labels, and keyboard behavior.\n *\n * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-button rc-button docs}\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/button/ WAI-ARIA button pattern}\n *\n * @slot - A direct native `<button>` child.\n *\n * @fires rc-button-toggle - Fired when a user activates a button with `toggle`.\n *\n * @csspart state-layer - Overlay layer for hover, focus, pressed, ripple, or design-system effects.\n * @csspart progress - Non-interactive progress affordance overlay shown for `pending` or `progress`.\n *\n * @attr disabled - Mirrors disabled state to the native child button.\n * @attr pending - Disables the native button and exposes an indeterminate progress affordance.\n * @attr progress - Disables the native button and exposes a progress affordance.\n * @attr progress-value - Optional determinate progress percentage, clamped from 0 through 100.\n * @attr toggle - Opts the native child into APG toggle-button behavior.\n * @attr selected - Controlled selected state for toggle semantics, styling, and icon switching.\n * @attr default-selected - Initial selected state for uncontrolled toggle usage.\n * @attr icon-only - Removes label-oriented inline padding in supporting themes.\n * @attr full-width - Stretches the native child button to the host inline size.\n * @attr [has-icon] - Present when the native button has a direct `[data-rc-button-icon]` child.\n *   Use with CSS selectors (e.g. `rc-button[has-icon]`).\n * @attr [has-selected-icon] - Present when the native button has a direct\n *   `[data-rc-button-selected-icon]` child.\n * @attr [has-label] - Present when the native button has visible label content, from either a\n *   `[data-rc-button-label]` child or bare text.\n *\n * @cssprop [--rc-button-gap] - Gap between icon and label content.\n * @cssprop [--rc-button-block-size] - Minimum button block size.\n * @cssprop [--rc-button-min-inline-size] - Minimum button inline size.\n * @cssprop [--rc-button-inline-size] - Button inline size.\n * @cssprop [--rc-button-padding-block] - Button block-axis padding (defers to native button\n *   padding when unset).\n * @cssprop [--rc-button-padding-inline] - Button inline-axis padding (defers to native button\n *   padding when unset).\n * @cssprop [--rc-button-border] - Button border (defers to native button border when unset).\n * @cssprop [--rc-button-radius] - Button and overlay border radius (defers to native button\n *   radius when unset).\n * @cssprop [--rc-button-bg] - Button background (defers to native button background when unset).\n * @cssprop [--rc-button-color] - Button text color (defers to native button color when unset).\n * @cssprop [--rc-button-shadow] - Button box shadow (defers to native button shadow when unset).\n * @cssprop [--rc-button-font] - Button font shorthand (defers to native button font when unset).\n * @cssprop [--rc-button-transition] - Button transition shorthand (defers to native button\n *   transition when unset).\n * @cssprop [--rc-button-icon-size] - Button inline and min-inline size when `icon-only`. Falls\n *   back to `--rc-button-block-size`, then `--rc-control-block-size`, then `2.5rem`.\n * @cssprop [--rc-button-disabled-opacity] - Disabled button opacity (defers to native disabled\n *   styling when unset).\n * @cssprop [--rc-button-busy-content-color=transparent] - Button text color while `pending` or\n *   `progress`.\n * @cssprop [--rc-button-state-layer-bg=currentColor] - State-layer overlay color.\n * @cssprop [--rc-button-state-layer-duration=150ms] - State-layer opacity transition duration.\n * @cssprop [--rc-button-state-layer-easing=ease] - State-layer opacity transition easing.\n * @cssprop [--rc-button-hover-state-layer-opacity=0] - State-layer opacity on hover.\n * @cssprop [--rc-button-focus-state-layer-opacity=0] - State-layer opacity on focus-within.\n * @cssprop [--rc-button-pressed-state-layer-opacity=0] - State-layer opacity on active press.\n * @cssprop [--rc-button-progress-color=currentColor] - Progress affordance color.\n * @cssprop [--rc-button-progress-font=600 0.75rem / 1 sans-serif] - Determinate progress\n *   percentage font.\n * @cssprop [--rc-button-progress-size=1.25rem] - Indeterminate progress spinner diameter.\n * @cssprop [--rc-button-progress-track-width=2px] - Indeterminate progress spinner stroke width.\n * @cssprop [--rc-button-progress-track-color=color-mix(in srgb, currentColor 24%, transparent)] -\n *   Indeterminate progress spinner track color.\n * @cssprop [--rc-button-progress-active-color=currentColor] - Indeterminate progress spinner\n *   active arc color.\n */\nexport class RCButton extends LitElement {\n  static override styles = buttonStyles;\n\n  protected static readonly _styledRoots = new Set<Document | ShadowRoot>();\n\n  protected static _ensureBaseStyles(root: Document | ShadowRoot): void {\n    if (RCButton._styledRoots.has(root)) {\n      return;\n    }\n\n    RCButton._styledRoots.add(root);\n\n    const style = document.createElement('style');\n\n    style.setAttribute('data-rc-light-dom-base', 'rc-button');\n    style.textContent = LIGHT_DOM_CSS;\n\n    if (root instanceof Document) {\n      root.head.append(style);\n    } else {\n      root.append(style);\n    }\n  }\n\n  /** Mirror disabled state to the native child. */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Show an indeterminate progress affordance and disable the native button. */\n  @property({ type: Boolean, reflect: true })\n  pending = false;\n\n  /** Show a progress affordance and disable the native button. */\n  @property({ type: Boolean, reflect: true })\n  progress = false;\n\n  /** Optional determinate progress percentage, clamped from 0 through 100. */\n  @property({ type: Number, attribute: 'progress-value', reflect: true })\n  progressValue: number | undefined;\n\n  /** Opt the native child into APG toggle-button behavior. */\n  @property({ type: Boolean, reflect: true })\n  toggle = false;\n\n  /** Controlled selected state. Host writes are silent. */\n  @property({ type: Boolean, reflect: true })\n  get selected(): boolean {\n    return this._selected ?? this._uncontrolledSelected ?? this._defaultSelected;\n  }\n\n  set selected(value: boolean | undefined) {\n    const oldValue = this.selected;\n\n    this._selected = value;\n    this._selectedInitialized = true;\n    this._syncPressedState();\n    this.requestUpdate('selected', oldValue);\n  }\n\n  /** Initial selected state for uncontrolled toggle usage. */\n  @property({ type: Boolean, attribute: 'default-selected' })\n  get defaultSelected(): boolean {\n    return this._defaultSelected;\n  }\n\n  set defaultSelected(value: boolean) {\n    const oldValue = this._defaultSelected;\n\n    this._defaultSelected = value;\n\n    if (!this._selectedInitialized && this._selected === undefined) {\n      this._syncPressedState();\n      this.requestUpdate('selected', oldValue);\n    }\n\n    this.requestUpdate('defaultSelected', oldValue);\n  }\n\n  /** Icon-only layout hint. May also be reflected by child classification. */\n  @property({ type: Boolean, attribute: 'icon-only', reflect: true })\n  iconOnly = false;\n\n  /** Stretch the native child button to the host inline size. */\n  @property({ type: Boolean, attribute: 'full-width', reflect: true })\n  fullWidth = false;\n\n  @query('slot') protected _$slot!: HTMLSlotElement;\n\n  @query('[part=\"state-layer\"]') protected _$stateLayer!: HTMLElement;\n\n  private _selected: boolean | undefined;\n  private _defaultSelected = false;\n  private _uncontrolledSelected: boolean | undefined;\n  private _selectedInitialized = false;\n  protected _$button: HTMLButtonElement | null = null;\n  protected _buttonObserver: MutationObserver | null = null;\n  protected _disabledOwned = false;\n  protected _ariaBusyOwned = false;\n  protected _pressedOwned = false;\n  protected _authorPressed: string | null = null;\n  protected _iconOnlyOwned = false;\n  protected _slotMicrotaskQueued = false;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    RCButton._ensureBaseStyles(this.getRootNode() as Document | ShadowRoot);\n  }\n\n  override disconnectedCallback(): void {\n    this._buttonObserver?.disconnect();\n    this._buttonObserver = null;\n    super.disconnectedCallback();\n  }\n\n  protected override firstUpdated(): void {\n    this._syncSlottedButton();\n  }\n\n  protected override updated(changed: PropertyValues<this>): void {\n    if (changed.has('disabled') || changed.has('pending') || changed.has('progress')) {\n      this._syncNativeState();\n    }\n\n    if (changed.has('toggle') || changed.has('selected')) {\n      this._syncPressedState();\n    }\n  }\n\n  protected override render() {\n    const progressPercentage = this._progressPercentage;\n\n    return html`\n      <slot @slotchange=${this._handleSlotChange}></slot>\n      <span\n        part=\"state-layer\"\n        aria-hidden=\"true\"\n        @animationend=${this._handleRippleAnimationEnd}\n      ></span>\n      <span part=\"progress\" aria-hidden=\"true\" ?data-determinate=${progressPercentage !== undefined}\n        >${progressPercentage === undefined ? '' : `${progressPercentage}%`}</span\n      >\n    `;\n  }\n\n  protected get _progressPercentage(): number | undefined {\n    if (!this.progress || !Number.isFinite(this.progressValue)) {\n      return undefined;\n    }\n\n    return Math.round(Math.min(100, Math.max(0, this.progressValue!)));\n  }\n\n  protected _handleSlotChange(): void {\n    if (this._slotMicrotaskQueued) {\n      return;\n    }\n\n    this._slotMicrotaskQueued = true;\n\n    queueMicrotask(() => {\n      this._slotMicrotaskQueued = false;\n\n      if (!this.isConnected) {\n        return;\n      }\n\n      this._syncSlottedButton();\n    });\n  }\n\n  protected _syncSlottedButton(): void {\n    const nextButton =\n      this._$slot\n        ?.assignedElements({ flatten: true })\n        .find(\n          (element): element is HTMLButtonElement =>\n            element instanceof HTMLButtonElement && element.parentElement === this,\n        ) ?? null;\n\n    if (!nextButton && import.meta.env.DEV) {\n      const misplaced = this.querySelector(\n        ':scope > [data-rc-button-icon], :scope > [data-rc-button-selected-icon], :scope > [data-rc-button-label]',\n      );\n\n      console.warn(\n        misplaced\n          ? '[rc-button] Place icon and label markers inside the direct child <button>; rc-button will not move author nodes.'\n          : '[rc-button] No direct child <button> found. Place a native <button> inside <rc-button>.',\n      );\n    }\n\n    if (nextButton === this._$button) {\n      this._classifyButton();\n      this._syncNativeState();\n      this._syncPressedState();\n\n      return;\n    }\n\n    this._restorePressedState();\n    this._buttonObserver?.disconnect();\n    this._buttonObserver = null;\n    this._$button = nextButton;\n    this._disabledOwned = false;\n    this._ariaBusyOwned = false;\n    this._pressedOwned = false;\n    this._authorPressed = nextButton?.getAttribute('aria-pressed') ?? null;\n\n    if (nextButton) {\n      this._buttonObserver = new MutationObserver(() => {\n        this._classifyButton();\n        this._syncNativeState();\n        this._syncPressedState();\n      });\n\n      this._buttonObserver.observe(nextButton, {\n        attributes: true,\n        childList: true,\n        subtree: true,\n        characterData: true,\n      });\n    }\n\n    this._classifyButton();\n    this._syncNativeState();\n    this._syncPressedState();\n  }\n\n  protected _classifyButton(): void {\n    const button = this._$button;\n    const hasIcon = !!button?.querySelector(':scope > [data-rc-button-icon]');\n    const hasSelectedIcon = !!button?.querySelector(':scope > [data-rc-button-selected-icon]');\n    const hasLabel = this._hasLabel(button);\n\n    this.toggleAttribute('has-icon', hasIcon);\n    this.toggleAttribute('has-selected-icon', hasSelectedIcon);\n    this.toggleAttribute('has-label', hasLabel);\n\n    if (button && hasIcon && !hasLabel) {\n      if (!this.iconOnly) {\n        this._iconOnlyOwned = true;\n        this.iconOnly = true;\n      }\n    } else if (this._iconOnlyOwned) {\n      this._iconOnlyOwned = false;\n      this.iconOnly = false;\n    }\n  }\n\n  protected _hasLabel(button: HTMLButtonElement | null): boolean {\n    if (!button) {\n      return false;\n    }\n\n    if (button.querySelector(':scope > [data-rc-button-label]')) {\n      return true;\n    }\n\n    for (const node of button.childNodes) {\n      if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) {\n        return true;\n      }\n\n      if (!(node instanceof HTMLElement)) {\n        continue;\n      }\n\n      // data-rc-button-progress marks consumer content that must not count as a label.\n      if (\n        node.matches(\n          '[data-rc-button-icon], [data-rc-button-selected-icon], [data-rc-button-progress], [aria-hidden=\"true\"]',\n        )\n      ) {\n        continue;\n      }\n\n      if (node.textContent?.trim()) {\n        return true;\n      }\n    }\n\n    return false;\n  }\n\n  protected _syncNativeState(): void {\n    const button = this._$button;\n\n    if (!button) {\n      return;\n    }\n\n    const shouldDisable = this.disabled || this.pending || this.progress;\n\n    if (shouldDisable && !button.disabled) {\n      this._disabledOwned = true;\n\n      // Idempotent disabled writes queue mutation records and re-enter the button observer.\n      button.disabled = true;\n    } else if (!shouldDisable && this._disabledOwned) {\n      button.disabled = false;\n      this._disabledOwned = false;\n    }\n\n    const busy = this.pending || this.progress;\n\n    if (busy) {\n      if (!button.hasAttribute('aria-busy')) {\n        button.setAttribute('aria-busy', 'true');\n        this._ariaBusyOwned = true;\n      }\n    } else if (this._ariaBusyOwned) {\n      button.removeAttribute('aria-busy');\n      this._ariaBusyOwned = false;\n    }\n  }\n\n  protected _syncPressedState(): void {\n    const button = this._$button;\n\n    if (!button) {\n      return;\n    }\n\n    if (this.toggle) {\n      const pressed = this.selected ? 'true' : 'false';\n\n      if (button.getAttribute('aria-pressed') !== pressed) {\n        button.setAttribute('aria-pressed', pressed);\n      }\n\n      this._pressedOwned = true;\n    } else if (this._pressedOwned) {\n      this._restorePressedState();\n    }\n  }\n\n  protected _restorePressedState(): void {\n    const button = this._$button;\n\n    if (!button || !this._pressedOwned) {\n      return;\n    }\n\n    if (this._authorPressed === null) {\n      button.removeAttribute('aria-pressed');\n    } else {\n      button.setAttribute('aria-pressed', this._authorPressed);\n    }\n\n    this._pressedOwned = false;\n  }\n\n  protected _handleToggleActivation(event: MouseEvent): void {\n    if (\n      !this.toggle ||\n      this.disabled ||\n      this.pending ||\n      this.progress ||\n      event.defaultPrevented ||\n      !this._isChildButtonEvent(event)\n    ) {\n      return;\n    }\n\n    const oldValue = this.selected;\n    const nextSelected = !oldValue;\n\n    if (this._selected === undefined) {\n      this._uncontrolledSelected = nextSelected;\n      this._selectedInitialized = true;\n      this._syncPressedState();\n      this.requestUpdate('selected', oldValue);\n    }\n\n    this.dispatchEvent(\n      new CustomEvent<RCButtonToggleDetail>('rc-button-toggle', {\n        bubbles: true,\n        composed: true,\n        detail: { selected: nextSelected },\n      }),\n    );\n  }\n\n  protected _shouldBlockActivation(): boolean {\n    return this.pending || this.progress;\n  }\n\n  protected _isChildButtonEvent(event: Event): boolean {\n    return !!this._$button && event.composedPath().includes(this._$button);\n  }\n\n  protected _blockActivation(event: Event): void {\n    if (!this._shouldBlockActivation() || !this._isChildButtonEvent(event)) {\n      return;\n    }\n\n    event.preventDefault();\n    event.stopImmediatePropagation();\n  }\n\n  protected _startRipple(event: PointerEvent): void {\n    if (\n      !event.isPrimary ||\n      event.button !== 0 ||\n      this.disabled ||\n      this.pending ||\n      this.progress ||\n      !this._isChildButtonEvent(event) ||\n      !this._$stateLayer ||\n      getComputedStyle(this).getPropertyValue('--_rc-button-ripple-enabled').trim() !== '1'\n    ) {\n      return;\n    }\n\n    const bounds = this._$button!.getBoundingClientRect();\n    const x = event.clientX - bounds.left;\n    const y = event.clientY - bounds.top;\n    const radius = Math.hypot(Math.max(x, bounds.width - x), Math.max(y, bounds.height - y));\n\n    this._$stateLayer.style.setProperty('--_rc-button-ripple-x', `${x}px`);\n    this._$stateLayer.style.setProperty('--_rc-button-ripple-y', `${y}px`);\n    this._$stateLayer.style.setProperty('--_rc-button-ripple-size', `${radius * 2}px`);\n    this._$stateLayer.removeAttribute('data-rippling');\n    this._$stateLayer.getBoundingClientRect();\n    this._$stateLayer.setAttribute('data-rippling', '');\n  }\n\n  protected _handleRippleAnimationEnd(event: AnimationEvent): void {\n    if (event.animationName === 'rc-button-ripple') {\n      this._$stateLayer.removeAttribute('data-rippling');\n    }\n  }\n\n  constructor() {\n    super();\n\n    this.addEventListener('pointerdown', this._startRipple, { capture: true });\n    this.addEventListener('click', this._blockActivation, { capture: true });\n    this.addEventListener('click', this._handleToggleActivation);\n\n    this.addEventListener(\n      'keydown',\n      (event) => {\n        if (ACTIVATION_KEYS.has(event.key)) {\n          this._blockActivation(event);\n        }\n      },\n      { capture: true },\n    );\n  }\n}\n\nexport default RCButton;\n"],"names":["buttonStyles","css","LIGHT_DOM_CSS","ACTIVATION_KEYS","_RCButton","_a","LitElement","event","root","style","value","oldValue","changed","progressPercentage","html","nextButton","element","button","hasIcon","hasSelectedIcon","hasLabel","node","shouldDisable","pressed","nextSelected","bounds","x","y","radius","__decorateClass","property","query","RCButton"],"mappings":"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"}

package/dist/rc-button-define.js

@@ -0,0 +1,6 @@
+import { R as t } from "./rc-button-Ct5C14lN.js";
+customElements.get("rc-button") || customElements.define("rc-button", t);
+export {
+  t as RCButton
+};
+//# sourceMappingURL=rc-button-define.js.map

package/dist/rc-button-define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-button-define.js","sources":["../src/define.ts"],"sourcesContent":["import { RCButton } from './index.js';\n\ncustomElements.get('rc-button') || customElements.define('rc-button', RCButton);\n\nexport * from './index.js';\n"],"names":["RCButton"],"mappings":";AAEA,eAAe,IAAI,WAAW,KAAK,eAAe,OAAO,aAAaA,CAAQ;"}

package/dist/rc-button.js

@@ -0,0 +1,5 @@
+import { R as r } from "./rc-button-Ct5C14lN.js";
+export {
+  r as RCButton
+};
+//# sourceMappingURL=rc-button.js.map

package/dist/rc-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-button.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/types/packages/rc-button/src/define.d.ts

@@ -0,0 +1 @@
+export * from './index.js';

package/dist/types/packages/rc-button/src/index.d.ts

@@ -0,0 +1 @@
+export * from './rc-button.js';

package/dist/types/packages/rc-button/src/rc-button.d.ts

@@ -0,0 +1,143 @@
+import { LitElement, PropertyValues } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'rc-button': RCButton;
+    }
+    interface HTMLElementEventMap {
+        'rc-button-toggle': CustomEvent<RCButtonToggleDetail>;
+    }
+}
+/** Detail payload for `rc-button-toggle`. */
+export interface RCButtonToggleDetail {
+    /** Requested selected state after user activation. */
+    selected: boolean;
+}
+/**
+ * Structural button wrapper that preserves a direct native `<button>` child for
+ * progressive enhancement, forms, labels, and keyboard behavior.
+ *
+ * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-button rc-button docs}
+ * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/button/ WAI-ARIA button pattern}
+ *
+ * @slot - A direct native `<button>` child.
+ *
+ * @fires rc-button-toggle - Fired when a user activates a button with `toggle`.
+ *
+ * @csspart state-layer - Overlay layer for hover, focus, pressed, ripple, or design-system effects.
+ * @csspart progress - Non-interactive progress affordance overlay shown for `pending` or `progress`.
+ *
+ * @attr disabled - Mirrors disabled state to the native child button.
+ * @attr pending - Disables the native button and exposes an indeterminate progress affordance.
+ * @attr progress - Disables the native button and exposes a progress affordance.
+ * @attr progress-value - Optional determinate progress percentage, clamped from 0 through 100.
+ * @attr toggle - Opts the native child into APG toggle-button behavior.
+ * @attr selected - Controlled selected state for toggle semantics, styling, and icon switching.
+ * @attr default-selected - Initial selected state for uncontrolled toggle usage.
+ * @attr icon-only - Removes label-oriented inline padding in supporting themes.
+ * @attr full-width - Stretches the native child button to the host inline size.
+ * @attr [has-icon] - Present when the native button has a direct `[data-rc-button-icon]` child.
+ *   Use with CSS selectors (e.g. `rc-button[has-icon]`).
+ * @attr [has-selected-icon] - Present when the native button has a direct
+ *   `[data-rc-button-selected-icon]` child.
+ * @attr [has-label] - Present when the native button has visible label content, from either a
+ *   `[data-rc-button-label]` child or bare text.
+ *
+ * @cssprop [--rc-button-gap] - Gap between icon and label content.
+ * @cssprop [--rc-button-block-size] - Minimum button block size.
+ * @cssprop [--rc-button-min-inline-size] - Minimum button inline size.
+ * @cssprop [--rc-button-inline-size] - Button inline size.
+ * @cssprop [--rc-button-padding-block] - Button block-axis padding (defers to native button
+ *   padding when unset).
+ * @cssprop [--rc-button-padding-inline] - Button inline-axis padding (defers to native button
+ *   padding when unset).
+ * @cssprop [--rc-button-border] - Button border (defers to native button border when unset).
+ * @cssprop [--rc-button-radius] - Button and overlay border radius (defers to native button
+ *   radius when unset).
+ * @cssprop [--rc-button-bg] - Button background (defers to native button background when unset).
+ * @cssprop [--rc-button-color] - Button text color (defers to native button color when unset).
+ * @cssprop [--rc-button-shadow] - Button box shadow (defers to native button shadow when unset).
+ * @cssprop [--rc-button-font] - Button font shorthand (defers to native button font when unset).
+ * @cssprop [--rc-button-transition] - Button transition shorthand (defers to native button
+ *   transition when unset).
+ * @cssprop [--rc-button-icon-size] - Button inline and min-inline size when `icon-only`. Falls
+ *   back to `--rc-button-block-size`, then `--rc-control-block-size`, then `2.5rem`.
+ * @cssprop [--rc-button-disabled-opacity] - Disabled button opacity (defers to native disabled
+ *   styling when unset).
+ * @cssprop [--rc-button-busy-content-color=transparent] - Button text color while `pending` or
+ *   `progress`.
+ * @cssprop [--rc-button-state-layer-bg=currentColor] - State-layer overlay color.
+ * @cssprop [--rc-button-state-layer-duration=150ms] - State-layer opacity transition duration.
+ * @cssprop [--rc-button-state-layer-easing=ease] - State-layer opacity transition easing.
+ * @cssprop [--rc-button-hover-state-layer-opacity=0] - State-layer opacity on hover.
+ * @cssprop [--rc-button-focus-state-layer-opacity=0] - State-layer opacity on focus-within.
+ * @cssprop [--rc-button-pressed-state-layer-opacity=0] - State-layer opacity on active press.
+ * @cssprop [--rc-button-progress-color=currentColor] - Progress affordance color.
+ * @cssprop [--rc-button-progress-font=600 0.75rem / 1 sans-serif] - Determinate progress
+ *   percentage font.
+ * @cssprop [--rc-button-progress-size=1.25rem] - Indeterminate progress spinner diameter.
+ * @cssprop [--rc-button-progress-track-width=2px] - Indeterminate progress spinner stroke width.
+ * @cssprop [--rc-button-progress-track-color=color-mix(in srgb, currentColor 24%, transparent)] -
+ *   Indeterminate progress spinner track color.
+ * @cssprop [--rc-button-progress-active-color=currentColor] - Indeterminate progress spinner
+ *   active arc color.
+ */
+export declare class RCButton extends LitElement {
+    static styles: import('lit').CSSResult;
+    protected static readonly _styledRoots: Set<Document | ShadowRoot>;
+    protected static _ensureBaseStyles(root: Document | ShadowRoot): void;
+    /** Mirror disabled state to the native child. */
+    disabled: boolean;
+    /** Show an indeterminate progress affordance and disable the native button. */
+    pending: boolean;
+    /** Show a progress affordance and disable the native button. */
+    progress: boolean;
+    /** Optional determinate progress percentage, clamped from 0 through 100. */
+    progressValue: number | undefined;
+    /** Opt the native child into APG toggle-button behavior. */
+    toggle: boolean;
+    /** Controlled selected state. Host writes are silent. */
+    get selected(): boolean;
+    set selected(value: boolean | undefined);
+    /** Initial selected state for uncontrolled toggle usage. */
+    get defaultSelected(): boolean;
+    set defaultSelected(value: boolean);
+    /** Icon-only layout hint. May also be reflected by child classification. */
+    iconOnly: boolean;
+    /** Stretch the native child button to the host inline size. */
+    fullWidth: boolean;
+    protected _$slot: HTMLSlotElement;
+    protected _$stateLayer: HTMLElement;
+    private _selected;
+    private _defaultSelected;
+    private _uncontrolledSelected;
+    private _selectedInitialized;
+    protected _$button: HTMLButtonElement | null;
+    protected _buttonObserver: MutationObserver | null;
+    protected _disabledOwned: boolean;
+    protected _ariaBusyOwned: boolean;
+    protected _pressedOwned: boolean;
+    protected _authorPressed: string | null;
+    protected _iconOnlyOwned: boolean;
+    protected _slotMicrotaskQueued: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    protected updated(changed: PropertyValues<this>): void;
+    protected render(): import('lit').TemplateResult<1>;
+    protected get _progressPercentage(): number | undefined;
+    protected _handleSlotChange(): void;
+    protected _syncSlottedButton(): void;
+    protected _classifyButton(): void;
+    protected _hasLabel(button: HTMLButtonElement | null): boolean;
+    protected _syncNativeState(): void;
+    protected _syncPressedState(): void;
+    protected _restorePressedState(): void;
+    protected _handleToggleActivation(event: MouseEvent): void;
+    protected _shouldBlockActivation(): boolean;
+    protected _isChildButtonEvent(event: Event): boolean;
+    protected _blockActivation(event: Event): void;
+    protected _startRipple(event: PointerEvent): void;
+    protected _handleRippleAnimationEnd(event: AnimationEvent): void;
+    constructor();
+}
+export default RCButton;

package/dist/types/packages/rc-button/src/rc-button.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const buttonStyles: import('lit').CSSResult;
+export default buttonStyles;