@getflip/swirl-components 0.2.0 → 0.3.1

package/dist/cjs/bodyScrollLock.esm-f29f1a77.js

@@ -0,0 +1,258 @@
+'use strict';
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+// Older browsers don't support event options, feature detect it.
+
+// Adopted and modified solution from Bohdan Didukh (2017)
+// https://stackoverflow.com/questions/41594997/ios-10-safari-prevent-scrolling-behind-a-fixed-overlay-and-maintain-scroll-posi
+
+var hasPassiveEvents = false;
+if (typeof window !== 'undefined') {
+  var passiveTestOptions = {
+    get passive() {
+      hasPassiveEvents = true;
+      return undefined;
+    }
+  };
+  window.addEventListener('testPassive', null, passiveTestOptions);
+  window.removeEventListener('testPassive', null, passiveTestOptions);
+}
+
+var isIosDevice = typeof window !== 'undefined' && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === 'MacIntel' && window.navigator.maxTouchPoints > 1);
+
+
+var locks = [];
+var documentListenerAdded = false;
+var initialClientY = -1;
+var previousBodyOverflowSetting = void 0;
+var previousBodyPosition = void 0;
+var previousBodyPaddingRight = void 0;
+
+// returns true if `el` should be allowed to receive touchmove events.
+var allowTouchMove = function allowTouchMove(el) {
+  return locks.some(function (lock) {
+    if (lock.options.allowTouchMove && lock.options.allowTouchMove(el)) {
+      return true;
+    }
+
+    return false;
+  });
+};
+
+var preventDefault = function preventDefault(rawEvent) {
+  var e = rawEvent || window.event;
+
+  // For the case whereby consumers adds a touchmove event listener to document.
+  // Recall that we do document.addEventListener('touchmove', preventDefault, { passive: false })
+  // in disableBodyScroll - so if we provide this opportunity to allowTouchMove, then
+  // the touchmove event on document will break.
+  if (allowTouchMove(e.target)) {
+    return true;
+  }
+
+  // Do not prevent if the event has more than one touch (usually meaning this is a multi touch gesture like pinch to zoom).
+  if (e.touches.length > 1) return true;
+
+  if (e.preventDefault) e.preventDefault();
+
+  return false;
+};
+
+var setOverflowHidden = function setOverflowHidden(options) {
+  // If previousBodyPaddingRight is already set, don't set it again.
+  if (previousBodyPaddingRight === undefined) {
+    var _reserveScrollBarGap = !!options && options.reserveScrollBarGap === true;
+    var scrollBarGap = window.innerWidth - document.documentElement.clientWidth;
+
+    if (_reserveScrollBarGap && scrollBarGap > 0) {
+      var computedBodyPaddingRight = parseInt(window.getComputedStyle(document.body).getPropertyValue('padding-right'), 10);
+      previousBodyPaddingRight = document.body.style.paddingRight;
+      document.body.style.paddingRight = computedBodyPaddingRight + scrollBarGap + 'px';
+    }
+  }
+
+  // If previousBodyOverflowSetting is already set, don't set it again.
+  if (previousBodyOverflowSetting === undefined) {
+    previousBodyOverflowSetting = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+  }
+};
+
+var restoreOverflowSetting = function restoreOverflowSetting() {
+  if (previousBodyPaddingRight !== undefined) {
+    document.body.style.paddingRight = previousBodyPaddingRight;
+
+    // Restore previousBodyPaddingRight to undefined so setOverflowHidden knows it
+    // can be set again.
+    previousBodyPaddingRight = undefined;
+  }
+
+  if (previousBodyOverflowSetting !== undefined) {
+    document.body.style.overflow = previousBodyOverflowSetting;
+
+    // Restore previousBodyOverflowSetting to undefined
+    // so setOverflowHidden knows it can be set again.
+    previousBodyOverflowSetting = undefined;
+  }
+};
+
+var setPositionFixed = function setPositionFixed() {
+  return window.requestAnimationFrame(function () {
+    // If previousBodyPosition is already set, don't set it again.
+    if (previousBodyPosition === undefined) {
+      previousBodyPosition = {
+        position: document.body.style.position,
+        top: document.body.style.top,
+        left: document.body.style.left
+      };
+
+      // Update the dom inside an animation frame 
+      var _window = window,
+          scrollY = _window.scrollY,
+          scrollX = _window.scrollX,
+          innerHeight = _window.innerHeight;
+
+      document.body.style.position = 'fixed';
+      document.body.style.top = -scrollY;
+      document.body.style.left = -scrollX;
+
+      setTimeout(function () {
+        return window.requestAnimationFrame(function () {
+          // Attempt to check if the bottom bar appeared due to the position change
+          var bottomBarHeight = innerHeight - window.innerHeight;
+          if (bottomBarHeight && scrollY >= innerHeight) {
+            // Move the content further up so that the bottom bar doesn't hide it
+            document.body.style.top = -(scrollY + bottomBarHeight);
+          }
+        });
+      }, 300);
+    }
+  });
+};
+
+var restorePositionSetting = function restorePositionSetting() {
+  if (previousBodyPosition !== undefined) {
+    // Convert the position from "px" to Int
+    var y = -parseInt(document.body.style.top, 10);
+    var x = -parseInt(document.body.style.left, 10);
+
+    // Restore styles
+    document.body.style.position = previousBodyPosition.position;
+    document.body.style.top = previousBodyPosition.top;
+    document.body.style.left = previousBodyPosition.left;
+
+    // Restore scroll
+    window.scrollTo(x, y);
+
+    previousBodyPosition = undefined;
+  }
+};
+
+// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Problems_and_solutions
+var isTargetElementTotallyScrolled = function isTargetElementTotallyScrolled(targetElement) {
+  return targetElement ? targetElement.scrollHeight - targetElement.scrollTop <= targetElement.clientHeight : false;
+};
+
+var handleScroll = function handleScroll(event, targetElement) {
+  var clientY = event.targetTouches[0].clientY - initialClientY;
+
+  if (allowTouchMove(event.target)) {
+    return false;
+  }
+
+  if (targetElement && targetElement.scrollTop === 0 && clientY > 0) {
+    // element is at the top of its scroll.
+    return preventDefault(event);
+  }
+
+  if (isTargetElementTotallyScrolled(targetElement) && clientY < 0) {
+    // element is at the bottom of its scroll.
+    return preventDefault(event);
+  }
+
+  event.stopPropagation();
+  return true;
+};
+
+var disableBodyScroll = function disableBodyScroll(targetElement, options) {
+  // targetElement must be provided
+  if (!targetElement) {
+    // eslint-disable-next-line no-console
+    console.error('disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.');
+    return;
+  }
+
+  // disableBodyScroll must not have been called on this targetElement before
+  if (locks.some(function (lock) {
+    return lock.targetElement === targetElement;
+  })) {
+    return;
+  }
+
+  var lock = {
+    targetElement: targetElement,
+    options: options || {}
+  };
+
+  locks = [].concat(_toConsumableArray(locks), [lock]);
+
+  if (isIosDevice) {
+    setPositionFixed();
+  } else {
+    setOverflowHidden(options);
+  }
+
+  if (isIosDevice) {
+    targetElement.ontouchstart = function (event) {
+      if (event.targetTouches.length === 1) {
+        // detect single touch.
+        initialClientY = event.targetTouches[0].clientY;
+      }
+    };
+    targetElement.ontouchmove = function (event) {
+      if (event.targetTouches.length === 1) {
+        // detect single touch.
+        handleScroll(event, targetElement);
+      }
+    };
+
+    if (!documentListenerAdded) {
+      document.addEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);
+      documentListenerAdded = true;
+    }
+  }
+};
+
+var enableBodyScroll = function enableBodyScroll(targetElement) {
+  if (!targetElement) {
+    // eslint-disable-next-line no-console
+    console.error('enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.');
+    return;
+  }
+
+  locks = locks.filter(function (lock) {
+    return lock.targetElement !== targetElement;
+  });
+
+  if (isIosDevice) {
+    targetElement.ontouchstart = null;
+    targetElement.ontouchmove = null;
+
+    if (documentListenerAdded && locks.length === 0) {
+      document.removeEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);
+      documentListenerAdded = false;
+    }
+  }
+
+  if (isIosDevice) {
+    restorePositionSetting();
+  } else {
+    restoreOverflowSetting();
+  }
+};
+
+exports.disableBodyScroll = disableBodyScroll;
+exports.enableBodyScroll = enableBodyScroll;
+
+//# sourceMappingURL=bodyScrollLock.esm-f29f1a77.js.map

package/dist/cjs/bodyScrollLock.esm-f29f1a77.js.map

