Repository: ionic-team/ionic-framework
File: core/src/components/toolbar/toolbar.tsx (TypeScript)

Code before:
        classesToAdd.push(slotClass);
      } else {
        classesToRemove.push(slotClass);
      }
    });

    // Force visibilities in certain conditions. This works by adding a class to the toolbar
    // named `show-{slot}`. This class will be added if the toolbar has the required slots
    // and does not have any of the excluded slots, otherwise it will be removed.
    // This is useful to enforce centering of the toolbar content when there are different amounts
    // of slots on either side of the toolbar.
    const conditions = [
      { name: 'end', requiredSlots: ['start'], excludeSlots: ['end', 'primary'] },
      { name: 'start', requiredSlots: ['end'], excludeSlots: ['start', 'secondary'] },
      { name: 'secondary', requiredSlots: ['primary'], excludeSlots: ['secondary', 'start'] },
      { name: 'primary', requiredSlots: ['secondary'], excludeSlots: ['primary', 'end'] },
    ];
    conditions.forEach((condition) => {
      const hasRequiredSlots = condition.requiredSlots.every((slot) => classesToAdd.includes(`has-${slot}-content`));
      const hasExcludedSlots = condition.excludeSlots.some((slot) => classesToAdd.includes(`has-${slot}-content`));
      const className = `show-${condition.name}`;

      if (hasRequiredSlots && !hasExcludedSlots) {
        classesToAdd.push(className);
      } else {
        this.el.classList.remove(className);
      }
    });

    // Add classes to the toolbar element
    this.el.classList.add(...classesToAdd);
    this.el.classList.remove(...classesToRemove);
  }

  private hasSlotContent(slotName: string): boolean {
    const slotNode = this.el.shadowRoot?.querySelector(`slot[name="${slotName}"]`) as HTMLSlotElement | null;
    return !!slotNode && slotNode.assignedNodes().length > 0;
  }

  @Listen('ionStyle')
  childrenStyle(ev: CustomEvent<StyleEventDetail>) {
    ev.stopPropagation();

    const tagName = (ev.target as HTMLElement).tagName;
    const updatedStyles = ev.detail;
    const newStyles = {} as CssClassMap;
    const childStyles = this.childrenStyles.get(tagName) || {};

    let hasStyleChange = false;
    Object.keys(updatedStyles).forEach((key) => {
      const childKey = `toolbar-${key}`;

Review comment (suggestion):
```suggestion
        classesToRemove.push(className);
```

Code after:
      const success = this.measureAndUpdateSlots();

      // If not all measurements were successful, try again in 100 ms
      // cap recursion at 5 tries for safety
      if (!success && tries < 5) {
        setTimeout(() => {
          this.updateSlotWidths(tries + 1);
        }, 100);
      }
    });
  }

  /**
   * Measure the widths of the slots and update the CSS custom properties
   * for the minimum width of each pair of slots based on the largest width in each pair.
   * Returns whether we successfully measured all of the slots we expect to have content.
   * If not, the content probably hasn't rendered yet and we need to try again.
   */
  private measureAndUpdateSlots(): boolean {
    // Define the relationship between slots based on the conditions array
    // Group slots that should have the same width
    const slotPairs = [
      { name: 'start-end', slots: ['start', 'end'] },
      { name: 'primary-secondary', slots: ['primary', 'secondary'] },
    ];

    // First, measure all slot widths
    const slotWidths = new Map<string, number>();
    let allMeasurementsSuccessful = true;

    // Measure all slots with content
    const slots = ['start', 'end', 'primary', 'secondary'];
    slots.forEach((slot) => {
      if (this.el.classList.contains(`has-${slot}-content`)) {
        const slotElement = this.el.shadowRoot?.querySelector(`slot[name="${slot}"]`) as HTMLElement | null;
        if (slotElement) {
          const width = slotElement.offsetWidth;
          if (width > 0) {
            slotWidths.set(slot, width);
          } else {
            allMeasurementsSuccessful = false;
          }
        }
      }
    });

    // Then set the CSS custom properties based on the largest width in each pair
    slotPairs.forEach(({ name, slots }) => {
      // Find the maximum width among the slots in this pair
      let maxWidth = 0;
      let hasAnyContent = false;