@redvars/peacock 3.8.1 → 3.8.2

package/dist/field.js

@@ -0,0 +1,461 @@
+import { i, a as i$1, _ as __decorate, I as IndividualComponent, b, A } from './IndividualComponent-Bdwyrvd6.js';
+import { n } from './property-B49QQ8pS.js';
+import { r } from './state-DkTK9EGF.js';
+import { e } from './class-map-DG7CA1et.js';
+import { o as observerSlotChangesWithCallback } from './observe-slot-change-DPxaZrZF.js';
+import './directive-ZPhl09Yt.js';
+
+var css_248z = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+:host {
+  --field-height: unset;
+  --field-padding-block: unset;
+}
+
+.field {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  --_container-shape-start-start: var(--field-container-shape-start-start, var(--shape-corner-extra-small));
+  --_container-shape-start-end: var(--field-container-shape-start-end, var(--shape-corner-extra-small));
+  --_container-shape-end-start: var(--field-container-shape-end-start, var(--shape-corner-extra-small));
+  --_container-shape-end-end: var(--field-container-shape-end-end, var(--shape-corner-extra-small));
+  --_container-color: var(--field-container-color);
+  --_outline-width: var(--field-outline-width, 0.0675rem);
+  --_outline-color: var(--field-outline-color, var(--color-outline));
+  --_input-text-color: var(--field-label-text-color, var(--color-on-surface));
+  --_helper-text-color: var(--field-helper-text-color, var(--color-on-surface-variant));
+  --_helper-text-opacity: unset;
+  --_label-text-color: var(--field-label-text-color, var(--color-primary));
+}
+.field .field-header {
+  display: flex;
+  align-items: center;
+  margin-block-end: var(--spacing-100);
+  justify-content: space-between;
+  gap: var(--spacing-100);
+}
+.field .field-header .label {
+  position: relative;
+  font-family: var(--typography-body-small-font-family) !important;
+  font-size: var(--typography-body-small-font-size) !important;
+  font-weight: var(--typography-body-small-font-weight) !important;
+  line-height: var(--typography-body-small-line-height) !important;
+  letter-spacing: var(--typography-body-small-letter-spacing) !important;
+  color: var(--_label-text-color);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.field .field-header .label .required {
+  color: var(--color-error);
+  padding-inline-start: var(--spacing-025);
+}
+.field .field-body {
+  position: relative;
+  display: flex;
+  cursor: text;
+}
+.field .field-body .outline {
+  position: absolute;
+  z-index: 2;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  border: var(--_outline-width) solid var(--_outline-color);
+  opacity: var(--_outline-opacity, 1);
+  border-start-start-radius: var(--_container-shape-start-start);
+  border-start-end-radius: var(--_container-shape-start-end);
+  border-end-start-radius: var(--_container-shape-end-start);
+  border-end-end-radius: var(--_container-shape-end-end);
+}
+.field .field-body .background {
+  position: absolute;
+  z-index: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  background-color: var(--_container-color);
+  opacity: var(--_container-opacity, 1);
+  border-start-start-radius: var(--_container-shape-start-start);
+  border-start-end-radius: var(--_container-shape-start-end);
+  border-end-start-radius: var(--_container-shape-end-start);
+  border-end-end-radius: var(--_container-shape-end-end);
+}
+.field .field-body .field-content {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-height: var(--field-height, 3.5rem);
+  padding-block: var(--field-padding-block);
+  z-index: 1;
+}
+.field .field-body .field-content .input-wrapper {
+  flex: 1;
+  padding-inline: var(--spacing-200);
+  position: relative;
+}
+.field .field-body .field-content .input-wrapper .outlined-label {
+  position: absolute;
+  top: 0;
+  left: 0;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  padding-inline: var(--spacing-200);
+  font-family: var(--typography-body-large-font-family) !important;
+  font-size: var(--typography-body-large-font-size) !important;
+  font-weight: var(--typography-body-large-font-weight) !important;
+  line-height: var(--typography-body-large-line-height) !important;
+  letter-spacing: var(--typography-body-large-letter-spacing) !important;
+  color: var(--_input-text-color);
+  background-color: var(--_container-color);
+  opacity: var(--_container-opacity, 1);
+}
+.field .field-body .field-content .input-wrapper .outlined-slot-container {
+  opacity: 0;
+}
+.field .field-body .field-content slot::slotted(*) {
+  font-family: var(--typography-body-large-font-family) !important;
+  font-size: var(--typography-body-large-font-size) !important;
+  font-weight: var(--typography-body-large-font-weight) !important;
+  line-height: var(--typography-body-large-line-height) !important;
+  letter-spacing: var(--typography-body-large-letter-spacing) !important;
+  color: var(--_input-text-color);
+  --icon-size: 1.25rem;
+  --icon-color: var(--_input-text-color);
+}
+.field .field-body .field-content slot::slotted(input::placeholder) {
+  color: var(--color-on-surface-variant);
+}
+.field .field-body .field-content .slot-start-wrapper.has-content {
+  margin-inline-start: 0.75rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.field .field-body .field-content .slot-end-wrapper.has-content {
+  margin-inline-end: 0.75rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.field .field-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-200);
+  margin-block-start: var(--spacing-050);
+  padding-inline: var(--spacing-200);
+}
+.field .field-footer .helper, .field .field-footer .text-count {
+  position: relative;
+  font-family: var(--typography-body-large-font-family) !important;
+  font-size: var(--typography-body-large-font-size) !important;
+  font-weight: var(--typography-body-large-font-weight) !important;
+  line-height: var(--typography-body-large-line-height) !important;
+  letter-spacing: var(--typography-body-large-letter-spacing) !important;
+  color: var(--_helper-text-color);
+  opacity: var(--_helper-text-opacity);
+}
+.field.focused {
+  --_outline-color: var(--color-primary);
+  --_outline-width: 0.125rem;
+}
+.field.has-error {
+  --_label-text-color: var(--color-error);
+  --_outline-color: var(--color-error);
+  --_helper-text-color: var(--color-error);
+  --_input-text-color: var(--color-error);
+}
+.field.has-warning {
+  --_label-text-color: var(--color-warning);
+  --_outline-color: var(--color-warning);
+  --_helper-text-color: var(--color-warning);
+  --_input-text-color: var(--color-warning);
+}
+.field.disabled .label {
+  opacity: 0.38;
+}
+.field.disabled {
+  --_input-text-color: var(--color-on-surface-variant);
+  --_outline-opacity: 0.38;
+  --_helper-text-opacity: 0.38;
+  --_container-color: var(--color-on-surface);
+  --_container-opacity: 0.1;
+  cursor: not-allowed;
+}
+.field.readonly {
+  cursor: initial;
+  --_input-text-color: var(--color-on-surface-variant);
+  --_outline-opacity: 0.38;
+  --_helper-text-opacity: 0.38;
+  --_container-color: var(--color-on-surface);
+  --_container-opacity: 0.38;
+}
+.field.show-skeleton .skeleton {
+  display: block;
+}
+
+.skeleton {
+  display: none;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  position: absolute;
+  top: 0;
+  left: 0;
+  --skeleton-container-shape-start-start: var(--_container-shape-start-start);
+  --skeleton-container-shape-start-end: var(--_container-shape-start-end);
+  --skeleton-container-shape-end-start: var(--_container-shape-end-start);
+  --skeleton-container-shape-end-end: var(--_container-shape-end-end);
+}`;
+
+/**
+ * @label Field
+ * @tag wc-field
+ * @rawTag field
+ *
+ * @summary Wrapper for form fields with label and help text.
+ * @overview
+ * <p>Field provides consistent styling and behavior for form inputs.</p>
+ *
+ * @example
+ * ```html
+ * <wc-field label="Name" required>
+ *   some text
+ * </wc-field>
+ * ```
+ * @tags form
+ */
+let Field = class Field extends i$1 {
+    constructor() {
+        super(...arguments);
+        /** Label text shown above the field input. */
+        this.label = '';
+        /** Help text (deprecated — prefer `helperText`). */
+        this.help = '';
+        /** When true, marks the field as required and shows a required indicator. */
+        this.required = false;
+        /** When true, the field and its slotted input are disabled. */
+        this.disabled = false;
+        /** When true, the field and its slotted input are read-only. */
+        this.readonly = false;
+        /** When true, renders the field in a loading skeleton state. */
+        this.skeleton = false;
+        /** Helper/hint text shown in the field footer. */
+        this.helperText = '';
+        /** When true, the field is in an error state and `errorText` is shown. */
+        this.error = false;
+        /** Error message displayed when `error` is true. */
+        this.errorText = '';
+        /** When true, the field is in a warning state and `warningText` is shown. */
+        this.warning = false;
+        /** Warning message displayed when `warning` is true. */
+        this.warningText = '';
+        /** Character / word count string displayed at the trailing end of the footer. */
+        this.textCount = '';
+        /** When true, applies focused styling (controlled externally by the slotted input). */
+        this.focused = false;
+        /** When true, applies populated styling (controlled externally by the slotted input). */
+        this.populated = false;
+        /** Visual variant of the field container. */
+        this.variant = 'default';
+        /** True when the `field-start` slot contains at least one node. */
+        this.slotStartHasContent = false;
+        /** True when the `field-end` slot contains at least one node. */
+        this.slotEndHasContent = false;
+    }
+    firstUpdated() {
+        observerSlotChangesWithCallback(this.renderRoot.querySelector('.slot-start-wrapper slot'), hasContent => {
+            this.slotStartHasContent = hasContent;
+            this.requestUpdate();
+        });
+        observerSlotChangesWithCallback(this.renderRoot.querySelector('.slot-end-wrapper slot'), hasContent => {
+            this.slotEndHasContent = hasContent;
+            this.requestUpdate();
+        });
+    }
+    __handleClick() {
+        // @ts-ignore
+        this.host?.focus?.();
+    }
+    __renderInputSlot() {
+        if (this.variant === 'outlined') {
+            if (this.populated || this.focused)
+                return b `<slot></slot>`;
+            return b `
+        <label class="outlined-label">${this.label}</label>
+        <div class="outlined-slot-container">
+          <slot></slot>
+        </div>
+      `;
+        }
+        return b `<slot></slot>`;
+    }
+    __renderFieldHeader() {
+        if (!this.label)
+            return A;
+        if (this.variant === 'outlined' && !this.populated && !this.focused) {
+            return A;
+        }
+        return b `<div class="field-header">
+      <label class="label">
+        ${this.label}${this.required
+            ? b `<span class="required">*</span>`
+            : A}
+        <wc-skeleton class="skeleton"></wc-skeleton>
+      </label>
+    </div>`;
+    }
+    __renderFieldFooter() {
+        if (!this.textCount &&
+            !this.helperText &&
+            !this.errorText &&
+            !this.warningText)
+            return A;
+        return b `<div class="field-footer">
+      ${this.__renderHelperText()} ${this.__renderWordCount()}
+    </div>`;
+    }
+    __renderHelperText() {
+        if (this.error)
+            return b `<div class="helper">${this.errorText}</div>`;
+        if (this.warning)
+            return b `<div class="helper">${this.warningText}</div>`;
+        if (this.helperText || this.helperText === '')
+            return b `<div class="helper">${this.helperText}</div>`;
+        return A;
+    }
+    __renderWordCount() {
+        if (!this.textCount)
+            return A;
+        return b `<div class="text-count">${this.textCount}</div>`;
+    }
+    render() {
+        const classes = {
+            field: true,
+            required: this.required,
+            disabled: this.disabled,
+            'show-skeleton': this.skeleton,
+            'has-error': this.error,
+            'has-warning': this.warning,
+            focused: this.focused,
+            readonly: this.readonly,
+            [`variant-${this.variant}`]: true,
+            populated: this.populated,
+        };
+        return b `
+      <div class=${e(classes)}>
+        ${this.__renderFieldHeader()}
+
+        <div class="field-body" @click=${this.__handleClick}>
+          <div class="outline"></div>
+          <div class="background"></div>
+          <wc-skeleton class="skeleton"></wc-skeleton>
+
+          <div class="field-content">
+            <div
+              class=${e({
+            'slot-start-wrapper': true,
+            'has-content': this.slotStartHasContent,
+        })}
+            >
+              <slot name="field-start"></slot>
+            </div>
+
+            <div class="input-wrapper">${this.__renderInputSlot()}</div>
+
+            <div
+              class=${e({
+            'slot-end-wrapper': true,
+            'has-content': this.slotEndHasContent,
+        })}
+            >
+              <slot name="field-end"></slot>
+            </div>
+          </div>
+        </div>
+
+        ${this.__renderFieldFooter()}
+      </div>
+    `;
+    }
+};
+Field.shadowRootOptions = {
+    ...i$1.shadowRootOptions,
+    delegatesFocus: true,
+};
+Field.styles = [css_248z];
+__decorate([
+    n({ type: String })
+], Field.prototype, "label", void 0);
+__decorate([
+    n({ type: String })
+], Field.prototype, "help", void 0);
+__decorate([
+    n({ type: Boolean })
+], Field.prototype, "required", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Field.prototype, "disabled", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Field.prototype, "readonly", void 0);
+__decorate([
+    n({ type: Boolean })
+], Field.prototype, "skeleton", void 0);
+__decorate([
+    n({ type: String, attribute: 'helper-text' })
+], Field.prototype, "helperText", void 0);
+__decorate([
+    n({ type: Boolean })
+], Field.prototype, "error", void 0);
+__decorate([
+    n({ type: String, attribute: 'error-text' })
+], Field.prototype, "errorText", void 0);
+__decorate([
+    n({ type: Boolean })
+], Field.prototype, "warning", void 0);
+__decorate([
+    n({ type: String, attribute: 'warning-text' })
+], Field.prototype, "warningText", void 0);
+__decorate([
+    n({ type: String, attribute: 'text-count' })
+], Field.prototype, "textCount", void 0);
+__decorate([
+    n({ type: Boolean })
+], Field.prototype, "focused", void 0);
+__decorate([
+    n({ type: Boolean })
+], Field.prototype, "populated", void 0);
+__decorate([
+    n({ type: String })
+], Field.prototype, "variant", void 0);
+__decorate([
+    n({ type: Object })
+], Field.prototype, "host", void 0);
+__decorate([
+    r()
+], Field.prototype, "slotStartHasContent", void 0);
+__decorate([
+    r()
+], Field.prototype, "slotEndHasContent", void 0);
+Field = __decorate([
+    IndividualComponent
+], Field);
+
+export { Field };
+//# sourceMappingURL=field.js.map

package/dist/field.js.map

@@ -0,0 +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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"}

package/dist/{popover-DUPmMVWS.js → floating-controller-CnUZnOhK.js}

@@ -1,6 +1,3 @@
-import { a as i, _ as __decorate, I as IndividualComponent, i as i$1, b } from './IndividualComponent-DUINtMGK.js';
-import { n } from './property-1psGvXOq.js';
-
 /**
  * Custom positioning reference element.
  * @see https://floating-ui.com/docs/virtual-elements
@@ -1806,171 +1803,5 @@ class FloatingController {
     }
 }
 
-var css_248z = i`* {
-  box-sizing: border-box;
-}
-
-.screen-reader-only {
-  display: none !important;
-}
-
-:host {
-  display: inline-block;
-}`;
-
-/**
- * @label Popover
- * @tag wc-popover
- * @rawTag popover
- * @summary Displays additional information in a floating panel anchored to a trigger element.
- * @overview
- * <p>The Popover component wraps a trigger element and a <code>wc-popover-content</code> child. It uses
- * floating-ui to compute position, keeping the panel visible inside the viewport even on scroll.</p>
- * @tags display
- *
- * @fires {CustomEvent} wc-popover--open - Fired when the popover opens.
- * @fires {CustomEvent} wc-popover--close - Fired when the popover closes.
- *
- * @example
- * ```html
- * <wc-popover trigger="click">
- *   <wc-button>Open popover</wc-button>
- *   <wc-popover-content>
- *     <p>Popover body text goes here.</p>
- *   </wc-popover-content>
- * </wc-popover>
- * ```
- */
-let Popover = class Popover extends i$1 {
-    constructor() {
-        super(...arguments);
-        /**
-         * Determines how the popover is triggered.
-         * Possible values are `"click"`, `"hover"`, `"manual"`.
-         */
-        this.trigger = 'click';
-        /**
-         * Preferred placement of the popover relative to the trigger element.
-         * Accepts any floating-ui `Placement` string such as `"bottom"`, `"top-start"`, `"right"`, etc.
-         */
-        this.placement = 'bottom';
-        /**
-         * Whether the popover is open.
-         */
-        this.open = false;
-        /**
-         * Distance in pixels between the trigger element and the popover panel.
-         */
-        this.offset = 8;
-        this._floating = null;
-        this._contentEl = null;
-        this._triggerEl = null;
-    }
-    _setupFloating() {
-        // Tear down any existing controller
-        if (this._floating) {
-            this._floating = null;
-        }
-        // Resolve the content element
-        this._contentEl = this.querySelector('wc-popover-content');
-        // Resolve the trigger element: first light-DOM child that is NOT wc-popover-content
-        this._triggerEl =
-            Array.from(this.children).find((c) => c.tagName.toLowerCase() !== 'wc-popover-content') ?? null;
-        if (!this._triggerEl || !this._contentEl)
-            return;
-        const triggerMode = this.trigger === 'manual'
-            ? 'manual'
-            : this.trigger;
-        this._floating = new FloatingController(this, {
-            placement: this.placement,
-            strategy: 'fixed',
-            offset: this.offset,
-            trigger: triggerMode,
-            closeOnClickOutside: true,
-            onOpenChange: (isOpen) => {
-                this.open = isOpen;
-                if (this._contentEl) {
-                    this._contentEl.open = isOpen;
-                }
-                this.dispatchEvent(new CustomEvent(isOpen ? 'wc-popover--open' : 'wc-popover--close', {
-                    bubbles: true,
-                    composed: true,
-                }));
-            },
-        });
-        this._floating.setElements(this._triggerEl, this._contentEl);
-        if (this.open) {
-            this._floating.open();
-            this._contentEl.open = true;
-        }
-    }
-    connectedCallback() {
-        super.connectedCallback();
-    }
-    firstUpdated() {
-        this._setupFloating();
-    }
-    updated(changedProps) {
-        if (changedProps.has('trigger') ||
-            changedProps.has('placement') ||
-            changedProps.has('offset')) {
-            this._setupFloating();
-        }
-        if (changedProps.has('open') && this._floating) {
-            if (this.open && !this._floating.isOpen) {
-                this._floating.open();
-                if (this._contentEl)
-                    this._contentEl.open = true;
-            }
-            else if (!this.open && this._floating.isOpen) {
-                this._floating.close();
-                if (this._contentEl)
-                    this._contentEl.open = false;
-            }
-        }
-    }
-    /**
-     * Programmatically opens the popover.
-     */
-    show() {
-        if (this._floating && !this._floating.isOpen) {
-            this._floating.open();
-        }
-        else if (!this._floating) {
-            this.open = true;
-        }
-    }
-    /**
-     * Programmatically closes the popover.
-     */
-    hide() {
-        if (this._floating && this._floating.isOpen) {
-            this._floating.close();
-        }
-        else if (!this._floating) {
-            this.open = false;
-        }
-    }
-    render() {
-        return b `<slot></slot>`;
-    }
-};
-Popover.styles = [css_248z];
-__decorate([
-    n({ reflect: true })
-], Popover.prototype, "trigger", void 0);
-__decorate([
-    n({ reflect: true })
-], Popover.prototype, "placement", void 0);
-__decorate([
-    n({ type: Boolean, reflect: true })
-], Popover.prototype, "open", void 0);
-__decorate([
-    n({ type: Number })
-], Popover.prototype, "offset", void 0);
-Popover = __decorate([
-    IndividualComponent
-], Popover);
-
-export { FloatingController as F, Popover as P };
-//# sourceMappingURL=popover-DUPmMVWS.js.map
+export { FloatingController as F };
+//# sourceMappingURL=floating-controller-CnUZnOhK.js.map