@@ -0,0 +1 @@
+{"file":"bodyScrollLock.esm-f29f1a77.js","mappings":"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","names":[],"sources":["../../node_modules/body-scroll-lock/lib/bodyScrollLock.esm.js"],"sourcesContent":["function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }\n\n// Older browsers don't support event options, feature detect it.\n\n// Adopted and modified solution from Bohdan Didukh (2017)\n// https://stackoverflow.com/questions/41594997/ios-10-safari-prevent-scrolling-behind-a-fixed-overlay-and-maintain-scroll-posi\n\nvar hasPassiveEvents = false;\nif (typeof window !== 'undefined') {\n  var passiveTestOptions = {\n    get passive() {\n      hasPassiveEvents = true;\n      return undefined;\n    }\n  };\n  window.addEventListener('testPassive', null, passiveTestOptions);\n  window.removeEventListener('testPassive', null, passiveTestOptions);\n}\n\nvar isIosDevice = typeof window !== 'undefined' && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === 'MacIntel' && window.navigator.maxTouchPoints > 1);\n\n\nvar locks = [];\nvar documentListenerAdded = false;\nvar initialClientY = -1;\nvar previousBodyOverflowSetting = void 0;\nvar previousBodyPosition = void 0;\nvar previousBodyPaddingRight = void 0;\n\n// returns true if `el` should be allowed to receive touchmove events.\nvar allowTouchMove = function allowTouchMove(el) {\n  return locks.some(function (lock) {\n    if (lock.options.allowTouchMove && lock.options.allowTouchMove(el)) {\n      return true;\n    }\n\n    return false;\n  });\n};\n\nvar preventDefault = function preventDefault(rawEvent) {\n  var e = rawEvent || window.event;\n\n  // For the case whereby consumers adds a touchmove event listener to document.\n  // Recall that we do document.addEventListener('touchmove', preventDefault, { passive: false })\n  // in disableBodyScroll - so if we provide this opportunity to allowTouchMove, then\n  // the touchmove event on document will break.\n  if (allowTouchMove(e.target)) {\n    return true;\n  }\n\n  // Do not prevent if the event has more than one touch (usually meaning this is a multi touch gesture like pinch to zoom).\n  if (e.touches.length > 1) return true;\n\n  if (e.preventDefault) e.preventDefault();\n\n  return false;\n};\n\nvar setOverflowHidden = function setOverflowHidden(options) {\n  // If previousBodyPaddingRight is already set, don't set it again.\n  if (previousBodyPaddingRight === undefined) {\n    var _reserveScrollBarGap = !!options && options.reserveScrollBarGap === true;\n    var scrollBarGap = window.innerWidth - document.documentElement.clientWidth;\n\n    if (_reserveScrollBarGap && scrollBarGap > 0) {\n      var computedBodyPaddingRight = parseInt(window.getComputedStyle(document.body).getPropertyValue('padding-right'), 10);\n      previousBodyPaddingRight = document.body.style.paddingRight;\n      document.body.style.paddingRight = computedBodyPaddingRight + scrollBarGap + 'px';\n    }\n  }\n\n  // If previousBodyOverflowSetting is already set, don't set it again.\n  if (previousBodyOverflowSetting === undefined) {\n    previousBodyOverflowSetting = document.body.style.overflow;\n    document.body.style.overflow = 'hidden';\n  }\n};\n\nvar restoreOverflowSetting = function restoreOverflowSetting() {\n  if (previousBodyPaddingRight !== undefined) {\n    document.body.style.paddingRight = previousBodyPaddingRight;\n\n    // Restore previousBodyPaddingRight to undefined so setOverflowHidden knows it\n    // can be set again.\n    previousBodyPaddingRight = undefined;\n  }\n\n  if (previousBodyOverflowSetting !== undefined) {\n    document.body.style.overflow = previousBodyOverflowSetting;\n\n    // Restore previousBodyOverflowSetting to undefined\n    // so setOverflowHidden knows it can be set again.\n    previousBodyOverflowSetting = undefined;\n  }\n};\n\nvar setPositionFixed = function setPositionFixed() {\n  return window.requestAnimationFrame(function () {\n    // If previousBodyPosition is already set, don't set it again.\n    if (previousBodyPosition === undefined) {\n      previousBodyPosition = {\n        position: document.body.style.position,\n        top: document.body.style.top,\n        left: document.body.style.left\n      };\n\n      // Update the dom inside an animation frame \n      var _window = window,\n          scrollY = _window.scrollY,\n          scrollX = _window.scrollX,\n          innerHeight = _window.innerHeight;\n\n      document.body.style.position = 'fixed';\n      document.body.style.top = -scrollY;\n      document.body.style.left = -scrollX;\n\n      setTimeout(function () {\n        return window.requestAnimationFrame(function () {\n          // Attempt to check if the bottom bar appeared due to the position change\n          var bottomBarHeight = innerHeight - window.innerHeight;\n          if (bottomBarHeight && scrollY >= innerHeight) {\n            // Move the content further up so that the bottom bar doesn't hide it\n            document.body.style.top = -(scrollY + bottomBarHeight);\n          }\n        });\n      }, 300);\n    }\n  });\n};\n\nvar restorePositionSetting = function restorePositionSetting() {\n  if (previousBodyPosition !== undefined) {\n    // Convert the position from \"px\" to Int\n    var y = -parseInt(document.body.style.top, 10);\n    var x = -parseInt(document.body.style.left, 10);\n\n    // Restore styles\n    document.body.style.position = previousBodyPosition.position;\n    document.body.style.top = previousBodyPosition.top;\n    document.body.style.left = previousBodyPosition.left;\n\n    // Restore scroll\n    window.scrollTo(x, y);\n\n    previousBodyPosition = undefined;\n  }\n};\n\n// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Problems_and_solutions\nvar isTargetElementTotallyScrolled = function isTargetElementTotallyScrolled(targetElement) {\n  return targetElement ? targetElement.scrollHeight - targetElement.scrollTop <= targetElement.clientHeight : false;\n};\n\nvar handleScroll = function handleScroll(event, targetElement) {\n  var clientY = event.targetTouches[0].clientY - initialClientY;\n\n  if (allowTouchMove(event.target)) {\n    return false;\n  }\n\n  if (targetElement && targetElement.scrollTop === 0 && clientY > 0) {\n    // element is at the top of its scroll.\n    return preventDefault(event);\n  }\n\n  if (isTargetElementTotallyScrolled(targetElement) && clientY < 0) {\n    // element is at the bottom of its scroll.\n    return preventDefault(event);\n  }\n\n  event.stopPropagation();\n  return true;\n};\n\nexport var disableBodyScroll = function disableBodyScroll(targetElement, options) {\n  // targetElement must be provided\n  if (!targetElement) {\n    // eslint-disable-next-line no-console\n    console.error('disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.');\n    return;\n  }\n\n  // disableBodyScroll must not have been called on this targetElement before\n  if (locks.some(function (lock) {\n    return lock.targetElement === targetElement;\n  })) {\n    return;\n  }\n\n  var lock = {\n    targetElement: targetElement,\n    options: options || {}\n  };\n\n  locks = [].concat(_toConsumableArray(locks), [lock]);\n\n  if (isIosDevice) {\n    setPositionFixed();\n  } else {\n    setOverflowHidden(options);\n  }\n\n  if (isIosDevice) {\n    targetElement.ontouchstart = function (event) {\n      if (event.targetTouches.length === 1) {\n        // detect single touch.\n        initialClientY = event.targetTouches[0].clientY;\n      }\n    };\n    targetElement.ontouchmove = function (event) {\n      if (event.targetTouches.length === 1) {\n        // detect single touch.\n        handleScroll(event, targetElement);\n      }\n    };\n\n    if (!documentListenerAdded) {\n      document.addEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);\n      documentListenerAdded = true;\n    }\n  }\n};\n\nexport var clearAllBodyScrollLocks = function clearAllBodyScrollLocks() {\n  if (isIosDevice) {\n    // Clear all locks ontouchstart/ontouchmove handlers, and the references.\n    locks.forEach(function (lock) {\n      lock.targetElement.ontouchstart = null;\n      lock.targetElement.ontouchmove = null;\n    });\n\n    if (documentListenerAdded) {\n      document.removeEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);\n      documentListenerAdded = false;\n    }\n\n    // Reset initial clientY.\n    initialClientY = -1;\n  }\n\n  if (isIosDevice) {\n    restorePositionSetting();\n  } else {\n    restoreOverflowSetting();\n  }\n\n  locks = [];\n};\n\nexport var enableBodyScroll = function enableBodyScroll(targetElement) {\n  if (!targetElement) {\n    // eslint-disable-next-line no-console\n    console.error('enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.');\n    return;\n  }\n\n  locks = locks.filter(function (lock) {\n    return lock.targetElement !== targetElement;\n  });\n\n  if (isIosDevice) {\n    targetElement.ontouchstart = null;\n    targetElement.ontouchmove = null;\n\n    if (documentListenerAdded && locks.length === 0) {\n      document.removeEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);\n      documentListenerAdded = false;\n    }\n  }\n\n  if (isIosDevice) {\n    restorePositionSetting();\n  } else {\n    restoreOverflowSetting();\n  }\n};\n\n"],"version":3}

package/dist/cjs/flip-action-list-item.cjs.entry.js

