ds-components-lib

STC Design System — Stencil-based web components (ds-* custom elements).

Install

npm install ds-components-lib

Use

import { defineCustomElements } from 'ds-components-lib/loader';
defineCustomElements();

Static Assets

Copy node_modules/ds-components-lib/dist/assets/ into your app's public root. Icons resolve from /assets/icon/, fonts from /assets/font/.

CSS

Two stylesheets are emitted:

| File | Purpose | |------|---------| | ds-components.css | Component styles + design tokens | | ds-doc.css | Documentation layout styles | | *.rtl.css | RTL variants (auto-generated) |

<link rel="stylesheet" href="/build/ds-components.css">
<link rel="stylesheet" href="/build/ds-doc.css">
<!-- For RTL: -->
<link rel="stylesheet" href="/build/ds-components.rtl.css">

Develop

npm ci
npm run dev       # Stencil watch + CSS watch + Pug watch

Repository configuration

For Stencil outputs, Pug/HTML build, documentation CSS (PostCSS, RTL), lint rules, and ref/ alignment, see CONFIGURATION.md.

Build

npm run build          # Full production build
npm run build:pages    # Build + prepare www/ for GitHub Pages

Generate a component

npm run generate       # Stencil interactive generator → creates ds-* component

Lint & Format

npm run lint           # ESLint + Stylelint
npm run lint:fix       # Auto-fix
npm run format         # Prettier write
npm run format:check   # Prettier check (CI)

Publish

npm run prepublishOnly  # lint + build + clean HTML from dist/
npm publish --access public