@mcp-b/web-components 0.2.0

package/dist/file-input-D2D6YC0B.d.ts

@@ -0,0 +1,378 @@
+import { CSSResultGroup, PropertyValues } from "lit";
+import { SigveloFormControlElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/file-input/file-input.d.ts
+/**
+ * <sigvelo-file-input>
+ *
+ * @summary Allows the user to select files to upload to the server.
+ * @tag sigvelo-file-input
+ * @documentation https://design-system.sigvelo.com/docs/components/file
+ * @status stable
+ * @since 1.0
+ *
+ * @dependency sigvelo-button
+ * @dependency sigvelo-icon
+ *
+ * @slot label - The file input's label. For plain-text labels, you can use the `label` attribute instead.
+ * @slot description - The file input's description. For plain-text descriptions, you can use the `description`
+ *  attribute instead.
+ * @slot dropzone - Custom content to show in the dropzone.
+ *
+ * @event sigvelo-blur - Emitted when the file input loses focus. This event does not bubble.
+ * @event sigvelo-change - Emitted when the user selects or removes a file.
+ * @event sigvelo-focus - Emitted when the file input receives focus. This event does not bubble.
+ * @event sigvelo-input - Emitted when the file input receives input.
+ *
+ * @csspart label - The element that contains the text field's label, a `<label>` element.
+ * @csspart description - The element that contains the text field's description.
+ * @csspart dropzone - The bordered region where files can be dropped.
+ * @csspart file-list - The list of files shown when at least one file is selected.
+ * @csspart file - A selected file will be drawn in this container.
+ * @csspart file-thumbnail - The container that hold's the file's image or icon.
+ * @csspart file-image - The file's image preview (if it's an image).
+ * @csspart file-icon - The file's icon (if it's not an image).
+ * @csspart file-icon__svg - The `<svg>` part of the file icon.
+ * @csspart file-details - The container that holds the filename and size.
+ * @csspart file-name - The container that holds the file's name, a `<span>` element.
+ * @csspart file-size - The container that holds the file's size, a `<small>` element.
+ * @csspart file-actions - The container that holds the file's remove button.
+ * @csspart file-remove-button - The file's remove button.
+ * @csspart file-remove-button__button - The `button` part of the file's remove button.
+ *
+ * @cssstate disabled - Applied when the file input is disabled.
+ * @cssstate blank - Applied when the file input has a blank value.
+ * @cssstate focused - Applied when the file input has focus.
+ * @cssstate user-valid - Applied when the file input is valid and the user has sufficiently interacted with it.
+ * @cssstate user-invalid - Applied when the file input is invalid and the user has sufficiently interacted with it.
+ *
+ * @example Default
+ * ```html
+ * <sigvelo-file-input
+ *   name="files"
+ *   label="Select a file"
+ *   description="Files must be 20MB or less"
+ *   multiple
+ * ></sigvelo-file-input>
+ * ```
+ *
+ * **Note:** This component works like a [native file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file). Files can be posted to your server as multipart form data or you can access them via JavaScript for processing.
+ *
+ * @example Labels and descriptions
+ * You can use the `label` and `description` attributes to provide plain text labels and descriptions for the file input. If you want to provide HTML, use the `label` and `description` slots instead.
+ *
+ * ```html
+ * <sigvelo-file-input name="file" label="Select a file">
+ *   <span slot="description">
+ *     For more information, <a href="https://example.com/" target="_blank">visit our website</a>.
+ *   </span>
+ * </sigvelo-file-input>
+ * ```
+ *
+ * @example Uploading with forms
+ * When uploading a file from a form, you'll probably want to add `method="post"` and `enctype="multipart/form-data"` to the form so the files will be sent to the server correctly.
+ *
+ * ```html
+ * <form
+ *   id="file-input__uploading"
+ *   enctype="multipart/form-data"
+ *   method="post"
+ *   action="about:blank"
+ *   target="_blank"
+ * >
+ *   <sigvelo-file-input name="files" label="Select a file"></sigvelo-file-input>
+ *   <br>
+ *   <sigvelo-button type="submit" color="primary">Upload</sigvelo-button>
+ * </form>
+ *
+ * <script>
+ *   const form = document.getElementById('file-input__uploading');
+ *
+ *   form.addEventListener('submit', event => {
+ *     event.preventDefault();
+ *
+ *     const formData = new FormData(form);
+ *     console.log(...formData.values());
+ *   });
+ * </script>
+ * ```
+ *
+ * @example Working with files
+ * Use the `files` property to get an array of selected files. Note the use of an array instead of a `FileList`, which allows you to add, modify, and remove files more easily than a native file input.
+ *
+ * Try selecting a few files and then clicking each button.
+ *
+ * ```html
+ * <sigvelo-file-input
+ *   id="file-input__accessing"
+ *   name="files"
+ *   label="Select some files"
+ *   description="Files must be 20MB or less"
+ *   multiple
+ * ></sigvelo-file-input>
+ * <br>
+ * <sigvelo-button type="submit">Reverse</sigvelo-button>
+ * <sigvelo-button type="submit">Clear</sigvelo-button>
+ *
+ * <script>
+ *   const fileInput = document.getElementById('file-input__accessing');
+ *   const reverseButton = fileInput.nextElementSibling.nextElementSibling;
+ *   const clearButton = reverseButton.nextElementSibling;
+ *
+ *   // Reverse
+ *   reverseButton.addEventListener('click', event => {
+ *     fileInput.files = fileInput.files.toReversed();
+ *   });
+ *
+ *   // Clear
+ *   clearButton.addEventListener('click', event => {
+ *     fileInput.files = [];
+ *   });
+ * </script>
+ * ```
+ *
+ * **Warning:** The `files` property must be reassigned, not mutated! Avoid using functions that mutate the array, such as [`reverse()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse) and [`sort()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort), because they won't trigger an update.
+ *
+ * @example Accepting multiple files
+ * Add the `multiple` attribute to allow the file input to accept more than one file. If the user drops a folder, all files within it will be added to the file input.
+ *
+ * ```html
+ * <sigvelo-file-input
+ *   name="files"
+ *   label="Select the files you want to upload"
+ *   multiple
+ * >
+ * </sigvelo-file-input>
+ * ```
+ *
+ * @example Accepting file types
+ * To limit the file input to certain file types, set the `accept` attribute to a comma-separated string of unique file type specifiers.
+ *
+ * ```html
+ * <sigvelo-file-input
+ *   name="file"
+ *   label="Upload a picture of your cat"
+ *   accept="image/jpeg, image/png, image/gif, image/webp"
+ * >
+ * </sigvelo-file-input>
+ * ```
+ *
+ * @example Changing the size
+ * ```html
+ * <sigvelo-file-input size="xs" name="xs" label="Extra small"></sigvelo-file-input><br>
+ * <sigvelo-file-input size="sm" name="sm" label="Small"></sigvelo-file-input><br>
+ * <sigvelo-file-input size="md" name="md" label="Medium"></sigvelo-file-input><br>
+ * <sigvelo-file-input size="lg" name="lg" label="Large"></sigvelo-file-input><br>
+ * <sigvelo-file-input size="xl" name="xl" label="Extra large"></sigvelo-file-input>
+ * ```
+ *
+ * @example Custom dropzone content
+ * Use the `dropzone` slot to customize what appears inside the dropzone.
+ *
+ * ```html
+ * <sigvelo-file-input name="files" label="Upload a file" multiple>
+ *   <div slot="dropzone">
+ *     <sigvelo-icon name="cloud-upload" style="font-size: 2rem;"></sigvelo-icon>
+ *     <br>
+ *     Choose some files to send to the cloud
+ *   </div>
+ * </sigvelo-file-input>
+ * ```
+ *
+ * @example Button-only file inputs
+ * Button-only file inputs aren't supported, but you can achieve this pattern with a button, a native `<input type="file">`, and a bit of JavaScript. You can use the `sigvelo-vh` utility class to hide the input.
+ *
+ * ```html
+ * <sigvelo-button id="file-input__button-only">Select files</sigvelo-button>
+ * <input class="sigvelo-vh" type="file" name="file">
+ *
+ * <script>
+ *   const button = document.getElementById('file-input__button-only');
+ *   const fileInput = button.nextElementSibling;
+ *
+ *   // Open the system file browser when the button is clicked
+ *   button.addEventListener('click', () => {
+ *     fileInput.click();
+ *   });
+ *
+ *   // Listen for files to be selected
+ *   fileInput.addEventListener('change', () => {
+ *     // Do something with the files
+ *     console.log(...fileInput.files);
+ *
+ *     // Reset the input
+ *     fileInput.value = '';
+ *   });
+ * </script>
+ * ```
+ *
+ * @example Validation
+ * The `required` attribute can be applied to enable validation using the Constraint Validation API. This will prevent form submission until the user has selected a file.
+ *
+ * ```html
+ * <form action="about:blank" method="get" target="_blank">
+ *   <sigvelo-file-input name="file" label="Select a file" required></sigvelo-file-input>
+ *   <br>
+ *   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
+ *   <sigvelo-button type="reset">Reset</sigvelo-button>
+ * </form>
+ * ```
+ *
+ * @example Using custom validation
+ * Use the `setCustomValidity()` method to make the file input invalid and show a custom error message on submit. This will override all other validation parameters. To clear the error, remove the attribute or set it to an empty string.
+ *
+ * ```html
+ * <form action="about:blank" method="get" target="_blank" id="file-input__custom-validation">
+ *   <sigvelo-file-input
+ *     name="file"
+ *     label="Select a file"
+ *     required
+ *   ></sigvelo-file-input>
+ *   <br>
+ *   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
+ *   <sigvelo-button type="reset">Reset</sigvelo-button>
+ * </form>
+ *
+ * <script type="module">
+ *   import { allDefined } from '/dist/sigvelo.js';
+ *
+ *   await allDefined();
+ *
+ *   const form = document.getElementById('file-input__custom-validation');
+ *   const fileInput = form.querySelector('sigvelo-file-input');
+ *
+ *   fileInput.setCustomValidity('Not so fast, bubba!');
+ * </script>
+ * ```
+ *
+ * @example Styling validation
+ * You can style valid and invalid file inputs using the `:valid` and `:invalid` pseudo classes.
+ *
+ * ```html
+ * <form action="about:blank" method="get" target="_blank" class="file-input__validation-pseudo">
+ *   <sigvelo-file-input name="file" label="Select a file" required></sigvelo-file-input>
+ *   <br>
+ *   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
+ *   <sigvelo-button type="reset">Reset</sigvelo-button>
+ * </form>
+ *
+ * <style>
+ *   .file-input__validation-pseudo {
+ *     sigvelo-file-input:valid {
+ *       outline: solid 2px var(--sigvelo-color-success-border);
+ *       outline-offset: .5rem;
+ *     }
+ *
+ *     sigvelo-file-input:invalid {
+ *       outline: solid 2px var(--sigvelo-color-danger-border);
+ *       outline-offset: .5rem;
+ *     }
+ *   }
+ * </style>
+ * ```
+ *
+ * However, these selectors will match even before the user has had a chance to fill out the form. More often than not, you'll want to use the `user-valid` and `user-invalid` custom states instead. This way, validation styles are only shown _after_ the user interacts with the form control or when the form is submitted.
+ *
+ * ```html
+ * <form action="about:blank" method="get" target="_blank" class="file-input__validation-custom">
+ *   <sigvelo-file-input name="file" label="Select a file" required></sigvelo-file-input>
+ *   <br>
+ *   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
+ *   <sigvelo-button type="reset">Reset</sigvelo-button>
+ * </form>
+ *
+ * <style>
+ *   .file-input__validation-custom {
+ *     sigvelo-file-input:state(user-valid) {
+ *       outline: solid 2px var(--sigvelo-color-success-border);
+ *       outline-offset: .5rem;
+ *     }
+ *
+ *     sigvelo-file-input:state(user-invalid) {
+ *       outline: solid 2px var(--sigvelo-color-danger-border);
+ *       outline-offset: .5rem;
+ *     }
+ *   }
+ * </style>
+ * ```
+ */
+declare class SigveloFileInput extends SigveloFormControlElement {
+  #private;
+  static formAssociated: boolean;
+  static observeSlots: boolean;
+  static styles: CSSResultGroup;
+  private localize;
+  protected get focusableAnchor(): HTMLInputElement;
+  dropzone: HTMLLabelElement;
+  fileInput: HTMLInputElement;
+  isDragging: boolean;
+  isInvalid: boolean;
+  hadUserInteraction: boolean;
+  wasSubmitted: boolean;
+  /** An array of files that are currently selected. (Property only) */
+  files: File[];
+  /**
+   * The text field's label. If you need to provide HTML in the label, use the `label` slot instead.
+   */
+  label: string;
+  /**
+   * The text field's description. If you need to provide HTML in the description, use the `description` slot instead.
+   */
+  description: string;
+  /** The name of the file input. This will be submitted with the form as a name/value pair. */
+  name: string;
+  /** Disables the file input. */
+  disabled: boolean;
+  /**
+   * A list of acceptable file types. Must be a comma-separated list of [unique file type
+   * specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers).
+   */
+  accept: boolean;
+  /** Allows more than one file to be selected. */
+  multiple: boolean;
+  /** The file input's size. */
+  size: "xs" | "sm" | "md" | "lg" | "xl";
+  /**
+   * 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;
+  /**
+   * Makes the file input required. Form submission will not be allowed when this is set and no files are selected.
+   */
+  required: boolean;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  updated(changedProperties: PropertyValues<this>): void;
+  /** @internal Called when a containing fieldset is disabled. */
+  formDisabledCallback(isDisabled: boolean): void;
+  /** @internal Called when the form is reset. */
+  formResetCallback(): void;
+  /** Converts the `this.files` array into a `FileList` object so the `<input type="file">` can be updated. */
+  private getFileList;
+  private handleBlur;
+  private handleDragEnter;
+  private handleDragLeave;
+  private handleDragOver;
+  private handleDrop;
+  private handleFileInput;
+  private handleFocus;
+  private handleHostInvalid;
+  private handleRemoveClick;
+  /** Determines if a File object is an image type the browser can render. */
+  private isImage;
+  /** Returns a system icon name based on the provided mime type. */
+  private mimeTypeToIconName;
+  /** Updates the form value based on this.files. Call this after adding or removing files to/from this.files. */
+  private updateFormValue;
+  /** Sets the form control's validity */
+  private updateValidity;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-file-input": SigveloFileInput;
+  }
+}
+//#endregion
+export { SigveloFileInput as t };