@@ -2,8 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-bd89db61.js');
-const index$1 = require('./index-b9715722.js');
+const index = require('./index-72831c5f.js');
+const index$1 = require('./index-b8470262.js');
+require('./_commonjsHelpers-a5111d61.js');
 
 const flipActionListItemCss = ":host{display:block}:host *{box-sizing:border-box}.action-list-item{display:inline-flex;width:100%;min-width:15rem;margin:0;padding:var(--s-space-12) var(--s-space-16);justify-content:flex-start;align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-surface-overlay-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;cursor:pointer;gap:var(--s-space-12)}.action-list-item:hover{background-color:var(--s-surface-overlay-hovered)}.action-list-item:focus{background-color:var(--s-surface-overlay-hovered);outline:none}.action-list-item:active{background-color:var(--s-surface-overlay-pressed)}.action-list-item:disabled{background-color:var(--s-surface-overlay-default);cursor:default}.action-list-item:disabled .action-list-item__label,.action-list-item:disabled .action-list-item__description{color:var(--s-text-disabled)}.action-list-item:disabled .action-list-item__icon{color:var(--s-icon-disabled)}.action-list-item--size-l{padding:var(--s-space-16)}.action-list-item--intent-critical:not(:disabled) .action-list-item__label{color:var(--s-text-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__icon{color:var(--s-icon-critical)}.action-list-item__icon{display:inline-flex;flex-shrink:0;color:var(--s-icon-default)}.action-list-item__label-container{display:inline-flex;min-width:0;flex-grow:1;align-items:flex-start;flex-direction:column}.action-list-item__label{overflow:hidden;max-width:100%;padding-top:0.0625rem;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.action-list-item__description{color:var(--s-text-subdued)}.action-list-item__suffix{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}";
 
