snice 2.5.4 → 3.2.0

package/docs/components/color-display.md

@@ -0,0 +1,96 @@
+# Color Display Component
+
+The `<snice-color-display>` component displays colors with a swatch and formatted label.
+
+## Basic Usage
+
+```html
+<snice-color-display value="#3b82f6"></snice-color-display>
+```
+
+## Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `value` | `string` | `''` | Color value (hex format) |
+| `format` | `'hex' \| 'rgb' \| 'hsl'` | `'hex'` | Display format |
+| `showSwatch` | `boolean` | `true` | Show color swatch |
+| `showLabel` | `boolean` | `true` | Show color label |
+| `swatchSize` | `'small' \| 'medium' \| 'large'` | `'medium'` | Swatch size |
+| `label` | `string` | `''` | Custom label text |
+
+## Examples
+
+### Basic Colors
+
+```html
+<snice-color-display value="#ff0000"></snice-color-display>
+<snice-color-display value="#00ff00"></snice-color-display>
+<snice-color-display value="#0000ff"></snice-color-display>
+```
+
+### Color Formats
+
+```html
+<snice-color-display value="#3b82f6" format="hex"></snice-color-display>
+<snice-color-display value="#3b82f6" format="rgb"></snice-color-display>
+<snice-color-display value="#3b82f6" format="hsl"></snice-color-display>
+```
+
+### Swatch Sizes
+
+```html
+<snice-color-display value="#10b981" swatch-size="small"></snice-color-display>
+<snice-color-display value="#10b981" swatch-size="medium"></snice-color-display>
+<snice-color-display value="#10b981" swatch-size="large"></snice-color-display>
+```
+
+### Custom Labels
+
+```html
+<snice-color-display value="#ef4444" label="Error Red"></snice-color-display>
+<snice-color-display value="#10b981" label="Success Green"></snice-color-display>
+```
+
+### Swatch Only
+
+```html
+<snice-color-display
+  value="#3b82f6"
+  show-label="false"
+  swatch-size="large"
+></snice-color-display>
+```
+
+### Label Only
+
+```html
+<snice-color-display
+  value="#3b82f6"
+  show-swatch="false"
+  format="rgb"
+></snice-color-display>
+```
+
+## Styling
+
+```css
+snice-color-display::part(container) {
+  /* Container */
+}
+
+snice-color-display::part(swatch) {
+  /* Color swatch */
+}
+
+snice-color-display::part(label) {
+  /* Color label */
+}
+```
+
+## Notes
+
+- Colors must be provided in hex format (#RRGGBB)
+- The component automatically converts to RGB and HSL formats
+- When no custom label is provided, the formatted color value is used
+- Swatch and label can be shown/hidden independently

package/docs/components/color-picker.md

@@ -0,0 +1,81 @@
+# Color Picker Component
+
+The `<snice-color-picker>` component provides a color selection interface with format conversion and preset colors.
+
+## Basic Usage
+
+```html
+<snice-color-picker
+  label="Brand Color"
+  value="#3b82f6"
+  show-presets
+></snice-color-picker>
+```
+
+## Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `value` | `string` | `'#000000'` | Current color value |
+| `format` | `'hex' \| 'rgb' \| 'hsl'` | `'hex'` | Display format |
+| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Size variant |
+| `label` | `string` | `''` | Label text |
+| `helperText` | `string` | `''` | Helper text |
+| `errorText` | `string` | `''` | Error message |
+| `disabled` | `boolean` | `false` | Disabled state |
+| `required` | `boolean` | `false` | Required state |
+| `invalid` | `boolean` | `false` | Invalid state |
+| `name` | `string` | `''` | Form field name |
+| `showInput` | `boolean` | `true` | Show text input |
+| `showPresets` | `boolean` | `false` | Show preset colors |
+| `presets` | `string[]` | `[...]` | Preset color values |
+
+## Methods
+
+### `focus(): void`
+Focus the color picker.
+
+### `blur(): void`
+Blur the color picker.
+
+## Events
+
+### `@snice/color-picker-change`
+Fired when color changes.
+
+**Detail**: `{ value: string, colorPicker: SniceColorPickerElement }`
+
+## Examples
+
+### Basic
+
+```html
+<snice-color-picker label="Background Color"></snice-color-picker>
+```
+
+### With Presets
+
+```html
+<snice-color-picker
+  label="Theme Color"
+  show-presets
+></snice-color-picker>
+```
+
+### Different Formats
+
+```html
+<snice-color-picker format="hex" label="Hex"></snice-color-picker>
+<snice-color-picker format="rgb" label="RGB"></snice-color-picker>
+<snice-color-picker format="hsl" label="HSL"></snice-color-picker>
+```
+
+### Custom Presets
+
+```html
+<snice-color-picker
+  label="Brand Colors"
+  show-presets
+  presets='["#ff0000", "#00ff00", "#0000ff"]'
+></snice-color-picker>
+```