package/dist/filter-bar-Bj2QzEn9.d.ts

@@ -0,0 +1,35 @@
+import { CSSResultGroup } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+import { SigveloFilterChangeEvent as SigveloFilterChangeEvent$1 } from "@mcp-b/wc-support/events/filter";
+
+//#region src/components/filter-bar/filter-bar.d.ts
+/**
+ * <sigvelo-filter-bar>
+ *
+ * @summary Provides a consistently labeled search filter for a collection or data view.
+ * @tag sigvelo-filter-bar
+ * @documentation https://design-system.sigvelo.com/docs/components/filter-bar
+ * @status stable
+ * @since 1.0
+ *
+ * @event sigvelo-filter-change - Emitted on each query change with `{ query }`.
+ * @csspart field - The underlying `sigvelo-text-field`.
+ */
+declare class SigveloFilterBar extends SigveloElement {
+  #private;
+  static styles: CSSResultGroup;
+  /** The accessible visible label. */
+  label: string;
+  /** Placeholder displayed when the query is empty. */
+  placeholder: string;
+  /** The controlled filter query. */
+  query: string;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-filter-bar": SigveloFilterBar;
+  }
+}
+//#endregion
+export { SigveloFilterChangeEvent$1 as n, SigveloFilterBar as t };

package/dist/filter-bar-Dcs67aXo.js

