@redvars/peacock 3.8.5 → 3.8.6

package/dist/button.js

@@ -771,6 +771,7 @@ var css_248z = i`.button {
   --button-height: 2rem;
   --private-button-icon-size: 1rem;
   --private-button-container-padding: 0.75rem;
+  --private-button-icon-label-spacing: 0.5rem;
   --private-button-font-size: 0.875rem !important;
   --private-button-font-weight: var(--font-weight-medium) !important;
   --private-button-line-height: 1.25rem !important;
@@ -794,6 +795,7 @@ var css_248z = i`.button {
   --button-height: 3.5rem;
   --private-button-icon-size: 1.5rem;
   --private-button-container-padding: 1.5rem;
+  --private-button-icon-label-spacing: 0.5rem;
   --private-button-font-size: 1rem !important;
   --private-button-font-weight: var(--font-weight-medium) !important;
   --private-button-line-height: 1.5rem !important;
@@ -805,6 +807,7 @@ var css_248z = i`.button {
   --button-height: 6rem;
   --private-button-icon-size: 2rem;
   --private-button-container-padding: 3rem;
+  --private-button-icon-label-spacing: 0.75rem;
   --private-button-font-size: 1.5rem !important;
   --private-button-font-weight: var(--font-weight-regular) !important;
   --private-button-line-height: 2rem !important;
@@ -816,6 +819,7 @@ var css_248z = i`.button {
   --button-height: 8.5rem;
   --private-button-icon-size: 2.5rem;
   --private-button-container-padding: 4rem;
+  --private-button-icon-label-spacing: 1rem;
   --private-button-font-size: 2rem !important;
   --private-button-font-weight: var(--font-weight-regular) !important;
   --private-button-line-height: 2.5rem !important;

package/dist/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../src/button/button/button.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { when } from 'lit/directives/when.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './button.scss';\n\nimport type {\n  ButtonSize,\n  ButtonLevel,\n  ButtonShape,\n  ButtonVariant,\n  ButtonColor,\n} from '@/button/ButtonTypes.js';\nimport { isLink } from '@/__internal/utils/is-link.js';\nimport { observerSlotChangesWithCallback } from '@/__internal/utils/observe-slot-change.js';\nimport {\n  dispatchActivationClick,\n  isActivationClick,\n} from '@/__internal/utils/dispatch-event-utils.js';\nimport { DISABLED_REASON_ID } from '@/button/ButtonConstants.js';\nimport { mixinDelegatesAria } from '@/__internal/aria/delegate.js';\nimport { ARIAMixinStrict } from '@/__internal/aria/aria.js';\nimport { mixinFormSubmitter } from '@/__internal/mixins/form-submitter.js';\nimport { mixinElementInternals } from '@/__internal/mixins/element-internals.js';\nimport { mixinBaseButton } from '../base-button/base-button.js';\nimport { mixinFormAssociated } from '@/__internal/mixins/form-associated.js';\nimport { mixinHyperlink } from '@/__internal/mixins/hyperlink.js';\nexport type {\n  ButtonSize,\n  ButtonLevel,\n  ButtonShape,\n  ButtonVariant,\n  ButtonColor,\n} from '@/button/ButtonTypes.js';\n\n/**\n * @label Button\n * @tag wc-button\n * @rawTag button\n *\n * @summary Buttons help people initiate actions, from sending an email, to sharing a document, to liking a post.\n * @overview\n * <p>Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.</p>\n *\n * @cssprop --button-container-shape - Defines the border radius of the button container shape.\n *\n * @cssprop --button-container-shape-start-start - Defines the start position of the button container shape.\n * @cssprop --button-container-shape-start-end - Defines the end position of the button container shape.\n * @cssprop --button-container-shape-end-start - Defines the start position of the button container shape.\n * @cssprop --button-container-shape-end-end - Defines the end position of the button container shape.\n *\n *\n * @cssprop --filled-button-container-color - Color of the filled button container.\n * @cssprop --filled-button-label-text-color - Text color of the filled button label.\n *\n * @cssprop --outlined-button-container-color - Color of the outlined button container.\n * @cssprop --outlined-button-label-text-color - Text color of the outlined button label.\n *\n * @cssprop --text-button-label-text-color - Text color of the text button label.\n *\n * @cssprop --tonal-button-container-color - Color of the tonal button container.\n * @cssprop --tonal-button-label-text-color - Text color of the tonal button label.\n *\n * @cssprop --elevated-button-container-color - Color of the elevated button container.\n * @cssprop --elevated-button-label-text-color - Text color of the elevated button label.\n *\n * @cssprop --neo-button-container-color - Color of the neo button container.\n * @cssprop --neo-button-label-text-color - Text color of the neo button label.\n *\n * @fires {MouseEvent} click - Dispatched when the button is clicked.\n *\n * @example\n * ```html\n * <wc-button>Button</wc-button>\n * ```\n * @tags display\n */\n@IndividualComponent\nexport class Button extends mixinBaseButton(\n  mixinHyperlink(\n    mixinDelegatesAria(\n      mixinFormSubmitter(\n        mixinFormAssociated(mixinElementInternals(LitElement)),\n      ),\n    ),\n  ),\n) {\n  // ── Static ───────────────────────────────────────────────────────────────\n\n  /** @nocollapse */ // eslint-disable-next-line\n  static override shadowRootOptions: ShadowRootInit = {\n    mode: 'open',\n    delegatesFocus: true,\n  };\n\n  static override styles = [styles];\n\n  // ── Properties ───────────────────────────────────────────────────────────\n\n  /**\n   * When `true` (default), the icon is placed after the label (trailing).\n   * When `false`, the icon is placed before the label (leading).\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'trailing-icon' })\n  trailingIcon = false;\n\n  /**\n   * Button size.\n   * Possible values are `\"xs\"`, `\"sm\"`, `\"md\"`, `\"lg\"`, `\"xl\"`. Defaults to `\"sm\"`.\n   */\n  @property({ reflect: true }) size: ButtonSize = 'sm';\n\n  /**\n   * Level is preset of color and variant. If Level provided it overrides the default color and variant.\n   */\n  @property({ type: String }) level?: ButtonLevel;\n\n  /** Shape of the button container. */\n  @property({ type: String, reflect: true }) shape: ButtonShape = 'square';\n\n  /**\n   * The visual style of the button.\n   *\n   *  Possible variant values:\n   * `\"filled\"` is a filled button.\n   * `\"outlined\"` is an outlined button.\n   * `\"text\"` is a transparent button.\n   * `\"tonal\"` is a light color button.\n   * `\"elevated\"` is elevated button\n   */\n  @property({ reflect: true }) variant: ButtonVariant = 'filled';\n\n  /**\n   * Defines the primary color of the button. This can be set to predefined color names to apply specific color themes.\n   */\n  @property({ reflect: true }) color: ButtonColor = 'primary';\n\n  /** When true, renders the button in a loading skeleton state. */\n  @property({ type: Boolean, reflect: true }) skeleton: boolean = false;\n\n  /** When true, the button acts as a toggle. Use with `selected`. */\n  @property({ type: Boolean, reflect: true }) toggle: boolean = false;\n\n  /** When true (and `toggle` is set), the button is in the selected/pressed state. */\n  @property({ type: Boolean, reflect: true }) selected: boolean = false;\n\n  /** Optional tooltip text displayed on hover. */\n  @property() tooltip?: string;\n\n  // ── Queries ───────────────────────────────────────────────────────────────\n\n  @query('.button') private readonly buttonElement!: HTMLElement | null;\n\n  // ── Private fields ────────────────────────────────────────────────────────\n\n  /** Cleanup returned by observerSlotChangesWithCallback for the icon slot. */\n  private __iconSlotCleanup: (() => void) | null = null;\n\n  /** Cleanup returned by observerSlotChangesWithCallback for the label slot. */\n  private __labelSlotCleanup: (() => void) | null = null;\n\n  // ── Constructor ───────────────────────────────────────────────────────────\n\n  constructor() {\n    super();\n    this.addEventListener('click', this.__dispatchClickWithThrottle);\n  }\n\n  // ── Lifecycle ─────────────────────────────────────────────────────────────\n\n  override disconnectedCallback() {\n    // disconnect slot observers first to avoid callbacks during teardown\n    try {\n      this.__iconSlotCleanup?.();\n    } catch (e) {\n      /* ignore */\n    }\n    try {\n      this.__labelSlotCleanup?.();\n    } catch (e) {\n      /* ignore */\n    }\n\n    super.disconnectedCallback();\n  }\n\n  override firstUpdated(changedProperties: Map<PropertyKey, unknown>) {\n    super.firstUpdated(changedProperties);\n    this.__convertTypeToVariantAndColor();\n    // Initialize slot presence tracking for smooth transitions when label/icon are added/removed\n    const iconSlot = this.renderRoot.querySelector(\n      'slot[name=\"icon\"]',\n    ) as HTMLSlotElement | null;\n    const labelSlot = this.renderRoot.querySelector(\n      'slot.label',\n    ) as HTMLSlotElement | null;\n\n    // Use MutationObserver-based helper so we react to content/character changes\n    if (iconSlot) {\n      this.__iconSlotCleanup = observerSlotChangesWithCallback(\n        iconSlot,\n        has => {\n          this.toggleAttribute('has-icon', has);\n        },\n      );\n    }\n\n    if (labelSlot) {\n      this.__labelSlotCleanup = observerSlotChangesWithCallback(\n        labelSlot,\n        has => {\n          this.toggleAttribute('has-label', has);\n        },\n      );\n    }\n  }\n\n  // ── Public methods ────────────────────────────────────────────────────────\n\n  override focus() {\n    this.buttonElement?.focus();\n  }\n\n  override blur() {\n    this.buttonElement?.blur();\n  }\n\n  // ── Private methods ───────────────────────────────────────────────────────\n\n  __convertTypeToVariantAndColor() {\n    if (this.level === 'primary') {\n      this.color = 'primary';\n      this.variant = 'filled';\n    } else if (this.level === 'secondary') {\n      this.color = 'surface';\n      this.variant = 'tonal';\n    } else if (this.level === 'tertiary') {\n      this.color = 'primary';\n      this.variant = 'text';\n    } else if (this.level === 'danger') {\n      this.color = 'danger';\n      this.variant = 'filled';\n    }\n  }\n\n  __dispatchClick = (event: MouseEvent | KeyboardEvent) => {\n    // If the button is soft-disabled or a disabled link, we need to explicitly\n    // prevent the click from propagating to other event listeners as well as\n    // prevent the default action.\n    if (this.softDisabled || (this.disabled && this.href) || this.skeleton) {\n      event.stopImmediatePropagation();\n      event.preventDefault();\n      return;\n    }\n\n    if (!isActivationClick(event) || !this.buttonElement) {\n      return;\n    }\n\n    this.focus();\n    dispatchActivationClick(this.buttonElement);\n  };\n\n  // ── Render helpers ────────────────────────────────────────────────────────\n\n  renderButtonElement() {\n    const isElementLink = isLink(this);\n\n    const cssClasses: any = {\n      button: true,\n      'native-button': !isElementLink,\n      'native-link': isElementLink,\n      'trailing-icon': this.trailingIcon,\n    };\n\n    // Needed for closure conformance\n    const { ariaLabel, ariaHasPopup, ariaExpanded } = this as ARIAMixinStrict;\n\n    if (isElementLink) {\n      return html`<a\n        class=${classMap(cssClasses)}\n        id=\"link\"\n        href=${this.href}\n        target=${this.target}\n        tabindex=${this.disabled ? '-1' : '0'}\n        aria-label=\"${ariaLabel || nothing}\"\n        aria-haspopup=\"${ariaHasPopup || nothing}\"\n        aria-expanded=\"${ariaExpanded || nothing}\"\n        aria-describedby=${ifDefined(\n          this.softDisabled ? DISABLED_REASON_ID : undefined,\n        )}\n        ?aria-disabled=${this.softDisabled}\n      >\n        ${this.renderButtonContent()}\n      </a>`;\n    }\n    return html`<button\n        class=${classMap(cssClasses)}\n        id=\"button\"\n        aria-label=\"${ariaLabel || nothing}\"\n        aria-haspopup=\"${ariaHasPopup || nothing}\"\n        aria-expanded=\"${ariaExpanded || nothing}\"\n        aria-describedby=${ifDefined(\n          this.softDisabled ? DISABLED_REASON_ID : undefined,\n        )}\n        ?aria-disabled=${this.softDisabled}\n        ?disabled=${this.disabled}\n      >\n        ${this.renderButtonContent()}\n      </button>\n      ${this.renderTooltip()}`;\n  }\n\n  renderButtonContent() {\n    return html` <slot class=\"icon-slot\" name=\"icon\"></slot>\n      <slot class=\"label\"></slot>\n      <div class=\"touch\"></div>\n\n      ${this.renderDisabledReason(this.softDisabled)}`;\n  }\n\n  renderDisabledReason(softDisabled: boolean) {\n    if (softDisabled)\n      return html`<div\n        id=${DISABLED_REASON_ID}\n        role=\"tooltip\"\n        aria-label=${this.disabledReason}\n        class=\"screen-reader-only\"\n      >\n        ${this.disabledReason}\n      </div>`;\n    return nothing;\n  }\n\n  renderTooltip() {\n    if (this.tooltip) {\n      const buttonId = isLink(this) ? 'link' : 'button';\n      return html`<wc-tooltip class=\"tooltip\" for=${buttonId}\n        >${this.tooltip}</wc-tooltip\n      >`;\n    }\n    return nothing;\n  }\n\n  // ── Render ────────────────────────────────────────────────────────────────\n\n  override render() {\n    const buttonId = isLink(this) ? 'link' : 'button';\n\n    return html`\n      <wc-focus-ring class=\"focus-ring\" for=${buttonId}></wc-focus-ring>\n      <wc-elevation class=\"elevation\"></wc-elevation>\n      ${when(\n        this.variant === 'neo',\n        () => html`<div class=\"neo-background\"></div>`,\n      )}\n      <div class=\"background\"></div>\n      ${when(\n        this.variant === 'outlined' || this.variant === 'neo',\n        () => html`<div class=\"outline\"></div>`,\n      )}\n      <wc-ripple class=\"ripple\" for=${buttonId}></wc-ripple>\n      <wc-skeleton class=\"skeleton\"></wc-skeleton>\n\n      ${this.renderButtonElement()} ${this.renderTooltip()}\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","nothing","ifDefined","when","styles","property","query"],"mappings":"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"}
+{"version":3,"file":"button.js","sources":["../../src/button/button/button.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { when } from 'lit/directives/when.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './button.scss';\n\nimport type {\n  ButtonSize,\n  ButtonLevel,\n  ButtonShape,\n  ButtonVariant,\n  ButtonColor,\n} from '@/button/ButtonTypes.js';\nimport { isLink } from '@/__internal/utils/is-link.js';\nimport { observerSlotChangesWithCallback } from '@/__internal/utils/observe-slot-change.js';\nimport {\n  dispatchActivationClick,\n  isActivationClick,\n} from '@/__internal/utils/dispatch-event-utils.js';\nimport { DISABLED_REASON_ID } from '@/button/ButtonConstants.js';\nimport { mixinDelegatesAria } from '@/__internal/aria/delegate.js';\nimport { ARIAMixinStrict } from '@/__internal/aria/aria.js';\nimport { mixinFormSubmitter } from '@/__internal/mixins/form-submitter.js';\nimport { mixinElementInternals } from '@/__internal/mixins/element-internals.js';\nimport { mixinBaseButton } from '../base-button/base-button.js';\nimport { mixinFormAssociated } from '@/__internal/mixins/form-associated.js';\nimport { mixinHyperlink } from '@/__internal/mixins/hyperlink.js';\nexport type {\n  ButtonSize,\n  ButtonLevel,\n  ButtonShape,\n  ButtonVariant,\n  ButtonColor,\n} from '@/button/ButtonTypes.js';\n\n/**\n * @label Button\n * @tag wc-button\n * @rawTag button\n *\n * @summary Buttons help people initiate actions, from sending an email, to sharing a document, to liking a post.\n * @overview\n * <p>Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.</p>\n *\n * @cssprop --button-container-shape - Defines the border radius of the button container shape.\n *\n * @cssprop --button-container-shape-start-start - Defines the start position of the button container shape.\n * @cssprop --button-container-shape-start-end - Defines the end position of the button container shape.\n * @cssprop --button-container-shape-end-start - Defines the start position of the button container shape.\n * @cssprop --button-container-shape-end-end - Defines the end position of the button container shape.\n *\n *\n * @cssprop --filled-button-container-color - Color of the filled button container.\n * @cssprop --filled-button-label-text-color - Text color of the filled button label.\n *\n * @cssprop --outlined-button-container-color - Color of the outlined button container.\n * @cssprop --outlined-button-label-text-color - Text color of the outlined button label.\n *\n * @cssprop --text-button-label-text-color - Text color of the text button label.\n *\n * @cssprop --tonal-button-container-color - Color of the tonal button container.\n * @cssprop --tonal-button-label-text-color - Text color of the tonal button label.\n *\n * @cssprop --elevated-button-container-color - Color of the elevated button container.\n * @cssprop --elevated-button-label-text-color - Text color of the elevated button label.\n *\n * @cssprop --neo-button-container-color - Color of the neo button container.\n * @cssprop --neo-button-label-text-color - Text color of the neo button label.\n *\n * @fires {MouseEvent} click - Dispatched when the button is clicked.\n *\n * @example\n * ```html\n * <wc-button>Button</wc-button>\n * ```\n * @tags display\n */\n@IndividualComponent\nexport class Button extends mixinBaseButton(\n  mixinHyperlink(\n    mixinDelegatesAria(\n      mixinFormSubmitter(\n        mixinFormAssociated(mixinElementInternals(LitElement)),\n      ),\n    ),\n  ),\n) {\n  // ── Static ───────────────────────────────────────────────────────────────\n\n  /** @nocollapse */ // eslint-disable-next-line\n  static override shadowRootOptions: ShadowRootInit = {\n    mode: 'open',\n    delegatesFocus: true,\n  };\n\n  static override styles = [styles];\n\n  // ── Properties ───────────────────────────────────────────────────────────\n\n  /**\n   * When `true` (default), the icon is placed after the label (trailing).\n   * When `false`, the icon is placed before the label (leading).\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'trailing-icon' })\n  trailingIcon = false;\n\n  /**\n   * Button size.\n   * Possible values are `\"xs\"`, `\"sm\"`, `\"md\"`, `\"lg\"`, `\"xl\"`. Defaults to `\"sm\"`.\n   */\n  @property({ reflect: true }) size: ButtonSize = 'sm';\n\n  /**\n   * Level is preset of color and variant. If Level provided it overrides the default color and variant.\n   */\n  @property({ type: String }) level?: ButtonLevel;\n\n  /** Shape of the button container. */\n  @property({ type: String, reflect: true }) shape: ButtonShape = 'square';\n\n  /**\n   * The visual style of the button.\n   *\n   *  Possible variant values:\n   * `\"filled\"` is a filled button.\n   * `\"outlined\"` is an outlined button.\n   * `\"text\"` is a transparent button.\n   * `\"tonal\"` is a light color button.\n   * `\"elevated\"` is elevated button\n   */\n  @property({ reflect: true }) variant: ButtonVariant = 'filled';\n\n  /**\n   * Defines the primary color of the button. This can be set to predefined color names to apply specific color themes.\n   */\n  @property({ reflect: true }) color: ButtonColor = 'primary';\n\n  /** When true, renders the button in a loading skeleton state. */\n  @property({ type: Boolean, reflect: true }) skeleton: boolean = false;\n\n  /** When true, the button acts as a toggle. Use with `selected`. */\n  @property({ type: Boolean, reflect: true }) toggle: boolean = false;\n\n  /** When true (and `toggle` is set), the button is in the selected/pressed state. */\n  @property({ type: Boolean, reflect: true }) selected: boolean = false;\n\n  /** Optional tooltip text displayed on hover. */\n  @property() tooltip?: string;\n\n  // ── Queries ───────────────────────────────────────────────────────────────\n\n  @query('.button') private readonly buttonElement!: HTMLElement | null;\n\n  // ── Private fields ────────────────────────────────────────────────────────\n\n  /** Cleanup returned by observerSlotChangesWithCallback for the icon slot. */\n  private __iconSlotCleanup: (() => void) | null = null;\n\n  /** Cleanup returned by observerSlotChangesWithCallback for the label slot. */\n  private __labelSlotCleanup: (() => void) | null = null;\n\n  // ── Constructor ───────────────────────────────────────────────────────────\n\n  constructor() {\n    super();\n    this.addEventListener('click', this.__dispatchClickWithThrottle);\n  }\n\n  // ── Lifecycle ─────────────────────────────────────────────────────────────\n\n  override disconnectedCallback() {\n    // disconnect slot observers first to avoid callbacks during teardown\n    try {\n      this.__iconSlotCleanup?.();\n    } catch (e) {\n      /* ignore */\n    }\n    try {\n      this.__labelSlotCleanup?.();\n    } catch (e) {\n      /* ignore */\n    }\n\n    super.disconnectedCallback();\n  }\n\n  override firstUpdated(changedProperties: Map<PropertyKey, unknown>) {\n    super.firstUpdated(changedProperties);\n    this.__convertTypeToVariantAndColor();\n    // Initialize slot presence tracking for smooth transitions when label/icon are added/removed\n    const iconSlot = this.renderRoot.querySelector(\n      'slot[name=\"icon\"]',\n    ) as HTMLSlotElement | null;\n    const labelSlot = this.renderRoot.querySelector(\n      'slot.label',\n    ) as HTMLSlotElement | null;\n\n    // Use MutationObserver-based helper so we react to content/character changes\n    if (iconSlot) {\n      this.__iconSlotCleanup = observerSlotChangesWithCallback(\n        iconSlot,\n        has => {\n          this.toggleAttribute('has-icon', has);\n        },\n      );\n    }\n\n    if (labelSlot) {\n      this.__labelSlotCleanup = observerSlotChangesWithCallback(\n        labelSlot,\n        has => {\n          this.toggleAttribute('has-label', has);\n        },\n      );\n    }\n  }\n\n  // ── Public methods ────────────────────────────────────────────────────────\n\n  override focus() {\n    this.buttonElement?.focus();\n  }\n\n  override blur() {\n    this.buttonElement?.blur();\n  }\n\n  // ── Private methods ───────────────────────────────────────────────────────\n\n  __convertTypeToVariantAndColor() {\n    if (this.level === 'primary') {\n      this.color = 'primary';\n      this.variant = 'filled';\n    } else if (this.level === 'secondary') {\n      this.color = 'surface';\n      this.variant = 'tonal';\n    } else if (this.level === 'tertiary') {\n      this.color = 'primary';\n      this.variant = 'text';\n    } else if (this.level === 'danger') {\n      this.color = 'danger';\n      this.variant = 'filled';\n    }\n  }\n\n  __dispatchClick = (event: MouseEvent | KeyboardEvent) => {\n    // If the button is soft-disabled or a disabled link, we need to explicitly\n    // prevent the click from propagating to other event listeners as well as\n    // prevent the default action.\n    if (this.softDisabled || (this.disabled && this.href) || this.skeleton) {\n      event.stopImmediatePropagation();\n      event.preventDefault();\n      return;\n    }\n\n    if (!isActivationClick(event) || !this.buttonElement) {\n      return;\n    }\n\n    this.focus();\n    dispatchActivationClick(this.buttonElement);\n  };\n\n  // ── Render helpers ────────────────────────────────────────────────────────\n\n  renderButtonElement() {\n    const isElementLink = isLink(this);\n\n    const cssClasses: any = {\n      button: true,\n      'native-button': !isElementLink,\n      'native-link': isElementLink,\n      'trailing-icon': this.trailingIcon,\n    };\n\n    // Needed for closure conformance\n    const { ariaLabel, ariaHasPopup, ariaExpanded } = this as ARIAMixinStrict;\n\n    if (isElementLink) {\n      return html`<a\n        class=${classMap(cssClasses)}\n        id=\"link\"\n        href=${this.href}\n        target=${this.target}\n        tabindex=${this.disabled ? '-1' : '0'}\n        aria-label=\"${ariaLabel || nothing}\"\n        aria-haspopup=\"${ariaHasPopup || nothing}\"\n        aria-expanded=\"${ariaExpanded || nothing}\"\n        aria-describedby=${ifDefined(\n          this.softDisabled ? DISABLED_REASON_ID : undefined,\n        )}\n        ?aria-disabled=${this.softDisabled}\n      >\n        ${this.renderButtonContent()}\n      </a>`;\n    }\n    return html`<button\n        class=${classMap(cssClasses)}\n        id=\"button\"\n        aria-label=\"${ariaLabel || nothing}\"\n        aria-haspopup=\"${ariaHasPopup || nothing}\"\n        aria-expanded=\"${ariaExpanded || nothing}\"\n        aria-describedby=${ifDefined(\n          this.softDisabled ? DISABLED_REASON_ID : undefined,\n        )}\n        ?aria-disabled=${this.softDisabled}\n        ?disabled=${this.disabled}\n      >\n        ${this.renderButtonContent()}\n      </button>\n      ${this.renderTooltip()}`;\n  }\n\n  renderButtonContent() {\n    return html` <slot class=\"icon-slot\" name=\"icon\"></slot>\n      <slot class=\"label\"></slot>\n      <div class=\"touch\"></div>\n\n      ${this.renderDisabledReason(this.softDisabled)}`;\n  }\n\n  renderDisabledReason(softDisabled: boolean) {\n    if (softDisabled)\n      return html`<div\n        id=${DISABLED_REASON_ID}\n        role=\"tooltip\"\n        aria-label=${this.disabledReason}\n        class=\"screen-reader-only\"\n      >\n        ${this.disabledReason}\n      </div>`;\n    return nothing;\n  }\n\n  renderTooltip() {\n    if (this.tooltip) {\n      const buttonId = isLink(this) ? 'link' : 'button';\n      return html`<wc-tooltip class=\"tooltip\" for=${buttonId}\n        >${this.tooltip}</wc-tooltip\n      >`;\n    }\n    return nothing;\n  }\n\n  // ── Render ────────────────────────────────────────────────────────────────\n\n  override render() {\n    const buttonId = isLink(this) ? 'link' : 'button';\n\n    return html`\n      <wc-focus-ring class=\"focus-ring\" for=${buttonId}></wc-focus-ring>\n      <wc-elevation class=\"elevation\"></wc-elevation>\n      ${when(\n        this.variant === 'neo',\n        () => html`<div class=\"neo-background\"></div>`,\n      )}\n      <div class=\"background\"></div>\n      ${when(\n        this.variant === 'outlined' || this.variant === 'neo',\n        () => html`<div class=\"outline\"></div>`,\n      )}\n      <wc-ripple class=\"ripple\" for=${buttonId}></wc-ripple>\n      <wc-skeleton class=\"skeleton\"></wc-skeleton>\n\n      ${this.renderButtonElement()} ${this.renderTooltip()}\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","nothing","ifDefined","when","styles","property","query"],"mappings":"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"}

package/dist/custom-elements-jsdocs.json

@@ -4495,7 +4495,7 @@
           "type": {
             "text": "string"
           },
-          "default": "''",
+          "default": "\"\"",
           "fieldName": "value"
         },
         {
@@ -4503,7 +4503,7 @@
           "type": {
             "text": "string"
           },
-          "default": "''",
+          "default": "\"\"",
           "fieldName": "name"
         },
         {
@@ -4511,7 +4511,7 @@
           "type": {
             "text": "string"
           },
-          "default": "''",
+          "default": "\"\"",
           "fieldName": "placeholder"
         },
         {
@@ -4519,7 +4519,7 @@
           "type": {
             "text": "string"
           },
-          "default": "''",
+          "default": "\"\"",
           "fieldName": "label"
         },
         {
@@ -4533,25 +4533,25 @@
         {
           "name": "size",
           "type": {
-            "text": "'sm' | 'md' | 'lg'"
+            "text": "\"sm\" | \"md\" | \"lg\""
           },
-          "default": "'md'",
+          "default": "\"md\"",
           "fieldName": "size"
         },
         {
           "name": "type",
           "type": {
-            "text": "'text' | 'password' | 'email' | 'tel'"
+            "text": "\"text\" | \"password\" | \"email\" | \"tel\""
           },
-          "default": "'text'",
+          "default": "\"text\"",
           "fieldName": "type"
         },
         {
           "name": "autocomplete",
           "type": {
-            "text": "'on' | 'off'"
+            "text": "\"on\" | \"off\""
           },
-          "default": "'off'",
+          "default": "\"off\"",
           "fieldName": "autocomplete"
         },
         {
@@ -4565,9 +4565,9 @@
         {
           "name": "variant",
           "type": {
-            "text": "'filled' | 'outlined' | 'default'"
+            "text": "\"filled\" | \"outlined\" | \"default\""
           },
-          "default": "'default'",
+          "default": "\"default\"",
           "fieldName": "variant"
         },
         {
@@ -4575,7 +4575,7 @@
           "type": {
             "text": "string"
           },
-          "default": "''",
+          "default": "\"\"",
           "description": "Helper text to display below the input.",
           "fieldName": "helperText"
         },
@@ -4592,7 +4592,7 @@
           "type": {
             "text": "string"
           },
-          "default": "''",
+          "default": "\"\"",
           "fieldName": "errorText"
         },
         {
@@ -4608,7 +4608,7 @@
           "type": {
             "text": "string"
           },
-          "default": "''",
+          "default": "\"\"",
           "fieldName": "warningText"
         },
         {
@@ -5105,6 +5105,176 @@
       }
     }
   },
