@amwaljs/checkout-button 0.3.1 → 0.3.2

package/dist/components/ion-segment.js

@@ -1 +1,472 @@
-import{p as t,H as s,c as e,w as i,h as o,d as n,t as a}from"./p-BnQDByf2.js";import{r}from"./p-BwKjt_Dc.js";import{i as h}from"./p-C53feagD.js";import{c as l,h as c}from"./p-DiVJyqlX.js";import{g as d}from"./p-CN34uOrj.js";const u=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.ionChange=e(this,"ionChange",7),this.ionSelect=e(this,"ionSelect",7),this.ionStyle=e(this,"ionStyle",7),this.onClick=t=>{const s=t.target,e=this.checked;"ION-SEGMENT"!==s.tagName&&(this.value=s.value,s!==e&&this.emitValueChange(),!this.scrollable&&this.swipeGesture||(e?this.checkButton(e,s):this.setCheckedClasses()))},this.getSegmentButton=t=>{var s,e;const i=this.getButtons().filter((t=>!t.disabled)),o=i.findIndex((t=>t===document.activeElement));switch(t){case"first":return i[0];case"last":return i[i.length-1];case"next":return null!==(s=i[o+1])&&void 0!==s?s:i[0];case"previous":return null!==(e=i[o-1])&&void 0!==e?e:i[i.length-1];default:return null}},this.activated=!1,this.color=void 0,this.disabled=!1,this.scrollable=!1,this.swipeGesture=!0,this.value=void 0,this.selectOnFocus=!1}colorChanged(t,s){(void 0===s&&void 0!==t||void 0!==s&&void 0===t)&&this.emitStyle()}swipeGestureChanged(){this.gestureChanged()}valueChanged(t){this.ionSelect.emit({value:t}),this.scrollActiveButtonIntoView()}disabledChanged(){this.gestureChanged();const t=this.getButtons();for(const s of t)s.disabled=this.disabled}gestureChanged(){this.gesture&&this.gesture.enable(!this.scrollable&&!this.disabled&&this.swipeGesture)}connectedCallback(){this.emitStyle()}componentWillLoad(){this.emitStyle()}async componentDidLoad(){this.setCheckedClasses(),this.ionSelect.emit({value:this.value}),r((()=>{this.scrollActiveButtonIntoView(!1)})),this.gesture=(await import("./p-BEVStXwd.js")).createGesture({el:this.el,gestureName:"segment",gesturePriority:100,threshold:0,passive:!1,onStart:t=>this.onStart(t),onMove:t=>this.onMove(t),onEnd:t=>this.onEnd(t)}),this.gestureChanged(),this.disabled&&this.disabledChanged()}onStart(t){this.valueBeforeGesture=this.value,this.activate(t)}onMove(t){this.setNextIndex(t)}onEnd(t){this.setActivated(!1),this.setNextIndex(t,!0),t.event.stopImmediatePropagation();const s=this.value;void 0!==s&&this.valueBeforeGesture!==s&&this.emitValueChange(),this.valueBeforeGesture=void 0}emitValueChange(){const{value:t}=this;this.ionChange.emit({value:t})}getButtons(){return Array.from(this.el.querySelectorAll("ion-segment-button"))}get checked(){return this.getButtons().find((t=>t.value===this.value))}setActivated(t){this.getButtons().forEach((s=>{t?s.classList.add("segment-button-activated"):s.classList.remove("segment-button-activated")})),this.activated=t}activate(t){const s=t.event.target,e=this.getButtons().find((t=>t.value===this.value));"ION-SEGMENT-BUTTON"===s.tagName&&(e||(this.value=s.value,this.setCheckedClasses()),this.value===s.value&&this.setActivated(!0))}getIndicator(t){return(t.shadowRoot||t).querySelector(".segment-button-indicator")}checkButton(t,s){const e=this.getIndicator(t),o=this.getIndicator(s);if(null===e||null===o)return;const n=e.getBoundingClientRect(),a=o.getBoundingClientRect(),r=`translate3d(${n.left-a.left}px, 0, 0) scaleX(${n.width/a.width})`;i((()=>{o.classList.remove("segment-button-indicator-animated"),o.style.setProperty("transform",r),o.getBoundingClientRect(),o.classList.add("segment-button-indicator-animated"),o.style.setProperty("transform","")})),this.value=s.value,this.setCheckedClasses()}setCheckedClasses(){const t=this.getButtons(),s=t.findIndex((t=>t.value===this.value))+1;for(const s of t)s.classList.remove("segment-button-after-checked");s<t.length&&t[s].classList.add("segment-button-after-checked")}scrollActiveButtonIntoView(t=!0){const{scrollable:s,value:e,el:i}=this;if(s){const s=this.getButtons().find((t=>t.value===e));if(void 0!==s){const e=i.getBoundingClientRect(),o=s.getBoundingClientRect();i.scrollBy({top:0,left:o.x-e.x-e.width/2+o.width/2,behavior:t?"smooth":"instant"})}}}setNextIndex(t,s=!1){const e=h(this.el),i=this.activated,o=this.getButtons(),n=o.findIndex((t=>t.value===this.value)),a=o[n];let r,l;if(-1===n)return;const c=a.getBoundingClientRect(),d=c.left,u=c.width,g=t.currentX,m=c.top+c.height/2,b=this.el.getRootNode().elementFromPoint(g,m);if(i&&!s){if(e?g>d+u:g<d){const t=n-1;t>=0&&(l=t)}else if((e?g<d:g>d+u)&&i&&!s){const t=n+1;t<o.length&&(l=t)}void 0===l||o[l].disabled||(r=o[l])}if(!i&&s&&(r=b),null!=r){if("ION-SEGMENT"===r.tagName)return!1;a!==r&&this.checkButton(a,r)}return!0}emitStyle(){this.ionStyle.emit({segment:!0})}onKeyDown(t){const s=h(this.el);let e,i=this.selectOnFocus;switch(t.key){case"ArrowRight":t.preventDefault(),e=this.getSegmentButton(s?"previous":"next");break;case"ArrowLeft":t.preventDefault(),e=this.getSegmentButton(s?"next":"previous");break;case"Home":t.preventDefault(),e=this.getSegmentButton("first");break;case"End":t.preventDefault(),e=this.getSegmentButton("last");break;case" ":case"Enter":t.preventDefault(),e=document.activeElement,i=!0}if(e){if(i){const t=this.checked;this.checkButton(t||e,e),e!==t&&this.emitValueChange()}e.setFocus()}}render(){const t=d(this);return o(n,{key:"01c94f9fcc51fb5a7612588c87155a130b7c8a9d",role:"tablist",onClick:this.onClick,class:l(this.color,{[t]:!0,"in-toolbar":c("ion-toolbar",this.el),"in-toolbar-color":c("ion-toolbar[color]",this.el),"segment-activated":this.activated,"segment-disabled":this.disabled,"segment-scrollable":this.scrollable})},o("slot",{key:"b0afdfcb7506a765df42d1d6eb4e1d81bf8fd92a"}))}get el(){return this}static get watchers(){return{color:[{colorChanged:0}],swipeGesture:[{swipeGestureChanged:0}],value:[{valueChanged:0}],disabled:[{disabledChanged:0}]}}static get style(){return{ios:":host{--ripple-color:currentColor;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:grid;grid-auto-columns:1fr;position:relative;align-items:stretch;justify-content:center;width:100%;background:var(--background);font-family:var(--ion-font-family, inherit);text-align:center;contain:paint;user-select:none}:host(.segment-scrollable){justify-content:start;width:auto;overflow-x:auto;grid-auto-columns:minmax(min-content, 1fr)}:host(.segment-scrollable::-webkit-scrollbar){display:none}:host{--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.065);border-radius:8px;overflow:hidden;z-index:0}:host(.ion-color){background:rgba(var(--ion-color-base-rgb), 0.065)}:host(.in-toolbar){-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;width:auto}:host(.in-toolbar:not(.ion-color)){background:var(--ion-toolbar-segment-background, var(--background))}:host(.in-toolbar-color:not(.ion-color)){background:rgba(var(--ion-color-contrast-rgb), 0.11)}",md:":host{--ripple-color:currentColor;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:grid;grid-auto-columns:1fr;position:relative;align-items:stretch;justify-content:center;width:100%;background:var(--background);font-family:var(--ion-font-family, inherit);text-align:center;contain:paint;user-select:none}:host(.segment-scrollable){justify-content:start;width:auto;overflow-x:auto;grid-auto-columns:minmax(min-content, 1fr)}:host(.segment-scrollable::-webkit-scrollbar){display:none}:host{--background:transparent;grid-auto-columns:minmax(auto, 360px)}:host(.in-toolbar){min-height:var(--min-height)}:host(.segment-scrollable) ::slotted(ion-segment-button){min-width:auto}"}}},[289,"ion-segment",{color:[513],disabled:[4],scrollable:[4],swipeGesture:[4,"swipe-gesture"],value:[1032],selectOnFocus:[4,"select-on-focus"],activated:[32]},[[0,"keydown","onKeyDown"]],{color:[{colorChanged:0}],swipeGesture:[{swipeGestureChanged:0}],value:[{valueChanged:0}],disabled:[{disabledChanged:0}]}]),g=u,m=function(){"undefined"!=typeof customElements&&["ion-segment"].forEach((t=>{"ion-segment"===t&&(customElements.get(a(t))||customElements.define(a(t),u))}))};export{g as IonSegment,m as defineCustomElement}
+import { p as proxyCustomElement, H, c as createEvent, w as writeTask, h, d as Host } from './p-ec0e3f3f.js';
+import { b as raf } from './p-2bb89b46.js';
+import { i as isRTL } from './p-d5862637.js';
+import { c as createColorClasses, h as hostContext } from './p-350e7423.js';
+import { g as getIonMode } from './p-901c16c5.js';
+
+const segmentIosCss = ":host{--ripple-color:currentColor;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:grid;grid-auto-columns:1fr;position:relative;align-items:stretch;justify-content:center;width:100%;background:var(--background);font-family:var(--ion-font-family, inherit);text-align:center;contain:paint;user-select:none}:host(.segment-scrollable){justify-content:start;width:auto;overflow-x:auto;grid-auto-columns:minmax(min-content, 1fr)}:host(.segment-scrollable::-webkit-scrollbar){display:none}:host{--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.065);border-radius:8px;overflow:hidden;z-index:0}:host(.ion-color){background:rgba(var(--ion-color-base-rgb), 0.065)}:host(.in-toolbar){-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;width:auto}:host(.in-toolbar:not(.ion-color)){background:var(--ion-toolbar-segment-background, var(--background))}:host(.in-toolbar-color:not(.ion-color)){background:rgba(var(--ion-color-contrast-rgb), 0.11)}";
+
+const segmentMdCss = ":host{--ripple-color:currentColor;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:grid;grid-auto-columns:1fr;position:relative;align-items:stretch;justify-content:center;width:100%;background:var(--background);font-family:var(--ion-font-family, inherit);text-align:center;contain:paint;user-select:none}:host(.segment-scrollable){justify-content:start;width:auto;overflow-x:auto;grid-auto-columns:minmax(min-content, 1fr)}:host(.segment-scrollable::-webkit-scrollbar){display:none}:host{--background:transparent;grid-auto-columns:minmax(auto, 360px)}:host(.in-toolbar){min-height:var(--min-height)}:host(.segment-scrollable) ::slotted(ion-segment-button){min-width:auto}";
+
+const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.ionChange = createEvent(this, "ionChange", 7);
+    this.ionSelect = createEvent(this, "ionSelect", 7);
+    this.ionStyle = createEvent(this, "ionStyle", 7);
+    this.onClick = (ev) => {
+      const current = ev.target;
+      const previous = this.checked;
+      // If the current element is a segment then that means
+      // the user tried to swipe to a segment button and
+      // click a segment button at the same time so we should
+      // not update the checked segment button
+      if (current.tagName === 'ION-SEGMENT') {
+        return;
+      }
+      this.value = current.value;
+      if (current !== previous) {
+        this.emitValueChange();
+      }
+      if (this.scrollable || !this.swipeGesture) {
+        if (previous) {
+          this.checkButton(previous, current);
+        }
+        else {
+          this.setCheckedClasses();
+        }
+      }
+    };
+    this.getSegmentButton = (selector) => {
+      var _a, _b;
+      const buttons = this.getButtons().filter((button) => !button.disabled);
+      const currIndex = buttons.findIndex((button) => button === document.activeElement);
+      switch (selector) {
+        case 'first':
+          return buttons[0];
+        case 'last':
+          return buttons[buttons.length - 1];
+        case 'next':
+          return (_a = buttons[currIndex + 1]) !== null && _a !== void 0 ? _a : buttons[0];
+        case 'previous':
+          return (_b = buttons[currIndex - 1]) !== null && _b !== void 0 ? _b : buttons[buttons.length - 1];
+        default:
+          return null;
+      }
+    };
+    this.activated = false;
+    this.color = undefined;
+    this.disabled = false;
+    this.scrollable = false;
+    this.swipeGesture = true;
+    this.value = undefined;
+    this.selectOnFocus = false;
+  }
+  colorChanged(value, oldValue) {
+    /**
+     * If color is set after not having
+     * previously been set (or vice versa),
+     * we need to emit style so the segment-buttons
+     * can apply their color classes properly.
+     */
+    if ((oldValue === undefined && value !== undefined) || (oldValue !== undefined && value === undefined)) {
+      this.emitStyle();
+    }
+  }
+  swipeGestureChanged() {
+    this.gestureChanged();
+  }
+  valueChanged(value) {
+    /**
+     * `ionSelect` is emitted every time the value changes (internal or external changes).
+     * Used by `ion-segment-button` to determine if the button should be checked.
+     */
+    this.ionSelect.emit({ value });
+    this.scrollActiveButtonIntoView();
+  }
+  disabledChanged() {
+    this.gestureChanged();
+    const buttons = this.getButtons();
+    for (const button of buttons) {
+      button.disabled = this.disabled;
+    }
+  }
+  gestureChanged() {
+    if (this.gesture) {
+      this.gesture.enable(!this.scrollable && !this.disabled && this.swipeGesture);
+    }
+  }
+  connectedCallback() {
+    this.emitStyle();
+  }
+  componentWillLoad() {
+    this.emitStyle();
+  }
+  async componentDidLoad() {
+    this.setCheckedClasses();
+    /**
+     * If the value changes before watchers
+     * are setup, then the ionSelect watch callback
+     * will not fire. As a result, we manually
+     * fire this event when Select is loaded.
+     */
+    this.ionSelect.emit({ value: this.value });
+    /**
+     * We need to wait for the buttons to all be rendered
+     * before we can scroll.
+     */
+    raf(() => {
+      /**
+       * When the segment loads for the first
+       * time we just want to snap the active button into
+       * place instead of scroll. Smooth scrolling should only
+       * happen when the user interacts with the segment.
+       */
+      this.scrollActiveButtonIntoView(false);
+    });
+    this.gesture = (await import('./p-77104220.js')).createGesture({
+      el: this.el,
+      gestureName: 'segment',
+      gesturePriority: 100,
+      threshold: 0,
+      passive: false,
+      onStart: (ev) => this.onStart(ev),
+      onMove: (ev) => this.onMove(ev),
+      onEnd: (ev) => this.onEnd(ev),
+    });
+    this.gestureChanged();
+    if (this.disabled) {
+      this.disabledChanged();
+    }
+  }
+  onStart(detail) {
+    this.valueBeforeGesture = this.value;
+    this.activate(detail);
+  }
+  onMove(detail) {
+    this.setNextIndex(detail);
+  }
+  onEnd(detail) {
+    this.setActivated(false);
+    this.setNextIndex(detail, true);
+    detail.event.stopImmediatePropagation();
+    const value = this.value;
+    if (value !== undefined) {
+      if (this.valueBeforeGesture !== value) {
+        this.emitValueChange();
+      }
+    }
+    this.valueBeforeGesture = undefined;
+  }
+  /**
+   * Emits an `ionChange` event.
+   *
+   * This API should be called for user committed changes.
+   * This API should not be used for external value changes.
+   */
+  emitValueChange() {
+    const { value } = this;
+    this.ionChange.emit({ value });
+  }
+  getButtons() {
+    return Array.from(this.el.querySelectorAll('ion-segment-button'));
+  }
+  get checked() {
+    return this.getButtons().find((button) => button.value === this.value);
+  }
+  /*
+   * Activate both the segment and the buttons
+   * due to a bug with ::slotted in Safari
+   */
+  setActivated(activated) {
+    const buttons = this.getButtons();
+    buttons.forEach((button) => {
+      if (activated) {
+        button.classList.add('segment-button-activated');
+      }
+      else {
+        button.classList.remove('segment-button-activated');
+      }
+    });
+    this.activated = activated;
+  }
+  activate(detail) {
+    const clicked = detail.event.target;
+    const buttons = this.getButtons();
+    const checked = buttons.find((button) => button.value === this.value);
+    // Make sure we are only checking for activation on a segment button
+    // since disabled buttons will get the click on the segment
+    if (clicked.tagName !== 'ION-SEGMENT-BUTTON') {
+      return;
+    }
+    // If there are no checked buttons, set the current button to checked
+    if (!checked) {
+      this.value = clicked.value;
+      this.setCheckedClasses();
+    }
+    // If the gesture began on the clicked button with the indicator
+    // then we should activate the indicator
+    if (this.value === clicked.value) {
+      this.setActivated(true);
+    }
+  }
+  getIndicator(button) {
+    const root = button.shadowRoot || button;
+    return root.querySelector('.segment-button-indicator');
+  }
+  checkButton(previous, current) {
+    const previousIndicator = this.getIndicator(previous);
+    const currentIndicator = this.getIndicator(current);
+    if (previousIndicator === null || currentIndicator === null) {
+      return;
+    }
+    const previousClientRect = previousIndicator.getBoundingClientRect();
+    const currentClientRect = currentIndicator.getBoundingClientRect();
+    const widthDelta = previousClientRect.width / currentClientRect.width;
+    const xPosition = previousClientRect.left - currentClientRect.left;
+    // Scale the indicator width to match the previous indicator width
+    // and translate it on top of the previous indicator
+    const transform = `translate3d(${xPosition}px, 0, 0) scaleX(${widthDelta})`;
+    writeTask(() => {
+      // Remove the transition before positioning on top of the previous indicator
+      currentIndicator.classList.remove('segment-button-indicator-animated');
+      currentIndicator.style.setProperty('transform', transform);
+      // Force a repaint to ensure the transform happens
+      currentIndicator.getBoundingClientRect();
+      // Add the transition to move the indicator into place
+      currentIndicator.classList.add('segment-button-indicator-animated');
+      // Remove the transform to slide the indicator back to the button clicked
+      currentIndicator.style.setProperty('transform', '');
+    });
+    this.value = current.value;
+    this.setCheckedClasses();
+  }
+  setCheckedClasses() {
+    const buttons = this.getButtons();
+    const index = buttons.findIndex((button) => button.value === this.value);
+    const next = index + 1;
+    for (const button of buttons) {
+      button.classList.remove('segment-button-after-checked');
+    }
+    if (next < buttons.length) {
+      buttons[next].classList.add('segment-button-after-checked');
+    }
+  }
+  scrollActiveButtonIntoView(smoothScroll = true) {
+    const { scrollable, value, el } = this;
+    if (scrollable) {
+      const buttons = this.getButtons();
+      const activeButton = buttons.find((button) => button.value === value);
+      if (activeButton !== undefined) {
+        const scrollContainerBox = el.getBoundingClientRect();
+        const activeButtonBox = activeButton.getBoundingClientRect();
+        /**
+         * Subtract the active button x position from the scroll
+         * container x position. This will give us the x position
+         * of the active button within the scroll container.
+         */
+        const activeButtonLeft = activeButtonBox.x - scrollContainerBox.x;
+        /**
+         * If we just used activeButtonLeft, then the active button
+         * would be aligned with the left edge of the scroll container.
+         * Instead, we want the segment button to be centered. As a result,
+         * we subtract half of the scroll container width. This will position
+         * the left edge of the active button at the midpoint of the scroll container.
+         * We then add half of the active button width. This will position the active
+         * button such that the midpoint of the active button is at the midpoint of the
+         * scroll container.
+         */
+        const centeredX = activeButtonLeft - scrollContainerBox.width / 2 + activeButtonBox.width / 2;
+        /**
+         * We intentionally use scrollBy here instead of scrollIntoView
+         * to avoid a WebKit bug where accelerated animations break
+         * when using scrollIntoView. Using scrollIntoView will cause the
+         * segment container to jump during the transition and then snap into place.
+         * This is because scrollIntoView can potentially cause parent element
+         * containers to also scroll. scrollBy does not have this same behavior, so
+         * we use this API instead.
+         *
+         * Note that if there is not enough scrolling space to center the element
+         * within the scroll container, the browser will attempt
+         * to center by as much as it can.
+         */
+        el.scrollBy({
+          top: 0,
+          left: centeredX,
+          behavior: smoothScroll ? 'smooth' : 'instant',
+        });
+      }
+    }
+  }
+  setNextIndex(detail, isEnd = false) {
+    const rtl = isRTL(this.el);
+    const activated = this.activated;
+    const buttons = this.getButtons();
+    const index = buttons.findIndex((button) => button.value === this.value);
+    const previous = buttons[index];
+    let current;
+    let nextIndex;
+    if (index === -1) {
+      return;
+    }
+    // Get the element that the touch event started on in case
+    // it was the checked button, then we will move the indicator
+    const rect = previous.getBoundingClientRect();
+    const left = rect.left;
+    const width = rect.width;
+    // Get the element that the gesture is on top of based on the currentX of the
+    // gesture event and the Y coordinate of the starting element, since the gesture
+    // can move up and down off of the segment
+    const currentX = detail.currentX;
+    const previousY = rect.top + rect.height / 2;
+    /**
+     * Segment can be used inside the shadow dom
+     * so doing document.elementFromPoint would never
+     * return a segment button in that instance.
+     * We use getRootNode to which will return the parent
+     * shadow root if used inside a shadow component and
+     * returns document otherwise.
+     */
+    const root = this.el.getRootNode();
+    const nextEl = root.elementFromPoint(currentX, previousY);
+    const decreaseIndex = rtl ? currentX > left + width : currentX < left;
+    const increaseIndex = rtl ? currentX < left : currentX > left + width;
+    // If the indicator is currently activated then we have started the gesture
+    // on top of the checked button so we need to slide the indicator
+    // by checking the button next to it as we move
+    if (activated && !isEnd) {
+      // Decrease index, move left in LTR & right in RTL
+      if (decreaseIndex) {
+        const newIndex = index - 1;
+        if (newIndex >= 0) {
+          nextIndex = newIndex;
+        }
+        // Increase index, moves right in LTR & left in RTL
+      }
+      else if (increaseIndex) {
+        if (activated && !isEnd) {
+          const newIndex = index + 1;
+          if (newIndex < buttons.length) {
+            nextIndex = newIndex;
+          }
+        }
+      }
+      if (nextIndex !== undefined && !buttons[nextIndex].disabled) {
+        current = buttons[nextIndex];
+      }
+    }
+    // If the indicator is not activated then we will just set the indicator
+    // to the element where the gesture ended
+    if (!activated && isEnd) {
+      current = nextEl;
+    }
+    if (current != null) {
+      /**
+       * If current element is ion-segment then that means
+       * user tried to select a disabled ion-segment-button,
+       * and we should not update the ripple.
+       */
+      if (current.tagName === 'ION-SEGMENT') {
+        return false;
+      }
+      if (previous !== current) {
+        this.checkButton(previous, current);
+      }
+    }
+    return true;
+  }
+  emitStyle() {
+    this.ionStyle.emit({
+      segment: true,
+    });
+  }
+  onKeyDown(ev) {
+    const rtl = isRTL(this.el);
+    let keyDownSelectsButton = this.selectOnFocus;
+    let current;
+    switch (ev.key) {
+      case 'ArrowRight':
+        ev.preventDefault();
+        current = rtl ? this.getSegmentButton('previous') : this.getSegmentButton('next');
+        break;
+      case 'ArrowLeft':
+        ev.preventDefault();
+        current = rtl ? this.getSegmentButton('next') : this.getSegmentButton('previous');
+        break;
+      case 'Home':
+        ev.preventDefault();
+        current = this.getSegmentButton('first');
+        break;
+      case 'End':
+        ev.preventDefault();
+        current = this.getSegmentButton('last');
+        break;
+      case ' ':
+      case 'Enter':
+        ev.preventDefault();
+        current = document.activeElement;
+        keyDownSelectsButton = true;
+    }
+    if (!current) {
+      return;
+    }
+    if (keyDownSelectsButton) {
+      const previous = this.checked;
+      this.checkButton(previous || current, current);
+      if (current !== previous) {
+        this.emitValueChange();
+      }
+    }
+    current.setFocus();
+  }
+  render() {
+    const mode = getIonMode(this);
+    return (h(Host, { key: '01c94f9fcc51fb5a7612588c87155a130b7c8a9d', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
+        [mode]: true,
+        'in-toolbar': hostContext('ion-toolbar', this.el),
+        'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
+        'segment-activated': this.activated,
+        'segment-disabled': this.disabled,
+        'segment-scrollable': this.scrollable,
+      }) }, h("slot", { key: 'b0afdfcb7506a765df42d1d6eb4e1d81bf8fd92a' })));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "color": ["colorChanged"],
+    "swipeGesture": ["swipeGestureChanged"],
+    "value": ["valueChanged"],
+    "disabled": ["disabledChanged"]
+  }; }
+  static get style() { return {
+    ios: segmentIosCss,
+    md: segmentMdCss
+  }; }
+}, [33, "ion-segment", {
+    "color": [513],
+    "disabled": [4],
+    "scrollable": [4],
+    "swipeGesture": [4, "swipe-gesture"],
+    "value": [1032],
+    "selectOnFocus": [4, "select-on-focus"],
+    "activated": [32]
+  }, [[0, "keydown", "onKeyDown"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ion-segment"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ion-segment":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Segment);
+      }
+      break;
+  } });
+}
+
+const IonSegment = Segment;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonSegment, defineCustomElement };

