@mcp-b/web-components 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 MCP-B contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,49 @@
+# Sigvelo
+
+Sigvelo is an open source user interface library for the modern Web. It features dozens of accessible, performant, and interoperable components along with an optional CSS reset to streamline development of websites and apps.
+
+You might be curious to learn that Sigvelo's components aren't built with React, Vue, or any other framework. They're custom HTML elements, or [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components), which means you can use them in plain ol' HTML pages as well as your favorite frameworks.
+
+**There are two primary packages for this library:**
+
+- [`@mcp-b/web-components`](https://www.npmjs.com/package/@mcp-b/web-components) - Use with frameworks and bundlers
+- [`@mcp-b/web-components-browser`](https://www.npmjs.com/package/@mcp-b/web-components-browser) - Use directly in the browser and on CDNs
+
+## What's in the box?
+
+- 🧰 A collection of high quality components for building beautiful, accessible, and consistent user interfaces
+- 🚀 An [optional] opinionated CSS reset to kick off new projects with beautiful base styles
+- 🎨 Extreme customizability using plain ol' CSS
+- 🐭 A built-in autoloader that detects components in your HTML — even ones you add dynamically — and loads them on the fly!
+
+## Where can I…?
+
+- [Get started using Sigvelo](https://design-system.sigvelo.com/)
+- [Get help and support](https://design-system.sigvelo.com/support)
+- [Request a feature](https://github.com/omarkawach/sigvelo/discussions/categories/feature-requests)
+- [Report a bug](https://github.com/omarkawach/sigvelo/issues/new/choose)
+- [Ask for help](https://design-system.sigvelo.com/support)
+- [Star the project on GitHub](https://github.com/omarkawach/sigvelo/stargazers)
+
+## Developer instructions
+
+To launch the development server, use the following commands.
+
+```sh
+npm i
+npm run start
+```
+
+This will launch a browser showing the docs. The browser will reload as you make changes to the project. When you're ready to create a production build, use the following command.
+
+```sh
+npm run build
+```
+
+The `dist` folder will contain the files you want.
+
+There are a number of commands you can use to lint and test the library. For a full list of them, run the following command.
+
+```sh
+npm run
+```

package/dist/accordion-B1Q3kuP_.d.ts

@@ -0,0 +1,373 @@
+import { t as SigveloAccordionItem } from "./accordion-item-bPRIahNn.js";
+import { CSSResultGroup, PropertyValues } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/accordion/accordion.d.ts
+/**
+ * <sigvelo-accordion>
+ *
+ * @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 `<sigvelo-accordion-item>` 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
+ * <sigvelo-accordion>
+ *   <sigvelo-accordion-item>
+ *     <span slot="label">What is a cat?</span>
+ *     <p>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.</p>
+ *   </sigvelo-accordion-item>
+ *
+ *   <sigvelo-accordion-item>
+ *     <span slot="label">When should I adopt one?</span>
+ *     <p>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.</p>
+ *   </sigvelo-accordion-item>
+ *
+ *   <sigvelo-accordion-item>
+ *     <span slot="label">Cat care best practices</span>
+ *     <p>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.</p>
+ *   </sigvelo-accordion-item>
+ * </sigvelo-accordion>
+ * ```
+ *
+ * @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
+ * <sigvelo-accordion>
+ *   <sigvelo-accordion-item label="Why do cats purr?">
+ *     <p>Cats purr for many reasons including contentment, self-healing, and communication. It's their built-in happiness meter!</p>
+ *   </sigvelo-accordion-item>
+ *
+ *   <sigvelo-accordion-item label="Why do cats knead with their paws?">
+ *     <p>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.</p>
+ *   </sigvelo-accordion-item>
+ *
+ *   <sigvelo-accordion-item>
+ *     <sigvelo-icon slot="label" name="cat"></sigvelo-icon>
+ *     <span slot="label">Cat behavior mysteries</span>
+ *     <p>From zoomies at 3 AM to bringing you "gifts" of dead mice, cats are wonderfully mysterious creatures with behaviors that keep us guessing.</p>
+ *   </sigvelo-accordion-item>
+ * </sigvelo-accordion>
+ * ```
+ *
+ * @example Expanded initially
+ * Add the `expanded` attribute to any accordion item that should be expanded initially.
+ *
+ * ```html
+ * <sigvelo-accordion>
+ *   <sigvelo-accordion-item expanded>
+ *     <span slot="label">What is a cat?</span>
+ *     <p>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.</p>
+ *   </sigvelo-accordion-item>
+ *
+ *   <sigvelo-accordion-item>
+ *     <span slot="label">When should I adopt one?</span>
+ *     <p>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.</p>
+ *   </sigvelo-accordion-item>
+ *
+ *   <sigvelo-accordion-item>
+ *     <span slot="label">Cat care best practices</span>
+ *     <p>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.</p>
+ *   </sigvelo-accordion-item>
+ * </sigvelo-accordion>
+ * ```
+ *
+ * @example Changing the variant
+ * Set the `variant` attribute to `normal`, `contained`, `separated`, or `unstyled` to control the accordion's variant.
+ *
+ * ```html
+ * <div id="accordion__appearance">
+ *   <sigvelo-radio label="Appearance" value="normal">
+ *     <sigvelo-radio-item value="normal">Normal</sigvelo-radio-item>
+ *     <sigvelo-radio-item value="contained">Contained</sigvelo-radio-item>
+ *     <sigvelo-radio-item value="separated">Separated</sigvelo-radio-item>
+ *     <sigvelo-radio-item value="unstyled">Unstyled</sigvelo-radio-item>
+ *   </sigvelo-radio>
+ *
+ *   <sigvelo-accordion>
+ *     <sigvelo-accordion-item expanded>
+ *       <span slot="label">What is a cat?</span>
+ *       <p>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.</p>
+ *     </sigvelo-accordion-item>
+ *
+ *     <sigvelo-accordion-item>
+ *       <span slot="label">When should I adopt one?</span>
+ *       <p>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.</p>
+ *     </sigvelo-accordion-item>
+ *
+ *     <sigvelo-accordion-item>
+ *       <span slot="label">Cat care best practices</span>
+ *       <p>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.</p>
+ *     </sigvelo-accordion-item>
+ *   </sigvelo-accordion>
+ * </div>
+ *
+ * <script>
+ *   const container = document.getElementById('accordion__appearance');
+ *   const accordion = container.querySelector('sigvelo-accordion');
+ *   const radio = container.querySelector('sigvelo-radio');
+ *
+ *   radio.addEventListener('input', () => {
+ *     accordion.variant = radio.value;
+ *   });
+ * </script>
+ *
+ * <style>
+ *   #accordion__appearance {
+ *     sigvelo-radio {
+ *       margin-block-end: 2rem;
+ *     }
+ *   }
+ * </style>
+ * ```
+ *
+ * @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
+ * <sigvelo-accordion style="font-size: 1.25rem;">
+ *   <sigvelo-accordion-item label="Why do cats purr?">
+ *     <p>Cats purr for many reasons including contentment, self-healing, and communication. It's their built-in happiness meter!</p>
+ *   </sigvelo-accordion-item>
+ *
+ *   <sigvelo-accordion-item label="Cat grooming habits">
+ *     <p>Cats spend 30-50% of their day grooming themselves to stay clean, regulate temperature, and reduce stress.</p>
+ *   </sigvelo-accordion-item>
+ *
+ *   <sigvelo-accordion-item label="Why do cats sleep so much?">
+ *     <p>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).</p>
+ *   </sigvelo-accordion-item>
+ * </sigvelo-accordion>
+ * ```
+ *
+ * @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
+ * <sigvelo-accordion>
+ *   <sigvelo-accordion-item label="Indoor cats">
+ *     <p>Indoor cats live longer, safer lives and are protected from outdoor dangers like traffic, predators, and diseases.</p>
+ *   </sigvelo-accordion-item>
+ *
+ *   <sigvelo-accordion-item label="Outdoor cats" disabled>
+ *     <p>This section about outdoor cats is disabled until you've completed the indoor cat safety course.</p>
+ *   </sigvelo-accordion-item>
+ *
+ *   <sigvelo-accordion-item label="Senior cat care">
+ *     <p>Senior cats need extra attention with diet, comfort, and regular health monitoring as they age gracefully.</p>
+ *   </sigvelo-accordion-item>
+ * </sigvelo-accordion>
+ * ```
+ *
+ * @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
+ * <sigvelo-accordion multiple>
+ *   <sigvelo-accordion-item label="Kitten care" expanded>
+ *     <p>When multiple is enabled, opening another section leaves this one expanded. Kittens need frequent feeding, socialization, and lots of love!</p>
+ *   </sigvelo-accordion-item>
+ *
+ *   <sigvelo-accordion-item label="Adult cat care">
+ *     <p>Click me to keep both life stages expanded. Adult cats are more independent but still need daily attention and care.</p>
+ *   </sigvelo-accordion-item>
+ *
+ *   <sigvelo-accordion-item label="Senior cat care">
+ *     <p>Several cat life stages can remain visible when multiple is enabled. Senior cats deserve extra comfort and patience.</p>
+ *   </sigvelo-accordion-item>
+ * </sigvelo-accordion>
+ * ```
+ *
+ * @example Changing the icon placement
+ * Set the `icon-placement` to `start` to render the icon on the front of the header.
+ *
+ * ```html
+ * <sigvelo-accordion icon-placement="start">
+ *   <sigvelo-accordion-item label="Why do cats sleep so much?">
+ *     <p>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).</p>
+ *   </sigvelo-accordion-item>
+ *
+ *   <sigvelo-accordion-item label="Do cats dream?">
+ *     <p>Yes! Cats experience REM sleep and likely dream about hunting, playing, or plotting world domination.</p>
+ *   </sigvelo-accordion-item>
+ * </sigvelo-accordion>
+ * ```
+ *
+ * @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
+ * <sigvelo-accordion id="accordion__custom-icon">
+ *   <sigvelo-accordion-item label="Cat communication">
+ *     <sigvelo-icon slot="icon" name="chevron-right"></sigvelo-icon>
+ *     <p>Cats communicate through meowing, purring, chirping, and the infamous slow blink of love.</p>
+ *   </sigvelo-accordion-item>
+ *
+ *   <sigvelo-accordion-item label="Cat body language">
+ *     <sigvelo-icon slot="icon" name="chevron-right"></sigvelo-icon>
+ *     <p>A cat's tail, ears, and posture tell you everything about their mood - from happy to "I'm plotting your demise."</p>
+ *   </sigvelo-accordion-item>
+ * </sigvelo-accordion>
+ *
+ * <style>
+ *   #accordion__custom-icon {
+ *     sigvelo-accordion-item::part(icon) {
+ *       rotate: 0deg;
+ *     }
+ *
+ *     sigvelo-accordion-item:state(expanded)::part(icon) {
+ *       rotate: 90deg;
+ *     }
+ *   }
+ * </style>
+ * ```
+ *
+ * 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
+ * <sigvelo-accordion id="accordion__plus-minus">
+ *   <sigvelo-accordion-item label="Cat breeds">
+ *     <sigvelo-icon slot="icon" name="plus" class="plus"></sigvelo-icon>
+ *     <sigvelo-icon slot="icon" name="minus" class="minus"></sigvelo-icon>
+ *     <p>From fluffy Maine Coons to hairless Sphynx cats, there are over 40 recognized cat breeds, each with their own personality traits.</p>
+ *   </sigvelo-accordion-item>
+ *
+ *   <sigvelo-accordion-item label="Cat colors and patterns">
+ *     <sigvelo-icon slot="icon" name="plus" class="plus"></sigvelo-icon>
+ *     <sigvelo-icon slot="icon" name="minus" class="minus"></sigvelo-icon>
+ *     <p>Cats come in amazing colors and patterns like tabby, calico, tuxedo, and tortoiseshell - nature's own art gallery!</p>
+ *   </sigvelo-accordion-item>
+ * </sigvelo-accordion>
+ *
+ * <style>
+ *   #accordion__plus-minus .minus {
+ *     display: none;
+ *   }
+ *
+ *   <!-- When expanded: hide plus and show minus -->
+ *   #accordion__plus-minus sigvelo-accordion-item:state(expanded) .plus {
+ *     display: none;
+ *   }
+ *
+ *   #accordion__plus-minus sigvelo-accordion-item:state(expanded) .minus {
+ *     display: block;
+ *   }
+ * </style>
+ * ```
+ *
+ * @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
+ * <sigvelo-accordion variant="contained" id="accordion__styling">
+ *   <sigvelo-accordion-item>
+ *     <div slot="label">
+ *       <sigvelo-avatar image="https://images.unsplash.com/photo-1672487209629-4d52e0c043d0?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></sigvelo-avatar>
+ *       <div>
+ *         Meowy McGee
+ *         <p aria-hidden="true"><small>Freedom's just another word for nothing left to lose</small></p>
+ *       </div>
+ *     </div>
+ *     <p>
+ *       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.
+ *     </p>
+ *   </sigvelo-accordion-item>
+ *
+ *   <sigvelo-accordion-item>
+ *     <div slot="label">
+ *       <sigvelo-avatar image="https://images.unsplash.com/photo-1516310789627-2ff305829fbb?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></sigvelo-avatar>
+ *       <div>
+ *         Lady Pawington
+ *         <p aria-hidden="true"><small>Professional sunbeam chaser and nap enthusiast</small></p>
+ *       </div>
+ *     </div>
+ *     <p>
+ *       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.
+ *     </p>
+ *   </sigvelo-accordion-item>
+ *
+ *   <sigvelo-accordion-item>
+ *     <div slot="label">
+ *       <sigvelo-avatar image="https://images.unsplash.com/photo-1569591159212-b02ea8a9f239?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></sigvelo-avatar>
+ *       <div>
+ *         Sir Whiskertons III
+ *         <p aria-hidden="true"><small>Living all nine lives to the fullest, one treat at a time</small></p>
+ *       </div>
+ *     </div>
+ *     <p>
+ *       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.
+ *     </p>
+ *   </sigvelo-accordion-item>
+ * </sigvelo-accordion>
+ *
+ * <style>
+ *   #accordion__styling {
+ *     div[slot="label"] {
+ *       display: flex;
+ *       align-items: center;
+ *       gap: 1rem;
+ *
+ *       p {
+ *         line-height: 1.2;
+ *       }
+ *     }
+ *
+ *   }
+ * </style>
+ * ```
+ */
+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<this>): void;
+  /** Get accordion items from the default slot */
+  private getItems;
+  private handleClick;
+  /** @internal Handles accordion item toggle requests */
+  handleItemToggle(item: SigveloAccordionItem): Promise<boolean>;
+  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 };