@cruglobal/cornerstone-components 0.1.3 → 0.6.1

package/dist/bundled/chunks/chunk.G7UCSRIQ.js

@@ -0,0 +1,342 @@
+/*! Cornerstone Components 0.6.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  D,
+  E
+} from "./chunk.FQUMEV4X.js";
+
+// ../../node_modules/@lit/reactive-element/css-tag.js
+var t = globalThis;
+var e = t.ShadowRoot && (void 0 === t.ShadyCSS || t.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype;
+var s = /* @__PURE__ */ Symbol();
+var o = /* @__PURE__ */ new WeakMap();
+var n = class {
+  constructor(t2, e3, o5) {
+    if (this._$cssResult$ = true, o5 !== s) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+    this.cssText = t2, this.t = e3;
+  }
+  get styleSheet() {
+    let t2 = this.o;
+    const s3 = this.t;
+    if (e && void 0 === t2) {
+      const e3 = void 0 !== s3 && 1 === s3.length;
+      e3 && (t2 = o.get(s3)), void 0 === t2 && ((this.o = t2 = new CSSStyleSheet()).replaceSync(this.cssText), e3 && o.set(s3, t2));
+    }
+    return t2;
+  }
+  toString() {
+    return this.cssText;
+  }
+};
+var r = (t2) => new n("string" == typeof t2 ? t2 : t2 + "", void 0, s);
+var i = (t2, ...e3) => {
+  const o5 = 1 === t2.length ? t2[0] : e3.reduce((e4, s3, o6) => e4 + ((t3) => {
+    if (true === t3._$cssResult$) return t3.cssText;
+    if ("number" == typeof t3) return t3;
+    throw Error("Value passed to 'css' function must be a 'css' function result: " + t3 + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
+  })(s3) + t2[o6 + 1], t2[0]);
+  return new n(o5, t2, s);
+};
+var S = (s3, o5) => {
+  if (e) s3.adoptedStyleSheets = o5.map((t2) => t2 instanceof CSSStyleSheet ? t2 : t2.styleSheet);
+  else for (const e3 of o5) {
+    const o6 = document.createElement("style"), n4 = t.litNonce;
+    void 0 !== n4 && o6.setAttribute("nonce", n4), o6.textContent = e3.cssText, s3.appendChild(o6);
+  }
+};
+var c = e ? (t2) => t2 : (t2) => t2 instanceof CSSStyleSheet ? ((t3) => {
+  let e3 = "";
+  for (const s3 of t3.cssRules) e3 += s3.cssText;
+  return r(e3);
+})(t2) : t2;
+
+// ../../node_modules/@lit/reactive-element/reactive-element.js
+var { is: i2, defineProperty: e2, getOwnPropertyDescriptor: h, getOwnPropertyNames: r2, getOwnPropertySymbols: o2, getPrototypeOf: n2 } = Object;
+var a = globalThis;
+var c2 = a.trustedTypes;
+var l = c2 ? c2.emptyScript : "";
+var p = a.reactiveElementPolyfillSupport;
+var d = (t2, s3) => t2;
+var u = { toAttribute(t2, s3) {
+  switch (s3) {
+    case Boolean:
+      t2 = t2 ? l : null;
+      break;
+    case Object:
+    case Array:
+      t2 = null == t2 ? t2 : JSON.stringify(t2);
+  }
+  return t2;
+}, fromAttribute(t2, s3) {
+  let i4 = t2;
+  switch (s3) {
+    case Boolean:
+      i4 = null !== t2;
+      break;
+    case Number:
+      i4 = null === t2 ? null : Number(t2);
+      break;
+    case Object:
+    case Array:
+      try {
+        i4 = JSON.parse(t2);
+      } catch (t3) {
+        i4 = null;
+      }
+  }
+  return i4;
+} };
+var f = (t2, s3) => !i2(t2, s3);
+var b = { attribute: true, type: String, converter: u, reflect: false, useDefault: false, hasChanged: f };
+Symbol.metadata ?? (Symbol.metadata = /* @__PURE__ */ Symbol("metadata")), a.litPropertyMetadata ?? (a.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
+var y = class extends HTMLElement {
+  static addInitializer(t2) {
+    this._$Ei(), (this.l ?? (this.l = [])).push(t2);
+  }
+  static get observedAttributes() {
+    return this.finalize(), this._$Eh && [...this._$Eh.keys()];
+  }
+  static createProperty(t2, s3 = b) {
+    if (s3.state && (s3.attribute = false), this._$Ei(), this.prototype.hasOwnProperty(t2) && ((s3 = Object.create(s3)).wrapped = true), this.elementProperties.set(t2, s3), !s3.noAccessor) {
+      const i4 = /* @__PURE__ */ Symbol(), h2 = this.getPropertyDescriptor(t2, i4, s3);
+      void 0 !== h2 && e2(this.prototype, t2, h2);
+    }
+  }
+  static getPropertyDescriptor(t2, s3, i4) {
+    const { get: e3, set: r3 } = h(this.prototype, t2) ?? { get() {
+      return this[s3];
+    }, set(t3) {
+      this[s3] = t3;
+    } };
+    return { get: e3, set(s4) {
+      const h2 = e3?.call(this);
+      r3?.call(this, s4), this.requestUpdate(t2, h2, i4);
+    }, configurable: true, enumerable: true };
+  }
+  static getPropertyOptions(t2) {
+    return this.elementProperties.get(t2) ?? b;
+  }
+  static _$Ei() {
+    if (this.hasOwnProperty(d("elementProperties"))) return;
+    const t2 = n2(this);
+    t2.finalize(), void 0 !== t2.l && (this.l = [...t2.l]), this.elementProperties = new Map(t2.elementProperties);
+  }
+  static finalize() {
+    if (this.hasOwnProperty(d("finalized"))) return;
+    if (this.finalized = true, this._$Ei(), this.hasOwnProperty(d("properties"))) {
+      const t3 = this.properties, s3 = [...r2(t3), ...o2(t3)];
+      for (const i4 of s3) this.createProperty(i4, t3[i4]);
+    }
+    const t2 = this[Symbol.metadata];
+    if (null !== t2) {
+      const s3 = litPropertyMetadata.get(t2);
+      if (void 0 !== s3) for (const [t3, i4] of s3) this.elementProperties.set(t3, i4);
+    }
+    this._$Eh = /* @__PURE__ */ new Map();
+    for (const [t3, s3] of this.elementProperties) {
+      const i4 = this._$Eu(t3, s3);
+      void 0 !== i4 && this._$Eh.set(i4, t3);
+    }
+    this.elementStyles = this.finalizeStyles(this.styles);
+  }
+  static finalizeStyles(s3) {
+    const i4 = [];
+    if (Array.isArray(s3)) {
+      const e3 = new Set(s3.flat(1 / 0).reverse());
+      for (const s4 of e3) i4.unshift(c(s4));
+    } else void 0 !== s3 && i4.push(c(s3));
+    return i4;
+  }
+  static _$Eu(t2, s3) {
+    const i4 = s3.attribute;
+    return false === i4 ? void 0 : "string" == typeof i4 ? i4 : "string" == typeof t2 ? t2.toLowerCase() : void 0;
+  }
+  constructor() {
+    super(), this._$Ep = void 0, this.isUpdatePending = false, this.hasUpdated = false, this._$Em = null, this._$Ev();
+  }
+  _$Ev() {
+    this._$ES = new Promise((t2) => this.enableUpdating = t2), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), this.constructor.l?.forEach((t2) => t2(this));
+  }
+  addController(t2) {
+    (this._$EO ?? (this._$EO = /* @__PURE__ */ new Set())).add(t2), void 0 !== this.renderRoot && this.isConnected && t2.hostConnected?.();
+  }
+  removeController(t2) {
+    this._$EO?.delete(t2);
+  }
+  _$E_() {
+    const t2 = /* @__PURE__ */ new Map(), s3 = this.constructor.elementProperties;
+    for (const i4 of s3.keys()) this.hasOwnProperty(i4) && (t2.set(i4, this[i4]), delete this[i4]);
+    t2.size > 0 && (this._$Ep = t2);
+  }
+  createRenderRoot() {
+    const t2 = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
+    return S(t2, this.constructor.elementStyles), t2;
+  }
+  connectedCallback() {
+    this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this.enableUpdating(true), this._$EO?.forEach((t2) => t2.hostConnected?.());
+  }
+  enableUpdating(t2) {
+  }
+  disconnectedCallback() {
+    this._$EO?.forEach((t2) => t2.hostDisconnected?.());
+  }
+  attributeChangedCallback(t2, s3, i4) {
+    this._$AK(t2, i4);
+  }
+  _$ET(t2, s3) {
+    const i4 = this.constructor.elementProperties.get(t2), e3 = this.constructor._$Eu(t2, i4);
+    if (void 0 !== e3 && true === i4.reflect) {
+      const h2 = (void 0 !== i4.converter?.toAttribute ? i4.converter : u).toAttribute(s3, i4.type);
+      this._$Em = t2, null == h2 ? this.removeAttribute(e3) : this.setAttribute(e3, h2), this._$Em = null;
+    }
+  }
+  _$AK(t2, s3) {
+    const i4 = this.constructor, e3 = i4._$Eh.get(t2);
+    if (void 0 !== e3 && this._$Em !== e3) {
+      const t3 = i4.getPropertyOptions(e3), h2 = "function" == typeof t3.converter ? { fromAttribute: t3.converter } : void 0 !== t3.converter?.fromAttribute ? t3.converter : u;
+      this._$Em = e3;
+      const r3 = h2.fromAttribute(s3, t3.type);
+      this[e3] = r3 ?? this._$Ej?.get(e3) ?? r3, this._$Em = null;
+    }
+  }
+  requestUpdate(t2, s3, i4, e3 = false, h2) {
+    if (void 0 !== t2) {
+      const r3 = this.constructor;
+      if (false === e3 && (h2 = this[t2]), i4 ?? (i4 = r3.getPropertyOptions(t2)), !((i4.hasChanged ?? f)(h2, s3) || i4.useDefault && i4.reflect && h2 === this._$Ej?.get(t2) && !this.hasAttribute(r3._$Eu(t2, i4)))) return;
+      this.C(t2, s3, i4);
+    }
+    false === this.isUpdatePending && (this._$ES = this._$EP());
+  }
+  C(t2, s3, { useDefault: i4, reflect: e3, wrapped: h2 }, r3) {
+    i4 && !(this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Map())).has(t2) && (this._$Ej.set(t2, r3 ?? s3 ?? this[t2]), true !== h2 || void 0 !== r3) || (this._$AL.has(t2) || (this.hasUpdated || i4 || (s3 = void 0), this._$AL.set(t2, s3)), true === e3 && this._$Em !== t2 && (this._$Eq ?? (this._$Eq = /* @__PURE__ */ new Set())).add(t2));
+  }
+  async _$EP() {
+    this.isUpdatePending = true;
+    try {
+      await this._$ES;
+    } catch (t3) {
+      Promise.reject(t3);
+    }
+    const t2 = this.scheduleUpdate();
+    return null != t2 && await t2, !this.isUpdatePending;
+  }
+  scheduleUpdate() {
+    return this.performUpdate();
+  }
+  performUpdate() {
+    if (!this.isUpdatePending) return;
+    if (!this.hasUpdated) {
+      if (this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this._$Ep) {
+        for (const [t4, s4] of this._$Ep) this[t4] = s4;
+        this._$Ep = void 0;
+      }
+      const t3 = this.constructor.elementProperties;
+      if (t3.size > 0) for (const [s4, i4] of t3) {
+        const { wrapped: t4 } = i4, e3 = this[s4];
+        true !== t4 || this._$AL.has(s4) || void 0 === e3 || this.C(s4, void 0, i4, e3);
+      }
+    }
+    let t2 = false;
+    const s3 = this._$AL;
+    try {
+      t2 = this.shouldUpdate(s3), t2 ? (this.willUpdate(s3), this._$EO?.forEach((t3) => t3.hostUpdate?.()), this.update(s3)) : this._$EM();
+    } catch (s4) {
+      throw t2 = false, this._$EM(), s4;
+    }
+    t2 && this._$AE(s3);
+  }
+  willUpdate(t2) {
+  }
+  _$AE(t2) {
+    this._$EO?.forEach((t3) => t3.hostUpdated?.()), this.hasUpdated || (this.hasUpdated = true, this.firstUpdated(t2)), this.updated(t2);
+  }
+  _$EM() {
+    this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = false;
+  }
+  get updateComplete() {
+    return this.getUpdateComplete();
+  }
+  getUpdateComplete() {
+    return this._$ES;
+  }
+  shouldUpdate(t2) {
+    return true;
+  }
+  update(t2) {
+    this._$Eq && (this._$Eq = this._$Eq.forEach((t3) => this._$ET(t3, this[t3]))), this._$EM();
+  }
+  updated(t2) {
+  }
+  firstUpdated(t2) {
+  }
+};
+y.elementStyles = [], y.shadowRootOptions = { mode: "open" }, y[d("elementProperties")] = /* @__PURE__ */ new Map(), y[d("finalized")] = /* @__PURE__ */ new Map(), p?.({ ReactiveElement: y }), (a.reactiveElementVersions ?? (a.reactiveElementVersions = [])).push("2.1.2");
+
+// ../../node_modules/lit-html/is-server.js
+var o3 = false;
+
+// ../../node_modules/lit-element/lit-element.js
+var s2 = globalThis;
+var i3 = class extends y {
+  constructor() {
+    super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
+  }
+  createRenderRoot() {
+    var _a;
+    const t2 = super.createRenderRoot();
+    return (_a = this.renderOptions).renderBefore ?? (_a.renderBefore = t2.firstChild), t2;
+  }
+  update(t2) {
+    const r3 = this.render();
+    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t2), this._$Do = D(r3, this.renderRoot, this.renderOptions);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._$Do?.setConnected(true);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._$Do?.setConnected(false);
+  }
+  render() {
+    return E;
+  }
+};
+i3._$litElement$ = true, i3["finalized"] = true, s2.litElementHydrateSupport?.({ LitElement: i3 });
+var o4 = s2.litElementPolyfillSupport;
+o4?.({ LitElement: i3 });
+var n3 = { _$AK: (t2, e3, r3) => {
+  t2._$AK(e3, r3);
+}, _$AL: (t2) => t2._$AL };
+(s2.litElementVersions ?? (s2.litElementVersions = [])).push("4.2.2");
+
+export {
+  i,
+  u,
+  f,
+  y,
+  i3 as i2,
+  n3 as n,
+  o3 as o
+};
+/*! Bundled license information:
+
+@lit/reactive-element/css-tag.js:
+  (**
+   * @license
+   * Copyright 2019 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+@lit/reactive-element/reactive-element.js:
+lit-element/lit-element.js:
+  (**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+lit-html/is-server.js:
+  (**
+   * @license
+   * Copyright 2022 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+*/