+  {
+    "label": "Markdown Editor",
+    "tag": "wc-markdown-editor",
+    "rawTag": "markdown-editor",
+    "summary": "A Tiptap-powered Notion-like Markdown editor with a bottom toggle\n  between rendered and raw markdown views.",
+    "overview": "<p>The Markdown Editor provides a block-based, Notion-like writing surface\nbuilt on Tiptap. Type <code>/</code> to open a slash menu for inserting\nheadings, lists, quotes, code blocks, and dividers. Select text to reveal\na floating bubble toolbar with inline formatting actions.</p>\n\n<p>The canonical <code>value</code> is Markdown. Use the bottom segmented\nswitch to toggle between the rendered editor and the raw markdown source.\nThe component dispatches a <code>change</code> event whenever content\nchanges.</p>",
+    "cssprop": "--markdown-editor-slash-background - Background color of the slash command menu.",
+    "fires": "change - Fired whenever the markdown content changes.",
+    "example": "```html\n<wc-markdown-editor\n  label=\"Notes\"\n  value=\"# Hello\\n\\nType a slash on a new line to insert blocks.\"\n></wc-markdown-editor>\n```",
+    "tags": "input editor",
+    "customElement": {
+      "kind": "class",
+      "description": "",
+      "cssProperties": [
+        {
+          "description": "Minimum height of the editable area. Defaults to 12rem.",
+          "name": "--markdown-editor-min-height"
+        },
+        {
+          "description": "Background color of the selection bubble menu.",
+          "name": "--markdown-editor-bubble-background"
+        },
+        {
+          "description": "Background color of the slash command menu.",
+          "name": "--markdown-editor-slash-background"
+        }
+      ],
+      "events": [
+        {
+          "type": {
+            "text": "Event"
+          },
+          "description": "Fired whenever the markdown content changes.",
+          "name": "change"
+        }
+      ],
+      "attributes": [
+        {
+          "name": "value",
+          "type": {
+            "text": "string"
+          },
+          "default": "''",
+          "description": "Current Markdown value of the editor.",
+          "fieldName": "value"
+        },
+        {
+          "name": "label",
+          "type": {
+            "text": "string"
+          },
+          "default": "''",
+          "description": "Label displayed above the editor.",
+          "fieldName": "label"
+        },
+        {
+          "name": "placeholder",
+          "type": {
+            "text": "string"
+          },
+          "default": "\"Type '/' for commands…\"",
+          "description": "Placeholder text shown when the editor is empty.",
+          "fieldName": "placeholder"
+        },
+        {
+          "name": "variant",
+          "type": {
+            "text": "'filled' | 'outlined' | 'default'"
+          },
+          "default": "'default'",
+          "description": "Visual style of the wrapping field.",
+          "fieldName": "variant"
+        },
+        {
+          "name": "helper-text",
+          "type": {
+            "text": "string"
+          },
+          "default": "''",
+          "description": "Helper text displayed below the editor.",
+          "fieldName": "helperText"
+        },
+        {
+          "name": "error",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "false",
+          "description": "Whether to show an error state.",
+          "fieldName": "error"
+        },
+        {
+          "name": "error-text",
+          "type": {
+            "text": "string"
+          },
+          "default": "''",
+          "description": "Error message text.",
+          "fieldName": "errorText"
+        },
+        {
+          "name": "debounce",
+          "type": {
+            "text": "number"
+          },
+          "default": "250",
+          "description": "Debounce in milliseconds for dispatching `change`.",
+          "fieldName": "debounce"
+        },
+        {
+          "name": "disabled",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "false",
+          "fieldName": "disabled",
+          "inheritedFrom": {
+            "name": "BaseInput",
+            "module": "src/input/BaseInput.ts"
+          }
+        },
+        {
+          "name": "readonly",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "false",
+          "fieldName": "readonly",
+          "inheritedFrom": {
+            "name": "BaseInput",
+            "module": "src/input/BaseInput.ts"
+          }
+        },
+        {
+          "name": "required",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "false",
+          "fieldName": "required",
+          "inheritedFrom": {
+            "name": "BaseInput",
+            "module": "src/input/BaseInput.ts"
+          }
+        },
+        {
+          "name": "skeleton",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "false",
+          "fieldName": "skeleton",
+          "inheritedFrom": {
+            "name": "BaseInput",
+            "module": "src/input/BaseInput.ts"
+          }
+        }
+      ],
+      "superclass": {
+        "name": "BaseInput",
+        "module": "/src/input/BaseInput.js"
+      },
+      "tagName": "wc-markdown-editor",
+      "customElement": true,
+      "rawTag": {
+        "name": "markdown-editor",
+        "description": ""
+      }
+    }
+  },
   {
     "label": "Menu",
     "tag": "wc-menu",