@@ -22,3 +23,5 @@ const FlipActionListItem = class {
 FlipActionListItem.style = flipActionListItemCss;
 
 exports.flip_action_list_item = FlipActionListItem;
+
+//# sourceMappingURL=flip-action-list-item.cjs.entry.js.map

package/dist/cjs/flip-action-list-item.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"flip-action-list-item.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,qBAAqB,GAAG,usDAAusD;;MCYxtD,kBAAkB;EAL/B;;IASU,WAAM,GAA8B,SAAS,CAAC;IAE9C,SAAI,GAA4B,GAAG,CAAC;GA0C7C;EAvCC,MAAM;IACJ,MAAM,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;IAE1D,MAAM,SAAS,GAAGA,kBAAU,CAC1B,kBAAkB,EAClB,4BAA4B,IAAI,CAAC,MAAM,EAAE,EACzC,0BAA0B,IAAI,CAAC,IAAI,EAAE,CACtC,CAAC;IAEF,QACEC,QAACC,UAAI,QACHD,oBACE,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,CAAC,CAAC,EACZ,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,IAAI,KACRA,kBAAM,KAAK,EAAC,wBAAwB,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAS,CACnE,EACDA,kBAAM,KAAK,EAAC,mCAAmC,IAC7CA,kBAAM,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,KAAK,CAAQ,EACxD,IAAI,CAAC,WAAW,KACfA,kBAAM,KAAK,EAAC,+BAA+B,IACxC,IAAI,CAAC,WAAW,CACZ,CACR,CACI,EACN,UAAU,KACTA,kBACE,KAAK,EAAC,0BAA0B,EAChC,SAAS,EAAE,IAAI,CAAC,MAAM,GAChB,CACT,CACM,CACJ,EACP;GACH;;;;;;","names":["classnames","h","Host"],"sources":["./src/components/flip-action-list-item/flip-action-list-item.css?tag=flip-action-list-item&encapsulation=shadow","./src/components/flip-action-list-item/flip-action-list-item.tsx"],"sourcesContent":[":host {\n  display: block;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.action-list-item {\n  display: inline-flex;\n  width: 100%;\n  min-width: 15rem;\n  margin: 0;\n  padding: var(--s-space-12) var(--s-space-16);\n  justify-content: flex-start;\n  align-items: center;\n  border: none;\n  color: var(--s-text-default);\n  background-color: var(--s-surface-overlay-default);\n  font: inherit;\n  line-height: var(--s-line-height-base);\n  text-align: left;\n  cursor: pointer;\n  gap: var(--s-space-12);\n\n  &:hover {\n    background-color: var(--s-surface-overlay-hovered);\n  }\n\n  &:focus {\n    background-color: var(--s-surface-overlay-hovered);\n    outline: none;\n  }\n\n  &:active {\n    background-color: var(--s-surface-overlay-pressed);\n  }\n\n  &:disabled {\n    background-color: var(--s-surface-overlay-default);\n    cursor: default;\n\n    & .action-list-item__label,\n    & .action-list-item__description {\n      color: var(--s-text-disabled);\n    }\n\n    & .action-list-item__icon {\n      color: var(--s-icon-disabled);\n    }\n  }\n}\n\n.action-list-item--size-l {\n  padding: var(--s-space-16);\n}\n\n.action-list-item--intent-critical {\n  &:not(:disabled) {\n    & .action-list-item__label {\n      color: var(--s-text-critical);\n    }\n\n    & .action-list-item__icon {\n      color: var(--s-icon-critical);\n    }\n  }\n}\n\n.action-list-item__icon {\n  display: inline-flex;\n  flex-shrink: 0;\n  color: var(--s-icon-default);\n}\n\n.action-list-item__label-container {\n  display: inline-flex;\n  min-width: 0;\n  flex-grow: 1;\n  align-items: flex-start;\n  flex-direction: column;\n}\n\n.action-list-item__label {\n  overflow: hidden;\n  max-width: 100%;\n  padding-top: 0.0625rem;\n  font-weight: var(--s-font-weight-medium);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.action-list-item__description {\n  color: var(--s-text-subdued);\n}\n\n.action-list-item__suffix {\n  display: inline-flex;\n  flex-shrink: 0;\n  color: var(--s-icon-highlight);\n}\n","import { Component, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipActionListItemIntent = \"default\" | \"critical\";\n\nexport type FlipActionListItemSize = \"m\" | \"l\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-action-list-item.css\",\n  tag: \"flip-action-list-item\",\n})\nexport class FlipActionListItem {\n  @Prop() disabled?: boolean;\n  @Prop() description?: string;\n  @Prop() icon?: string;\n  @Prop() intent?: FlipActionListItemIntent = \"default\";\n  @Prop() label!: string;\n  @Prop() size?: FlipActionListItemSize = \"m\";\n  @Prop() suffix?: string;\n\n  render() {\n    const showSuffix = Boolean(this.suffix) && !this.disabled;\n\n    const className = classnames(\n      \"action-list-item\",\n      `action-list-item--intent-${this.intent}`,\n      `action-list-item--size-${this.size}`\n    );\n\n    return (\n      <Host>\n        <button\n          class={className}\n          disabled={this.disabled}\n          role=\"menuitem\"\n          tabIndex={-1}\n          type=\"button\"\n        >\n          {this.icon && (\n            <span class=\"action-list-item__icon\" innerHTML={this.icon}></span>\n          )}\n          <span class=\"action-list-item__label-container\">\n            <span class=\"action-list-item__label\">{this.label}</span>\n            {this.description && (\n              <span class=\"action-list-item__description\">\n                {this.description}\n              </span>\n            )}\n          </span>\n          {showSuffix && (\n            <span\n              class=\"action-list-item__suffix\"\n              innerHTML={this.suffix}\n            ></span>\n          )}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/flip-action-list-section.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-bd89db61.js');
+const index = require('./index-72831c5f.js');
 
 const flipActionListSectionCss = ":host{display:block}:host *{box-sizing:border-box}.action-list-section{background-color:var(--s-surface-overlay-default)}.action-list-section__label{display:block;width:100%;padding:var(--s-space-8) var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default);color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}";
 
@@ -17,3 +17,5 @@ const FlipActionListSection = class {
 FlipActionListSection.style = flipActionListSectionCss;
 
 exports.flip_action_list_section = FlipActionListSection;
+
+//# sourceMappingURL=flip-action-list-section.cjs.entry.js.map

package/dist/cjs/flip-action-list-section.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"flip-action-list-section.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,wBAAwB,GAAG,+ZAA+Z;;MCUnb,qBAAqB;;;;EAGhC,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,oCAAqB,OAAO,EAAC,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,OAAO,IACnEA,kBAAM,KAAK,EAAC,4BAA4B,EAAC,EAAE,EAAC,OAAO,IAChD,IAAI,CAAC,KAAK,CACN,EACPA,iBAAK,KAAK,EAAC,4BAA4B,IACrCA,qBAAa,CACT,CACF,CACD,EACP;GACH;;;;;;","names":["h","Host"],"sources":["./src/components/flip-action-list-section/flip-action-list-section.css?tag=flip-action-list-section&encapsulation=shadow","./src/components/flip-action-list-section/flip-action-list-section.tsx"],"sourcesContent":[":host {\n  display: block;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.action-list-section {\n  background-color: var(--s-surface-overlay-default);\n}\n\n.action-list-section__label {\n  display: block;\n  width: 100%;\n  padding: var(--s-space-8) var(--s-space-16);\n  border-bottom: var(--s-border-width-default) solid var(--s-border-default);\n  color: var(--s-text-subdued);\n  font-weight: var(--s-font-weight-medium);\n  line-height: var(--s-line-height-base);\n  text-align: left;\n}\n","import { Component, h, Host, Prop } from \"@stencil/core\";\n\n/**\n * @slot slot - The action list item components\n */\n@Component({\n  shadow: true,\n  styleUrl: \"flip-action-list-section.css\",\n  tag: \"flip-action-list-section\",\n})\nexport class FlipActionListSection {\n  @Prop() label!: string;\n\n  render() {\n    return (\n      <Host>\n        <div aria-labelledby=\"label\" class=\"action-list-section\" role=\"group\">\n          <span class=\"action-list-section__label\" id=\"label\">\n            {this.label}\n          </span>\n          <div class=\"action-list-section__items\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/flip-action-list.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-bd89db61.js');
-const utils = require('./utils-a6e2e7da.js');
+const index = require('./index-72831c5f.js');
+const utils = require('./utils-9018ae5a.js');
 
 const flipActionListCss = ":host{display:block}:host *{box-sizing:border-box}.action-list{background-color:var(--s-surface-overlay-default)}";
 
@@ -50,3 +50,5 @@ const FlipActionList = class {
 FlipActionList.style = flipActionListCss;
 
 exports.flip_action_list = FlipActionList;
+
+//# sourceMappingURL=flip-action-list.cjs.entry.js.map

package/dist/cjs/flip-action-list.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"flip-action-list.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,iBAAiB,GAAG,mHAAmH;;MCWhI,cAAc;EAL3B;;IAcU,cAAS,GAAG,CAAC,KAAoB;MACvC,IAAI,KAAK,CAAC,IAAI,KAAK,WAAW,IAAI,KAAK,CAAC,IAAI,KAAK,YAAY,EAAE;QAC7D,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,aAAa,EAAE,CAAC;OACtB;WAAM,IAAI,KAAK,CAAC,IAAI,KAAK,SAAS,IAAI,KAAK,CAAC,IAAI,KAAK,WAAW,EAAE;QACjE,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,iBAAiB,EAAE,CAAC;OAC1B;KACF,CAAC;GAwCH;EApDC,gBAAgB;IACd,IAAI,CAAC,KAAK,GAAGA,0BAAoB,CAAC,IAAI,CAAC,EAAE,EAAE,mBAAmB,CAAC,CAAC;GACjE;EAYO,aAAa;IACnB,MAAM,eAAe,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAClD,MAAM,QAAQ,GAAG,CAAC,eAAe,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;IAE3D,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,CAAC;GAC9B;EAEO,iBAAiB;IACvB,MAAM,eAAe,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAClD,MAAM,QAAQ,GACZ,eAAe,KAAK,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,eAAe,GAAG,CAAC,CAAC;IAEtE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,CAAC;GAC9B;EAEO,kBAAkB;IACxB,OAAO,IAAI,CAAC,KAAK,CAAC,SAAS,CACzB,CAAC,IAAI;;MACH,OAAA,IAAI,KAAK,QAAQ,CAAC,aAAa;QAC/B,IAAI;WACF,MAAA,MAAA,QAAQ,CAAC,aAAa,0CAAE,UAAU,0CAAE,aAAa,CAAC,mBAAmB,CAAC,CAAA,CAAA;KAAA,CAC3E,CAAC;GACH;EAED,MAAM;IACJ,QACEC,QAACC,UAAI,QACHD,qCACmB,UAAU,EAC3B,KAAK,EAAC,aAAa,EACnB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAC,MAAM,IAEXA,qBAAa,CACT,CACD,EACP;GACH;;;;;;;","names":["querySelectorAllDeep","h","Host"],"sources":["./src/components/flip-action-list/flip-action-list.css?tag=flip-action-list&encapsulation=shadow","./src/components/flip-action-list/flip-action-list.tsx"],"sourcesContent":[":host {\n  display: block;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.action-list {\n  background-color: var(--s-surface-overlay-default);\n}\n","import { Component, Element, h, Host } from \"@stencil/core\";\nimport { querySelectorAllDeep } from \"../../utils\";\n\n/**\n * @slot slot - The action list items and sections\n */\n@Component({\n  shadow: true,\n  styleUrl: \"flip-action-list.css\",\n  tag: \"flip-action-list\",\n})\nexport class FlipActionList {\n  @Element() el: HTMLElement;\n\n  private items: HTMLElement[];\n\n  componentDidLoad() {\n    this.items = querySelectorAllDeep(this.el, '[role=\"menuitem\"]');\n  }\n\n  private onKeyDown = (event: KeyboardEvent) => {\n    if (event.code === \"ArrowDown\" || event.code === \"ArrowRight\") {\n      event.preventDefault();\n      this.focusNextItem();\n    } else if (event.code === \"ArrowUp\" || event.code === \"ArrowLeft\") {\n      event.preventDefault();\n      this.focusPreviousItem();\n    }\n  };\n\n  private focusNextItem() {\n    const activeItemIndex = this.getActiveItemIndex();\n    const newIndex = (activeItemIndex + 1) % this.items.length;\n\n    this.items[newIndex].focus();\n  }\n\n  private focusPreviousItem() {\n    const activeItemIndex = this.getActiveItemIndex();\n    const newIndex =\n      activeItemIndex === 0 ? this.items.length - 1 : activeItemIndex - 1;\n\n    this.items[newIndex].focus();\n  }\n\n  private getActiveItemIndex(): number {\n    return this.items.findIndex(\n      (item) =>\n        item === document.activeElement ||\n        item ===\n          document.activeElement?.shadowRoot?.querySelector('[role=\"menuitem\"]')\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          aria-orientation=\"vertical\"\n          class=\"action-list\"\n          onKeyDown={this.onKeyDown}\n          role=\"menu\"\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/flip-avatar-group.cjs.entry.js

@@ -2,8 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-bd89db61.js');
-const index$1 = require('./index-b9715722.js');
+const index = require('./index-72831c5f.js');
+const index$1 = require('./index-b8470262.js');
+require('./_commonjsHelpers-a5111d61.js');
 
 const flipAvatarGroupCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.avatar-group{position:relative;display:inline-grid;grid-template-rows:repeat(8, 1fr);grid-template-columns:repeat(8, 1fr)}.avatar-group ::slotted(*:first-of-type){z-index:1;display:inline-flex;border:0.25rem solid var(--flip-avatar-group-border-color);border-radius:50%;grid-column-start:1;grid-column-end:7;grid-row-start:3;grid-row-end:9}.avatar-group ::slotted(*:nth-of-type(2)){z-index:0;display:inline-flex;border:0.25rem solid var(--flip-avatar-group-border-color);border-radius:50%;grid-column-start:3;grid-column-end:9;grid-row-start:1;grid-row-end:7}.avatar-group__badge{position:absolute;z-index:2;right:0;bottom:0;display:inline-flex;width:1.5rem;height:1.5rem}";
 
@@ -22,3 +23,5 @@ const FlipAvatarGroup = class {
 FlipAvatarGroup.style = flipAvatarGroupCss;
 
 exports.flip_avatar_group = FlipAvatarGroup;
+
+//# sourceMappingURL=flip-avatar-group.cjs.entry.js.map

package/dist/cjs/flip-avatar-group.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"flip-avatar-group.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,kBAAkB,GAAG,2tBAA2tB;;MCWzuB,eAAe;;;;EAG1B,MAAM;IACJ,MAAM,SAAS,GAAGA,kBAAU,CAAC,cAAc,EAAE;MAC3C,yBAAyB,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;KAC/C,CAAC,CAAC;IAEH,MAAM,cAAc,GAAGA,kBAAU,CAAC,qBAAqB,CAAC,CAAC;IAEzD,QACEC,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAE,SAAS,EAAE,IAAI,EAAC,OAAO,IACjCA,qBAAa,EACZ,IAAI,CAAC,KAAK,KACTA,kBAAM,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,IAAI,CAAC,KAAK,GAAS,CAC5D,CACG,CACD,EACP;GACH;;;;;;","names":["classnames","h","Host"],"sources":["./src/components/flip-avatar-group/flip-avatar-group.css?tag=flip-avatar-group&encapsulation=shadow","./src/components/flip-avatar-group/flip-avatar-group.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.avatar-group {\n  position: relative;\n  display: inline-grid;\n  grid-template-rows: repeat(8, 1fr);\n  grid-template-columns: repeat(8, 1fr);\n\n  & ::slotted(*:first-of-type) {\n    z-index: 1;\n    display: inline-flex;\n    border: 0.25rem solid var(--flip-avatar-group-border-color);\n    border-radius: 50%;\n    grid-column-start: 1;\n    grid-column-end: 7;\n    grid-row-start: 3;\n    grid-row-end: 9;\n  }\n\n  & ::slotted(*:nth-of-type(2)) {\n    z-index: 0;\n    display: inline-flex;\n    border: 0.25rem solid var(--flip-avatar-group-border-color);\n    border-radius: 50%;\n    grid-column-start: 3;\n    grid-column-end: 9;\n    grid-row-start: 1;\n    grid-row-end: 7;\n  }\n}\n\n.avatar-group__badge {\n  position: absolute;\n  z-index: 2;\n  right: 0;\n  bottom: 0;\n  display: inline-flex;\n  width: 1.5rem;\n  height: 1.5rem;\n}\n","import { Component, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\n/**\n * @slot slot - Your avatar components\n */\n@Component({\n  shadow: true,\n  styleUrl: \"flip-avatar-group.css\",\n  tag: \"flip-avatar-group\",\n})\nexport class FlipAvatarGroup {\n  @Prop() badge?: string;\n\n  render() {\n    const className = classnames(\"avatar-group\", {\n      \"avatar-group--has-badge\": Boolean(this.badge),\n    });\n\n    const badgeClassName = classnames(\"avatar-group__badge\");\n\n    return (\n      <Host>\n        <div class={className} role=\"group\">\n          <slot></slot>\n          {this.badge && (\n            <span class={badgeClassName} innerHTML={this.badge}></span>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/flip-avatar.cjs.entry.js

@@ -2,8 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-bd89db61.js');
-const index$1 = require('./index-b9715722.js');
+const index = require('./index-72831c5f.js');
+const index$1 = require('./index-b8470262.js');
+require('./_commonjsHelpers-a5111d61.js');
 
 const flipAvatarCss = ":host{display:inline-flex;align-items:center;flex-direction:column}:host *{box-sizing:border-box}.avatar{position:relative;display:inline-flex;justify-content:center;align-items:center;border-radius:50%}.avatar--has-icon{color:var(--s-icon-default);background-color:var(--s-surface-raised-default)}.avatar--has-initials{padding-right:0;padding-left:0;color:#fff}.avatar--interactive{cursor:pointer}.avatar--interactive:focus{outline-color:var(--s-focus-default)}.avatar--size-xs{width:1.75rem;height:1.75rem;font-size:0.75rem}.avatar--size-xs.avatar--has-icon{padding-right:0.4375rem;padding-left:0.4375rem}.avatar--size-xs.avatar--variant-square,.avatar--size-xs.avatar--variant-square .avatar__image,.avatar--size-xs.avatar--variant-square .avatar__initials{border-radius:0.5rem}.avatar--size-s{width:2rem;height:2rem;font-size:0.75rem}.avatar--size-s.avatar--has-icon{padding-right:var(--s-space-8);padding-left:var(--s-space-8)}.avatar--size-s.avatar--variant-square,.avatar--size-s.avatar--variant-square .avatar__image,.avatar--size-s.avatar--variant-square .avatar__initials{border-radius:0.5rem}.avatar--size-m{width:2.5rem;height:2.5rem;font-size:var(--s-font-size-base)}.avatar--size-m.avatar--has-icon{padding-right:0.625rem;padding-left:0.625rem}.avatar--size-m.avatar--variant-square,.avatar--size-m.avatar--variant-square .avatar__image,.avatar--size-m.avatar--variant-square .avatar__initials{border-radius:0.625rem}.avatar--size-l{width:3rem;height:3rem;font-size:var(--s-font-size-lg)}.avatar--size-l.avatar--has-icon{padding-right:var(--s-space-12);padding-left:var(--s-space-12)}.avatar--size-l.avatar--variant-square,.avatar--size-l.avatar--variant-square .avatar__image,.avatar--size-l.avatar--variant-square .avatar__initials{border-radius:0.75rem}.avatar--size-xl{width:4rem;height:4rem;font-size:var(--s-font-size-xl)}.avatar--size-xl.avatar--has-icon{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}.avatar--size-xl.avatar--variant-square,.avatar--size-xl.avatar--variant-square .avatar__image,.avatar--size-xl.avatar--variant-square .avatar__initials{border-radius:1rem}.avatar--size-2xl{width:9rem;height:9rem;font-size:3.375rem}.avatar--size-2xl.avatar--has-icon{padding-right:var(--s-space-32);padding-left:var(--s-space-32)}.avatar--size-2xl.avatar--variant-square,.avatar--size-2xl.avatar--variant-square .avatar__image,.avatar--size-2xl.avatar--variant-square .avatar__initials{border-radius:2.25rem}.avatar__image{overflow:hidden;width:100%;height:100%;border-radius:50%}.avatar__image>img{width:100%;height:100%}.avatar__icon{display:inline-flex;width:100%;height:100%}.avatar__icon>*{width:100%;height:100%}.avatar__icon>*::part(icon){width:100%;height:100%}.avatar__initials{display:inline-flex;width:100%;min-width:0;height:100%;padding-right:0.0625rem;padding-left:0.0625rem;justify-content:center;align-items:center;border-radius:50%;background-color:var(--s-decorative-6-default)}.avatar__initials>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.avatar__badge{position:absolute;bottom:0;left:55%;display:inline-flex;min-width:1.5rem;height:1.5rem;transform:translate3d(0, 25%, 0)}.avatar__badge--position-top{top:0;bottom:auto;transform:translate3d(0, -25%, 0)}.avatar__label{margin-top:var(--s-space-4);color:var(--s-icon-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);text-align:center}";
 
@@ -76,3 +77,5 @@ const FlipAvatar = class {
 FlipAvatar.style = flipAvatarCss;
 
 exports.flip_avatar = FlipAvatar;
+
+//# sourceMappingURL=flip-avatar.cjs.entry.js.map

package/dist/cjs/flip-avatar.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"flip-avatar.entry.cjs.js","mappings":"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","names":["classnames","h","Host"],"sources":["./src/components/flip-avatar/flip-avatar.css?tag=flip-avatar&encapsulation=shadow","./src/components/flip-avatar/flip-avatar.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  align-items: center;\n  flex-direction: column;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.avatar {\n  position: relative;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n}\n\n.avatar--has-icon {\n  color: var(--s-icon-default);\n  background-color: var(--s-surface-raised-default);\n}\n\n.avatar--has-initials {\n  padding-right: 0;\n  padding-left: 0;\n  color: #fff;\n}\n\n.avatar--interactive {\n  cursor: pointer;\n\n  &:focus {\n    outline-color: var(--s-focus-default);\n  }\n}\n\n.avatar--size-xs {\n  width: 1.75rem;\n  height: 1.75rem;\n  font-size: 0.75rem;\n\n  &.avatar--has-icon {\n    padding-right: 0.4375rem;\n    padding-left: 0.4375rem;\n  }\n\n  &.avatar--variant-square,\n  &.avatar--variant-square .avatar__image,\n  &.avatar--variant-square .avatar__initials {\n    border-radius: 0.5rem;\n  }\n}\n\n.avatar--size-s {\n  width: 2rem;\n  height: 2rem;\n  font-size: 0.75rem;\n\n  &.avatar--has-icon {\n    padding-right: var(--s-space-8);\n    padding-left: var(--s-space-8);\n  }\n\n  &.avatar--variant-square,\n  &.avatar--variant-square .avatar__image,\n  &.avatar--variant-square .avatar__initials {\n    border-radius: 0.5rem;\n  }\n}\n\n.avatar--size-m {\n  width: 2.5rem;\n  height: 2.5rem;\n  font-size: var(--s-font-size-base);\n\n  &.avatar--has-icon {\n    padding-right: 0.625rem;\n    padding-left: 0.625rem;\n  }\n\n  &.avatar--variant-square,\n  &.avatar--variant-square .avatar__image,\n  &.avatar--variant-square .avatar__initials {\n    border-radius: 0.625rem;\n  }\n}\n\n.avatar--size-l {\n  width: 3rem;\n  height: 3rem;\n  font-size: var(--s-font-size-lg);\n\n  &.avatar--has-icon {\n    padding-right: var(--s-space-12);\n    padding-left: var(--s-space-12);\n  }\n\n  &.avatar--variant-square,\n  &.avatar--variant-square .avatar__image,\n  &.avatar--variant-square .avatar__initials {\n    border-radius: 0.75rem;\n  }\n}\n\n.avatar--size-xl {\n  width: 4rem;\n  height: 4rem;\n  font-size: var(--s-font-size-xl);\n\n  &.avatar--has-icon {\n    padding-right: var(--s-space-16);\n    padding-left: var(--s-space-16);\n  }\n\n  &.avatar--variant-square,\n  &.avatar--variant-square .avatar__image,\n  &.avatar--variant-square .avatar__initials {\n    border-radius: 1rem;\n  }\n}\n\n.avatar--size-2xl {\n  width: 9rem;\n  height: 9rem;\n  font-size: 3.375rem;\n\n  &.avatar--has-icon {\n    padding-right: var(--s-space-32);\n    padding-left: var(--s-space-32);\n  }\n\n  &.avatar--variant-square,\n  &.avatar--variant-square .avatar__image,\n  &.avatar--variant-square .avatar__initials {\n    border-radius: 2.25rem;\n  }\n}\n\n.avatar__image {\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n\n  & > img {\n    width: 100%;\n    height: 100%;\n  }\n}\n\n.avatar__icon {\n  display: inline-flex;\n  width: 100%;\n  height: 100%;\n\n  & > * {\n    width: 100%;\n    height: 100%;\n  }\n\n  & > *::part(icon) {\n    width: 100%;\n    height: 100%;\n  }\n}\n\n.avatar__initials {\n  display: inline-flex;\n  width: 100%;\n  min-width: 0;\n  height: 100%;\n  padding-right: 0.0625rem;\n  padding-left: 0.0625rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  background-color: var(--s-decorative-6-default);\n\n  & > span {\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n}\n\n.avatar__badge {\n  position: absolute;\n  bottom: 0;\n  left: 55%;\n  display: inline-flex;\n  min-width: 1.5rem;\n  height: 1.5rem;\n  transform: translate3d(0, 25%, 0);\n}\n\n.avatar__badge--position-top {\n  top: 0;\n  bottom: auto;\n  transform: translate3d(0, -25%, 0);\n}\n\n.avatar__label {\n  margin-top: var(--s-space-4);\n  color: var(--s-icon-default);\n  font-size: var(--s-font-size-sm);\n  font-weight: var(--s-font-weight-medium);\n  line-height: var(--s-line-height-sm);\n  text-align: center;\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipAvatarBadgePosition = \"bottom\" | \"top\";\nexport type FlipAvatarSize = \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"2xl\";\nexport type FlipAvatarVariant = \"round\" | \"square\";\n\nconst flipAvatarSizeMappings: { [key in FlipAvatarSize]: number } = {\n  xs: 28,\n  s: 32,\n  m: 40,\n  l: 48,\n  xl: 64,\n  \"2xl\": 144,\n};\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-avatar.css\",\n  tag: \"flip-avatar\",\n})\nexport class FlipAvatar {\n  @Element() element: HTMLElement;\n\n  @Prop() badge?: string;\n  @Prop() badgePosition?: FlipAvatarBadgePosition = \"bottom\";\n  @Prop() icon?: string;\n  @Prop() initials?: string;\n  @Prop() interactive?: boolean = false;\n  @Prop() label!: string;\n  @Prop() showLabel?: boolean = false;\n  @Prop() size?: FlipAvatarSize = \"m\";\n  @Prop() src?: string;\n  @Prop() variant?: FlipAvatarVariant = \"round\";\n\n  @State() imageAvailable: boolean | undefined;\n\n  @Watch(\"src\")\n  watchSrcProp() {\n    this.imageAvailable = undefined;\n  }\n\n  private setImageAvailable = () => {\n    this.imageAvailable = true;\n  };\n\n  private setImageUnavailable = () => {\n    this.imageAvailable = false;\n  };\n\n  private onKeydown = (event: KeyboardEvent) => {\n    // The interactive avatar is activated by the space key on the keyup event,\n    // but the default action for space is already triggered on keydown. It\n    // needs to be prevented to stop scrolling the page before activating the\n    // avatar.\n    if (event.code === \"Space\") {\n      event.preventDefault();\n    } else if (event.code === \"Enter\") {\n      event.preventDefault();\n\n      this.element.click();\n    }\n  };\n\n  private onKeyup = (event: KeyboardEvent) => {\n    if (event.code === \"Space\") {\n      event.preventDefault();\n\n      this.element.click();\n    }\n  };\n\n  render() {\n    const showImage =\n      Boolean(this.src) &&\n      (this.imageAvailable || this.imageAvailable === undefined);\n\n    const showInitials = !showImage && Boolean(this.initials);\n    const showIcon = !showImage && !showInitials && Boolean(this.icon);\n    const showFallbackIcon = !showImage && !showInitials && !showIcon;\n    const showBadge = Boolean(this.badge) && this.size === \"m\";\n\n    const role = this.interactive ? \"button\" : \"img\";\n\n    const className = classnames(\n      \"avatar\",\n      `avatar--size-${this.size}`,\n      `avatar--variant-${this.variant}`,\n      {\n        \"avatar--has-icon\": showIcon || showFallbackIcon,\n        \"avatar--has-initials\": showInitials,\n        \"avatar--interactive\": this.interactive,\n      }\n    );\n\n    const badgeClassName = classnames(\n      \"avatar__badge\",\n      `avatar__badge--position-${this.badgePosition}`\n    );\n\n    return (\n      <Host\n        aria-label={this.label}\n        onKeydown={this.interactive ? this.onKeydown : undefined}\n        onKeyup={this.interactive ? this.onKeyup : undefined}\n        role={role}\n        tabIndex={this.interactive ? 0 : undefined}\n      >\n        <span class={className} part=\"avatar\">\n          {showImage && (\n            <span class=\"avatar__image\">\n              <img\n                alt=\"\"\n                height={flipAvatarSizeMappings[this.size]}\n                onError={this.setImageUnavailable}\n                onLoad={this.setImageAvailable}\n                src={this.src}\n                width={flipAvatarSizeMappings[this.size]}\n              />\n            </span>\n          )}\n          {showInitials && (\n            <span class=\"avatar__initials\">\n              <span>{this.initials}</span>\n            </span>\n          )}\n          {showIcon && <span class=\"avatar__icon\" innerHTML={this.icon}></span>}\n          {showFallbackIcon && (\n            <span class=\"avatar__icon\">\n              <flip-icon-person></flip-icon-person>\n            </span>\n          )}\n          {showBadge && (\n            <span class={badgeClassName} innerHTML={this.badge}></span>\n          )}\n        </span>\n\n        {this.showLabel && (\n          <span aria-hidden class=\"avatar__label\">\n            {this.label}\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/flip-badge.cjs.entry.js

@@ -2,8 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-bd89db61.js');
-const index$1 = require('./index-b9715722.js');
+const index = require('./index-72831c5f.js');
+const index$1 = require('./index-b8470262.js');
+require('./_commonjsHelpers-a5111d61.js');
 
 const flipBadgeCss = ":host{display:inline-flex;min-width:0;max-width:100%;justify-content:center;align-items:center}:host *{box-sizing:border-box}.badge{display:inline-flex;max-width:100%;justify-content:center;align-items:center;border:0.25rem solid var(--flip-badge-border-color);border-radius:2rem;color:var(--s-text-on-status);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium)}.badge--size-s{min-width:1.5rem;height:1.5rem;font-size:0.75rem}.badge--size-s .badge__label{padding-right:0.1875rem;padding-left:0.1875rem}.badge--size-s .badge__icon>*::part(icon){width:0.75rem;height:0.75rem}.badge--size-m{min-width:2rem;height:2rem}.badge--size-m .badge__label{padding-right:0.375rem;padding-left:0.375rem}.badge--has-icon{padding-right:0;padding-left:0}.badge--intent-critical{background-color:var(--s-surface-critical-default)}.badge--intent-decorative-1{background-color:var(--s-decorative-1-default)}.badge--intent-decorative-2{background-color:var(--s-decorative-2-default)}.badge--intent-decorative-3{color:var(--s-text-default);background-color:var(--s-decorative-3-default)}.badge--intent-decorative-4{color:var(--s-text-default);background-color:var(--s-decorative-4-default)}.badge--intent-decorative-5{background-color:var(--s-decorative-5-default)}.badge--intent-decorative-6{background-color:var(--s-decorative-6-default)}.badge--intent-decorative-7{background-color:var(--s-decorative-7-default)}.badge--variant-dot{width:1.25rem;min-width:0;height:1.25rem}.badge--variant-dot .badge__label{padding-right:0;padding-left:0}.badge--variant-dot .badge__label,.badge--variant-dot .badge__icon{display:none}.badge__icon{display:inline-flex}.badge__icon>*::part(icon){width:1rem;height:1rem}.badge__label{display:inline-flex;overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis}";
 
@@ -24,3 +25,5 @@ const FlipBadge = class {
 FlipBadge.style = flipBadgeCss;
 
 exports.flip_badge = FlipBadge;
+
+//# sourceMappingURL=flip-badge.cjs.entry.js.map

package/dist/cjs/flip-badge.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"flip-badge.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,YAAY,GAAG,mxDAAmxD;;MCuB3xD,SAAS;EALtB;;IAOU,WAAM,GAAqB,UAAU,CAAC;IAEtC,SAAI,GAAmB,GAAG,CAAC;IAC3B,YAAO,GAAsB,SAAS,CAAC;GAwBhD;EAtBC,MAAM;IACJ,MAAM,SAAS,GAAGA,kBAAU,CAC1B,OAAO,EACP,iBAAiB,IAAI,CAAC,MAAM,EAAE,EAC9B,eAAe,IAAI,CAAC,IAAI,EAAE,EAC1B,kBAAkB,IAAI,CAAC,OAAO,EAAE,EAChC;MACE,iBAAiB,EAAE,IAAI,CAAC,IAAI;KAC7B,CACF,CAAC;IAEF,QACEC,QAACC,UAAI,IAAC,IAAI,EAAC,QAAQ,IACjBD,kBAAM,KAAK,EAAE,SAAS,IACnB,IAAI,CAAC,IAAI,IAAIA,kBAAM,KAAK,EAAC,aAAa,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAS,EACpE,IAAI,CAAC,IAAI,KAAK,SAAS,KACtBA,kBAAM,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC/C,CACI,CACF,EACP;GACH;;;;;;","names":["classnames","h","Host"],"sources":["./src/components/flip-badge/flip-badge.css?tag=flip-badge&encapsulation=shadow","./src/components/flip-badge/flip-badge.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  min-width: 0;\n  max-width: 100%;\n  justify-content: center;\n  align-items: center;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.badge {\n  display: inline-flex;\n  max-width: 100%;\n  justify-content: center;\n  align-items: center;\n  border: 0.25rem solid var(--flip-badge-border-color);\n  border-radius: 2rem;\n  color: var(--s-text-on-status);\n  font-size: var(--s-font-size-sm);\n  font-weight: var(--s-font-weight-medium);\n}\n\n.badge--size-s {\n  min-width: 1.5rem;\n  height: 1.5rem;\n  font-size: 0.75rem;\n\n  & .badge__label {\n    padding-right: 0.1875rem;\n    padding-left: 0.1875rem;\n  }\n\n  & .badge__icon {\n    & > *::part(icon) {\n      width: 0.75rem;\n      height: 0.75rem;\n    }\n  }\n}\n\n.badge--size-m {\n  min-width: 2rem;\n  height: 2rem;\n\n  & .badge__label {\n    padding-right: 0.375rem;\n    padding-left: 0.375rem;\n  }\n}\n\n.badge--has-icon {\n  padding-right: 0;\n  padding-left: 0;\n}\n\n.badge--intent-critical {\n  background-color: var(--s-surface-critical-default);\n}\n\n.badge--intent-decorative-1 {\n  background-color: var(--s-decorative-1-default);\n}\n\n.badge--intent-decorative-2 {\n  background-color: var(--s-decorative-2-default);\n}\n\n.badge--intent-decorative-3 {\n  color: var(--s-text-default);\n  background-color: var(--s-decorative-3-default);\n}\n\n.badge--intent-decorative-4 {\n  color: var(--s-text-default);\n  background-color: var(--s-decorative-4-default);\n}\n\n.badge--intent-decorative-5 {\n  background-color: var(--s-decorative-5-default);\n}\n\n.badge--intent-decorative-6 {\n  background-color: var(--s-decorative-6-default);\n}\n\n.badge--intent-decorative-7 {\n  background-color: var(--s-decorative-7-default);\n}\n\n.badge--variant-dot {\n  width: 1.25rem;\n  min-width: 0;\n  height: 1.25rem;\n\n  & .badge__label {\n    padding-right: 0;\n    padding-left: 0;\n  }\n\n  & .badge__label,\n  & .badge__icon {\n    display: none;\n  }\n}\n\n.badge__icon {\n  display: inline-flex;\n\n  & > *::part(icon) {\n    width: 1rem;\n    height: 1rem;\n  }\n}\n\n.badge__label {\n  display: inline-flex;\n  overflow: hidden;\n  max-width: 100%;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n","import classnames from \"classnames\";\n\nimport { Component, h, Host, Prop } from \"@stencil/core\";\n\nexport type FlipBadgeIntent =\n  | \"critical\"\n  | \"decorative-1\"\n  | \"decorative-2\"\n  | \"decorative-3\"\n  | \"decorative-4\"\n  | \"decorative-5\"\n  | \"decorative-6\"\n  | \"decorative-7\";\n\nexport type FlipBadgeSize = \"s\" | \"m\";\n\nexport type FlipBadgeVariant = \"default\" | \"dot\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-badge.css\",\n  tag: \"flip-badge\",\n})\nexport class FlipBadge {\n  @Prop() icon?: string;\n  @Prop() intent?: FlipBadgeIntent = \"critical\";\n  @Prop() label!: string;\n  @Prop() size?: FlipBadgeSize = \"m\";\n  @Prop() variant?: FlipBadgeVariant = \"default\";\n\n  render() {\n    const className = classnames(\n      \"badge\",\n      `badge--intent-${this.intent}`,\n      `badge--size-${this.size}`,\n      `badge--variant-${this.variant}`,\n      {\n        \"badge--has-icon\": this.icon,\n      }\n    );\n\n    return (\n      <Host role=\"status\">\n        <span class={className}>\n          {this.icon && <span class=\"badge__icon\" innerHTML={this.icon}></span>}\n          {this.icon === undefined && (\n            <span class=\"badge__label\">{this.label}</span>\n          )}\n        </span>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/flip-banner.cjs.entry.js

@@ -2,8 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-bd89db61.js');
-const index$1 = require('./index-b9715722.js');
+const index = require('./index-72831c5f.js');
+const index$1 = require('./index-b8470262.js');
+require('./_commonjsHelpers-a5111d61.js');
 
 const flipBannerCss = ":host{display:block}:host *{box-sizing:border-box}.banner{display:flex;max-width:100%;padding:var(--s-space-12);align-items:flex-start}.banner:focus{outline-color:var(--s-focus-default)}@media (min-width: 768px){.banner{padding:var(--s-space-16)}}.banner--intent-default .banner__icon,.banner--intent-default .banner__content,.banner--intent-default .banner__action-button,.banner--intent-default .banner__dismiss-button,.banner--intent-critical .banner__icon,.banner--intent-critical .banner__content,.banner--intent-critical .banner__action-button,.banner--intent-critical .banner__dismiss-button,.banner--intent-success .banner__icon,.banner--intent-success .banner__content,.banner--intent-success .banner__action-button,.banner--intent-success .banner__dismiss-button,.banner--intent-info .banner__icon,.banner--intent-info .banner__content,.banner--intent-info .banner__action-button,.banner--intent-info .banner__dismiss-button{color:var(--s-text-on-status)}.banner--intent-default{background-color:var(--s-surface-neutral-default)}.banner--intent-critical{background-color:var(--s-surface-critical-default)}.banner--intent-success{background-color:var(--s-surface-success-default)}.banner--intent-info{background-color:var(--s-surface-info-default)}.banner--intent-warning{background-color:var(--s-surface-warning-default)}.banner--intent-warning .banner__icon{color:var(--s-icon-strong)}.banner--intent-warning .banner__content,.banner--intent-warning .banner__action-button,.banner--intent-warning .banner__dismiss-button{color:var(--s-text-default)}@media (min-width: 375px){.banner--has-icon .banner__content{padding-top:var(--s-space-2)}}.banner__icon{display:none;margin-right:var(--s-space-8);color:var(--s-icon-on-status)}@media (min-width: 375px){.banner__icon{display:inline-flex}}.banner__content{min-height:1.5rem;margin-right:var(--s-space-12);flex-grow:1;line-height:var(--s-line-height-base)}.banner__controls{display:inline-flex;margin-left:var(--s-space-16);align-items:center;gap:var(--s-space-16);line-height:var(--s-line-height-base)}@media (min-width: 768px){.banner__controls{gap:var(--s-space-24)}}.banner__action-button,.banner__dismiss-button{display:inline-flex;overflow:hidden;max-width:7rem;height:1.5rem;padding:0;flex-shrink:0;align-items:center;border:none;background-color:transparent;font:inherit;font-weight:var(--s-font-weight-semibold);white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.banner__action-button:focus,.banner__dismiss-button:focus{outline-color:var(--s-focus-default)}@media (min-width: 768px){.banner__action-button,.banner__dismiss-button{max-width:12rem}}";
 
@@ -45,3 +46,5 @@ const FlipBanner = class {
 FlipBanner.style = flipBannerCss;
 
 exports.flip_banner = FlipBanner;
+
+//# sourceMappingURL=flip-banner.cjs.entry.js.map

package/dist/cjs/flip-banner.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"flip-banner.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,aAAa,GAAG,ikFAAikF;;ACoBvlF,MAAM,qBAAqB,GAA0C;EACnE,OAAO,EAAE,SAAS;EAClB,QAAQ,EAAE,qCAAqC;EAC/C,OAAO,EAAE,mDAAmD;EAC5D,OAAO,EAAE,yCAAyC;EAClD,IAAI,EAAE,mCAAmC;CAC1C,CAAC;MAOW,UAAU;EALvB;;;;IAUU,gBAAW,GAAa,KAAK,CAAC;IAC9B,iBAAY,GAAY,SAAS,CAAC;IAClC,eAAU,GAAwB,QAAQ,CAAC;IAC3C,WAAM,GAAsB,SAAS,CAAC;IACtC,aAAQ,GAAa,KAAK,CAAC;IAKnC,aAAQ,GAAG,CAAC,KAAiB;MAC3B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACzB,CAAC;IAEF,cAAS,GAAG,CAAC,KAAiB;MAC5B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC1B,CAAC;GAwDH;EAtDC,MAAM;IACJ,MAAM,IAAI,GAAG,qBAAqB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAChD,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC;IACnE,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IAEhD,MAAM,SAAS,GAAGA,kBAAU,CAAC,QAAQ,EAAE,kBAAkB,IAAI,CAAC,MAAM,EAAE,EAAE;MACtE,kBAAkB,EAAE,QAAQ;KAC7B,CAAC,CAAC;IAEH,QACEC,QAACC,UAAI,QACHD,qCACmB,SAAS,EAC1B,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,IAAI,CAAC,UAAU,EACrB,QAAQ,EAAE,CAAC,IAEV,QAAQ,KACPA,iCACc,MAAM,EAClB,KAAK,EAAC,cAAc,EACpB,SAAS,EAAE,IAAI,GACT,CACT,EACDA,kBAAM,KAAK,EAAC,iBAAiB,EAAC,EAAE,EAAC,SAAS,IACvC,IAAI,CAAC,OAAO,CACR,EACN,YAAY,KACXA,kBAAM,KAAK,EAAC,kBAAkB,IAC3B,IAAI,CAAC,WAAW,KACfA,oBACE,KAAK,EAAC,uBAAuB,EAC7B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,WAAW,CACV,CACV,EACA,IAAI,CAAC,WAAW,KACfA,kCACc,IAAI,CAAC,YAAY,EAC7B,KAAK,EAAC,wBAAwB,EAC9B,OAAO,EAAE,IAAI,CAAC,SAAS,EACvB,IAAI,EAAC,QAAQ,IAEbA,gCAAmC,CAC5B,CACV,CACI,CACR,CACG,CACD,EACP;GACH;;;;;;;","names":["classnames","h","Host"],"sources":["./src/components/flip-banner/flip-banner.css?tag=flip-banner&encapsulation=shadow","./src/components/flip-banner/flip-banner.tsx"],"sourcesContent":["@import \"../../styles/media-queries.css\";\n\n:host {\n  display: block;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.banner {\n  display: flex;\n  max-width: 100%;\n  padding: var(--s-space-12);\n  align-items: flex-start;\n\n  &:focus {\n    outline-color: var(--s-focus-default);\n  }\n\n  @media (--from-tablet) {\n    padding: var(--s-space-16);\n  }\n}\n\n.banner--intent-default,\n.banner--intent-critical,\n.banner--intent-success,\n.banner--intent-info {\n  & .banner__icon,\n  & .banner__content,\n  & .banner__action-button,\n  & .banner__dismiss-button {\n    color: var(--s-text-on-status);\n  }\n}\n\n.banner--intent-default {\n  background-color: var(--s-surface-neutral-default);\n}\n\n.banner--intent-critical {\n  background-color: var(--s-surface-critical-default);\n}\n\n.banner--intent-success {\n  background-color: var(--s-surface-success-default);\n}\n\n.banner--intent-info {\n  background-color: var(--s-surface-info-default);\n}\n\n.banner--intent-warning {\n  background-color: var(--s-surface-warning-default);\n\n  & .banner__icon {\n    color: var(--s-icon-strong);\n  }\n\n  & .banner__content,\n  & .banner__action-button,\n  & .banner__dismiss-button {\n    color: var(--s-text-default);\n  }\n}\n\n.banner--has-icon {\n  & .banner__content {\n    @media (--from-mobile) {\n      padding-top: var(--s-space-2);\n    }\n  }\n}\n\n.banner__icon {\n  display: none;\n  margin-right: var(--s-space-8);\n  color: var(--s-icon-on-status);\n\n  @media (--from-mobile) {\n    display: inline-flex;\n  }\n}\n\n.banner__content {\n  min-height: 1.5rem;\n  margin-right: var(--s-space-12);\n  flex-grow: 1;\n  line-height: var(--s-line-height-base);\n}\n\n.banner__controls {\n  display: inline-flex;\n  margin-left: var(--s-space-16);\n  align-items: center;\n  gap: var(--s-space-16);\n  line-height: var(--s-line-height-base);\n\n  @media (--from-tablet) {\n    gap: var(--s-space-24);\n  }\n}\n\n.banner__action-button,\n.banner__dismiss-button {\n  display: inline-flex;\n  overflow: hidden;\n  max-width: 7rem;\n  height: 1.5rem;\n  padding: 0;\n  flex-shrink: 0;\n  align-items: center;\n  border: none;\n  background-color: transparent;\n  font: inherit;\n  font-weight: var(--s-font-weight-semibold);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  cursor: pointer;\n\n  &:focus {\n    outline-color: var(--s-focus-default);\n  }\n\n  @media (--from-tablet) {\n    max-width: 12rem;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipBannerAriaRole = \"alert\" | \"status\";\n\nexport type FlipBannerIntent =\n  | \"default\"\n  | \"critical\"\n  | \"success\"\n  | \"warning\"\n  | \"info\";\n\nconst flipBannerIconMapping: { [key in FlipBannerIntent]: string } = {\n  default: undefined,\n  critical: \"<flip-icon-error></flip-icon-error>\",\n  success: \"<flip-icon-check-circle></flip-icon-check-circle>\",\n  warning: \"<flip-icon-warning></flip-icon-warning>\",\n  info: \"<flip-icon-info></flip-icon-info>\",\n};\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-banner.css\",\n  tag: \"flip-banner\",\n})\nexport class FlipBanner {\n  @Element() element: HTMLElement;\n\n  @Prop() actionLabel?: string;\n  @Prop() content!: string;\n  @Prop() dismissable?: boolean = false;\n  @Prop() dismissLabel?: string = \"Dismiss\";\n  @Prop() importance?: FlipBannerAriaRole = \"status\";\n  @Prop() intent?: FlipBannerIntent = \"default\";\n  @Prop() showIcon?: boolean = false;\n\n  @Event() action?: EventEmitter<MouseEvent>;\n  @Event() dismiss?: EventEmitter<MouseEvent>;\n\n  onAction = (event: MouseEvent) => {\n    this.action.emit(event);\n  };\n\n  onDismiss = (event: MouseEvent) => {\n    this.dismiss.emit(event);\n  };\n\n  render() {\n    const icon = flipBannerIconMapping[this.intent];\n    const showControls = Boolean(this.actionLabel) || this.dismissable;\n    const showIcon = this.showIcon && Boolean(icon);\n\n    const className = classnames(\"banner\", `banner--intent-${this.intent}`, {\n      \"banner--has-icon\": showIcon,\n    });\n\n    return (\n      <Host>\n        <div\n          aria-describedby=\"content\"\n          class={className}\n          role={this.importance}\n          tabIndex={0}\n        >\n          {showIcon && (\n            <span\n              aria-hidden=\"true\"\n              class=\"banner__icon\"\n              innerHTML={icon}\n            ></span>\n          )}\n          <span class=\"banner__content\" id=\"content\">\n            {this.content}\n          </span>\n          {showControls && (\n            <span class=\"banner__controls\">\n              {this.actionLabel && (\n                <button\n                  class=\"banner__action-button\"\n                  onClick={this.onAction}\n                  type=\"button\"\n                >\n                  {this.actionLabel}\n                </button>\n              )}\n              {this.dismissable && (\n                <button\n                  aria-label={this.dismissLabel}\n                  class=\"banner__dismiss-button\"\n                  onClick={this.onDismiss}\n                  type=\"button\"\n                >\n                  <flip-icon-close></flip-icon-close>\n                </button>\n              )}\n            </span>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/flip-button-group.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-bd89db61.js');
+const index = require('./index-72831c5f.js');
 
 const flipButtonGroupCss = ":host{display:block}:host *{box-sizing:border-box}";
 
@@ -22,3 +22,5 @@ const FlipButtonGroup = class {
 FlipButtonGroup.style = flipButtonGroupCss;
 
 exports.flip_button_group = FlipButtonGroup;
+
+//# sourceMappingURL=flip-button-group.cjs.entry.js.map

package/dist/cjs/flip-button-group.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"flip-button-group.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,oDAAoD;;MCUlE,eAAe;EAL5B;;IAMU,gBAAW,GAA+B,YAAY,CAAC;GA6BhE;EAzBC,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,wBACE,KAAK,EACH,IAAI,CAAC,WAAW,KAAK,UAAU,IAAI,IAAI,CAAC,OAAO;UAC3C,SAAS;UACT,OAAO,EAEb,KAAK,EAAC,cAAc,EACpB,OAAO,EACL,IAAI,CAAC,WAAW,KAAK,YAAY,IAAI,IAAI,CAAC,OAAO;UAC7C,SAAS;UACT,OAAO,EAEb,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,GAAG,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,IAEfA,qBAAa,CACF,CACR,EACP;GACH;;;;;;","names":["h","Host"],"sources":["./src/components/flip-button-group/flip-button-group.css?tag=flip-button-group&encapsulation=shadow","./src/components/flip-button-group/flip-button-group.tsx"],"sourcesContent":[":host {\n  display: block;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n","import { Component, h, Host, Prop } from \"@stencil/core\";\nimport { FlipStackOrientation } from \"../flip-stack/flip-stack\";\n\nexport type FlipButtonGroupOrientation = FlipStackOrientation;\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-button-group.css\",\n  tag: \"flip-button-group\",\n})\nexport class FlipButtonGroup {\n  @Prop() orientation: FlipButtonGroupOrientation = \"horizontal\";\n  @Prop() stretch: boolean;\n  @Prop() wrap: boolean;\n\n  render() {\n    return (\n      <Host>\n        <flip-stack\n          align={\n            this.orientation === \"vertical\" && this.stretch\n              ? \"stretch\"\n              : \"start\"\n          }\n          class=\"button-group\"\n          justify={\n            this.orientation === \"horizontal\" && this.stretch\n              ? \"stretch\"\n              : \"start\"\n          }\n          orientation={this.orientation}\n          role=\"group\"\n          spacing=\"8\"\n          wrap={this.wrap}\n        >\n          <slot></slot>\n        </flip-stack>\n      </Host>\n    );\n  }\n}\n"],"version":3}