# UCalgary Design System — All Components

This package provides **all web components** in the [UCalgary Design System](https://www.figma.com/design/j9e8wHG5qSxYjGRXSzgeTa/UCDS). It includes all core UI components in a single package and supports two distribution formats:

* **Standard (ESM)**: For projects using a package manager like `npm`.
* **Bundled**: A fully self-contained version that includes all components and dependencies—ideal for projects that don't use a build system or package manager.

---

## Installation (via npm)

Install using your preferred package manager:

```sh
npm install @ucalgary-design-system/all-components
```

---

## Usage

### Option 1: Import via JavaScript (Recommended)

For projects using a bundler (like Vite, Webpack, or Rollup):

```ts
import '@ucalgary-design-system/all-components';
```

Then use the components in your HTML:

```html
<ucds-button>Click me</ucds-button>
```
> 💡 Our components automatically load global design tokens when first used. You don’t need to import them manually!

---

### Option 2: Use the Bundled Build (No Build System Required)

For projects not using a package manager, you can include the bundled JavaScript and CSS directly in your HTML:

```html
<link rel="stylesheet" href="dist/bundle/index.css" />
<script type="module" src="dist/bundle/index.js"></script>
```

Once included, you can use any UCalgary Design System component:

```html
<ucds-text-input label="Your name"></ucds-text-input>
```

> 💡 Make sure the `dist/bundle` directory is served publicly by your server.

### Option 3: Load from a CDN

If you don’t want to install the package locally, you can load the bundled files directly from [jsDelivr](https://www.jsdelivr.com/):

```html
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@ucalgary-design-system/all-components@1.2.0/bundle/index.css"
/>
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@ucalgary-design-system/all-components@1.2.0/bundle/index.js">
</script>
````

Once included, you can use any UCalgary Design System component:

```html
<ucds-dropdown label="Choose one">
  <ucds-dropdown-item value="1">Option 1</ucds-dropdown-item>
  <ucds-dropdown-item value="2">Option 2</ucds-dropdown-item>
</ucds-dropdown>
```

> 💡 You can pin to a specific version (recommended) or use `@latest` to always get the newest release:
>
> ```html
> <script type="module" src="https://cdn.jsdelivr.net/npm/@ucalgary-design-system/all-components@latest/bundle/index.js"></script>
> ```

---

## Components Included

The following components are available:

* `ucds-accordion`
* `ucds-accordion-group`
* `ucds-breadcrumb`
* `ucds-button`
* `ucds-button-group`
* `ucds-card`
* `ucds-card-group`
* `ucds-checkbox`
* `ucds-chip`
* `ucds-chip-group`
* `ucds-date-input`
* `ucds-dropdown`
* `ucds-fieldset`
* `ucds-form`
* `ucds-hero`
* `ucds-icon`
* `ucds-icon-button`
* `ucds-link`
* `ucds-pull-quote`
* `ucds-radio`
* `ucds-search-input`
* `ucds-stepper`
* `ucds-tabs`
* `ucds-text-input`
* `ucds-text-area`