@mcp-b/web-components 0.2.0

package/dist/button-BQofnUt4.d.ts

@@ -0,0 +1,354 @@
+import { CSSResultGroup, PropertyValues } from "lit";
+import { SigveloFormControlElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/button/button.d.ts
+/**
+ * <sigvelo-button>
+ *
+ * @summary Allows users to navigate, submit forms, and perform other actions.
+ * @tag sigvelo-button
+ * @documentation https://design-system.sigvelo.com/docs/components/button
+ * @status stable
+ * @since 1.0
+ *
+ * @dependency sigvelo-icon
+ * @dependency sigvelo-spinner
+ *
+ * @slot - The button's label.
+ * @slot start - An icon or similar element to place before the label. Works great with `<sigvelo-icon>`.
+ * @slot end - An icon or similar element to place after the label. Works great with `<sigvelo-icon>`.
+ *
+ * @event sigvelo-blur - Emitted when the button loses focus. This event does not bubble.
+ * @event sigvelo-long-press - Emitted when the button is pressed and held by tapping or with the mouse. You can look at
+ *  `event.detail.originalEvent.type` to see the type of event that initiated the long press.
+ * @event sigvelo-focus - Emitted when the button receives focus. This event does not bubble.
+ *
+ * @csspart button - The internal `<button>` element. Other than `width`, this is where most custom styles should be
+ *  applied.
+ * @csspart caret - The caret icon, a `<sigvelo-icon>` element. Only present with the `with-caret` attribute.
+ * @csspart caret__svg - The caret icon's `<svg>` part.
+ * @csspart spinner - The loading indicator, a `<sigvelo-spinner>` element. Only present with the `loading` attribute.
+ * @csspart toggle-indicator - When the button is a toggle button, this is the indicator that shows the current state.
+
+ * @cssstate disabled - Applied when the button is disabled.
+ * @cssstate focused - Applied when the button has focus.
+ * @cssstate loading - Applied when a toggle button is loading.
+ * @cssstate toggled - Applied when a toggle button is activated.
+ *
+ * @example Variants
+ * Set the `color` attribute to `neutral`, `primary`, or `destructive` to change the button's color.
+ *
+ * ```html
+ * <sigvelo-button color="neutral">
+ *   Neutral
+ * </sigvelo-button>
+ *
+ * <sigvelo-button color="primary">
+ *   Primary
+ * </sigvelo-button>
+ *
+ * <sigvelo-button color="destructive">
+ *   Destructive
+ * </sigvelo-button>
+ * ```
+ *
+ * **Note:** There is no `success` button by design. Use the `primary` color for success actions.
+ *
+ * @example Start & end icons
+ * Use the `start` and `end` slots to add icons. For best results, use a `<sigvelo-icon>` or an `<svg>` element.
+ *
+ * ```html
+ * <sigvelo-button>
+ *   <sigvelo-icon slot="start" name="settings"></sigvelo-icon>
+ *   Settings
+ * </sigvelo-button>
+ *
+ * <sigvelo-button>
+ *   Favorite
+ *   <sigvelo-icon slot="end" name="heart"></sigvelo-icon>
+ * </sigvelo-button>
+ *
+ * <sigvelo-button>
+ *   <sigvelo-icon slot="start" name="link"></sigvelo-icon>
+ *   Open
+ *   <sigvelo-icon slot="end" name="external-link"></sigvelo-icon>
+ * </sigvelo-button>
+ * ```
+ *
+ * @example Link buttons
+ * Any button can be rendered as a link by setting the `href` attribute. This is useful to allow buttons to act as navigation. When `href` is present, other link options such as `download`, `rel`, and `target` also become available.
+ *
+ * ```html
+ * <sigvelo-button href="https://example.com/" target="_blank" rel="noreferrer noopener">
+ *   I'm secretly a link
+ * </sigvelo-button>
+ *
+ * <sigvelo-button href="/assets/images/logo-light.svg" download>
+ *   Download the logo
+ * </sigvelo-button>
+ * ```
+ *
+ * **Note:** Because link buttons become anchors, they cannot be used with `disabled` or `loading`.
+ *
+ * @example Changing the width
+ * To change a button's width, use the CSS `width` property.
+ *
+ * ```html
+ * <sigvelo-button style="width: 100%">
+ *   I'm much longer now
+ * </sigvelo-button>
+ * ```
+ *
+ * @example Changing the size
+ * Use the `size` attribute to change the button's size. Available sizes include `xs`, `sm`, `md`, `lg`, and `xl`, with the default being `sm`.
+ *
+ * ```html
+ * <sigvelo-button size="xs">Extra small</sigvelo-button>
+ * <sigvelo-button size="sm">Small</sigvelo-button>
+ * <sigvelo-button size="md">Medium</sigvelo-button>
+ * <sigvelo-button size="lg">Large</sigvelo-button>
+ * <sigvelo-button size="xl">Extra large</sigvelo-button>
+ * ```
+ *
+ * @example Outline buttons
+ * Set the `variant` attribute to `outline` to draw outlined buttons.
+ *
+ * ```html
+ * <sigvelo-button variant="outline" color="neutral">
+ *   Neutral
+ * </sigvelo-button>
+ *
+ * <sigvelo-button variant="outline" color="primary">
+ *   Primary
+ * </sigvelo-button>
+ *
+ * <sigvelo-button variant="outline" color="destructive">
+ *   Destructive
+ * </sigvelo-button>
+ * ```
+ *
+ * Set `variant="surface"` for a raised neutral action surface.
+ *
+ * ```html
+ * <sigvelo-button variant="surface">Open details</sigvelo-button>
+ * ```
+ *
+ * @example Text buttons
+ * Set the `variant` attribute to `ghost` to draw ghost buttons. Ghost buttons share the same size and padding as normal buttons, but don't have a background.
+ *
+ * ```html
+ * <sigvelo-button variant="ghost">
+ *   I'm text
+ * </sigvelo-button>
+ * ```
+ *
+ * @example Pill-shaped buttons
+ * Buttons can be rendered with pill-shaped edges by adding the `pill` attribute.
+ *
+ * ```html
+ * <sigvelo-button pill color="neutral">
+ *   Neutral
+ * </sigvelo-button>
+ *
+ * <sigvelo-button pill color="primary">
+ *   Primary
+ * </sigvelo-button>
+ *
+ * <sigvelo-button pill color="destructive">
+ *   Destructive
+ * </sigvelo-button>
+ * ```
+ *
+ * @example Icon buttons
+ * To create an icon button, place an icon into the button's default slot and set the `icon-label` attribute to an appropriate label. The label won't be visible, but it will be available to assistive devices.
+ *
+ * ```html
+ * <sigvelo-button icon-label="Accept" color="primary">
+ *   <sigvelo-icon name="check"></sigvelo-icon>
+ * </sigvelo-button>
+ *
+ * <sigvelo-button icon-label="Reload">
+ *   <sigvelo-icon name="refresh"></sigvelo-icon>
+ * </sigvelo-button>
+ *
+ * <sigvelo-button icon-label="Delete" color="destructive">
+ *   <sigvelo-icon name="trash"></sigvelo-icon>
+ * </sigvelo-button>
+ *
+ * <sigvelo-button icon-label="Close" variant="ghost">
+ *   <sigvelo-icon name="x"></sigvelo-icon>
+ * </sigvelo-button>
+ * ```
+ *
+ * @example Toggle buttons
+ * Create a toggle button by adding the `toggle="off"` attribute. To make it active by default, use `toggle="on"` instead. An indicator is shown to make it obvious when the toggle is selected.
+ *
+ * ```html
+ * <sigvelo-button color="neutral" toggle="off" icon-label="Filter">
+ *   <sigvelo-icon name="filter"></sigvelo-icon>
+ * </sigvelo-button>
+ *
+ * <sigvelo-button color="primary" toggle="off" icon-label="Alarm">
+ *   <sigvelo-icon name="bell"></sigvelo-icon>
+ * </sigvelo-button>
+ *
+ * <sigvelo-button color="destructive" toggle="off" icon-label="Record">
+ *   <sigvelo-icon name="microphone"></sigvelo-icon>
+ * </sigvelo-button>
+ *
+ * <sigvelo-button variant="ghost" toggle="off" icon-label="Mute">
+ *   <sigvelo-icon name="volume-3"></sigvelo-icon>
+ * </sigvelo-button>
+ * ```
+ *
+ * **Warning:** Toggle buttons cannot be used with link buttons or submit buttons.
+ *
+ * @example Loading buttons
+ * To show the button in a loading state, add the `loading` attribute. When a button is loading, it is effectively disabled and `click` events will not be emitted.
+ *
+ * ```html
+ * <sigvelo-button loading>
+ *   I'm loading
+ * </sigvelo-button>
+ * ```
+ *
+ * @example Disabling
+ * To disable a button, add the `disabled` attribute. When a button is disabled, the `click` event will not be emitted.
+ *
+ * ```html
+ * <sigvelo-button disabled>Regular button</sigvelo-button>
+ * <sigvelo-button href="https://example.com/" disabled>Link button</sigvelo-button>
+ * ```
+ *
+ * @example Adding a dropdown caret
+ * A caret can be shown to indicate the button opens a dropdown menu by adding the `with-caret` attribute.
+ *
+ * ```html
+ * <sigvelo-button with-caret>Dropdown</sigvelo-button>
+ * ```
+ *
+ * @example Listening for long press
+ * You can detect long presses by listening to the `sigvelo-long-press` event. The event is dispatched when the button is clicked or tapped and held for 700 milliseconds.
+ *
+ * You can determine if the initiating event was a click (`pointer`) or tap (`touch`) by looking at `event.detail.type`. You can also look at `event.detail.originalEvent` to get the coordinates and other details.
+ *
+ * ```html
+ * <sigvelo-button id="button__long-press">Press and hold</sigvelo-button>
+ *
+ * <script>
+ *   const button = document.getElementById('button__long-press');
+ *
+ *   button.addEventListener('sigvelo-long-press', async event => {
+ *     // Log the coordinates and the type of event that initiated the
+ *     // long press, i.e. pointer (mouse) or touch (tap)
+ *     const type = event.detail.type;
+ *     const { clientX, clientY } = event.detail.originalEvent;
+ *
+ *     console.log(`${type} at ${parseInt(clientX)}×${parseInt(clientY)}`);
+ *
+ *     // Animate the button
+ *     button.animate([
+ *       { scale: 1, offset: 0 },
+ *       { scale: 1.2, offset: 0.1 },
+ *       { scale: 1, offset: 1 }
+ *     ], {
+ *       duration: 500,
+ *       easing: 'linear'
+ *     });
+ *   });
+ * </script>
+ * ```
+ */
+declare class SigveloButton extends SigveloFormControlElement {
+  static formAssociated: boolean;
+  static shadowRootOptions: {
+    delegatesFocus: boolean;
+    clonable?: boolean;
+    customElementRegistry?: CustomElementRegistry | null;
+    mode: ShadowRootMode;
+    serializable?: boolean;
+    slotAssignment?: SlotAssignmentMode;
+  };
+  static styles: CSSResultGroup;
+  protected internals: ElementInternals;
+  private longPress;
+  protected get focusableAnchor(): HTMLButtonElement;
+  /** Determines the button's variant. */
+  variant: "normal" | "surface" | "outline" | "ghost" | "link";
+  /** The semantic color intent of the button. */
+  color: "neutral" | "primary" | "destructive";
+  /** Disables the button. */
+  disabled: boolean;
+  /** Draws the button in a loading state. */
+  loading: boolean;
+  /**
+   * Turns the button into a two-state toggle button. Clicking once will turn it on. Clicking again will turn it off.
+   * Cannot be used with links buttons or submit buttons.
+   */
+  toggle?: "on" | "off";
+  /** The button's size. */
+  size: "xs" | "sm" | "md" | "lg" | "xl";
+  /**
+   * To create an icon button, slot an icon into the button's default slot and set this attribute to an appropriate
+   * label. The label won't be visible, but it will be available to assistive devices.
+   */
+  iconLabel: string;
+  /** Draws the button in a pill shape. */
+  pill: boolean;
+  /** Determines the button's type. */
+  type: "button" | "submit" | "reset";
+  /** The name to submit when the button is used to submit the form. */
+  name: string;
+  /** The value to submit when the button is used to submit the form. */
+  value: string;
+  /** When true, the button will be rendered with a caret to indicate a dropdown menu. */
+  withCaret: boolean;
+  /**
+   * Set this to render the button as an `<a>` tag instead of a `<button>`. The button will act as a link. When this is
+   * set, form attributes and features will not work.
+   */
+  href: string;
+  /** Opens the link in the specified target. Only works with link buttons. */
+  target: "_blank" | "_parent" | "_self" | "_top" | undefined;
+  /**
+   * Sets the link's `rel` attribute. Only works with link buttons. When linking to an external domain, you should
+   * probably set this to `noreferrer noopener`.
+   */
+  rel?: string;
+  /** Sets the link's `download` attribute, causing the linked file to be downloaded. Only works with link buttons. */
+  download?: string;
+  /**
+   * The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
+   * this attribute must be an ID of a form in the same document or shadow root.
+   */
+  form: string;
+  /** Overrides the containing form's `action` attribute. */
+  formAction: string | undefined;
+  /** Overrides the containing form's `enctype` attribute. */
+  formEnctype: "application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain" | undefined;
+  /** Overrides the containing form's `method` attribute. */
+  formMethod: "post" | "get" | undefined;
+  /** Overrides the containing form's `novalidate` attribute. */
+  formNoValidate: boolean | undefined;
+  /**
+   * Overrides the containing form's `target` attribute.
+   *
+   * `string & {}` keeps the four browsing-context keywords in autocomplete
+   * while still accepting an arbitrary frame name; a bare `| string` would
+   * absorb the literals and offer no suggestions at all.
+   */
+  formTarget: "_self" | "_blank" | "_parent" | "_top" | (string & {}) | undefined;
+  firstUpdated(): void;
+  updated(changedProperties: PropertyValues<this>): void;
+  private handleBlur;
+  private handleFocus;
+  private handleClick;
+  render(): import("lit-html").TemplateResult;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-button": SigveloButton;
+  }
+}
+//#endregion
+export { SigveloButton as t };

