@esri/calcite-components 1.0.0-beta.80 → 1.0.0-beta.81

package/dist/components/color-picker-hex-input.js

@@ -1,9 +1,10 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.81
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { n as normalizeHex, i as isValidHex, a as isLonghandHex, r as rgbToHex, h as hexToRGB, b as hexChar } from './utils.js';
+import { n as normalizeHex, i as isValidHex, a as isLonghandHex, r as rgbToHex, b as hexChar } from './utils.js';
 import { c as color, d as defineCustomElement$4 } from './color-picker-swatch.js';
 import { f as focusElement } from './dom.js';
 import { d as defineCustomElement$3 } from './icon.js';
@@ -170,32 +171,13 @@ const ColorPickerHexInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
           : this.formatForInternalInput(rgbToHex(this.internalColor.object()));
     };
     this.onInputChange = () => {
-      const inputValue = this.inputNode.value;
-      let value;
-      if (inputValue) {
-        const hex = inputValue;
-        const color = hexToRGB(`#${hex}`);
-        if (!color) {
-          return;
-        }
-        value = normalizeHex(hex);
-      }
-      else if (this.allowEmpty) {
-        value = null;
-      }
-      this.value = value;
-      this.calciteColorPickerHexInputChange.emit();
+      this.internalSetValue(this.inputNode.value, this.value);
     };
     /**
      * The last valid/selected color. Used as a fallback if an invalid hex code is entered.
      */
     this.internalColor = DEFAULT_COLOR;
     this.previousNonNullValue = this.value;
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
     this.storeInputRef = (node) => {
       this.inputNode = node;
     };
@@ -210,38 +192,16 @@ const ColorPickerHexInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
     if (value) {
       const normalized = normalizeHex(value);
       if (isValidHex(normalized)) {
-        this.internalColor = color(normalized);
-        this.value = normalized;
+        this.internalSetValue(normalized, normalized, false);
       }
       return;
     }
     if (allowEmpty) {
-      this.internalColor = null;
-      this.value = null;
+      this.internalSetValue(null, null, false);
     }
   }
   handleValueChange(value, oldValue) {
-    if (value) {
-      const normalized = normalizeHex(value);
-      if (isValidHex(normalized)) {
-        const { internalColor } = this;
-        const changed = !internalColor || normalized !== normalizeHex(internalColor.hex());
-        this.internalColor = color(normalized);
-        this.previousNonNullValue = normalized;
-        this.value = normalized;
-        if (changed) {
-          this.calciteColorPickerHexInputChange.emit();
-        }
-        return;
-      }
-    }
-    else if (this.allowEmpty) {
-      this.internalColor = null;
-      this.value = null;
-      this.calciteColorPickerHexInputChange.emit();
-      return;
-    }
-    this.value = oldValue;
+    this.internalSetValue(value, oldValue, false);
   }
   // using @Listen as a workaround for VDOM listener not firing
   onInputKeyDown(event) {
@@ -253,15 +213,16 @@ const ColorPickerHexInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
       return;
     }
     const isNudgeKey = key === "ArrowDown" || key === "ArrowUp";
+    const oldValue = this.value;
     if (isNudgeKey) {
       if (!value) {
-        this.value = this.previousNonNullValue;
+        this.internalSetValue(this.previousNonNullValue, oldValue);
         event.preventDefault();
         return;
       }
       const direction = key === "ArrowUp" ? 1 : -1;
       const bump = shiftKey ? 10 : 1;
-      this.value = normalizeHex(this.nudgeRGBChannels(internalColor, bump * direction).hex());
+      this.internalSetValue(normalizeHex(this.nudgeRGBChannels(internalColor, bump * direction).hex()), oldValue);
       event.preventDefault();
       return;
     }
@@ -291,6 +252,36 @@ const ColorPickerHexInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
   async setFocus() {
     focusElement(this.inputNode);
   }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  internalSetValue(value, oldValue, emit = true) {
+    if (value) {
+      const normalized = normalizeHex(value);
+      if (isValidHex(normalized)) {
+        const { internalColor } = this;
+        const changed = !internalColor || normalized !== normalizeHex(internalColor.hex());
+        this.internalColor = color(normalized);
+        this.previousNonNullValue = normalized;
+        this.value = normalized;
+        if (changed && emit) {
+          this.calciteColorPickerHexInputChange.emit();
+        }
+        return;
+      }
+    }
+    else if (this.allowEmpty) {
+      this.internalColor = null;
+      this.value = null;
+      if (emit) {
+        this.calciteColorPickerHexInputChange.emit();
+      }
+      return;
+    }
+    this.value = oldValue;
+  }
   formatForInternalInput(hex) {
     return hex ? hex.replace("#", "") : "";
   }

