import { t as SigveloAccordionItem } from "./accordion-item-BlrfKEBl.js"; import { CSSResultGroup, PropertyValues } from "lit"; import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element"; //#region src/components/accordion/accordion.d.ts /** * * * @summary A container for content that expands and collapses when selected. * @tag sigvelo-accordion * @documentation https://design-system.sigvelo.com/docs/components/accordion * @status stable * @since 1.0 * * @dependency sigvelo-accordion-item * * @slot - One or more `` elements to place in the accordion. * * @event sigvelo-before-expand - Emitted when an accordion item is instructed to expand but before it is shown. Calling * `event.preventDefault()` will prevent the item from expanding. `event.detail.item` will contain the expanding item. * @event sigvelo-expand - Emitted after an accordion item has been expanded. `event.detail.item` will contain the * expanded item. * @event sigvelo-before-collapse - Emitted when an accordion item is instructed to collapse but before it is hidden. * Calling `event.preventDefault()` will prevent the item from collapsing. `event.detail.item` will contain the * collapsing item. * @event sigvelo-collapse - Emitted after an accordion item has been collapsed. `event.detail.item` will contain the * collapsed item. * * @cssproperty [--duration=200ms] - The expand and collapse duration. * @cssproperty [--easing=ease] - The expand and collapse easing. * @cssproperty [--sigvelo-accordion-border-color=var(--sigvelo-color-neutral-border-subtle)] - The accordion's border color. * @cssproperty [--border-width=var(--sigvelo-border-width)] - The accordion's border width. * @cssproperty [--border-style=var(--sigvelo-border-style)] - The accordion's border style. * @cssproperty [--border-radius=var(--sigvelo-radius-md)] - The border radius to apply to rounded edges. * * @example Default * Accordions follow the ARIA APG accordion pattern for accessibility. They are comprised of two different components. A single accordion surrounds one or more accordion items. * * ```html * * * What is a cat? *

A cat is a small, independent feline companion known for their purring, hunting skills, and tendency to knock things off tables. They're perfect for providing endless entertainment, companionship, and the occasional hairball surprise.

* * * * When should I adopt one? *

Adopt a cat when you're ready for a lifetime commitment of love, responsibility, and being owned by a furry overlord. They're ideal when you need a companion who will judge your life choices while simultaneously demanding treats.

* * * * Cat care best practices *

Essential cat care includes keeping litter boxes clean and accessible, providing scratching posts to save your furniture, scheduling regular vet checkups, and ensuring they have cozy hiding spots and sunny windowsills for optimal feline happiness.

* * * ``` * * @example Providing content * Use the `label` attribute to provide a plain text label. To provide icons and other HTML, use the `label` slot instead. * * ```html * * *

Cats purr for many reasons including contentment, self-healing, and communication. It's their built-in happiness meter!

* * * *

Kneading is a comfort behavior from kittenhood when they kneaded their mother's belly for milk. Adult cats knead when they're happy and relaxed.

* * * * * Cat behavior mysteries *

From zoomies at 3 AM to bringing you "gifts" of dead mice, cats are wonderfully mysterious creatures with behaviors that keep us guessing.

* * * ``` * * @example Expanded initially * Add the `expanded` attribute to any accordion item that should be expanded initially. * * ```html * * * What is a cat? *

* * * * When should I adopt one? *

* * * * Cat care best practices *

* * * ``` * * @example Changing the variant * Set the `variant` attribute to `normal`, `contained`, `separated`, or `unstyled` to control the accordion's variant. * * ```html *

* * Normal * Contained * Separated * Unstyled * * * * * What is a cat? *

* * * * When should I adopt one? *

* * * * Cat care best practices *

* * *

* * * * * ``` * * @example Changing the size * Accordions are sized based on the current font size. To change their size, set the `font-size` on the accordion or an ancestor element. * * ```html * * *

Cats purr for many reasons including contentment, self-healing, and communication. It's their built-in happiness meter!

* * * *

Cats spend 30-50% of their day grooming themselves to stay clean, regulate temperature, and reduce stress.

* * * *

Cats sleep 12-16 hours a day because they're natural predators who conserve energy for hunting (even if they're just hunting dust bunnies).

* * * ``` * * @example Disabling items * Use the `disabled` attribute to prevent users from expanding certain accordion items. This is useful for sections that require certain conditions to be met before they can be accessed. * * ```html * * *