@@ -0,0 +1,66 @@
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import "./text-field-inpJfp0A.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";
+import { SigveloFilterChangeEvent, SigveloFilterChangeEvent as SigveloFilterChangeEvent$1 } from "@mcp-b/wc-support/events/filter";
+//#region src/components/filter-bar/filter-bar.styles.ts
+var filter_bar_styles_default = css`
+  :host {
+    display: block;
+    min-inline-size: 0;
+  }
+
+  sigvelo-text-field {
+    inline-size: 100%;
+  }
+`;
+//#endregion
+//#region src/components/filter-bar/filter-bar.ts
+/**
+* <sigvelo-filter-bar>
+*
+* @summary Provides a consistently labeled search filter for a collection or data view.
+* @tag sigvelo-filter-bar
+* @documentation https://design-system.sigvelo.com/docs/components/filter-bar
+* @status stable
+* @since 1.0
+*
+* @event sigvelo-filter-change - Emitted on each query change with `{ query }`.
+* @csspart field - The underlying `sigvelo-text-field`.
+*/
+var SigveloFilterBar = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.label = "Filter results";
+		this.placeholder = "Search";
+		this.query = "";
+	}
+	static {
+		this.styles = [hostStyles, filter_bar_styles_default];
+	}
+	#handleInput(event) {
+		this.query = event.currentTarget.value;
+		this.dispatchEvent(new SigveloFilterChangeEvent({ query: this.query }));
+	}
+	render() {
+		return html`
+      <sigvelo-text-field
+        part="field"
+        type="search"
+        with-clear
+        .label=${this.label}
+        .placeholder=${this.placeholder}
+        .value=${this.query}
+        @sigvelo-input=${this.#handleInput}
+      ></sigvelo-text-field>
+    `;
+	}
+};
+__decorate([property()], SigveloFilterBar.prototype, "label", void 0);
+__decorate([property()], SigveloFilterBar.prototype, "placeholder", void 0);
+__decorate([property()], SigveloFilterBar.prototype, "query", void 0);
+customElements.define("sigvelo-filter-bar", SigveloFilterBar);
+//#endregion
+export { SigveloFilterChangeEvent$1 as n, SigveloFilterBar as t };