package/dist/bundled/chunks/chunk.GBRXKDSF.js

@@ -0,0 +1,375 @@
+/*! Cornerstone Components 0.6.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  i
+} from "./chunk.G7UCSRIQ.js";
+
+// src/components/button/button.styles.ts
+var button_styles_default = i`
+  @layer cs-component {
+    :host {
+      display: inline-block;
+
+      /* Workaround because Chrome doesn't like :host(:has()) below
+       * https://issues.chromium.org/issues/40062355
+       * Firefox doesn't like this nested rule, so both are needed */
+      &:has(cs-badge) {
+        position: relative;
+      }
+    }
+
+    /* Apply relative positioning only when needed to position cs-badge
+     * This avoids creating a new stacking context for every button */
+    :host(:has(cs-badge)) {
+      position: relative;
+    }
+  }
+
+  .button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+    user-select: none;
+    -webkit-user-select: none;
+    white-space: nowrap;
+    vertical-align: middle;
+    transition-property: background, border, box-shadow, color, opacity, transform;
+    transition-duration: var(--cs-transition-fast);
+    transition-timing-function: var(--cs-transition-easing);
+    transform-origin: center;
+    cursor: pointer;
+    padding: 0 var(--cs-form-control-padding-inline);
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: var(--cs-font-weight-action);
+    height: var(--cs-form-control-height);
+    width: 100%;
+
+    background-color: var(--cs-color-fill-loud, var(--cs-color-neutral-fill-loud));
+
+    border-color: transparent;
+    color: var(--cs-color-on-loud, var(--cs-color-neutral-on-loud));
+    border-start-start-radius: var(--_button-start-start-radius, var(--cs-form-control-border-radius));
+    border-start-end-radius: var(--_button-start-end-radius, var(--cs-form-control-border-radius));
+    border-end-start-radius: var(--_button-end-start-radius, var(--cs-form-control-border-radius));
+    border-end-end-radius: var(--_button-end-end-radius, var(--cs-form-control-border-radius));
+    border-style: var(--cs-form-control-border-style);
+    border-width: var(--cs-form-control-border-width);
+  }
+
+  /* Hover and active transforms */
+  .button:not(.disabled):not(.loading) {
+    @media (hover: hover) {
+      &:hover {
+        transform: var(--cs-button-transform-hover);
+      }
+    }
+    &:active {
+      transform: var(--cs-button-transform-active);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      &:hover,
+      &:active {
+        transform: none;
+      }
+    }
+  }
+
+  /* Appearance modifiers */
+  :host([appearance='plain']) {
+    /* Indentation overrides for grouping */
+    margin-inline-start: var(--_button-horizontal-indent);
+    margin-block-start: var(--_button-vertical-indent);
+
+    .button {
+      color: var(--cs-color-on-quiet, var(--cs-color-neutral-on-quiet));
+      background-color: transparent;
+      border-color: transparent;
+    }
+    @media (hover: hover) {
+      .button:not(.disabled):not(.loading):hover {
+        color: var(--cs-color-on-quiet, var(--cs-color-neutral-on-quiet));
+        background-color: var(--cs-color-fill-quiet, var(--cs-color-neutral-fill-quiet));
+      }
+    }
+    .button:not(.disabled):not(.loading):active {
+      color: var(--cs-color-on-quiet, var(--cs-color-neutral-on-quiet));
+      background-color: color-mix(
+        in oklab,
+        var(--cs-color-fill-quiet, var(--cs-color-neutral-fill-quiet)),
+        var(--cs-color-mix-active)
+      );
+    }
+  }
+
+  :host([appearance='outlined']) {
+    /* Indentation overrides for grouping outlined */
+    margin-inline-start: var(--_button-horizontal-indent-outlined);
+    margin-block-start: var(--_button-vertical-indent-outlined);
+
+    .button {
+      color: var(--cs-color-on-quiet, var(--cs-color-neutral-on-quiet));
+      background-color: transparent;
+      border-color: var(--cs-color-border-loud, var(--cs-color-neutral-border-loud));
+    }
+    @media (hover: hover) {
+      .button:not(.disabled):not(.loading):hover {
+        color: var(--cs-color-on-quiet, var(--cs-color-neutral-on-quiet));
+        background-color: var(--cs-color-fill-quiet, var(--cs-color-neutral-fill-quiet));
+      }
+    }
+    .button:not(.disabled):not(.loading):active {
+      color: var(--cs-color-on-quiet, var(--cs-color-neutral-on-quiet));
+      background-color: color-mix(
+        in oklab,
+        var(--cs-color-fill-quiet, var(--cs-color-neutral-fill-quiet)),
+        var(--cs-color-mix-active)
+      );
+    }
+  }
+
+  :host([appearance='filled']) {
+    /* Indentation overrides for grouping */
+    margin-inline-start: var(--_button-horizontal-indent);
+    margin-block-start: var(--_button-vertical-indent);
+
+    .button {
+      color: var(--cs-color-on-normal, var(--cs-color-neutral-on-normal));
+      background-color: var(--cs-color-fill-normal, var(--cs-color-neutral-fill-normal));
+      border-color: transparent;
+    }
+    @media (hover: hover) {
+      .button:not(.disabled):not(.loading):hover {
+        color: var(--cs-color-on-normal, var(--cs-color-neutral-on-normal));
+        background-color: color-mix(
+          in oklab,
+          var(--cs-color-fill-normal, var(--cs-color-neutral-fill-normal)),
+          var(--cs-color-mix-hover)
+        );
+      }
+    }
+    .button:not(.disabled):not(.loading):active {
+      color: var(--cs-color-on-normal, var(--cs-color-neutral-on-normal));
+      background-color: color-mix(
+        in oklab,
+        var(--cs-color-fill-normal, var(--cs-color-neutral-fill-normal)),
+        var(--cs-color-mix-active)
+      );
+    }
+  }
+
+  :host([appearance='filled-outlined']) {
+    /* Indentation overrides for grouping outlined */
+    margin-inline-start: var(--_button-horizontal-indent-outlined);
+    margin-block-start: var(--_button-vertical-indent-outlined);
+
+    .button {
+      color: var(--cs-color-on-normal, var(--cs-color-neutral-on-normal));
+      background-color: var(--cs-color-fill-normal, var(--cs-color-neutral-fill-normal));
+      border-color: var(--cs-color-border-normal, var(--cs-color-neutral-border-normal));
+    }
+    @media (hover: hover) {
+      .button:not(.disabled):not(.loading):hover {
+        color: var(--cs-color-on-normal, var(--cs-color-neutral-on-normal));
+        background-color: color-mix(
+          in oklab,
+          var(--cs-color-fill-normal, var(--cs-color-neutral-fill-normal)),
+          var(--cs-color-mix-hover)
+        );
+      }
+    }
+    .button:not(.disabled):not(.loading):active {
+      color: var(--cs-color-on-normal, var(--cs-color-neutral-on-normal));
+      background-color: color-mix(
+        in oklab,
+        var(--cs-color-fill-normal, var(--cs-color-neutral-fill-normal)),
+        var(--cs-color-mix-active)
+      );
+    }
+  }
+
+  :host([appearance='accent']) {
+    /* Indentation overrides for grouping */
+    margin-inline-start: var(--_button-horizontal-indent);
+    margin-block-start: var(--_button-vertical-indent);
+
+    .button {
+      color: var(--cs-color-on-loud, var(--cs-color-neutral-on-loud));
+      background-color: var(--cs-color-fill-loud, var(--cs-color-neutral-fill-loud));
+      border-color: transparent;
+    }
+    @media (hover: hover) {
+      .button:not(.disabled):not(.loading):hover {
+        background-color: color-mix(
+          in oklab,
+          var(--cs-color-fill-loud, var(--cs-color-neutral-fill-loud)),
+          var(--cs-color-mix-hover)
+        );
+      }
+    }
+    .button:not(.disabled):not(.loading):active {
+      background-color: color-mix(
+        in oklab,
+        var(--cs-color-fill-loud, var(--cs-color-neutral-fill-loud)),
+        var(--cs-color-mix-active)
+      );
+    }
+  }
+
+  /* Focus states */
+  .button:focus {
+    outline: none;
+  }
+
+  .button:focus-visible {
+    outline: var(--cs-focus-ring);
+    outline-offset: var(--cs-focus-ring-offset);
+  }
+
+  /* Disabled state */
+  :host([disabled]) {
+    opacity: 0.5;
+    cursor: not-allowed;
+
+    /* When disabled, prevent mouse events from bubbling up from children */
+    .button {
+      pointer-events: none;
+    }
+  }
+
+  /* Keep it last so Safari doesn't stop parsing this block */
+  .button::-moz-focus-inner {
+    border: 0;
+  }
+
+  /* Icon buttons */
+  .button.is-icon-button {
+    outline-offset: 2px;
+    width: var(--cs-form-control-height);
+    aspect-ratio: 1;
+  }
+
+  /* Icon buttons with a caret need to grow to fit both the icon and the caret */
+  .button.is-icon-button.caret {
+    width: auto;
+    aspect-ratio: auto;
+    min-width: var(--cs-form-control-height);
+  }
+
+  /* Pill modifier */
+  :host([pill]) .button {
+    border-start-start-radius: var(--_button-start-start-radius, var(--cs-border-radius-pill));
+    border-start-end-radius: var(--_button-start-end-radius, var(--cs-border-radius-pill));
+    border-end-start-radius: var(--_button-end-start-radius, var(--cs-border-radius-pill));
+    border-end-end-radius: var(--_button-end-end-radius, var(--cs-border-radius-pill));
+  }
+
+  /*
+   * Label
+   */
+
+  .start,
+  .end {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    pointer-events: none;
+  }
+
+  .label {
+    display: inline-block;
+  }
+
+  .is-icon-button .label {
+    display: flex;
+    justify-content: center;
+  }
+
+  .label::slotted(cs-icon) {
+    align-self: center;
+  }
+
+  /*
+   * Caret modifier
+   */
+
+  cs-icon[part='caret'] {
+    display: flex;
+    align-self: center;
+    align-items: center;
+
+    &::part(svg) {
+      width: 0.875em;
+      height: 0.875em;
+    }
+
+    .button:has(&) .end {
+      display: none;
+    }
+  }
+
+  /*
+   * Loading modifier
+   */
+
+  .loading {
+    position: relative;
+    cursor: wait;
+
+    .start,
+    .label,
+    .end,
+    .caret {
+      visibility: hidden;
+    }
+
+    cs-spinner {
+      --indicator-color: currentColor;
+      --track-color: color-mix(in oklab, currentColor, transparent 90%);
+
+      position: absolute;
+      font-size: 1em;
+      height: 1em;
+      width: 1em;
+      top: calc(50% - 0.5em);
+      left: calc(50% - 0.5em);
+    }
+  }
+
+  /*
+   * Badges
+   */
+
+  .button ::slotted(cs-badge) {
+    border-color: var(--cs-color-surface-default);
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    translate: 50% -50%;
+    pointer-events: none;
+  }
+
+  :host(:dir(rtl)) ::slotted(cs-badge) {
+    translate: -50% -50%;
+  }
+
+  /*
+  * Button spacing
+  */
+
+  /* These are !important because a document-level universal margin reset would otherwise beat them:
+     a slotted element belongs to the outer tree. See callout.styles.ts for the full note. */
+  slot[name='start']::slotted(*) {
+    margin-inline-end: 0.75em !important;
+  }
+
+  slot[name='end']::slotted(*),
+  .button:not(.visually-hidden-label) [part='caret'] {
+    margin-inline-start: 0.75em !important;
+  }
+`;
+
+export {
+  button_styles_default
+};