Indoor cats live longer, safer lives and are protected from outdoor dangers like traffic, predators, and diseases.

* * * *

This section about outdoor cats is disabled until you've completed the indoor cat safety course.

* * * *

Senior cats need extra attention with diet, comfort, and regular health monitoring as they age gracefully.

* * * ``` * * @example Allowing multiple expanded items * By default, opening an accordion item collapses the previously expanded item. Add `multiple` to allow more than one item to remain expanded. * * ```html * * *

When multiple is enabled, opening another section leaves this one expanded. Kittens need frequent feeding, socialization, and lots of love!

* * * *

Click me to keep both life stages expanded. Adult cats are more independent but still need daily attention and care.

* * * *

Several cat life stages can remain visible when multiple is enabled. Senior cats deserve extra comfort and patience.

* * * ``` * * @example Changing the icon placement * Set the `icon-placement` to `start` to render the icon on the front of the header. * * ```html * * *

Cats sleep 12-16 hours a day because they're natural predators who conserve energy for hunting (even if they're just hunting dust bunnies).

* * * *

Yes! Cats experience REM sleep and likely dream about hunting, playing, or plotting world domination.

* * * ``` * * @example Customizing the icon * The expand/collapse icon can be customized by slotting in your own icon. If you don't want the default rotation, target the `icon` part and set the `rotate` property to a custom rotation angle. * * ```html * * * *

Cats communicate through meowing, purring, chirping, and the infamous slow blink of love.

* * * * *

A cat's tail, ears, and posture tell you everything about their mood - from happy to "I'm plotting your demise."

* * * * * ``` * * A common way to style accordion icons is with plus and minus icons. For this, you can toggle which icon shows when the accordion item is expanded using the `:state(expanded)` CSS selector. * * ```html * * * * *

From fluffy Maine Coons to hairless Sphynx cats, there are over 40 recognized cat breeds, each with their own personality traits.

* * * * * *

Cats come in amazing colors and patterns like tabby, calico, tuxedo, and tortoiseshell - nature's own art gallery!

* * * * * ``` * * @example Customizing label content * Accordions can have structured content as labels, but consider the experience for screen reader users. You may want to add `aria-hidden="true'` to decorative elements and supplementary text that don't add meaningful context when the accordion is navigated with assistive technology. * * ```html * * *

* *

* Meowy McGee * *

* A philosophical feline with a rebellious streak, Meowy spends their days contemplating the deeper meaning of cardboard boxes and refusing to acknowledge the concept of "off-limits" furniture. When not busy knocking things off counters with purposeful intent, they can be found staring intensely at walls, presumably seeing things the rest of us mere mortals cannot. *

* * * *

* *

* Lady Pawington * *

* The epitome of feline sophistication, Lady Pawington has mastered the art of finding the perfect sunbeam at precisely 2:47 PM every day. She maintains a rigorous schedule of 16-hour power naps, interrupted only by brief but important meetings with her food bowl and the occasional judgmental stare at the humans who dare to disturb her royal slumber. *

* * * *

* *

* Sir Whiskertons III * *

* A distinguished gentleman cat with an insatiable appetite for adventure (and treats), Sir Whiskertons approaches each day like it's his personal buffet of experiences. Whether he's conducting important business meetings with dust bunnies under the couch or hosting diplomatic summits with the neighborhood squirrels from his window perch, he does it all with the confidence of someone who knows they've got eight lives in reserve. *

* * * * * ``` */ declare class SigveloAccordion extends SigveloElement { static styles: CSSResultGroup; private defaultSlot; /** Allows more than one accordion item to be expanded at the same time. */ multiple: boolean; /** Determines the accordion's variant. */ variant: "normal" | "contained" | "separated" | "unstyled"; /** Determines which side of the accordion item the expand/collapse icon shows. */ iconPlacement: "start" | "end"; connectedCallback(): void; disconnectedCallback(): void; updated(changedProperties: PropertyValues): void; /** Get accordion items from the default slot */ private getItems; private handleClick; /** @internal Handles accordion item toggle requests */ handleItemToggle(item: SigveloAccordionItem): Promise; private handleSlotChange; /** Sync variant and iconPlacement to accordion items */ private syncItemProperties; render(): import("lit-html").TemplateResult<1>; } declare global { interface HTMLElementTagNameMap { "sigvelo-accordion": SigveloAccordion; } } //#endregion export { SigveloAccordion as t };