@modernage/web-components v1.0.0

@modernage/web-components

A collection of modern, reusable web components built with Lit.

Installation

npm install @modernage/web-components

Usage

LitButton

import "@modernage/web-components/lit-button";

// In your HTML
<lit-button variant="primary" size="medium">
  Click me
</lit-button>;

Properties

Events

Examples

<!-- Primary Button -->
<lit-button>Primary Button</lit-button>

<!-- Secondary Button -->
<lit-button variant="secondary">Secondary Button</lit-button>

<!-- Large Button -->
<lit-button size="large">Large Button</lit-button>

<!-- Disabled Button -->
<lit-button disabled>Disabled Button</lit-button>

<!-- Loading Button -->
<lit-button loading>Loading Button</lit-button>

<!-- Button with Icon -->
<lit-button>
  <svg width="20" height="20"><!-- Your icon --></svg>
  Button with Icon
</lit-button>

Event Handling

document.querySelector("lit-button").addEventListener("button-click", (e) => {
  console.log("Button clicked:", e.detail);
});

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Start Storybook
npm run storybook

# Build the library
npm run build

# Build Storybook
npm run build-storybook

Publishing

# Login to npm (if not already logged in)
npm login

# Publish the package
npm publish

License

ISC