@nisoku/sazami 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +261 -0
- package/dist/config/generator.d.ts +3 -0
- package/dist/config/tokens.d.ts +1 -0
- package/dist/curvomorphism/index.d.ts +10 -0
- package/dist/errors.d.ts +16 -0
- package/dist/escape.d.ts +26 -0
- package/dist/icons/index.d.ts +1 -0
- package/dist/index.cjs +9473 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.ts +14 -0
- package/dist/index.mjs +9473 -0
- package/dist/index.mjs.map +1 -0
- package/dist/primitives/accordion.d.ts +35 -0
- package/dist/primitives/avatar.d.ts +54 -0
- package/dist/primitives/badge.d.ts +34 -0
- package/dist/primitives/base.d.ts +129 -0
- package/dist/primitives/button.d.ts +55 -0
- package/dist/primitives/card.d.ts +44 -0
- package/dist/primitives/checkbox.d.ts +43 -0
- package/dist/primitives/chip.d.ts +57 -0
- package/dist/primitives/column.d.ts +24 -0
- package/dist/primitives/coverart.d.ts +34 -0
- package/dist/primitives/divider.d.ts +24 -0
- package/dist/primitives/generic.d.ts +4 -0
- package/dist/primitives/grid.d.ts +29 -0
- package/dist/primitives/heading.d.ts +35 -0
- package/dist/primitives/icon-button.d.ts +45 -0
- package/dist/primitives/icon.d.ts +32 -0
- package/dist/primitives/image.d.ts +36 -0
- package/dist/primitives/input.d.ts +53 -0
- package/dist/primitives/label.d.ts +26 -0
- package/dist/primitives/modal.d.ts +34 -0
- package/dist/primitives/modifier-map.d.ts +3 -0
- package/dist/primitives/progress.d.ts +49 -0
- package/dist/primitives/radio.d.ts +48 -0
- package/dist/primitives/registry.d.ts +2 -0
- package/dist/primitives/row.d.ts +29 -0
- package/dist/primitives/section.d.ts +39 -0
- package/dist/primitives/select.d.ts +58 -0
- package/dist/primitives/shared.d.ts +15 -0
- package/dist/primitives/slider.d.ts +60 -0
- package/dist/primitives/spacer.d.ts +14 -0
- package/dist/primitives/spinner.d.ts +29 -0
- package/dist/primitives/stack.d.ts +19 -0
- package/dist/primitives/switch.d.ts +53 -0
- package/dist/primitives/tabs.d.ts +30 -0
- package/dist/primitives/tag.d.ts +25 -0
- package/dist/primitives/text.d.ts +39 -0
- package/dist/primitives/toast.d.ts +45 -0
- package/dist/primitives/toggle.d.ts +51 -0
- package/dist/runtime/renderer.d.ts +2 -0
- package/dist/runtime/transformer.d.ts +8 -0
- package/package.json +55 -0
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { SazamiComponent } from "./base";
|
|
2
|
+
import { type Readable } from "@nisoku/sairin";
|
|
3
|
+
declare const iconConfig: {
|
|
4
|
+
readonly properties: {
|
|
5
|
+
readonly icon: {
|
|
6
|
+
readonly type: "string";
|
|
7
|
+
readonly reflect: true;
|
|
8
|
+
};
|
|
9
|
+
readonly size: {
|
|
10
|
+
readonly type: "string";
|
|
11
|
+
readonly reflect: true;
|
|
12
|
+
};
|
|
13
|
+
readonly variant: {
|
|
14
|
+
readonly type: "string";
|
|
15
|
+
readonly reflect: true;
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
};
|
|
19
|
+
export declare class SazamiIcon extends SazamiComponent<typeof iconConfig> {
|
|
20
|
+
size: string;
|
|
21
|
+
variant: string;
|
|
22
|
+
private _iconSignal;
|
|
23
|
+
private _iconElement;
|
|
24
|
+
private _iconEffectDispose;
|
|
25
|
+
private _isReadableStr;
|
|
26
|
+
set icon(value: string | Readable<string>);
|
|
27
|
+
get icon(): string | Readable<string>;
|
|
28
|
+
private _updateIcon;
|
|
29
|
+
private _setupIconBinding;
|
|
30
|
+
render(): void;
|
|
31
|
+
}
|
|
32
|
+
export {};
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { SazamiComponent } from "./base";
|
|
2
|
+
import { type Readable } from "@nisoku/sairin";
|
|
3
|
+
declare const imageConfig: {
|
|
4
|
+
readonly properties: {
|
|
5
|
+
readonly alt: {
|
|
6
|
+
readonly type: "string";
|
|
7
|
+
readonly reflect: true;
|
|
8
|
+
};
|
|
9
|
+
readonly size: {
|
|
10
|
+
readonly type: "string";
|
|
11
|
+
readonly reflect: true;
|
|
12
|
+
};
|
|
13
|
+
readonly shape: {
|
|
14
|
+
readonly type: "string";
|
|
15
|
+
readonly reflect: true;
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
};
|
|
19
|
+
export declare class SazamiImage extends SazamiComponent<typeof imageConfig> {
|
|
20
|
+
alt: string;
|
|
21
|
+
size: string;
|
|
22
|
+
shape: string;
|
|
23
|
+
private _srcSignal;
|
|
24
|
+
private _imgElement;
|
|
25
|
+
private _pendingSrc;
|
|
26
|
+
private _srcDispose;
|
|
27
|
+
private _isReadableStr;
|
|
28
|
+
set src(value: string | Readable<string>);
|
|
29
|
+
get src(): string | Readable<string>;
|
|
30
|
+
private _updateSrc;
|
|
31
|
+
private _createImageElement;
|
|
32
|
+
private _setupSrcBinding;
|
|
33
|
+
private _getCurrentSrc;
|
|
34
|
+
render(): void;
|
|
35
|
+
}
|
|
36
|
+
export {};
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { SazamiComponent } from "./base";
|
|
2
|
+
import { type Readable } from "@nisoku/sairin";
|
|
3
|
+
declare const inputConfig: {
|
|
4
|
+
readonly properties: {
|
|
5
|
+
readonly placeholder: {
|
|
6
|
+
readonly type: "string";
|
|
7
|
+
readonly reflect: false;
|
|
8
|
+
};
|
|
9
|
+
readonly type: {
|
|
10
|
+
readonly type: "string";
|
|
11
|
+
readonly reflect: false;
|
|
12
|
+
};
|
|
13
|
+
readonly size: {
|
|
14
|
+
readonly type: "string";
|
|
15
|
+
readonly reflect: false;
|
|
16
|
+
};
|
|
17
|
+
readonly variant: {
|
|
18
|
+
readonly type: "string";
|
|
19
|
+
readonly reflect: false;
|
|
20
|
+
};
|
|
21
|
+
readonly disabled: {
|
|
22
|
+
readonly type: "boolean";
|
|
23
|
+
readonly reflect: false;
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
readonly events: {
|
|
27
|
+
readonly input: {
|
|
28
|
+
readonly name: "saz-input";
|
|
29
|
+
readonly detail: {
|
|
30
|
+
readonly value: "value";
|
|
31
|
+
};
|
|
32
|
+
};
|
|
33
|
+
};
|
|
34
|
+
};
|
|
35
|
+
export declare class SazamiInput extends SazamiComponent<typeof inputConfig> {
|
|
36
|
+
placeholder: string;
|
|
37
|
+
type: string;
|
|
38
|
+
disabled: boolean;
|
|
39
|
+
size: string;
|
|
40
|
+
variant: string;
|
|
41
|
+
private _valueSignal;
|
|
42
|
+
private _input;
|
|
43
|
+
private _valueEffectDisposer;
|
|
44
|
+
private _inputHandler;
|
|
45
|
+
private _isReadableStr;
|
|
46
|
+
set value(valueOrSignal: string | Readable<string>);
|
|
47
|
+
private _disposeValueBindings;
|
|
48
|
+
get value(): string | Readable<string>;
|
|
49
|
+
render(): void;
|
|
50
|
+
static get observedAttributes(): string[];
|
|
51
|
+
attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
|
|
52
|
+
}
|
|
53
|
+
export {};
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { SazamiComponent } from "./base";
|
|
2
|
+
import { type Readable } from "@nisoku/sairin";
|
|
3
|
+
declare const labelConfig: {
|
|
4
|
+
readonly observedAttributes: readonly ["content"];
|
|
5
|
+
readonly properties: {
|
|
6
|
+
readonly for: {
|
|
7
|
+
readonly type: "string";
|
|
8
|
+
readonly reflect: true;
|
|
9
|
+
};
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
export declare class SazamiLabel extends SazamiComponent<typeof labelConfig> {
|
|
13
|
+
for: string;
|
|
14
|
+
private _content;
|
|
15
|
+
private _contentSignal;
|
|
16
|
+
private _textNode;
|
|
17
|
+
private _contentDispose;
|
|
18
|
+
private _isReadable;
|
|
19
|
+
set content(value: string | Readable<string>);
|
|
20
|
+
get content(): string | Readable<string>;
|
|
21
|
+
private _setTextContent;
|
|
22
|
+
private _setupSignalBinding;
|
|
23
|
+
render(): void;
|
|
24
|
+
attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
|
|
25
|
+
}
|
|
26
|
+
export {};
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { SazamiComponent } from "./base";
|
|
2
|
+
import { Signal } from "@nisoku/sairin";
|
|
3
|
+
declare const modalConfig: {
|
|
4
|
+
readonly properties: {
|
|
5
|
+
readonly title: {
|
|
6
|
+
readonly type: "string";
|
|
7
|
+
readonly reflect: false;
|
|
8
|
+
};
|
|
9
|
+
readonly open: {
|
|
10
|
+
readonly type: "boolean";
|
|
11
|
+
readonly reflect: true;
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
readonly events: {
|
|
15
|
+
readonly open: {
|
|
16
|
+
readonly name: "saz-open";
|
|
17
|
+
readonly detail: {};
|
|
18
|
+
};
|
|
19
|
+
readonly close: {
|
|
20
|
+
readonly name: "saz-close";
|
|
21
|
+
readonly detail: {};
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
export declare class SazamiModal extends SazamiComponent<typeof modalConfig> {
|
|
26
|
+
title: string;
|
|
27
|
+
open: boolean;
|
|
28
|
+
openSignal: Signal<boolean> | undefined;
|
|
29
|
+
render(): void;
|
|
30
|
+
private _open;
|
|
31
|
+
private _close;
|
|
32
|
+
attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
|
|
33
|
+
}
|
|
34
|
+
export {};
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { SazamiComponent } from "./base";
|
|
2
|
+
import { type Readable } from "@nisoku/sairin";
|
|
3
|
+
declare const progressConfig: {
|
|
4
|
+
readonly properties: {
|
|
5
|
+
readonly max: {
|
|
6
|
+
readonly type: "number";
|
|
7
|
+
readonly reflect: true;
|
|
8
|
+
readonly default: 100;
|
|
9
|
+
};
|
|
10
|
+
readonly min: {
|
|
11
|
+
readonly type: "number";
|
|
12
|
+
readonly reflect: true;
|
|
13
|
+
readonly default: 0;
|
|
14
|
+
};
|
|
15
|
+
readonly size: {
|
|
16
|
+
readonly type: "string";
|
|
17
|
+
readonly reflect: true;
|
|
18
|
+
};
|
|
19
|
+
readonly variant: {
|
|
20
|
+
readonly type: "string";
|
|
21
|
+
readonly reflect: true;
|
|
22
|
+
};
|
|
23
|
+
readonly indeterminate: {
|
|
24
|
+
readonly type: "boolean";
|
|
25
|
+
readonly reflect: true;
|
|
26
|
+
};
|
|
27
|
+
};
|
|
28
|
+
};
|
|
29
|
+
export declare class SazamiProgress extends SazamiComponent<typeof progressConfig> {
|
|
30
|
+
max: number;
|
|
31
|
+
min: number;
|
|
32
|
+
size: string;
|
|
33
|
+
variant: string;
|
|
34
|
+
indeterminate: boolean;
|
|
35
|
+
private _valueSignal;
|
|
36
|
+
private _barElement;
|
|
37
|
+
private _rangeMin;
|
|
38
|
+
private _rangeMax;
|
|
39
|
+
private _valueBindingCleanup;
|
|
40
|
+
private _isReadableNum;
|
|
41
|
+
set value(valueOrSignal: number | Readable<number>);
|
|
42
|
+
get value(): number | Readable<number>;
|
|
43
|
+
private _setupValueBinding;
|
|
44
|
+
private _updateBarWidth;
|
|
45
|
+
render(): void;
|
|
46
|
+
static get observedAttributes(): string[];
|
|
47
|
+
attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
|
|
48
|
+
}
|
|
49
|
+
export {};
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { SazamiComponent } from "./base";
|
|
2
|
+
import { type Readable } from "@nisoku/sairin";
|
|
3
|
+
declare const radioConfig: {
|
|
4
|
+
readonly properties: {
|
|
5
|
+
readonly name: {
|
|
6
|
+
readonly type: "string";
|
|
7
|
+
readonly reflect: false;
|
|
8
|
+
};
|
|
9
|
+
readonly value: {
|
|
10
|
+
readonly type: "string";
|
|
11
|
+
readonly reflect: false;
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
readonly events: {
|
|
15
|
+
readonly change: {
|
|
16
|
+
readonly name: "saz-change";
|
|
17
|
+
readonly detail: {
|
|
18
|
+
readonly value: "value";
|
|
19
|
+
};
|
|
20
|
+
};
|
|
21
|
+
};
|
|
22
|
+
};
|
|
23
|
+
export declare class SazamiRadio extends SazamiComponent<typeof radioConfig> {
|
|
24
|
+
name: string;
|
|
25
|
+
value: string;
|
|
26
|
+
private _handlersInstalled;
|
|
27
|
+
private _checkedSignal;
|
|
28
|
+
private _checkedBindingDispose;
|
|
29
|
+
private _disabledSignal;
|
|
30
|
+
private _disabledBindingDispose;
|
|
31
|
+
private _isReadableBool;
|
|
32
|
+
set checked(value: boolean | Readable<boolean>);
|
|
33
|
+
get checked(): boolean | Readable<boolean>;
|
|
34
|
+
private _setChecked;
|
|
35
|
+
set disabled(value: boolean | Readable<boolean>);
|
|
36
|
+
get disabled(): boolean | Readable<boolean>;
|
|
37
|
+
private _setDisabled;
|
|
38
|
+
private _getIsDisabled;
|
|
39
|
+
private _getIsChecked;
|
|
40
|
+
render(): void;
|
|
41
|
+
private _updateAria;
|
|
42
|
+
private _handleClick;
|
|
43
|
+
private _handleKeydown;
|
|
44
|
+
static get observedAttributes(): string[];
|
|
45
|
+
attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
|
|
46
|
+
disconnectedCallback(): void;
|
|
47
|
+
}
|
|
48
|
+
export {};
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { SazamiComponent } from "./base";
|
|
2
|
+
declare const rowConfig: {
|
|
3
|
+
readonly properties: {
|
|
4
|
+
readonly justify: {
|
|
5
|
+
readonly type: "string";
|
|
6
|
+
readonly reflect: true;
|
|
7
|
+
};
|
|
8
|
+
readonly align: {
|
|
9
|
+
readonly type: "string";
|
|
10
|
+
readonly reflect: true;
|
|
11
|
+
};
|
|
12
|
+
readonly wrap: {
|
|
13
|
+
readonly type: "boolean";
|
|
14
|
+
readonly reflect: true;
|
|
15
|
+
};
|
|
16
|
+
readonly gap: {
|
|
17
|
+
readonly type: "string";
|
|
18
|
+
readonly reflect: true;
|
|
19
|
+
};
|
|
20
|
+
};
|
|
21
|
+
};
|
|
22
|
+
export declare class SazamiRow extends SazamiComponent<typeof rowConfig> {
|
|
23
|
+
justify: string;
|
|
24
|
+
align: string;
|
|
25
|
+
wrap: boolean;
|
|
26
|
+
gap: string;
|
|
27
|
+
render(): void;
|
|
28
|
+
}
|
|
29
|
+
export {};
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { SazamiComponent } from "./base";
|
|
2
|
+
declare const sectionConfig: {
|
|
3
|
+
readonly properties: {
|
|
4
|
+
readonly layout: {
|
|
5
|
+
readonly type: "string";
|
|
6
|
+
readonly reflect: true;
|
|
7
|
+
};
|
|
8
|
+
readonly align: {
|
|
9
|
+
readonly type: "string";
|
|
10
|
+
readonly reflect: true;
|
|
11
|
+
};
|
|
12
|
+
readonly gap: {
|
|
13
|
+
readonly type: "string";
|
|
14
|
+
readonly reflect: true;
|
|
15
|
+
};
|
|
16
|
+
readonly "center-point": {
|
|
17
|
+
readonly type: "boolean";
|
|
18
|
+
readonly reflect: false;
|
|
19
|
+
};
|
|
20
|
+
};
|
|
21
|
+
};
|
|
22
|
+
export declare class SazamiSection extends SazamiComponent<typeof sectionConfig> {
|
|
23
|
+
layout: string;
|
|
24
|
+
align: string;
|
|
25
|
+
gap: string;
|
|
26
|
+
"center-point": boolean;
|
|
27
|
+
private _resizeObserver?;
|
|
28
|
+
private _boundComputeAndSetCenter;
|
|
29
|
+
private _slot?;
|
|
30
|
+
private _computeAndSetCenter;
|
|
31
|
+
private _attachSlotListener;
|
|
32
|
+
connectedCallback(): void;
|
|
33
|
+
private _setupResizeObserver;
|
|
34
|
+
disconnectedCallback(): void;
|
|
35
|
+
render(): void;
|
|
36
|
+
static get observedAttributes(): string[];
|
|
37
|
+
attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
|
|
38
|
+
}
|
|
39
|
+
export {};
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { SazamiComponent } from "./base";
|
|
2
|
+
import { type Readable } from "@nisoku/sairin";
|
|
3
|
+
declare const selectConfig: {
|
|
4
|
+
readonly properties: {
|
|
5
|
+
readonly placeholder: {
|
|
6
|
+
readonly type: "string";
|
|
7
|
+
readonly reflect: true;
|
|
8
|
+
};
|
|
9
|
+
readonly open: {
|
|
10
|
+
readonly type: "boolean";
|
|
11
|
+
readonly reflect: true;
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
readonly events: {
|
|
15
|
+
readonly change: {
|
|
16
|
+
readonly name: "saz-change";
|
|
17
|
+
readonly detail: {
|
|
18
|
+
readonly value: "value";
|
|
19
|
+
};
|
|
20
|
+
};
|
|
21
|
+
};
|
|
22
|
+
readonly binds: {
|
|
23
|
+
readonly value: "attribute";
|
|
24
|
+
readonly disabled: "attribute";
|
|
25
|
+
};
|
|
26
|
+
};
|
|
27
|
+
export declare class SazamiSelect extends SazamiComponent<typeof selectConfig> {
|
|
28
|
+
open: boolean;
|
|
29
|
+
private _options;
|
|
30
|
+
private _valueSignal;
|
|
31
|
+
private _valueEffectDisposer;
|
|
32
|
+
private _valueBindingInitialized;
|
|
33
|
+
private _disabledSignal;
|
|
34
|
+
private _disabledEffectDisposer;
|
|
35
|
+
private _handleDocumentClick;
|
|
36
|
+
private _isReadableStr;
|
|
37
|
+
private _isReadableBool;
|
|
38
|
+
set value(valueOrSignal: string | Readable<string>);
|
|
39
|
+
get value(): string | Readable<string>;
|
|
40
|
+
private _getValue;
|
|
41
|
+
private _setupValueBinding;
|
|
42
|
+
set disabled(value: boolean | Readable<boolean>);
|
|
43
|
+
get disabled(): boolean | Readable<boolean>;
|
|
44
|
+
private _setDisabled;
|
|
45
|
+
private _getIsDisabled;
|
|
46
|
+
connectedCallback(): void;
|
|
47
|
+
disconnectedCallback(): void;
|
|
48
|
+
render(): void;
|
|
49
|
+
private _wireHandlers;
|
|
50
|
+
private toggleOpen;
|
|
51
|
+
private _navigateOption;
|
|
52
|
+
private _updateSelectedState;
|
|
53
|
+
private _updateDisplay;
|
|
54
|
+
private _updateTabIndex;
|
|
55
|
+
static get observedAttributes(): string[];
|
|
56
|
+
attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
|
|
57
|
+
}
|
|
58
|
+
export {};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export declare function baseStyles(extra?: string): string;
|
|
2
|
+
export declare const LAYOUT_FLEX = "\n:host {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n";
|
|
3
|
+
export declare const GAP_RULES = "\n:host([gap=\"xsmall\"]) { gap: var(--saz-space-xsmall); }\n:host([gap=\"tiny\"]) { gap: var(--saz-space-tiny); }\n:host([gap=\"small\"]) { gap: var(--saz-space-small); }\n:host([gap=\"medium\"]) { gap: var(--saz-space-medium); }\n:host([gap=\"large\"]) { gap: var(--saz-space-large); }\n:host([gap=\"xlarge\"]) { gap: var(--saz-space-xlarge); }\n";
|
|
4
|
+
export declare const SIZE_RULES = "\n:host([size=\"xsmall\"]) { font-size: var(--saz-text-size-xsmall); }\n:host([size=\"tiny\"]) { font-size: var(--saz-text-size-tiny); }\n:host([size=\"small\"]) { font-size: var(--saz-text-size-small); }\n:host([size=\"medium\"]) { font-size: var(--saz-text-size-medium); }\n:host([size=\"large\"]) { font-size: var(--saz-text-size-large); }\n:host([size=\"xlarge\"]) { font-size: var(--saz-text-size-xlarge); }\n";
|
|
5
|
+
export declare const SIZE_PADDING_RULES = "\n:host([size=\"xsmall\"]) { padding: var(--saz-space-xsmall) var(--saz-space-tiny); }\n:host([size=\"tiny\"]) { padding: var(--saz-space-tiny) var(--saz-space-small); }\n:host([size=\"small\"]) { padding: var(--saz-space-tiny) var(--saz-space-small); }\n:host([size=\"medium\"]) { padding: var(--saz-space-small) var(--saz-space-medium); }\n:host([size=\"large\"]) { padding: var(--saz-space-medium) var(--saz-space-large); min-width: 120px; width: auto; }\n:host([size=\"xlarge\"]) { padding: var(--saz-space-large) var(--saz-space-xlarge); min-width: 160px; width: auto; }\n";
|
|
6
|
+
export declare const VARIANT_BG_RULES = "\n:host([variant=\"accent\"]) { background: var(--saz-color-accent); color: var(--saz-color-on-accent); border-color: transparent; }\n:host([variant=\"primary\"]) { background: var(--saz-color-primary); color: var(--saz-color-on-primary); border-color: transparent; }\n:host([variant=\"secondary\"]) { background: transparent; color: var(--saz-color-text); border-color: var(--saz-color-border); }\n:host([variant=\"danger\"]) { background: var(--saz-color-danger); color: var(--saz-color-on-danger); border-color: transparent; }\n:host([variant=\"success\"]) { background: var(--saz-color-success); color: var(--saz-color-on-success); border-color: transparent; }\n:host([variant=\"warning\"]) { background: #fef3c7; color: #92400e; border-color: transparent; }\n:host([variant=\"dim\"]) { background: transparent; color: var(--saz-color-text-dim); border-color: transparent; }\n:host([variant=\"dim\"]:hover) { color: var(--saz-color-text); }\n";
|
|
7
|
+
export declare const VARIANT_TEXT_RULES = "\n:host([variant=\"accent\"]) { color: var(--saz-color-accent); }\n:host([variant=\"primary\"]) { color: var(--saz-color-primary); }\n:host([variant=\"secondary\"]) { color: var(--saz-color-secondary); }\n:host([variant=\"danger\"]) { color: var(--saz-color-danger); }\n:host([variant=\"success\"]) { color: var(--saz-color-success); }\n:host([variant=\"dim\"]) { color: var(--saz-color-text-dim); }\n:host([variant=\"dimmer\"]) { color: var(--saz-color-text-dimmer); }\n";
|
|
8
|
+
export declare const SHAPE_RULES = "\n:host([shape=\"round\"]) { border-radius: var(--saz-radius-round); }\n:host([shape=\"pill\"]) { border-radius: var(--saz-radius-round); }\n:host([shape=\"square\"]) { border-radius: var(--saz-radius-none); }\n:host([shape=\"rounded\"]) { border-radius: var(--saz-radius-soft); }\n:host([shape=\"circle\"]) { border-radius: 50%; }\n";
|
|
9
|
+
export declare const STATE_DISABLED = "\n:host([disabled]) {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n}\n";
|
|
10
|
+
export declare const STATE_LOADING = "\n:host([loading]) {\n opacity: 0.7;\n cursor: wait;\n pointer-events: none;\n}\n";
|
|
11
|
+
export declare const STATE_ACTIVE = "\n:host([active]),\n:host([checked]) {\n filter: brightness(0.9);\n}\n";
|
|
12
|
+
export declare const INTERACTIVE_FOCUS = "\n:host(:focus-visible) {\n outline: 2px solid var(--saz-color-primary);\n outline-offset: 2px;\n}\n";
|
|
13
|
+
export declare const INTERACTIVE_HOVER = "\n:host(:hover) {\n filter: brightness(1.05);\n}\n:host(:active) {\n transform: scale(0.97);\n}\n";
|
|
14
|
+
export declare const TYPO_WEIGHT = "\n:host([weight=\"light\"]) { font-weight: var(--saz-text-weight-light); }\n:host([weight=\"normal\"]) { font-weight: var(--saz-text-weight-normal); }\n:host([weight=\"medium\"]) { font-weight: var(--saz-text-weight-medium); }\n:host([weight=\"bold\"]) { font-weight: var(--saz-text-weight-bold); }\n";
|
|
15
|
+
export declare const TYPO_TONE = "\n:host([tone=\"dim\"]) { color: var(--saz-color-text-dim); }\n:host([tone=\"dimmer\"]) { color: var(--saz-color-text-dimmer); }\n";
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { SazamiComponent } from "./base";
|
|
2
|
+
import { type Readable } from "@nisoku/sairin";
|
|
3
|
+
declare const sliderConfig: {
|
|
4
|
+
readonly properties: {
|
|
5
|
+
readonly min: {
|
|
6
|
+
readonly type: "number";
|
|
7
|
+
readonly reflect: false;
|
|
8
|
+
readonly default: 0;
|
|
9
|
+
};
|
|
10
|
+
readonly max: {
|
|
11
|
+
readonly type: "number";
|
|
12
|
+
readonly reflect: false;
|
|
13
|
+
readonly default: 100;
|
|
14
|
+
};
|
|
15
|
+
readonly step: {
|
|
16
|
+
readonly type: "number";
|
|
17
|
+
readonly reflect: false;
|
|
18
|
+
readonly default: 1;
|
|
19
|
+
};
|
|
20
|
+
readonly size: {
|
|
21
|
+
readonly type: "string";
|
|
22
|
+
readonly reflect: false;
|
|
23
|
+
readonly default: "medium";
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
readonly events: {
|
|
27
|
+
readonly input: {
|
|
28
|
+
readonly name: "saz-input";
|
|
29
|
+
readonly detail: {
|
|
30
|
+
readonly value: "value";
|
|
31
|
+
};
|
|
32
|
+
};
|
|
33
|
+
};
|
|
34
|
+
};
|
|
35
|
+
export declare class SazamiSlider extends SazamiComponent<typeof sliderConfig> {
|
|
36
|
+
min: number;
|
|
37
|
+
max: number;
|
|
38
|
+
step: number;
|
|
39
|
+
size: string;
|
|
40
|
+
private _valueSignal;
|
|
41
|
+
private _disabledSignal;
|
|
42
|
+
private _sliderElement;
|
|
43
|
+
private _filledElement;
|
|
44
|
+
private _rangeMin;
|
|
45
|
+
private _rangeMax;
|
|
46
|
+
private _isReadableNum;
|
|
47
|
+
private _isReadableBool;
|
|
48
|
+
set value(valueOrSignal: number | Readable<number>);
|
|
49
|
+
get value(): number | Readable<number>;
|
|
50
|
+
set disabled(value: boolean | Readable<boolean>);
|
|
51
|
+
get disabled(): boolean | Readable<boolean>;
|
|
52
|
+
private _setDisabled;
|
|
53
|
+
private _getIsDisabled;
|
|
54
|
+
private _setupValueBinding;
|
|
55
|
+
private _updateSliderValue;
|
|
56
|
+
render(): void;
|
|
57
|
+
static get observedAttributes(): string[];
|
|
58
|
+
attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
|
|
59
|
+
}
|
|
60
|
+
export {};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { SazamiComponent } from "./base";
|
|
2
|
+
declare const spacerConfig: {
|
|
3
|
+
readonly properties: {
|
|
4
|
+
readonly size: {
|
|
5
|
+
readonly type: "string";
|
|
6
|
+
readonly reflect: false;
|
|
7
|
+
};
|
|
8
|
+
};
|
|
9
|
+
};
|
|
10
|
+
export declare class SazamiSpacer extends SazamiComponent<typeof spacerConfig> {
|
|
11
|
+
size: string;
|
|
12
|
+
render(): void;
|
|
13
|
+
}
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { SazamiComponent } from "./base";
|
|
2
|
+
import { type Readable } from "@nisoku/sairin";
|
|
3
|
+
declare const spinnerConfig: {
|
|
4
|
+
readonly properties: {
|
|
5
|
+
readonly size: {
|
|
6
|
+
readonly type: "string";
|
|
7
|
+
readonly reflect: true;
|
|
8
|
+
};
|
|
9
|
+
readonly variant: {
|
|
10
|
+
readonly type: "string";
|
|
11
|
+
readonly reflect: true;
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
export declare class SazamiSpinner extends SazamiComponent<typeof spinnerConfig> {
|
|
16
|
+
private _labelSignal;
|
|
17
|
+
private _visibleSignal;
|
|
18
|
+
private _labelElement;
|
|
19
|
+
private _isReadableStr;
|
|
20
|
+
private _isReadableBool;
|
|
21
|
+
set label(value: string | Readable<string>);
|
|
22
|
+
get label(): string | Readable<string>;
|
|
23
|
+
set visible(value: boolean | Readable<boolean>);
|
|
24
|
+
get visible(): boolean | Readable<boolean>;
|
|
25
|
+
private _updateLabel;
|
|
26
|
+
private _setupLabelBinding;
|
|
27
|
+
render(): void;
|
|
28
|
+
}
|
|
29
|
+
export {};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { SazamiComponent } from "./base";
|
|
2
|
+
declare const stackConfig: {
|
|
3
|
+
readonly properties: {
|
|
4
|
+
readonly align: {
|
|
5
|
+
readonly type: "string";
|
|
6
|
+
readonly reflect: false;
|
|
7
|
+
};
|
|
8
|
+
readonly gap: {
|
|
9
|
+
readonly type: "string";
|
|
10
|
+
readonly reflect: false;
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
export declare class SazamiStack extends SazamiComponent<typeof stackConfig> {
|
|
15
|
+
align: string;
|
|
16
|
+
gap: string;
|
|
17
|
+
render(): void;
|
|
18
|
+
}
|
|
19
|
+
export {};
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { SazamiComponent } from "./base";
|
|
2
|
+
import { type Readable } from "@nisoku/sairin";
|
|
3
|
+
declare const switchConfig: {
|
|
4
|
+
readonly properties: {
|
|
5
|
+
readonly checked: {
|
|
6
|
+
readonly type: "boolean";
|
|
7
|
+
readonly reflect: true;
|
|
8
|
+
};
|
|
9
|
+
readonly disabled: {
|
|
10
|
+
readonly type: "boolean";
|
|
11
|
+
readonly reflect: true;
|
|
12
|
+
};
|
|
13
|
+
readonly variant: {
|
|
14
|
+
readonly type: "string";
|
|
15
|
+
readonly reflect: false;
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
readonly events: {
|
|
19
|
+
readonly change: {
|
|
20
|
+
readonly name: "saz-change";
|
|
21
|
+
readonly detail: {
|
|
22
|
+
readonly checked: "checked";
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
readonly binds: {
|
|
27
|
+
readonly checked: "attribute";
|
|
28
|
+
readonly disabled: "attribute";
|
|
29
|
+
};
|
|
30
|
+
};
|
|
31
|
+
export declare class SazamiSwitch extends SazamiComponent<typeof switchConfig> {
|
|
32
|
+
variant: string;
|
|
33
|
+
private _checkedSignal;
|
|
34
|
+
private _checkedBindingDispose;
|
|
35
|
+
private _disabledSignal;
|
|
36
|
+
private _disabledBindingDispose;
|
|
37
|
+
private _isReadableBool;
|
|
38
|
+
set checked(value: boolean | Readable<boolean>);
|
|
39
|
+
get checked(): boolean | Readable<boolean>;
|
|
40
|
+
private _setChecked;
|
|
41
|
+
set disabled(value: boolean | Readable<boolean>);
|
|
42
|
+
get disabled(): boolean | Readable<boolean>;
|
|
43
|
+
private _setDisabled;
|
|
44
|
+
private _getIsDisabled;
|
|
45
|
+
private _getIsChecked;
|
|
46
|
+
render(): void;
|
|
47
|
+
private _updateAria;
|
|
48
|
+
private _handleClick;
|
|
49
|
+
private _handleKeydown;
|
|
50
|
+
static get observedAttributes(): string[];
|
|
51
|
+
attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
|
|
52
|
+
}
|
|
53
|
+
export {};
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { SazamiComponent } from "./base";
|
|
2
|
+
import { Signal } from "@nisoku/sairin";
|
|
3
|
+
declare const tabsConfig: {
|
|
4
|
+
readonly properties: {
|
|
5
|
+
readonly active: {
|
|
6
|
+
readonly type: "string";
|
|
7
|
+
readonly reflect: true;
|
|
8
|
+
};
|
|
9
|
+
};
|
|
10
|
+
readonly events: {
|
|
11
|
+
readonly change: {
|
|
12
|
+
readonly name: "saz-change";
|
|
13
|
+
readonly detail: {
|
|
14
|
+
readonly activeIndex: "active";
|
|
15
|
+
};
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
};
|
|
19
|
+
export declare class SazamiTabs extends SazamiComponent<typeof tabsConfig> {
|
|
20
|
+
active: string;
|
|
21
|
+
activeSignal?: Signal<string>;
|
|
22
|
+
private _tabs;
|
|
23
|
+
private _panelElements;
|
|
24
|
+
private _handlersAdded;
|
|
25
|
+
render(): void;
|
|
26
|
+
private _activateTab;
|
|
27
|
+
static get observedAttributes(): string[];
|
|
28
|
+
attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
|
|
29
|
+
}
|
|
30
|
+
export {};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { SazamiComponent } from "./base";
|
|
2
|
+
import { type Readable } from "@nisoku/sairin";
|
|
3
|
+
declare const tagConfig: {
|
|
4
|
+
readonly observedAttributes: readonly ["content"];
|
|
5
|
+
readonly properties: {
|
|
6
|
+
readonly variant: {
|
|
7
|
+
readonly type: "string";
|
|
8
|
+
readonly reflect: true;
|
|
9
|
+
};
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
export declare class SazamiTag extends SazamiComponent<typeof tagConfig> {
|
|
13
|
+
variant: string;
|
|
14
|
+
private _contentSignal;
|
|
15
|
+
private _contentValue;
|
|
16
|
+
private _textNode;
|
|
17
|
+
private _isReadableStr;
|
|
18
|
+
set content(value: string | Readable<string>);
|
|
19
|
+
get content(): string | Readable<string>;
|
|
20
|
+
private _updateContent;
|
|
21
|
+
private _setupContentBinding;
|
|
22
|
+
render(): void;
|
|
23
|
+
attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
|
|
24
|
+
}
|
|
25
|
+
export {};
|