package/dist/form-section-BchPetkj.js

@@ -0,0 +1,83 @@
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { css, html, nothing } 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/form-section/form-section.styles.ts
+var form_section_styles_default = css`
+  :host {
+    display: block;
+    min-inline-size: 0;
+  }
+
+  fieldset {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sigvelo-spacing-3);
+    min-inline-size: 0;
+    margin: 0;
+    padding: var(--sigvelo-spacing-4);
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+      var(--sigvelo-color-neutral-border-subtle);
+    border-radius: var(--sigvelo-radius-lg);
+  }
+
+  legend {
+    padding-inline: var(--sigvelo-spacing-1);
+    color: var(--sigvelo-color-text);
+    font-weight: var(--sigvelo-font-weight-semibold);
+  }
+
+  #description {
+    margin: 0;
+    color: var(--sigvelo-color-text-muted);
+    line-height: 1.5;
+  }
+
+  #content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sigvelo-spacing-3);
+  }
+`;
+//#endregion
+//#region src/components/form-section/form-section.ts
+/**
+* <sigvelo-form-section>
+*
+* @summary Groups related form controls under an accessible title and optional description.
+* @tag sigvelo-form-section
+* @documentation https://design-system.sigvelo.com/docs/components/form-section
+* @status stable
+* @since 1.0
+*
+* @slot - Related form controls and supporting content.
+* @csspart fieldset - The semantic fieldset container.
+* @csspart title - The fieldset legend.
+* @csspart description - The optional description.
+* @csspart content - The controls container.
+*/
+var SigveloFormSection = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.title = "";
+		this.description = "";
+	}
+	static {
+		this.styles = [hostStyles, form_section_styles_default];
+	}
+	render() {
+		return html`
+      <fieldset part="fieldset">
+        <legend part="title">${this.title}</legend>
+        ${this.description ? html`<p id="description" part="description">${this.description}</p>` : nothing}
+        <div id="content" part="content"><slot></slot></div>
+      </fieldset>
+    `;
+	}
+};
+__decorate([property()], SigveloFormSection.prototype, "title", void 0);
+__decorate([property()], SigveloFormSection.prototype, "description", void 0);
+customElements.define("sigvelo-form-section", SigveloFormSection);
+//#endregion
+export { SigveloFormSection as t };

package/dist/form-section-xFBTBULQ.d.ts

@@ -0,0 +1,34 @@
+import { CSSResultGroup } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/form-section/form-section.d.ts
+/**
+ * <sigvelo-form-section>
+ *
+ * @summary Groups related form controls under an accessible title and optional description.
+ * @tag sigvelo-form-section
+ * @documentation https://design-system.sigvelo.com/docs/components/form-section
+ * @status stable
+ * @since 1.0
+ *
+ * @slot - Related form controls and supporting content.
+ * @csspart fieldset - The semantic fieldset container.
+ * @csspart title - The fieldset legend.
+ * @csspart description - The optional description.
+ * @csspart content - The controls container.
+ */
+declare class SigveloFormSection extends SigveloElement {
+  static styles: CSSResultGroup;
+  /** The section title rendered as a fieldset legend. */
+  title: string;
+  /** Optional supporting description. */
+  description: string;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-form-section": SigveloFormSection;
+  }
+}
+//#endregion
+export { SigveloFormSection as t };