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

Code before:
      { 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;
    if (slotNode) {
      const assigned = slotNode.assignedNodes();
      return assigned.length > 0;
    }
    return false;
  }

  @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}`;
      const newValue = updatedStyles[key];
      if (newValue !== childStyles[childKey]) {
        hasStyleChange = true;
      }
      if (newValue) {
        newStyles[childKey] = true;
      }
    });

    if (hasStyleChange) {
      this.childrenStyles.set(tagName, newStyles);

Review comment (suggestion):
```suggestion
    return !!slotNode && slotNode.assignedNodes().length > 0;
```

Code after:
   * 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;

      slots.forEach((slot) => {
        if (slotWidths.has(slot)) {
          hasAnyContent = true;
          maxWidth = Math.max(maxWidth, slotWidths.get(slot) ?? 0);
        }
      });

      // If at least one slot in the pair has content, set the min-width for the pair
      if (hasAnyContent && maxWidth > 0) {
        // Set a single CSS variable for the pair
        this.el.style.setProperty(`--${name}-size`, `${maxWidth}px`);
      }
    });