package/dist/components/ion-select-option.js

@@ -1 +1,42 @@
-import{p as t,H as e,h as s,d as o,t as n}from"./p-BnQDByf2.js";import{g as i}from"./p-CN34uOrj.js";const r=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.inputId="ion-selopt-"+l++,this.disabled=!1,this.value=void 0}render(){return s(o,{key:"abf6e85d60e815f59077910abec922826bf46eb2",role:"option",id:this.inputId,class:i(this)})}get el(){return this}static get style(){return":host{display:none}"}},[1,"ion-select-option",{disabled:[4],value:[8]}]);let l=0;const c=r,p=function(){"undefined"!=typeof customElements&&["ion-select-option"].forEach((t=>{"ion-select-option"===t&&(customElements.get(n(t))||customElements.define(n(t),r))}))};export{c as IonSelectOption,p as defineCustomElement}
+import { p as proxyCustomElement, H, h, d as Host } from './p-ec0e3f3f.js';
+import { g as getIonMode } from './p-901c16c5.js';
+
+const selectOptionCss = ":host{display:none}";
+
+const SelectOption = /*@__PURE__*/ proxyCustomElement(class SelectOption extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.inputId = `ion-selopt-${selectOptionIds++}`;
+    this.disabled = false;
+    this.value = undefined;
+  }
+  render() {
+    return h(Host, { key: 'abf6e85d60e815f59077910abec922826bf46eb2', role: "option", id: this.inputId, class: getIonMode(this) });
+  }
+  get el() { return this; }
+  static get style() { return selectOptionCss; }
+}, [1, "ion-select-option", {
+    "disabled": [4],
+    "value": [8]
+  }]);
+let selectOptionIds = 0;
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ion-select-option"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ion-select-option":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SelectOption);
+      }
+      break;
+  } });
+}
+
+const IonSelectOption = SelectOption;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonSelectOption, defineCustomElement };

package/dist/components/ion-select-popover.js

@@ -1 +1,6 @@
-import{S as o,d as s}from"./p-DOPF2QRF.js";const p=o,r=s;export{p as IonSelectPopover,r as defineCustomElement}
+import { S as SelectPopover, d as defineCustomElement$1 } from './p-abc01c5d.js';
+
+const IonSelectPopover = SelectPopover;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonSelectPopover, defineCustomElement };