import { html } from 'lit';
import SgdsElement from '../../base/sgds-element.js';
import css_248z from './footer-item.js';

/**
 * @summary The footer item component organizes links under a clear, descriptive title within the footer. It helps users easily navigate to related resources or information, ensuring clarity and accessibility.
 *
 * @slot default - The slot for the list of link items
 * @slot title - The slot for the title of the list of items
 *
 */
class SgdsFooterItem extends SgdsElement {
    _handleSlotChange(e) {
        const assignedElements = e.target.assignedElements();
        assignedElements.forEach(el => {
            if (el.tagName === "SGDS-LINK") {
                const sgdsLink = el;
                sgdsLink.tone = "fixed-light";
                sgdsLink.size = "sm";
            }
        });
    }
    render() {
        return html `
      <div class="footer-item">
        <slot name="title"></slot>
        <div class="links">
          <slot @slotchange=${this._handleSlotChange}></slot>
        </div>
      </div>
    `;
    }
}
SgdsFooterItem.styles = [...SgdsElement.styles, css_248z];

export { SgdsFooterItem, SgdsFooterItem as default };
//# sourceMappingURL=sgds-footer-item.js.map