package/dist/button-group-BydvJTQy.js

@@ -0,0 +1,197 @@
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { css, html } from "lit";
+import { property } from "lit/decorators.js";
+import hostStyles from "@mcp-b/wc-support/styles/host.styles";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+//#region src/components/button-group/button-group.styles.ts
+var button_group_styles_default = css`
+  :host {
+    display: flex;
+    position: relative;
+    flex-wrap: wrap;
+    gap: min(var(--sigvelo-border-width), 0.125rem);
+    isolation: isolate;
+  }
+
+  :host([orientation="vertical"]) {
+    flex-direction: column;
+  }
+
+  /* Show the focus indicator above other buttons */
+  ::slotted(:focus) {
+    z-index: 1 !important;
+  }
+`;
+//#endregion
+//#region src/components/button-group/button-group.ts
+/**
+* <sigvelo-button-group>
+*
+* @summary Displays related buttons in a stylized group.
+* @tag sigvelo-button-group
+* @documentation https://design-system.sigvelo.com/docs/components/button-group
+* @status stable
+* @since 1.0
+*
+* @slot - One or more `<sigvelo-button>` elements to place in the button group.
+*
+* @example Default
+* ```html
+* <sigvelo-button-group>
+*   <sigvelo-button>
+*     <sigvelo-icon slot="start" name="plus"></sigvelo-icon>
+*     New
+*   </sigvelo-button>
+*   <sigvelo-button>
+*     <sigvelo-icon slot="start" name="folder-open"></sigvelo-icon>
+*     Open
+*   </sigvelo-button>
+*   <sigvelo-button>
+*     <sigvelo-icon slot="start" name="device-floppy"></sigvelo-icon>
+*     Save
+*   </sigvelo-button>
+*   <sigvelo-button>
+*     <sigvelo-icon slot="start" name="printer"></sigvelo-icon>
+*     Print
+*   </sigvelo-button>
+* </sigvelo-button-group>
+* ```
+*
+* **Note:** Button groups work really well in conjunction with the [toolbar component](/docs/components/toolbar).
+*
+* @example With dropdowns
+* You can nest dropdowns inside button groups to give users additional options.
+*
+* ```html
+* <sigvelo-button-group label="Options">
+*   <sigvelo-button>
+*     <sigvelo-icon slot="start" name="photo"></sigvelo-icon>
+*     Details
+*   </sigvelo-button>
+*   <sigvelo-button>
+*     <sigvelo-icon slot="start" name="message-circle"></sigvelo-icon>
+*     Comments
+*   </sigvelo-button>
+*   <sigvelo-dropdown>
+*     <sigvelo-button slot="trigger" with-caret>
+*       <sigvelo-icon slot="start" name="download"></sigvelo-icon>
+*       Download
+*     </sigvelo-button>
+*     <sigvelo-dropdown-item value="sm">Small <span slot="details">640&times;480</span></sigvelo-dropdown-item>
+*     <sigvelo-dropdown-item value="md">Medium <span slot="details">800&times;600</span></sigvelo-dropdown-item>
+*     <sigvelo-dropdown-item value="lg">Large <span slot="details">1280&times;1024</span></sigvelo-dropdown-item>
+*     <sigvelo-divider></sigvelo-divider>
+*     <sigvelo-dropdown-item value="og">Custom…</sigvelo-dropdown-item>
+*   </sigvelo-dropdown>
+* </sigvelo-button-group>
+* ```
+*
+* @example Adding tooltips
+* You can add tooltips to improve the user experience of your button groups.
+*
+* ```html
+* <sigvelo-button-group label="Options">
+*   <sigvelo-button icon-label="View image details" id="button-group__tooltip-image">
+*     <sigvelo-icon name="photo"></sigvelo-icon>
+*   </sigvelo-button>
+*   <sigvelo-button icon-label="Leave a comment" id="button-group__tooltip-comments">
+*     <sigvelo-icon name="message-circle"></sigvelo-icon>
+*   </sigvelo-button>
+*   <sigvelo-button icon-label="Save this image" id="button-group__tooltip-download">
+*     <sigvelo-icon name="download"></sigvelo-icon>
+*   </sigvelo-button>
+* </sigvelo-button-group>
+*
+* <sigvelo-tooltip for="button-group__tooltip-image">Details</sigvelo-tooltip>
+* <sigvelo-tooltip for="button-group__tooltip-comments">Comments</sigvelo-tooltip>
+* <sigvelo-tooltip for="button-group__tooltip-download">Download</sigvelo-tooltip>
+* ```
+*
+* @example Vertical button groups
+* To make a vertical button group, set the `orientation` attribute to `vertical`.
+*
+* ```html
+* <sigvelo-button-group orientation="vertical" label="Options" style="max-width: 60px;">
+*   <sigvelo-button>
+*     <sigvelo-icon slot="start" name="plus"></sigvelo-icon>
+*     New
+*   </sigvelo-button>
+*   <sigvelo-button>
+*     <sigvelo-icon slot="start" name="folder-open"></sigvelo-icon>
+*     Open
+*   </sigvelo-button>
+*   <sigvelo-button>
+*     <sigvelo-icon slot="start" name="device-floppy"></sigvelo-icon>
+*     Save
+*   </sigvelo-button>
+*   <sigvelo-button>
+*     <sigvelo-icon slot="start" name="printer"></sigvelo-icon>
+*     Print
+*   </sigvelo-button>
+* </sigvelo-button-group>
+* ```
+*
+* @example Making a split button
+* Create a split button by placing a button and a dropdown inside a button group.
+*
+* ```html
+* <sigvelo-button-group label="Options">
+*   <sigvelo-button>
+*     <sigvelo-icon name="share-2" slot="start"></sigvelo-icon>
+*     Share
+*   </sigvelo-button>
+*   <sigvelo-dropdown placement="bottom-end">
+*     <sigvelo-button slot="trigger" icon-label="Save options" with-caret></sigvelo-button>
+*     <sigvelo-dropdown-item value="cats">Share with cats</sigvelo-dropdown-item>
+*     <sigvelo-dropdown-item value="dogs" disabled>Share with dogs</sigvelo-dropdown-item>
+*     <sigvelo-divider></sigvelo-divider>
+*     <sigvelo-dropdown-item value="url">Copy URL</sigvelo-dropdown-item>
+*     <sigvelo-dropdown-item value="embed">Copy embed code</sigvelo-dropdown-item>
+*   </sigvelo-dropdown>
+* </sigvelo-button-group>
+* ```
+*/
+var SigveloButtonGroup = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.label = "";
+		this.orientation = "horizontal";
+	}
+	static {
+		this.styles = [hostStyles, button_group_styles_default];
+	}
+	firstUpdated() {
+		this.setAttribute("role", "group");
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("label")) {
+			if (this.label) this.setAttribute("aria-label", this.label);
+			else this.removeAttribute("aria-label");
+			this.updateClassNames();
+		}
+		if (changedProperties.has("orientation")) this.updateClassNames();
+	}
+	/** Gets an array of buttons slotted into the button group. Includes slotted buttons, such as dropdown triggers. */
+	getButtons() {
+		return [...this.querySelectorAll("sigvelo-button")];
+	}
+	/** Updates slotted button class names so they get the correct button styles. */
+	updateClassNames() {
+		const buttons = this.getButtons();
+		buttons.forEach((button, index) => {
+			button.toggleAttribute("data-button-group-horizontal", this.orientation === "horizontal");
+			button.toggleAttribute("data-button-group-vertical", this.orientation === "vertical");
+			button.toggleAttribute("data-button-group-first", index === 0);
+			button.toggleAttribute("data-button-group-middle", index > 0 && index < buttons.length - 1);
+			button.toggleAttribute("data-button-group-last", index === buttons.length - 1);
+		});
+	}
+	render() {
+		return html`<slot @slotchange=${this.updateClassNames}></slot>`;
+	}
+};
+__decorate([property()], SigveloButtonGroup.prototype, "label", void 0);
+__decorate([property({ reflect: true })], SigveloButtonGroup.prototype, "orientation", void 0);
+customElements.define("sigvelo-button-group", SigveloButtonGroup);
+//#endregion
+export { SigveloButtonGroup as t };