@redvars/peacock 3.8.2 → 3.8.4

package/dist/fab.js

@@ -15,6 +15,7 @@ import './throttle-C7ZAPqtu.js';
 
 var css_248z$2 = i`* {
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .screen-reader-only {
@@ -53,6 +54,7 @@ var css_248z$2 = i`* {
   text-decoration: none;
   color: inherit;
   cursor: pointer;
+  outline: none;
 }
 .native-link:link, .native-link:visited, .native-link:hover, .native-link:active {
   text-decoration: none;
@@ -332,9 +334,6 @@ let Fab = class Fab extends mixinBaseButton(mixinHyperlink(mixinDelegatesAria(mi
             if (!isActivationClick(event) || !this.buttonElement) {
                 return;
             }
-            if (this.toggle) {
-                this.selected = !this.selected;
-            }
             this.focus();
             dispatchActivationClick(this.buttonElement);
         };

package/dist/fab.js.map

@@ -1 +1 @@
-{"version":3,"file":"fab.js","sources":["../../src/button/fab/fab.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';\n\nimport IndividualComponent from '@/IndividualComponent.js';\nimport {\n  dispatchActivationClick,\n  isActivationClick,\n} from '@/__internal/utils/dispatch-event-utils.js';\nimport { isLink } from '@/__internal/utils/is-link.js';\nimport styles from './fab.scss';\nimport colorStyles from './fab-colors.scss';\nimport sizeStyles from './fab-sizes.scss';\nimport { DISABLED_REASON_ID } from '@/button/ButtonConstants.js';\nimport { mixinBaseButton } from '../base-button/base-button.js';\nimport { mixinDelegatesAria } from '@/__internal/aria/delegate.js';\nimport { mixinFormSubmitter } from '@/__internal/mixins/form-submitter.js';\nimport { mixinHyperlink } from '@/__internal/mixins/hyperlink.js';\nimport { mixinElementInternals } from '@/__internal/mixins/element-internals.js';\nimport { mixinFormAssociated } from '@/__internal/mixins/form-associated.js';\nimport { ARIAMixinStrict } from '@/__internal/aria/aria.js';\n\n/**\n * @label FAB\n * @tag wc-fab\n * @rawTag fab\n *\n * @summary The FAB (Floating Action Button) represents the primary action on a screen.\n * @overview\n * <p>A Floating Action Button (FAB) is a circular button that represents the primary action on a screen. It follows the specification and supports four color roles and two variants.</p>\n *\n * @cssprop --fab-container-color: Background color of the FAB container.\n * @cssprop --fab-label-text-color: Text and icon color of the FAB label.\n * @cssprop --fab-container-shape: Corner radius of the FAB. Defaults to var(--shape-corner-large).\n * @cssprop --fab-container-elevation-level: Elevation level of the FAB. Defaults to 3.\n *\n * @fires {MouseEvent} click - Dispatched when the FAB is clicked.\n *\n * @example\n * ```html\n * <wc-fab><wc-icon name=\"add\"></wc-icon></wc-fab>\n * ```\n * @tags controls\n */\n@IndividualComponent\nexport class Fab 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, colorStyles, sizeStyles];\n\n  /**\n   * Optional label text for the extended FAB variant.\n   * When set, the FAB displays both the icon and a text label.\n   */\n  @property({ type: String }) label?: string;\n\n  /**\n   * The color role of the FAB.\n   * `\"surface\"` uses the surface color role.\n   * `\"primary\"` uses the primary color role.\n   * `\"secondary\"` uses the secondary color role.\n   * `\"tertiary\"` uses the tertiary color role.\n   */\n  @property({ reflect: true }) color:\n    | 'surface'\n    | 'primary'\n    | 'secondary'\n    | 'tertiary' = 'surface';\n\n  /**\n   * The style variant of the FAB.\n   * `\"tonal\"` uses container colors.\n   * `\"filled\"` uses solid role colors.\n   */\n  @property({ reflect: true }) variant: 'tonal' | 'filled' = 'tonal';\n\n  /**\n   * The size of the FAB.\n   * `\"sm\"` renders a small FAB (40×40dp).\n   * `\"md\"` renders a standard FAB (56×56dp). This is the default.\n   * `\"lg\"` renders a large FAB (96×96dp).\n   */\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * If `true`, the FAB is in a lowered (resting) state with reduced elevation.\n   */\n  @property({ type: Boolean, reflect: true }) lowered: boolean = false;\n\n  /**\n   * Tooltip text shown on hover.\n   */\n  @property() tooltip?: string;\n\n  @property({ type: Boolean, reflect: true }) skeleton: boolean = false;\n\n  @property({ type: Boolean, reflect: true }) toggle: boolean = false;\n\n  @property({ type: Boolean, reflect: true }) selected: boolean = false;\n\n  @query('.button') readonly buttonElement!: HTMLElement | null;\n\n  constructor() {\n    super();\n    this.addEventListener('click', this.__dispatchClickWithThrottle);\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    if (this.toggle) {\n      this.selected = !this.selected;\n    }\n\n    this.focus();\n    dispatchActivationClick(this.buttonElement);\n  };\n\n  override focus() {\n    this.buttonElement?.focus();\n  }\n\n  override blur() {\n    this.buttonElement?.blur();\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      return html`<wc-tooltip class=\"tooltip\" for=\"button\"\n        >${this.tooltip}</wc-tooltip\n      >`;\n    }\n    return nothing;\n  }\n\n  renderFabElement(isExtended: boolean) {\n    const { ariaLabel, ariaHasPopup, ariaExpanded } = this as ARIAMixinStrict;\n\n    const cssClasses = {\n      button: true,\n      fab: true,\n      'fab-element': true,\n      [`size-${this.size}`]: true,\n      [`color-${this.color}`]: true,\n      [`variant-${this.variant}`]: true,\n      extended: isExtended,\n      lowered: this.lowered,\n      disabled: this.disabled,\n    };\n\n    if (!isLink(this)) {\n      return html`<button\n        class=${classMap(cssClasses)}\n        id=\"button\"\n        type=\"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.renderFabContent(isExtended)}\n      </button>`;\n    }\n\n    return html`<a\n      class=${classMap(cssClasses)}\n      id=\"button\"\n      tabindex=${this.disabled ? '-1' : '0'}\n      href=${ifDefined(this.href)}\n      target=${this.target}\n      role=\"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    >\n      ${this.renderFabContent(isExtended)}\n    </a>`;\n  }\n\n  renderFabContent(isExtended: boolean) {\n    return html`\n      <div class=\"fab-content\">\n        <slot></slot>\n        ${isExtended\n          ? html`<span class=\"fab-label\">${this.label}</span>`\n          : nothing}\n      </div>\n      ${this.renderDisabledReason(this.softDisabled)}\n    `;\n  }\n\n  // ── Render ────────────────────────────────────────────────────────────────\n\n  override render() {\n    const isExtended = !!this.label;\n\n    return html`\n      <wc-focus-ring class=\"focus-ring\" for=\"button\"></wc-focus-ring>\n      <wc-elevation class=\"elevation\"></wc-elevation>\n      <div class=\"background\"></div>\n      <wc-ripple class=\"ripple\" for=\"button\"></wc-ripple>\n      <wc-skeleton class=\"skeleton\"></wc-skeleton>\n\n      ${this.renderFabElement(isExtended)} ${this.renderTooltip()}\n    `;\n  }\n}\n"],"names":["LitElement","html","nothing","classMap","ifDefined","styles","colorStyles","sizeStyles","property","query"],"mappings":"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"}
+{"version":3,"file":"fab.js","sources":["../../src/button/fab/fab.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';\n\nimport IndividualComponent from '@/IndividualComponent.js';\nimport {\n  dispatchActivationClick,\n  isActivationClick,\n} from '@/__internal/utils/dispatch-event-utils.js';\nimport { isLink } from '@/__internal/utils/is-link.js';\nimport styles from './fab.scss';\nimport colorStyles from './fab-colors.scss';\nimport sizeStyles from './fab-sizes.scss';\nimport { DISABLED_REASON_ID } from '@/button/ButtonConstants.js';\nimport { mixinBaseButton } from '../base-button/base-button.js';\nimport { mixinDelegatesAria } from '@/__internal/aria/delegate.js';\nimport { mixinFormSubmitter } from '@/__internal/mixins/form-submitter.js';\nimport { mixinHyperlink } from '@/__internal/mixins/hyperlink.js';\nimport { mixinElementInternals } from '@/__internal/mixins/element-internals.js';\nimport { mixinFormAssociated } from '@/__internal/mixins/form-associated.js';\nimport { ARIAMixinStrict } from '@/__internal/aria/aria.js';\n\n/**\n * @label FAB\n * @tag wc-fab\n * @rawTag fab\n *\n * @summary The FAB (Floating Action Button) represents the primary action on a screen.\n * @overview\n * <p>A Floating Action Button (FAB) is a circular button that represents the primary action on a screen. It follows the specification and supports four color roles and two variants.</p>\n *\n * @cssprop --fab-container-color: Background color of the FAB container.\n * @cssprop --fab-label-text-color: Text and icon color of the FAB label.\n * @cssprop --fab-container-shape: Corner radius of the FAB. Defaults to var(--shape-corner-large).\n * @cssprop --fab-container-elevation-level: Elevation level of the FAB. Defaults to 3.\n *\n * @fires {MouseEvent} click - Dispatched when the FAB is clicked.\n *\n * @example\n * ```html\n * <wc-fab><wc-icon name=\"add\"></wc-icon></wc-fab>\n * ```\n * @tags controls\n */\n@IndividualComponent\nexport class Fab 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, colorStyles, sizeStyles];\n\n  /**\n   * Optional label text for the extended FAB variant.\n   * When set, the FAB displays both the icon and a text label.\n   */\n  @property({ type: String }) label?: string;\n\n  /**\n   * The color role of the FAB.\n   * `\"surface\"` uses the surface color role.\n   * `\"primary\"` uses the primary color role.\n   * `\"secondary\"` uses the secondary color role.\n   * `\"tertiary\"` uses the tertiary color role.\n   */\n  @property({ reflect: true }) color:\n    | 'surface'\n    | 'primary'\n    | 'secondary'\n    | 'tertiary' = 'surface';\n\n  /**\n   * The style variant of the FAB.\n   * `\"tonal\"` uses container colors.\n   * `\"filled\"` uses solid role colors.\n   */\n  @property({ reflect: true }) variant: 'tonal' | 'filled' = 'tonal';\n\n  /**\n   * The size of the FAB.\n   * `\"sm\"` renders a small FAB (40×40dp).\n   * `\"md\"` renders a standard FAB (56×56dp). This is the default.\n   * `\"lg\"` renders a large FAB (96×96dp).\n   */\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * If `true`, the FAB is in a lowered (resting) state with reduced elevation.\n   */\n  @property({ type: Boolean, reflect: true }) lowered: boolean = false;\n\n  /**\n   * Tooltip text shown on hover.\n   */\n  @property() tooltip?: string;\n\n  @property({ type: Boolean, reflect: true }) skeleton: boolean = false;\n\n  @property({ type: Boolean, reflect: true }) toggle: boolean = false;\n\n  @property({ type: Boolean, reflect: true }) selected: boolean = false;\n\n  @query('.button') readonly buttonElement!: HTMLElement | null;\n\n  constructor() {\n    super();\n    this.addEventListener('click', this.__dispatchClickWithThrottle);\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  override focus() {\n    this.buttonElement?.focus();\n  }\n\n  override blur() {\n    this.buttonElement?.blur();\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      return html`<wc-tooltip class=\"tooltip\" for=\"button\"\n        >${this.tooltip}</wc-tooltip\n      >`;\n    }\n    return nothing;\n  }\n\n  renderFabElement(isExtended: boolean) {\n    const { ariaLabel, ariaHasPopup, ariaExpanded } = this as ARIAMixinStrict;\n\n    const cssClasses = {\n      button: true,\n      fab: true,\n      'fab-element': true,\n      [`size-${this.size}`]: true,\n      [`color-${this.color}`]: true,\n      [`variant-${this.variant}`]: true,\n      extended: isExtended,\n      lowered: this.lowered,\n      disabled: this.disabled,\n    };\n\n    if (!isLink(this)) {\n      return html`<button\n        class=${classMap(cssClasses)}\n        id=\"button\"\n        type=\"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.renderFabContent(isExtended)}\n      </button>`;\n    }\n\n    return html`<a\n      class=${classMap(cssClasses)}\n      id=\"button\"\n      tabindex=${this.disabled ? '-1' : '0'}\n      href=${ifDefined(this.href)}\n      target=${this.target}\n      role=\"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    >\n      ${this.renderFabContent(isExtended)}\n    </a>`;\n  }\n\n  renderFabContent(isExtended: boolean) {\n    return html`\n      <div class=\"fab-content\">\n        <slot></slot>\n        ${isExtended\n          ? html`<span class=\"fab-label\">${this.label}</span>`\n          : nothing}\n      </div>\n      ${this.renderDisabledReason(this.softDisabled)}\n    `;\n  }\n\n  // ── Render ────────────────────────────────────────────────────────────────\n\n  override render() {\n    const isExtended = !!this.label;\n\n    return html`\n      <wc-focus-ring class=\"focus-ring\" for=\"button\"></wc-focus-ring>\n      <wc-elevation class=\"elevation\"></wc-elevation>\n      <div class=\"background\"></div>\n      <wc-ripple class=\"ripple\" for=\"button\"></wc-ripple>\n      <wc-skeleton class=\"skeleton\"></wc-skeleton>\n\n      ${this.renderFabElement(isExtended)} ${this.renderTooltip()}\n    `;\n  }\n}\n"],"names":["LitElement","html","nothing","classMap","ifDefined","styles","colorStyles","sizeStyles","property","query"],"mappings":"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"}

package/dist/field.js

@@ -7,6 +7,7 @@ import './directive-ZPhl09Yt.js';
 
 var css_248z = i`* {
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .screen-reader-only {

package/dist/field.js.map

@@ -1 +1 @@
-{"version":3,"file":"field.js","sources":["../../src/field/field.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { observerSlotChangesWithCallback } from '@/__internal/utils/observe-slot-change.js';\n\nimport styles from './field.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Field\n * @tag wc-field\n * @rawTag field\n *\n * @summary Wrapper for form fields with label and help text.\n * @overview\n * <p>Field provides consistent styling and behavior for form inputs.</p>\n *\n * @example\n * ```html\n * <wc-field label=\"Name\" required>\n *   some text\n * </wc-field>\n * ```\n * @tags form\n */\n@IndividualComponent\nexport class Field extends LitElement {\n  static shadowRootOptions: ShadowRootInit = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  static styles = [styles];\n\n  /** Label text shown above the field input. */\n  @property({ type: String })\n  label: string = '';\n\n  /** Help text (deprecated — prefer `helperText`). */\n  @property({ type: String })\n  help: string = '';\n\n  /** When true, marks the field as required and shows a required indicator. */\n  @property({ type: Boolean })\n  required: boolean = false;\n\n  /** When true, the field and its slotted input are disabled. */\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  /** When true, the field and its slotted input are read-only. */\n  @property({ type: Boolean, reflect: true })\n  readonly: boolean = false;\n\n  /** When true, renders the field in a loading skeleton state. */\n  @property({ type: Boolean })\n  skeleton: boolean = false;\n\n  /** Helper/hint text shown in the field footer. */\n  @property({ type: String, attribute: 'helper-text' })\n  helperText: string = '';\n\n  /** When true, the field is in an error state and `errorText` is shown. */\n  @property({ type: Boolean })\n  error: boolean = false;\n\n  /** Error message displayed when `error` is true. */\n  @property({ type: String, attribute: 'error-text' })\n  errorText: string = '';\n\n  /** When true, the field is in a warning state and `warningText` is shown. */\n  @property({ type: Boolean })\n  warning: boolean = false;\n\n  /** Warning message displayed when `warning` is true. */\n  @property({ type: String, attribute: 'warning-text' })\n  warningText: string = '';\n\n  /** Character / word count string displayed at the trailing end of the footer. */\n  @property({ type: String, attribute: 'text-count' })\n  textCount: string = '';\n\n  /** When true, applies focused styling (controlled externally by the slotted input). */\n  @property({ type: Boolean })\n  focused: boolean = false;\n\n  /** When true, applies populated styling (controlled externally by the slotted input). */\n  @property({ type: Boolean })\n  populated: boolean = false;\n\n  /** Visual variant of the field container. */\n  @property({ type: String })\n  variant: 'filled' | 'outlined' | 'default' = 'default';\n\n  /** Reference to the host input element; used to forward click-on-label focus. */\n  @property({ type: Object })\n  host?: HTMLElement;\n\n  /** True when the `field-start` slot contains at least one node. */\n  @state()\n  slotStartHasContent: boolean = false;\n\n  /** True when the `field-end` slot contains at least one node. */\n  @state()\n  slotEndHasContent: boolean = false;\n\n  firstUpdated() {\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('.slot-start-wrapper slot'),\n      hasContent => {\n        this.slotStartHasContent = hasContent;\n        this.requestUpdate();\n      },\n    );\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('.slot-end-wrapper slot'),\n      hasContent => {\n        this.slotEndHasContent = hasContent;\n        this.requestUpdate();\n      },\n    );\n  }\n\n  __handleClick() {\n    // @ts-ignore\n    this.host?.focus?.();\n  }\n\n  __renderInputSlot() {\n    if (this.variant === 'outlined') {\n      if (this.populated || this.focused) return html`<slot></slot>`;\n      return html`\n        <label class=\"outlined-label\">${this.label}</label>\n        <div class=\"outlined-slot-container\">\n          <slot></slot>\n        </div>\n      `;\n    }\n    return html`<slot></slot>`;\n  }\n\n  __renderFieldHeader() {\n    if (!this.label) return nothing;\n    if (this.variant === 'outlined' && !this.populated && !this.focused) {\n      return nothing;\n    }\n    return html`<div class=\"field-header\">\n      <label class=\"label\">\n        ${this.label}${this.required\n          ? html`<span class=\"required\">*</span>`\n          : nothing}\n        <wc-skeleton class=\"skeleton\"></wc-skeleton>\n      </label>\n    </div>`;\n  }\n\n  __renderFieldFooter() {\n    if (\n      !this.textCount &&\n      !this.helperText &&\n      !this.errorText &&\n      !this.warningText\n    )\n      return nothing;\n    return html`<div class=\"field-footer\">\n      ${this.__renderHelperText()} ${this.__renderWordCount()}\n    </div>`;\n  }\n\n  __renderHelperText() {\n    if (this.error) return html`<div class=\"helper\">${this.errorText}</div>`;\n    if (this.warning)\n      return html`<div class=\"helper\">${this.warningText}</div>`;\n    if (this.helperText || this.helperText === '')\n      return html`<div class=\"helper\">${this.helperText}</div>`;\n    return nothing;\n  }\n\n  __renderWordCount() {\n    if (!this.textCount) return nothing;\n    return html`<div class=\"text-count\">${this.textCount}</div>`;\n  }\n\n  render() {\n    const classes = {\n      field: true,\n      required: this.required,\n      disabled: this.disabled,\n      'show-skeleton': this.skeleton,\n      'has-error': this.error,\n      'has-warning': this.warning,\n      focused: this.focused,\n      readonly: this.readonly,\n      [`variant-${this.variant}`]: true,\n      populated: this.populated,\n    };\n\n    return html`\n      <div class=${classMap(classes)}>\n        ${this.__renderFieldHeader()}\n\n        <div class=\"field-body\" @click=${this.__handleClick}>\n          <div class=\"outline\"></div>\n          <div class=\"background\"></div>\n          <wc-skeleton class=\"skeleton\"></wc-skeleton>\n\n          <div class=\"field-content\">\n            <div\n              class=${classMap({\n                'slot-start-wrapper': true,\n                'has-content': this.slotStartHasContent,\n              })}\n            >\n              <slot name=\"field-start\"></slot>\n            </div>\n\n            <div class=\"input-wrapper\">${this.__renderInputSlot()}</div>\n\n            <div\n              class=${classMap({\n                'slot-end-wrapper': true,\n                'has-content': this.slotEndHasContent,\n              })}\n            >\n              <slot name=\"field-end\"></slot>\n            </div>\n          </div>\n        </div>\n\n        ${this.__renderFieldFooter()}\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","nothing","classMap","styles","property","state"],"mappings":"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"}
+{"version":3,"file":"field.js","sources":["../../src/field/field.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { observerSlotChangesWithCallback } from '@/__internal/utils/observe-slot-change.js';\n\nimport styles from './field.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Field\n * @tag wc-field\n * @rawTag field\n *\n * @summary Wrapper for form fields with label and help text.\n * @overview\n * <p>Field provides consistent styling and behavior for form inputs.</p>\n *\n * @example\n * ```html\n * <wc-field label=\"Name\" required>\n *   some text\n * </wc-field>\n * ```\n * @tags form\n */\n@IndividualComponent\nexport class Field extends LitElement {\n  static shadowRootOptions: ShadowRootInit = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  static styles = [styles];\n\n  /** Label text shown above the field input. */\n  @property({ type: String })\n  label: string = '';\n\n  /** Help text (deprecated — prefer `helperText`). */\n  @property({ type: String })\n  help: string = '';\n\n  /** When true, marks the field as required and shows a required indicator. */\n  @property({ type: Boolean })\n  required: boolean = false;\n\n  /** When true, the field and its slotted input are disabled. */\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  /** When true, the field and its slotted input are read-only. */\n  @property({ type: Boolean, reflect: true })\n  readonly: boolean = false;\n\n  /** When true, renders the field in a loading skeleton state. */\n  @property({ type: Boolean })\n  skeleton: boolean = false;\n\n  /** Helper/hint text shown in the field footer. */\n  @property({ type: String, attribute: 'helper-text' })\n  helperText: string = '';\n\n  /** When true, the field is in an error state and `errorText` is shown. */\n  @property({ type: Boolean })\n  error: boolean = false;\n\n  /** Error message displayed when `error` is true. */\n  @property({ type: String, attribute: 'error-text' })\n  errorText: string = '';\n\n  /** When true, the field is in a warning state and `warningText` is shown. */\n  @property({ type: Boolean })\n  warning: boolean = false;\n\n  /** Warning message displayed when `warning` is true. */\n  @property({ type: String, attribute: 'warning-text' })\n  warningText: string = '';\n\n  /** Character / word count string displayed at the trailing end of the footer. */\n  @property({ type: String, attribute: 'text-count' })\n  textCount: string = '';\n\n  /** When true, applies focused styling (controlled externally by the slotted input). */\n  @property({ type: Boolean })\n  focused: boolean = false;\n\n  /** When true, applies populated styling (controlled externally by the slotted input). */\n  @property({ type: Boolean })\n  populated: boolean = false;\n\n  /** Visual variant of the field container. */\n  @property({ type: String })\n  variant: 'filled' | 'outlined' | 'default' = 'default';\n\n  /** Reference to the host input element; used to forward click-on-label focus. */\n  @property({ type: Object })\n  host?: HTMLElement;\n\n  /** True when the `field-start` slot contains at least one node. */\n  @state()\n  slotStartHasContent: boolean = false;\n\n  /** True when the `field-end` slot contains at least one node. */\n  @state()\n  slotEndHasContent: boolean = false;\n\n  firstUpdated() {\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('.slot-start-wrapper slot'),\n      hasContent => {\n        this.slotStartHasContent = hasContent;\n        this.requestUpdate();\n      },\n    );\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('.slot-end-wrapper slot'),\n      hasContent => {\n        this.slotEndHasContent = hasContent;\n        this.requestUpdate();\n      },\n    );\n  }\n\n  __handleClick() {\n    // @ts-ignore\n    this.host?.focus?.();\n  }\n\n  __renderInputSlot() {\n    if (this.variant === 'outlined') {\n      if (this.populated || this.focused) return html`<slot></slot>`;\n      return html`\n        <label class=\"outlined-label\">${this.label}</label>\n        <div class=\"outlined-slot-container\">\n          <slot></slot>\n        </div>\n      `;\n    }\n    return html`<slot></slot>`;\n  }\n\n  __renderFieldHeader() {\n    if (!this.label) return nothing;\n    if (this.variant === 'outlined' && !this.populated && !this.focused) {\n      return nothing;\n    }\n    return html`<div class=\"field-header\">\n      <label class=\"label\">\n        ${this.label}${this.required\n          ? html`<span class=\"required\">*</span>`\n          : nothing}\n        <wc-skeleton class=\"skeleton\"></wc-skeleton>\n      </label>\n    </div>`;\n  }\n\n  __renderFieldFooter() {\n    if (\n      !this.textCount &&\n      !this.helperText &&\n      !this.errorText &&\n      !this.warningText\n    )\n      return nothing;\n    return html`<div class=\"field-footer\">\n      ${this.__renderHelperText()} ${this.__renderWordCount()}\n    </div>`;\n  }\n\n  __renderHelperText() {\n    if (this.error) return html`<div class=\"helper\">${this.errorText}</div>`;\n    if (this.warning)\n      return html`<div class=\"helper\">${this.warningText}</div>`;\n    if (this.helperText || this.helperText === '')\n      return html`<div class=\"helper\">${this.helperText}</div>`;\n    return nothing;\n  }\n\n  __renderWordCount() {\n    if (!this.textCount) return nothing;\n    return html`<div class=\"text-count\">${this.textCount}</div>`;\n  }\n\n  render() {\n    const classes = {\n      field: true,\n      required: this.required,\n      disabled: this.disabled,\n      'show-skeleton': this.skeleton,\n      'has-error': this.error,\n      'has-warning': this.warning,\n      focused: this.focused,\n      readonly: this.readonly,\n      [`variant-${this.variant}`]: true,\n      populated: this.populated,\n    };\n\n    return html`\n      <div class=${classMap(classes)}>\n        ${this.__renderFieldHeader()}\n\n        <div class=\"field-body\" @click=${this.__handleClick}>\n          <div class=\"outline\"></div>\n          <div class=\"background\"></div>\n          <wc-skeleton class=\"skeleton\"></wc-skeleton>\n\n          <div class=\"field-content\">\n            <div\n              class=${classMap({\n                'slot-start-wrapper': true,\n                'has-content': this.slotStartHasContent,\n              })}\n            >\n              <slot name=\"field-start\"></slot>\n            </div>\n\n            <div class=\"input-wrapper\">${this.__renderInputSlot()}</div>\n\n            <div\n              class=${classMap({\n                'slot-end-wrapper': true,\n                'has-content': this.slotEndHasContent,\n              })}\n            >\n              <slot name=\"field-end\"></slot>\n            </div>\n          </div>\n        </div>\n\n        ${this.__renderFieldFooter()}\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","nothing","classMap","styles","property","state"],"mappings":"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"}

package/dist/{flow-designer-node-DsVwQTac.js → flow-designer-node-CGSm6cUH.js}

@@ -3,6 +3,7 @@ import { n } from './property-B49QQ8pS.js';
 
 var css_248z = i`* {
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .screen-reader-only {
@@ -549,4 +550,4 @@ FlowDesignerNode = __decorate([
 ], FlowDesignerNode);
 
 export { FlowDesignerNode as F, css_248z as c };
-//# sourceMappingURL=flow-designer-node-DsVwQTac.js.map
+//# sourceMappingURL=flow-designer-node-CGSm6cUH.js.map

package/dist/{flow-designer-node-DsVwQTac.js.map → flow-designer-node-CGSm6cUH.js.map}

@@ -1 +1 @@
-{"version":3,"file":"flow-designer-node-DsVwQTac.js","sources":["../../src/flow-designer/flow-designer-node.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './flow-designer.scss';\nimport type { WorkflowNode } from './types.js';\n\n/**\n * Individual node component for flow designer\n * Renders a single workflow node with customizable slot templates\n *\n * @tag wc-flow-designer-node\n * @rawTag flow-designer-node\n * @wip true\n */\n@IndividualComponent\nexport class FlowDesignerNode extends LitElement {\n  static styles = [styles];\n\n  /**\n   * The workflow node to render\n   */\n  @property({ type: Object })\n  node: WorkflowNode = { id: '', type: 'action', label: '' };\n\n  /**\n   * Whether this node is currently selected\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'selected' })\n  isSelected: boolean = false;\n\n  /**\n   * Whether this node is in edit mode\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'editing' })\n  isEditing: boolean = false;\n\n  /**\n   * Whether this node is disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  /**\n   * Whether to show the delete button\n   */\n  @property({ type: Boolean, attribute: 'show-delete' })\n  showDelete: boolean = true;\n\n  private _handleClick = () => {\n    this.dispatchEvent(\n      new CustomEvent('node-click', {\n        detail: { nodeId: this.node.id },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  };\n\n  private _handleDoubleClick = () => {\n    this.dispatchEvent(\n      new CustomEvent('node-edit-start', {\n        detail: { nodeId: this.node.id },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  };\n\n  private _handleDelete = (e: Event) => {\n    e.stopPropagation();\n    if (confirm(`Delete \"${this.node.label}\"?`)) {\n      this.dispatchEvent(\n        new CustomEvent('node-delete', {\n          detail: { nodeId: this.node.id },\n          bubbles: true,\n          composed: true,\n        })\n      );\n    }\n  };\n\n  private _handleMouseEnter = () => {\n    // Node hover state handled via CSS\n  };\n\n  private _handleMouseLeave = () => {\n    // Node hover state handled via CSS\n  };\n\n  render() {\n    const { node, isSelected, isEditing, disabled } = this;\n    const nodeType = node.type || 'action';\n\n    return html`\n      <div\n        class=\"node-card ${nodeType}\"\n        ?selected=${isSelected}\n        ?editing=${isEditing}\n        ?disabled=${disabled}\n        @click=${this._handleClick}\n        @dblclick=${this._handleDoubleClick}\n        role=\"button\"\n        tabindex=\"0\"\n        @keydown=${(e: KeyboardEvent) => {\n          if (e.key === 'Enter' || e.key === ' ') this._handleClick();\n        }}\n      >\n        <!-- Customizable header slot -->\n        <slot name=\"${nodeType}-header\">\n          ${this._renderDefaultHeader()}\n        </slot>\n\n        <!-- Customizable body slot -->\n        <slot name=\"${nodeType}-body\">${this._renderDefaultBody()}</slot>\n\n        <!-- Action buttons -->\n        ${this.isEditing\n          ? html`\n              <div class=\"node-actions\">\n                <button class=\"btn-sm\" @click=${this._handleDelete}>\n                  Delete\n                </button>\n              </div>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n\n  private _renderDefaultHeader() {\n    const { node } = this;\n    const iconMap: Record<string, string> = {\n      trigger: 'play-circle',\n      action: 'check-circle',\n      decision: 'help-circle',\n      loop_start: 'repeat',\n      loop_end: 'repeat',\n      fork: 'git-branch',\n      join: 'git-merge',\n    };\n\n    const icon = iconMap[node.type] || 'activity';\n\n    return html`\n      <div class=\"node-header\">\n        <wc-icon provider=\"carbon\" name=${icon} class=\"node-icon\"></wc-icon>\n        <span class=\"node-title\">${node.label}</span>\n      </div>\n    `;\n  }\n\n  private _renderDefaultBody() {\n    const { node } = this;\n    return html`\n      <div class=\"node-body\">\n        ${node.description\n          ? html`<p class=\"node-description\">${node.description}</p>`\n          : nothing}\n        <div class=\"node-metadata\">\n          <span class=\"node-type-tag\">${node.type}</span>\n          ${node.id ? html`<span class=\"node-id\">${node.id}</span>` : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'wc-flow-designer-node': FlowDesignerNode;\n  }\n}\n"],"names":["LitElement","html","nothing","styles","property"],"mappings":"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"}
+{"version":3,"file":"flow-designer-node-CGSm6cUH.js","sources":["../../src/flow-designer/flow-designer-node.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './flow-designer.scss';\nimport type { WorkflowNode } from './types.js';\n\n/**\n * Individual node component for flow designer\n * Renders a single workflow node with customizable slot templates\n *\n * @tag wc-flow-designer-node\n * @rawTag flow-designer-node\n * @wip true\n */\n@IndividualComponent\nexport class FlowDesignerNode extends LitElement {\n  static styles = [styles];\n\n  /**\n   * The workflow node to render\n   */\n  @property({ type: Object })\n  node: WorkflowNode = { id: '', type: 'action', label: '' };\n\n  /**\n   * Whether this node is currently selected\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'selected' })\n  isSelected: boolean = false;\n\n  /**\n   * Whether this node is in edit mode\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'editing' })\n  isEditing: boolean = false;\n\n  /**\n   * Whether this node is disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  /**\n   * Whether to show the delete button\n   */\n  @property({ type: Boolean, attribute: 'show-delete' })\n  showDelete: boolean = true;\n\n  private _handleClick = () => {\n    this.dispatchEvent(\n      new CustomEvent('node-click', {\n        detail: { nodeId: this.node.id },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  };\n\n  private _handleDoubleClick = () => {\n    this.dispatchEvent(\n      new CustomEvent('node-edit-start', {\n        detail: { nodeId: this.node.id },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  };\n\n  private _handleDelete = (e: Event) => {\n    e.stopPropagation();\n    if (confirm(`Delete \"${this.node.label}\"?`)) {\n      this.dispatchEvent(\n        new CustomEvent('node-delete', {\n          detail: { nodeId: this.node.id },\n          bubbles: true,\n          composed: true,\n        })\n      );\n    }\n  };\n\n  private _handleMouseEnter = () => {\n    // Node hover state handled via CSS\n  };\n\n  private _handleMouseLeave = () => {\n    // Node hover state handled via CSS\n  };\n\n  render() {\n    const { node, isSelected, isEditing, disabled } = this;\n    const nodeType = node.type || 'action';\n\n    return html`\n      <div\n        class=\"node-card ${nodeType}\"\n        ?selected=${isSelected}\n        ?editing=${isEditing}\n        ?disabled=${disabled}\n        @click=${this._handleClick}\n        @dblclick=${this._handleDoubleClick}\n        role=\"button\"\n        tabindex=\"0\"\n        @keydown=${(e: KeyboardEvent) => {\n          if (e.key === 'Enter' || e.key === ' ') this._handleClick();\n        }}\n      >\n        <!-- Customizable header slot -->\n        <slot name=\"${nodeType}-header\">\n          ${this._renderDefaultHeader()}\n        </slot>\n\n        <!-- Customizable body slot -->\n        <slot name=\"${nodeType}-body\">${this._renderDefaultBody()}</slot>\n\n        <!-- Action buttons -->\n        ${this.isEditing\n          ? html`\n              <div class=\"node-actions\">\n                <button class=\"btn-sm\" @click=${this._handleDelete}>\n                  Delete\n                </button>\n              </div>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n\n  private _renderDefaultHeader() {\n    const { node } = this;\n    const iconMap: Record<string, string> = {\n      trigger: 'play-circle',\n      action: 'check-circle',\n      decision: 'help-circle',\n      loop_start: 'repeat',\n      loop_end: 'repeat',\n      fork: 'git-branch',\n      join: 'git-merge',\n    };\n\n    const icon = iconMap[node.type] || 'activity';\n\n    return html`\n      <div class=\"node-header\">\n        <wc-icon provider=\"carbon\" name=${icon} class=\"node-icon\"></wc-icon>\n        <span class=\"node-title\">${node.label}</span>\n      </div>\n    `;\n  }\n\n  private _renderDefaultBody() {\n    const { node } = this;\n    return html`\n      <div class=\"node-body\">\n        ${node.description\n          ? html`<p class=\"node-description\">${node.description}</p>`\n          : nothing}\n        <div class=\"node-metadata\">\n          <span class=\"node-type-tag\">${node.type}</span>\n          ${node.id ? html`<span class=\"node-id\">${node.id}</span>` : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'wc-flow-designer-node': FlowDesignerNode;\n  }\n}\n"],"names":["LitElement","html","nothing","styles","property"],"mappings":"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"}

package/dist/flow-designer-node.js

@@ -1,4 +1,4 @@
 import './IndividualComponent-Bdwyrvd6.js';
 import './property-B49QQ8pS.js';
-export { F as FlowDesignerNode } from './flow-designer-node-DsVwQTac.js';
+export { F as FlowDesignerNode } from './flow-designer-node-CGSm6cUH.js';
 //# sourceMappingURL=flow-designer-node.js.map

package/dist/flow-designer.js

@@ -5,7 +5,7 @@ import { e } from './query-CHb9Ft_d.js';
 import './toolbar.js';
 import './icon-button.js';
 import './icon.js';
-import { c as css_248z } from './flow-designer-node-DsVwQTac.js';
+import { c as css_248z } from './flow-designer-node-CGSm6cUH.js';
 import './base-Cl6v8-BZ.js';
 import './class-map-DG7CA1et.js';
 import './directive-ZPhl09Yt.js';