package/dist/components/color-picker-swatch.js

@@ -1,6 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.81
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { c as getThemeName } from './dom.js';
@@ -1647,7 +1648,6 @@ models.forEach(fromModel => {
 });
 var colorConvert = convert;
 
-const _slice = [].slice;
 const skippedModels = [// To be honest, I don't really feel like keyword belongs in color convert, but eh.
 'keyword', // Gray conflicts with some method names, and has its own method defined.
 'gray', // Shouldn't really be in color-convert either...
@@ -1655,7 +1655,7 @@ const skippedModels = [// To be honest, I don't really feel like keyword belongs
 const hashedModelKeys = {};
 
 for (const model of Object.keys(colorConvert)) {
-  hashedModelKeys[_slice.call(colorConvert[model].labels).sort().join('')] = model;
+  hashedModelKeys[[...colorConvert[model].labels].sort().join('')] = model;
 }
 
 const limiters = {};
@@ -1683,7 +1683,7 @@ function Color(object, model) {
     this.valpha = 1;
   } else if (object instanceof Color) {
     this.model = object.model;
-    this.color = object.color.slice();
+    this.color = [...object.color];
     this.valpha = object.valpha;
   } else if (typeof object === 'string') {
     const result = colorString.get(object);
@@ -1699,9 +1699,7 @@ function Color(object, model) {
   } else if (object.length > 0) {
     this.model = model || 'rgb';
     channels = colorConvert[this.model].channels;
-
-    const newArray = _slice.call(object, 0, channels);
-
+    const newArray = Array.prototype.slice.call(object, 0, channels);
     this.color = zeroArray(newArray, channels);
     this.valpha = typeof object[channels] === 'number' ? object[channels] : 1;
   } else if (typeof object === 'number') {
@@ -1725,7 +1723,9 @@ function Color(object, model) {
     }
 
     this.model = hashedModelKeys[hashedKeys];
-    const labels = colorConvert[this.model].labels;
+    const {
+      labels
+    } = colorConvert[this.model];
     const color = [];
 
     for (i = 0; i < labels.length; i++) {
@@ -1767,24 +1767,28 @@ Color.prototype = {
   string(places) {
     let self = this.model in colorString.to ? this : this.rgb();
     self = self.round(typeof places === 'number' ? places : 1);
-    const args = self.valpha === 1 ? self.color : self.color.concat(this.valpha);
+    const args = self.valpha === 1 ? self.color : [...self.color, this.valpha];
     return colorString.to[self.model](args);
   },
 
   percentString(places) {
     const self = this.rgb().round(typeof places === 'number' ? places : 1);
-    const args = self.valpha === 1 ? self.color : self.color.concat(this.valpha);
+    const args = self.valpha === 1 ? self.color : [...self.color, this.valpha];
     return colorString.to.rgb.percent(args);
   },
 
   array() {
-    return this.valpha === 1 ? this.color.slice() : this.color.concat(this.valpha);
+    return this.valpha === 1 ? [...this.color] : [...this.color, this.valpha];
   },
 
   object() {
     const result = {};
-    const channels = colorConvert[this.model].channels;
-    const labels = colorConvert[this.model].labels;
+    const {
+      channels
+    } = colorConvert[this.model];
+    const {
+      labels
+    } = colorConvert[this.model];
 
     for (let i = 0; i < channels; i++) {
       result[labels[i]] = this.color[i];
@@ -1825,12 +1829,12 @@ Color.prototype = {
 
   round(places) {
     places = Math.max(places || 0, 0);
-    return new Color(this.color.map(roundToPlace(places)).concat(this.valpha), this.model);
+    return new Color([...this.color.map(roundToPlace(places)), this.valpha], this.model);
   },
 
   alpha(value) {
-    if (arguments.length > 0) {
-      return new Color(this.color.concat(Math.max(0, Math.min(1, value))), this.model);
+    if (value !== undefined) {
+      return new Color([...this.color, Math.max(0, Math.min(1, value))], this.model);
     }
 
     return this.valpha;
@@ -1853,15 +1857,15 @@ Color.prototype = {
   magenta: getset('cmyk', 1, maxfn(100)),
   yellow: getset('cmyk', 2, maxfn(100)),
   black: getset('cmyk', 3, maxfn(100)),
-  x: getset('xyz', 0, maxfn(100)),
+  x: getset('xyz', 0, maxfn(95.047)),
   y: getset('xyz', 1, maxfn(100)),
-  z: getset('xyz', 2, maxfn(100)),
+  z: getset('xyz', 2, maxfn(108.833)),
   l: getset('lab', 0, maxfn(100)),
   a: getset('lab', 1),
   b: getset('lab', 2),
 
   keyword(value) {
-    if (arguments.length > 0) {
+    if (value !== undefined) {
       return new Color(value);
     }
 
@@ -1869,7 +1873,7 @@ Color.prototype = {
   },
 
   hex(value) {
-    if (arguments.length > 0) {
+    if (value !== undefined) {
       return new Color(value);
     }
 
@@ -1877,7 +1881,7 @@ Color.prototype = {
   },
 
   hexa(value) {
-    if (arguments.length > 0) {
+    if (value !== undefined) {
       return new Color(value);
     }
 
@@ -1903,7 +1907,7 @@ Color.prototype = {
 
     for (const [i, element] of rgb.entries()) {
       const chan = element / 255;
-      lum[i] = chan <= 0.03928 ? chan / 12.92 : ((chan + 0.055) / 1.055) ** 2.4;
+      lum[i] = chan <= 0.04045 ? chan / 12.92 : ((chan + 0.055) / 1.055) ** 2.4;
     }
 
     return 0.2126 * lum[0] + 0.7152 * lum[1] + 0.0722 * lum[2];
@@ -1922,9 +1926,10 @@ Color.prototype = {
   },
 
   level(color2) {
+    // https://www.w3.org/TR/WCAG/#contrast-enhanced
     const contrastRatio = this.contrast(color2);
 
-    if (contrastRatio >= 7.1) {
+    if (contrastRatio >= 7) {
       return 'AAA';
     }
 
@@ -1934,7 +1939,7 @@ Color.prototype = {
   isDark() {
     // YIQ equation from http://24ways.org/2010/calculating-color-contrast
     const rgb = this.rgb().color;
-    const yiq = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;
+    const yiq = (rgb[0] * 2126 + rgb[1] * 7152 + rgb[2] * 722) / 10000;
     return yiq < 128;
   },
 
@@ -2036,25 +2041,28 @@ for (const model of Object.keys(colorConvert)) {
     continue;
   }
 
-  const channels = colorConvert[model].channels; // Conversion methods
+  const {
+    channels
+  } = colorConvert[model]; // Conversion methods
 
-  Color.prototype[model] = function () {
+  Color.prototype[model] = function (...args) {
     if (this.model === model) {
       return new Color(this);
     }
 
-    if (arguments.length > 0) {
-      return new Color(arguments, model);
+    if (args.length > 0) {
+      return new Color(args, model);
     }
 
-    const newAlpha = typeof arguments[channels] === 'number' ? channels : this.valpha;
-    return new Color(assertArray(colorConvert[this.model][model].raw(this.color)).concat(newAlpha), model);
+    return new Color([...assertArray(colorConvert[this.model][model].raw(this.color)), this.valpha], model);
   }; // 'static' construction methods
 
 
-  Color[model] = function (color) {
+  Color[model] = function (...args) {
+    let color = args[0];
+
     if (typeof color === 'number') {
-      color = zeroArray(_slice.call(arguments), channels);
+      color = zeroArray(args, channels);
     }
 
     return new Color(color, model);
@@ -2082,7 +2090,7 @@ function getset(model, channel, modifier) {
   return function (value) {
     let result;
 
-    if (arguments.length > 0) {
+    if (value !== undefined) {
       if (modifier) {
         value = modifier(value);
       }

package/dist/components/conditionalSlot.js

@@ -1,6 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.81
  */
 import { forceUpdate } from '@stencil/core/internal/client';
 import { c as createObserver } from './observers.js';

package/dist/components/date-picker-day.js

@@ -1,6 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.81
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { a as getElementDir, C as CSS_UTILITY } from './dom.js';

package/dist/components/date-picker-month-header.js

@@ -1,6 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.81
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
 import { l as localizeNumber, c as getOrder, b as dateFromRange, n as nextMonth, p as prevMonth, e as parseNumber } from './date.js';
@@ -24,20 +25,23 @@ const DatePickerMonthHeader = /*@__PURE__*/ proxyCustomElement(class extends HTM
      * Increment year on UP/DOWN keys
      */
     this.onYearKey = (e) => {
-      const year = e.target.value;
+      const localizedYear = e.target.value;
       switch (e.key) {
         case "ArrowDown":
           e.preventDefault();
-          this.setYear(year, -1);
+          this.setYear({ localizedYear, offset: -1 });
           break;
         case "ArrowUp":
           e.preventDefault();
-          this.setYear(year, 1);
+          this.setYear({ localizedYear, offset: 1 });
           break;
       }
     };
-    this.yearChanged = (event) => {
-      this.setYear(event.target.value);
+    this.onYearChange = (event) => {
+      this.setYear({ localizedYear: event.target.value });
+    };
+    this.onYearInput = (event) => {
+      this.setYear({ localizedYear: event.target.value, commit: false });
     };
     this.prevMonthClick = (e) => {
       this.handleArrowClick(e, this.prevMonthDate);
@@ -93,7 +97,7 @@ const DatePickerMonthHeader = /*@__PURE__*/ proxyCustomElement(class extends HTM
     return (h(Fragment, null, h("a", { "aria-disabled": (this.prevMonthDate.getMonth() === activeMonth).toString(), "aria-label": this.intlPrevMonth, class: "chevron", href: "#", onClick: this.prevMonthClick, onKeyDown: this.prevMonthKeydown, role: "button", tabindex: this.prevMonthDate.getMonth() === activeMonth ? -1 : 0 }, h("calcite-icon", { "flip-rtl": true, icon: "chevron-left", scale: iconScale })), h("div", { class: { text: true, "text--reverse": reverse } }, h(Heading, { class: "month", level: this.headingLevel }, localizedMonth), h("span", { class: "year-wrap" }, h("input", { "aria-label": this.intlYear, class: {
         year: true,
         "year--suffix": !!suffix
-      }, inputmode: "numeric", maxlength: "4", minlength: "1", onInput: this.yearChanged, onKeyDown: this.onYearKey, pattern: "\\d*", ref: (el) => (this.yearInput = el), type: "text", value: localizedYear }), suffix && (h("span", { class: "suffix" }, h("span", { "aria-hidden": "true", class: "suffix__invisible" }, localizedYear), " " + suffix)))), h("a", { "aria-disabled": (this.nextMonthDate.getMonth() === activeMonth).toString(), "aria-label": this.intlNextMonth, class: "chevron", href: "#", onClick: this.nextMonthClick, onKeyDown: this.nextMonthKeydown, role: "button", tabindex: this.nextMonthDate.getMonth() === activeMonth ? -1 : 0 }, h("calcite-icon", { "flip-rtl": true, icon: "chevron-right", scale: iconScale }))));
+      }, inputmode: "numeric", maxlength: "4", minlength: "1", onChange: this.onYearChange, onInput: this.onYearInput, onKeyDown: this.onYearKey, pattern: "\\d*", ref: (el) => (this.yearInput = el), type: "text", value: localizedYear }), suffix && (h("span", { class: "suffix" }, h("span", { "aria-hidden": "true", class: "suffix__invisible" }, localizedYear), " " + suffix)))), h("a", { "aria-disabled": (this.nextMonthDate.getMonth() === activeMonth).toString(), "aria-label": this.intlNextMonth, class: "chevron", href: "#", onClick: this.nextMonthClick, onKeyDown: this.nextMonthKeydown, role: "button", tabindex: this.nextMonthDate.getMonth() === activeMonth ? -1 : 0 }, h("calcite-icon", { "flip-rtl": true, icon: "chevron-right", scale: iconScale }))));
   }
   setNextPrevMonthDates() {
     if (!this.activeDate) {
@@ -102,27 +106,32 @@ const DatePickerMonthHeader = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.nextMonthDate = dateFromRange(nextMonth(this.activeDate), this.min, this.max);
     this.prevMonthDate = dateFromRange(prevMonth(this.activeDate), this.min, this.max);
   }
-  /**
-   * Parse localized year string from input,
-   * set to active if in range
-   */
-  setYear(localizedYear, increment = 0) {
-    const { min, max, activeDate, localeData, yearInput } = this;
+  getInRangeDate({ localizedYear, offset = 0 }) {
+    const { min, max, activeDate, localeData } = this;
     const parsedYear = parseNumber(localizedYear, localeData);
     const length = parsedYear.toString().length;
-    const year = isNaN(parsedYear) ? false : parsedYear + increment;
+    const year = isNaN(parsedYear) ? false : parsedYear + offset;
     const inRange = year && (!min || min.getFullYear() <= year) && (!max || max.getFullYear() >= year);
-    // if you've supplied a year and it's in range, update active date
+    // if you've supplied a year and it's in range
     if (year && inRange && length === localizedYear.length) {
       const nextDate = new Date(activeDate);
       nextDate.setFullYear(year);
-      const inRangeDate = dateFromRange(nextDate, min, max);
+      return dateFromRange(nextDate, min, max);
+    }
+  }
+  /**
+   * Parse localized year string from input,
+   * set to active if in range
+   */
+  setYear({ localizedYear, commit = true, offset = 0 }) {
+    const { yearInput, activeDate, localeData } = this;
+    const inRangeDate = this.getInRangeDate({ localizedYear, offset });
+    // if you've supplied a year and it's in range, update active date
+    if (inRangeDate) {
       this.calciteDatePickerSelect.emit(inRangeDate);
-      yearInput.value = localizeNumber(inRangeDate.getFullYear(), localeData);
     }
-    else {
-      // leave the current active date and clean up garbage input
-      yearInput.value = localizeNumber(activeDate.getFullYear(), localeData);
+    if (commit) {
+      yearInput.value = localizeNumber((inRangeDate || activeDate).getFullYear(), localeData);
     }
   }
   get el() { return this; }

package/dist/components/date-picker-month.js

@@ -1,6 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.81
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { s as sameDate, b as dateFromRange, i as inRange } from './date.js';

package/dist/components/date-picker.js

@@ -1,6 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.81
  */
 import { getAssetPath, proxyCustomElement, HTMLElement, createEvent, h, Host, Build } from '@stencil/core/internal/client';
 import { a as locales } from './locale.js';

package/dist/components/date.js

@@ -1,6 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.81
  */
 /**
  * Check if date is within a min and max

package/dist/components/debounce.js

@@ -1,6 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.81
  */
 /** Detect free variable `global` from Node.js. */
 var freeGlobal = typeof global == 'object' && global && global.Object === Object && global;

package/dist/components/dom.js

@@ -1,6 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.81
  */
 import { g as guid } from './guid.js';
 
@@ -97,7 +98,13 @@ function queryElementRoots(element, { selector, id }) {
     }
     const rootNode = getRootNode(el);
     const found = id
-      ? rootNode.getElementById(id)
+      ? "getElementById" in rootNode
+        ? /*
+          Check to make sure 'getElementById' exists in cases where element is no longer connected to the DOM and getRootNode() returns the element.
+          https://github.com/Esri/calcite-components/pull/4280
+           */
+          rootNode.getElementById(id)
+        : null
       : selector
         ? rootNode.querySelector(selector)
         : null;

package/dist/components/dropdown.js

@@ -1,10 +1,11 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.81
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { b as getSlotted, f as focusElement } from './dom.js';
-import { a as defaultMenuPlacement, C as CSS, u as updatePopper, c as createPopper, p as popperMenuFlipPlacements } from './popper.js';
+import { a as defaultMenuPlacement, f as filterComputedPlacements, C as CSS, u as updatePopper, c as createPopper, p as popperMenuComputedPlacements } from './popper.js';
 import { c as createObserver } from './observers.js';
 import { u as updateHostInteraction } from './interactive.js';
 
@@ -60,11 +61,6 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.type = "click";
     /** specify the width of dropdown, defaults to m */
     this.width = "m";
-    //--------------------------------------------------------------------------
-    //
-    //  Private State/Props
-    //
-    //--------------------------------------------------------------------------
     this.items = [];
     this.activeTransitionProp = "visibility";
     this.mutationObserver = createObserver("mutation", () => this.updateItems());
@@ -74,6 +70,12 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     //  Private Methods
     //
     //--------------------------------------------------------------------------
+    this.setFilteredPlacements = () => {
+      const { el, flipPlacements } = this;
+      this.filteredFlipPlacements = flipPlacements
+        ? filterComputedPlacements(flipPlacements, el)
+        : null;
+    };
     this.updateItems = () => {
       this.updateSelectedItems();
       this.triggers = getSlotted(this.el, "dropdown-trigger", { all: true });
@@ -151,6 +153,9 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.active = false;
     }
   }
+  flipPlacementsHandler() {
+    this.setFilteredPlacements();
+  }
   maxItemsHandler() {
     this.setMaxScrollerHeight();
   }
@@ -167,6 +172,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
     this.createPopper();
     this.updateItems();
+    this.setFilteredPlacements();
   }
   componentDidLoad() {
     this.reposition();
@@ -283,7 +289,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       enabled: true
     };
     flipModifier.options = {
-      fallbackPlacements: this.flipPlacements || popperMenuFlipPlacements
+      fallbackPlacements: this.filteredFlipPlacements || popperMenuComputedPlacements
     };
     const eventListenerModifier = {
       name: "eventListeners",
@@ -378,6 +384,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   static get watchers() { return {
     "active": ["activeHandler"],
     "disabled": ["handleDisabledChange"],
+    "flipPlacements": ["flipPlacementsHandler"],
     "maxItems": ["maxItemsHandler"],
     "placement": ["placementHandler"]
   }; }