@3dsource/source-ui-native 1.0.17 → 1.0.19

package/README.md

@@ -1,10 +1,12 @@
 # @3dsource/source-ui-native
 
-### A bunch of native ui elements
+A collection of native UI components for web applications, designed to be used with or without Angular. These components provide a consistent design system for 3D Source applications.
 
-## Installation
+## Overview
+
+The Source UI Native library provides framework-agnostic UI components that can be used in any web application. These components are built with vanilla JavaScript and CSS, making them lightweight and performant.
 
-### add a library
+## Installation
 
 ```shell
   npm i @3dsource/source-ui-native
@@ -12,21 +14,84 @@
 
 ## Usage
 
-#### import needed styles in your main styles file
+### Importing Styles
+
+Add the following import to your main styles file:
 
 ```scss
 @use '../node_modules/@3dsource/source-ui-native/styles/source.ui.native.scss';
 ```
 
-_List of native ui elements_
+### Using Components
+
+The components can be used directly in your HTML:
+
+```html
+<src-button>Click Me</src-button>
+```
+
+## Available Components
+
+### UI Elements
+
+- **[src-badge](https://preview.3dsource.com/front-libraries/master/#/components/SourceBadgeComponent)** - Display badges and tags
+- **[src-banner](https://preview.3dsource.com/front-libraries/master/#/components/SourceBannerComponent)** - Show notification banners
+- **[src-button](https://preview.3dsource.com/front-libraries/master/#/components/SourceButtonComponent)** - Customizable button component
+- **[src-copyright](https://preview.3dsource.com/front-libraries/master/#/components/SourceCopyrightComponent)** - Display copyright information
+- **[src-divider](https://preview.3dsource.com/front-libraries/master/#/components/SourceDividerComponent)** - Horizontal divider for lists
+- **[src-hint](https://preview.3dsource.com/front-libraries/master/#/components/SourceHintComponent)** - Show hints or error messages
+- **[src-icon-button](https://preview.3dsource.com/front-libraries/master/#/components/SourceIconButtonComponent)** - Display icon button
+- **[src-loading](https://preview.3dsource.com/front-libraries/master/#/components/SourceLoadingComponent)** - Loading indicator
+- **[src-logo-loading](https://preview.3dsource.com/front-libraries/master/#/components/SourceLogoLoadingComponent)** - Loading indicator with logo
+- **[src-modal](https://preview.3dsource.com/front-libraries/master/#/components/SourceModalElement)** - Modal element for simple modals
+- **[src-slider](https://preview.3dsource.com/front-libraries/master/#/components/SourceSliderComponent)** - Simple slider component
+- Basic styles for lists, form elements, overlays
+
+## Component Examples
+
+### Button Component
+
+```html
+<src-button colorScheme="primary" size="medium"> Click Me </src-button>
+```
+
+### Badge Component
+
+```html
+<src-badge type="informational">Info</src-badge>
+```
+
+### Loading Component
+
+```html
+<src-loading [size]="64" backgroundStrokeColor="#e0f8ee" progressStrokeColor="#007a5c"></src-loading>
+```
+
+## Customization
+
+Components can be customized by overriding global CSS variables or by setting values for particular components variables. Whole table of CSS custom properties is available in the **[documentation site](https://preview.3dsource.com/front-libraries/master/#/components/design-tokens)**
+
+```css
+:root {
+  --src-color-brand-500: #3f51b5;
+  --src-color-text-default: #fff;
+}
+```
+
+```css
+.src-button {
+  --srcButtonBgColor: #3f51b5;
+  --srcButtonBorderRadius: 6px;
+  --srcButtonFontColor: #fff;
+  --srcButtonPaddings: 8px 16px;
+}
+```
+
+You can see all available options and examples in **[documentation](https://preview.3dsource.com/front-libraries/master/#/components/getting-started)**
+
+## Browser Support
 
-- [source-badge](src/lib/components/source-badge)
-- [source-banner](src/lib/components/source-banner)
-- [source-button](src/lib/components/source-button)
-- [source-copyright](src/lib/components/source-copyright)
-- [source-divider](src/lib/components/source-divider)
-- [source-hint](src/lib/components/source-hint)
-- [source-icon-button](src/lib/components/source-icon-button)
-- [source-loading](src/lib/components/source-loading)
-- [source-logo-loading](src/lib/components/source-logo-loading)
-- [source-slider](src/lib/components/source-slider)
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)