@transcodes/ui-components 0.4.2 → 0.4.3
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/CHANGELOG.md +6 -0
- package/package.json +2 -2
- package/dist/controllers/animation.controller.d.ts +0 -48
- package/dist/controllers/animation.controller.d.ts.map +0 -1
- package/dist/controllers/animation.controller.js +0 -32
- package/dist/controllers/base.controller.d.ts +0 -14
- package/dist/controllers/base.controller.d.ts.map +0 -1
- package/dist/controllers/base.controller.js +0 -8
- package/dist/controllers/history.controller.d.ts +0 -34
- package/dist/controllers/history.controller.d.ts.map +0 -1
- package/dist/controllers/history.controller.js +0 -26
- package/dist/controllers/index.d.ts +0 -9
- package/dist/controllers/index.d.ts.map +0 -1
- package/dist/controllers/index.js +0 -16
- package/dist/controllers/loading.controller.d.ts +0 -36
- package/dist/controllers/loading.controller.d.ts.map +0 -1
- package/dist/controllers/loading.controller.js +0 -27
- package/dist/controllers/match-media.controller.d.ts +0 -32
- package/dist/controllers/match-media.controller.d.ts.map +0 -1
- package/dist/controllers/match-media.controller.js +0 -20
- package/dist/controllers/message-bus.controller.d.ts +0 -45
- package/dist/controllers/message-bus.controller.d.ts.map +0 -1
- package/dist/controllers/message-bus.controller.js +0 -45
- package/dist/controllers/storage.controller.d.ts +0 -40
- package/dist/controllers/storage.controller.d.ts.map +0 -1
- package/dist/controllers/storage.controller.js +0 -40
- package/dist/index.d.ts +0 -5
- package/dist/index.d.ts.map +0 -1
- package/dist/index.js +0 -64
- package/dist/primitives/index.d.ts +0 -22
- package/dist/primitives/index.d.ts.map +0 -1
- package/dist/primitives/index.js +0 -44
- package/dist/primitives/tc-box.d.ts +0 -20
- package/dist/primitives/tc-box.d.ts.map +0 -1
- package/dist/primitives/tc-box.js +0 -38
- package/dist/primitives/tc-button.d.ts +0 -26
- package/dist/primitives/tc-button.d.ts.map +0 -1
- package/dist/primitives/tc-button.js +0 -168
- package/dist/primitives/tc-callout.d.ts +0 -24
- package/dist/primitives/tc-callout.d.ts.map +0 -1
- package/dist/primitives/tc-callout.js +0 -91
- package/dist/primitives/tc-card.d.ts +0 -21
- package/dist/primitives/tc-card.d.ts.map +0 -1
- package/dist/primitives/tc-card.js +0 -77
- package/dist/primitives/tc-chip.d.ts +0 -21
- package/dist/primitives/tc-chip.d.ts.map +0 -1
- package/dist/primitives/tc-chip.js +0 -90
- package/dist/primitives/tc-container.d.ts +0 -21
- package/dist/primitives/tc-container.d.ts.map +0 -1
- package/dist/primitives/tc-container.js +0 -64
- package/dist/primitives/tc-divider.d.ts +0 -22
- package/dist/primitives/tc-divider.d.ts.map +0 -1
- package/dist/primitives/tc-divider.js +0 -78
- package/dist/primitives/tc-error-message.d.ts +0 -25
- package/dist/primitives/tc-error-message.d.ts.map +0 -1
- package/dist/primitives/tc-error-message.js +0 -81
- package/dist/primitives/tc-form-header.d.ts +0 -26
- package/dist/primitives/tc-form-header.d.ts.map +0 -1
- package/dist/primitives/tc-form-header.js +0 -122
- package/dist/primitives/tc-icon.d.ts +0 -20
- package/dist/primitives/tc-icon.d.ts.map +0 -1
- package/dist/primitives/tc-icon.js +0 -95
- package/dist/primitives/tc-input-with-chip.d.ts +0 -40
- package/dist/primitives/tc-input-with-chip.d.ts.map +0 -1
- package/dist/primitives/tc-input-with-chip.js +0 -250
- package/dist/primitives/tc-input.d.ts +0 -46
- package/dist/primitives/tc-input.d.ts.map +0 -1
- package/dist/primitives/tc-input.js +0 -264
- package/dist/primitives/tc-item-button.d.ts +0 -29
- package/dist/primitives/tc-item-button.d.ts.map +0 -1
- package/dist/primitives/tc-item-button.js +0 -163
- package/dist/primitives/tc-item.d.ts +0 -24
- package/dist/primitives/tc-item.d.ts.map +0 -1
- package/dist/primitives/tc-item.js +0 -88
- package/dist/primitives/tc-otp-input.d.ts +0 -40
- package/dist/primitives/tc-otp-input.d.ts.map +0 -1
- package/dist/primitives/tc-otp-input.js +0 -236
- package/dist/primitives/tc-page-decoration.d.ts +0 -21
- package/dist/primitives/tc-page-decoration.d.ts.map +0 -1
- package/dist/primitives/tc-page-decoration.js +0 -130
- package/dist/primitives/tc-section.d.ts +0 -19
- package/dist/primitives/tc-section.d.ts.map +0 -1
- package/dist/primitives/tc-section.js +0 -47
- package/dist/primitives/tc-spinner.d.ts +0 -21
- package/dist/primitives/tc-spinner.d.ts.map +0 -1
- package/dist/primitives/tc-spinner.js +0 -90
- package/dist/primitives/tc-symbol.d.ts +0 -19
- package/dist/primitives/tc-symbol.d.ts.map +0 -1
- package/dist/primitives/tc-symbol.js +0 -54
- package/dist/primitives/tc-text.d.ts +0 -32
- package/dist/primitives/tc-text.d.ts.map +0 -1
- package/dist/primitives/tc-text.js +0 -145
- package/dist/primitives/tc-toast.d.ts +0 -36
- package/dist/primitives/tc-toast.d.ts.map +0 -1
- package/dist/primitives/tc-toast.js +0 -199
- package/dist/screens/index.d.ts +0 -4
- package/dist/screens/index.d.ts.map +0 -1
- package/dist/screens/index.js +0 -8
- package/dist/screens/tc-error-screen.d.ts +0 -34
- package/dist/screens/tc-error-screen.d.ts.map +0 -1
- package/dist/screens/tc-error-screen.js +0 -178
- package/dist/screens/tc-loading-screen.d.ts +0 -25
- package/dist/screens/tc-loading-screen.d.ts.map +0 -1
- package/dist/screens/tc-loading-screen.js +0 -86
- package/dist/screens/tc-success-screen.d.ts +0 -33
- package/dist/screens/tc-success-screen.d.ts.map +0 -1
- package/dist/screens/tc-success-screen.js +0 -202
- package/dist/styles/shared.d.ts +0 -20
- package/dist/styles/shared.d.ts.map +0 -1
- package/dist/styles/shared.js +0 -7
- package/dist/types.d.ts +0 -34
- package/dist/types.d.ts.map +0 -1
package/dist/primitives/index.js
DELETED
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import { TcBox as t } from "./tc-box.js";
|
|
2
|
-
import { TcButton as p } from "./tc-button.js";
|
|
3
|
-
import { TcCallout as c } from "./tc-callout.js";
|
|
4
|
-
import { TcCard as T } from "./tc-card.js";
|
|
5
|
-
import { TcChip as n } from "./tc-chip.js";
|
|
6
|
-
import { TcContainer as a } from "./tc-container.js";
|
|
7
|
-
import { TcDivider as I } from "./tc-divider.js";
|
|
8
|
-
import { TcErrorMessage as d } from "./tc-error-message.js";
|
|
9
|
-
import { TcFormHeader as l } from "./tc-form-header.js";
|
|
10
|
-
import { TcIcon as B } from "./tc-icon.js";
|
|
11
|
-
import { TcInput as g } from "./tc-input.js";
|
|
12
|
-
import { TcInputWithChip as b } from "./tc-input-with-chip.js";
|
|
13
|
-
import { TcItem as y } from "./tc-item.js";
|
|
14
|
-
import { TcItemButton as F } from "./tc-item-button.js";
|
|
15
|
-
import { TcOtpInput as M } from "./tc-otp-input.js";
|
|
16
|
-
import { TcPageDecoration as P } from "./tc-page-decoration.js";
|
|
17
|
-
import { TcSection as j } from "./tc-section.js";
|
|
18
|
-
import { TcSpinner as q } from "./tc-spinner.js";
|
|
19
|
-
import { TcSymbol as z } from "./tc-symbol.js";
|
|
20
|
-
import { TcText as G } from "./tc-text.js";
|
|
21
|
-
import { TcToast as K } from "./tc-toast.js";
|
|
22
|
-
export {
|
|
23
|
-
t as TcBox,
|
|
24
|
-
p as TcButton,
|
|
25
|
-
c as TcCallout,
|
|
26
|
-
T as TcCard,
|
|
27
|
-
n as TcChip,
|
|
28
|
-
a as TcContainer,
|
|
29
|
-
I as TcDivider,
|
|
30
|
-
d as TcErrorMessage,
|
|
31
|
-
l as TcFormHeader,
|
|
32
|
-
B as TcIcon,
|
|
33
|
-
g as TcInput,
|
|
34
|
-
b as TcInputWithChip,
|
|
35
|
-
y as TcItem,
|
|
36
|
-
F as TcItemButton,
|
|
37
|
-
M as TcOtpInput,
|
|
38
|
-
P as TcPageDecoration,
|
|
39
|
-
j as TcSection,
|
|
40
|
-
q as TcSpinner,
|
|
41
|
-
z as TcSymbol,
|
|
42
|
-
G as TcText,
|
|
43
|
-
K as TcToast
|
|
44
|
-
};
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { LitElement } from 'lit';
|
|
2
|
-
import { SxProps } from '../types.js';
|
|
3
|
-
/**
|
|
4
|
-
* A simple container component without default flex layout.
|
|
5
|
-
* Use for wrapping content with custom styles.
|
|
6
|
-
*
|
|
7
|
-
* @slot - Content to display inside the box
|
|
8
|
-
* @csspart box - The container element
|
|
9
|
-
*/
|
|
10
|
-
export declare class TcBox extends LitElement {
|
|
11
|
-
sx: SxProps;
|
|
12
|
-
static styles: import('lit').CSSResult;
|
|
13
|
-
render(): import('lit').TemplateResult<1>;
|
|
14
|
-
}
|
|
15
|
-
declare global {
|
|
16
|
-
interface HTMLElementTagNameMap {
|
|
17
|
-
'tc-box': TcBox;
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
//# sourceMappingURL=tc-box.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tc-box.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-box.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;;GAMG;AACH,qBACa,KAAM,SAAQ,UAAU;IACP,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,0BAQpB;IAEO,MAAM;CAOhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,KAAK,CAAC;KACjB;CACF"}
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import { css as n, LitElement as i, html as x } from "lit";
|
|
2
|
-
import { property as a, customElement as b } from "lit/decorators.js";
|
|
3
|
-
import { styleMap as f } from "lit/directives/style-map.js";
|
|
4
|
-
var v = Object.defineProperty, y = Object.getOwnPropertyDescriptor, m = (c, s, o, e) => {
|
|
5
|
-
for (var t = e > 1 ? void 0 : e ? y(s, o) : s, p = c.length - 1, l; p >= 0; p--)
|
|
6
|
-
(l = c[p]) && (t = (e ? l(s, o, t) : l(t)) || t);
|
|
7
|
-
return e && t && v(s, o, t), t;
|
|
8
|
-
};
|
|
9
|
-
let r = class extends i {
|
|
10
|
-
constructor() {
|
|
11
|
-
super(...arguments), this.sx = {};
|
|
12
|
-
}
|
|
13
|
-
render() {
|
|
14
|
-
return x`
|
|
15
|
-
<div part="box" class="box" style=${f(this.sx)}>
|
|
16
|
-
<slot></slot>
|
|
17
|
-
</div>
|
|
18
|
-
`;
|
|
19
|
-
}
|
|
20
|
-
};
|
|
21
|
-
r.styles = n`
|
|
22
|
-
:host {
|
|
23
|
-
display: contents;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.box {
|
|
27
|
-
display: block;
|
|
28
|
-
}
|
|
29
|
-
`;
|
|
30
|
-
m([
|
|
31
|
-
a({ type: Object })
|
|
32
|
-
], r.prototype, "sx", 2);
|
|
33
|
-
r = m([
|
|
34
|
-
b("tc-box")
|
|
35
|
-
], r);
|
|
36
|
-
export {
|
|
37
|
-
r as TcBox
|
|
38
|
-
};
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { LitElement } from 'lit';
|
|
2
|
-
import { SxProps } from '../types.js';
|
|
3
|
-
/**
|
|
4
|
-
* Primary button component with loading states.
|
|
5
|
-
* Uses design-tokens component classes (.button, .button-primary, etc.)
|
|
6
|
-
*
|
|
7
|
-
* @fires tc-click - Fired when button is clicked
|
|
8
|
-
* @slot - Button content
|
|
9
|
-
* @csspart button - The button element
|
|
10
|
-
* @csspart spinner - The loading spinner
|
|
11
|
-
*/
|
|
12
|
-
export declare class TcButton extends LitElement {
|
|
13
|
-
disabled: boolean;
|
|
14
|
-
loading: boolean;
|
|
15
|
-
variant: 'primary' | 'secondary' | 'success';
|
|
16
|
-
sx: SxProps;
|
|
17
|
-
static styles: import('lit').CSSResult[];
|
|
18
|
-
render(): import('lit').TemplateResult<1>;
|
|
19
|
-
private handleClick;
|
|
20
|
-
}
|
|
21
|
-
declare global {
|
|
22
|
-
interface HTMLElementTagNameMap {
|
|
23
|
-
'tc-button': TcButton;
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
//# sourceMappingURL=tc-button.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tc-button.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;;;;GAQG;AACH,qBACa,QAAS,SAAQ,UAAU;IACT,QAAQ,UAAS;IACjB,OAAO,UAAS;IACjB,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAC5D;IACgB,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,4BAoGpB;IAEO,MAAM;IA4Bf,OAAO,CAAC,WAAW;CAWpB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
|
|
@@ -1,168 +0,0 @@
|
|
|
1
|
-
import { css as p, LitElement as u, html as l } from "lit";
|
|
2
|
-
import { property as r, customElement as b } from "lit/decorators.js";
|
|
3
|
-
import { classMap as m } from "lit/directives/class-map.js";
|
|
4
|
-
import { styleMap as v } from "lit/directives/style-map.js";
|
|
5
|
-
import { sharedStyles as y } from "../styles/shared.js";
|
|
6
|
-
var h = Object.defineProperty, f = Object.getOwnPropertyDescriptor, o = (n, i, s, a) => {
|
|
7
|
-
for (var t = a > 1 ? void 0 : a ? f(i, s) : i, d = n.length - 1, c; d >= 0; d--)
|
|
8
|
-
(c = n[d]) && (t = (a ? c(i, s, t) : c(t)) || t);
|
|
9
|
-
return a && t && h(i, s, t), t;
|
|
10
|
-
};
|
|
11
|
-
let e = class extends u {
|
|
12
|
-
constructor() {
|
|
13
|
-
super(...arguments), this.disabled = !1, this.loading = !1, this.variant = "primary", this.sx = {};
|
|
14
|
-
}
|
|
15
|
-
render() {
|
|
16
|
-
const n = {
|
|
17
|
-
button: !0,
|
|
18
|
-
"button-ink": this.variant !== "secondary",
|
|
19
|
-
"button-primary": this.variant === "primary",
|
|
20
|
-
"button-secondary": this.variant === "secondary",
|
|
21
|
-
"button-success": this.variant === "success",
|
|
22
|
-
"button--loading": this.loading
|
|
23
|
-
};
|
|
24
|
-
return l`
|
|
25
|
-
<button
|
|
26
|
-
part="button"
|
|
27
|
-
class=${m(n)}
|
|
28
|
-
style=${v(this.sx)}
|
|
29
|
-
?disabled=${this.disabled || this.loading}
|
|
30
|
-
type="button"
|
|
31
|
-
@click=${this.handleClick}
|
|
32
|
-
>
|
|
33
|
-
<span class="button-content">
|
|
34
|
-
${this.loading ? l`<div part="spinner" class="button-spinner"></div>` : ""}
|
|
35
|
-
<slot></slot>
|
|
36
|
-
</span>
|
|
37
|
-
</button>
|
|
38
|
-
`;
|
|
39
|
-
}
|
|
40
|
-
handleClick(n) {
|
|
41
|
-
this.disabled || this.loading || this.dispatchEvent(
|
|
42
|
-
new CustomEvent("tc-click", {
|
|
43
|
-
bubbles: !0,
|
|
44
|
-
composed: !0,
|
|
45
|
-
detail: { originalEvent: n }
|
|
46
|
-
})
|
|
47
|
-
);
|
|
48
|
-
}
|
|
49
|
-
};
|
|
50
|
-
e.styles = [
|
|
51
|
-
y,
|
|
52
|
-
p`
|
|
53
|
-
:host {
|
|
54
|
-
display: block;
|
|
55
|
-
width: 100%;
|
|
56
|
-
min-width: 0;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
/* Extend base .button from design-tokens */
|
|
60
|
-
.button {
|
|
61
|
-
position: relative;
|
|
62
|
-
width: 100%;
|
|
63
|
-
display: flex;
|
|
64
|
-
align-items: center;
|
|
65
|
-
justify-content: center;
|
|
66
|
-
gap: var(--space-sm);
|
|
67
|
-
overflow: hidden;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
/* Radial gradient glow overlay for primary/success */
|
|
71
|
-
.button-ink::before {
|
|
72
|
-
content: '';
|
|
73
|
-
position: absolute;
|
|
74
|
-
inset: 0;
|
|
75
|
-
border-radius: inherit;
|
|
76
|
-
background: radial-gradient(
|
|
77
|
-
circle at center,
|
|
78
|
-
transparent 0%,
|
|
79
|
-
var(--overlay-glow-white) 100%
|
|
80
|
-
);
|
|
81
|
-
opacity: var(--opacity-hidden);
|
|
82
|
-
transition: opacity 600ms ease;
|
|
83
|
-
pointer-events: none;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
.button-ink:hover:not(:disabled)::before {
|
|
87
|
-
opacity: 1;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
/* Loading pulse animation */
|
|
91
|
-
.button--loading {
|
|
92
|
-
animation: pulse 1s ease-in-out infinite;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
@keyframes pulse {
|
|
96
|
-
0%,
|
|
97
|
-
100% {
|
|
98
|
-
opacity: var(--opacity-visible);
|
|
99
|
-
}
|
|
100
|
-
50% {
|
|
101
|
-
opacity: var(--opacity-loading);
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
/* Active states - design-tokens doesn't include these */
|
|
106
|
-
.button-primary:active:not(:disabled) {
|
|
107
|
-
background: var(--accent-primary-pressed);
|
|
108
|
-
transform: translateY(0);
|
|
109
|
-
box-shadow: none;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
.button-success:active:not(:disabled) {
|
|
113
|
-
background: var(--accent-success-pressed);
|
|
114
|
-
transform: translateY(0);
|
|
115
|
-
box-shadow: none;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
.button-secondary:active:not(:disabled) {
|
|
119
|
-
background: var(--alpha-primary08);
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
/* Secondary spinner override */
|
|
123
|
-
.button-secondary .button-spinner {
|
|
124
|
-
border-color: var(--alpha-primary30);
|
|
125
|
-
border-top-color: var(--accent-primary);
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
/* Focus visible state */
|
|
129
|
-
.button:focus-visible {
|
|
130
|
-
outline: var(--size-border-width-thick) solid var(--accent-primary);
|
|
131
|
-
outline-offset: var(--size-border-width-thick);
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
/* Reduced motion */
|
|
135
|
-
@media (prefers-reduced-motion: reduce) {
|
|
136
|
-
.button,
|
|
137
|
-
.button-ink::before {
|
|
138
|
-
transition-duration: 0.01ms !important;
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
.button--loading {
|
|
142
|
-
animation: none;
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
.button-spinner {
|
|
146
|
-
animation-duration: 1.5s;
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
`
|
|
150
|
-
];
|
|
151
|
-
o([
|
|
152
|
-
r({ type: Boolean })
|
|
153
|
-
], e.prototype, "disabled", 2);
|
|
154
|
-
o([
|
|
155
|
-
r({ type: Boolean })
|
|
156
|
-
], e.prototype, "loading", 2);
|
|
157
|
-
o([
|
|
158
|
-
r({ type: String })
|
|
159
|
-
], e.prototype, "variant", 2);
|
|
160
|
-
o([
|
|
161
|
-
r({ type: Object })
|
|
162
|
-
], e.prototype, "sx", 2);
|
|
163
|
-
e = o([
|
|
164
|
-
b("tc-button")
|
|
165
|
-
], e);
|
|
166
|
-
export {
|
|
167
|
-
e as TcButton
|
|
168
|
-
};
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { LitElement } from 'lit';
|
|
2
|
-
import { SxProps } from '../types.js';
|
|
3
|
-
/**
|
|
4
|
-
* A callout/alert component for messages and notices.
|
|
5
|
-
* Uses design-tokens notice classes (.notice, .notice-info, .notice-success, etc.)
|
|
6
|
-
*
|
|
7
|
-
* @slot - Callout content
|
|
8
|
-
* @slot icon - Optional icon slot
|
|
9
|
-
* @csspart callout - The callout container
|
|
10
|
-
* @csspart icon - The icon container
|
|
11
|
-
* @csspart content - The content container
|
|
12
|
-
*/
|
|
13
|
-
export declare class TcCallout extends LitElement {
|
|
14
|
-
variant: 'info' | 'success' | 'warning' | 'error';
|
|
15
|
-
sx: SxProps;
|
|
16
|
-
static styles: import('lit').CSSResult[];
|
|
17
|
-
render(): import('lit').TemplateResult<1>;
|
|
18
|
-
}
|
|
19
|
-
declare global {
|
|
20
|
-
interface HTMLElementTagNameMap {
|
|
21
|
-
'tc-callout': TcCallout;
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
//# sourceMappingURL=tc-callout.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tc-callout.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-callout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;;;;;GASG;AACH,qBACa,SAAU,SAAQ,UAAU;IACX,OAAO,EAC/B,MAAM,GACN,SAAS,GACT,SAAS,GACT,OAAO,CAAU;IACO,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,4BA0CpB;IAEO,MAAM;CAyBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}
|
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
import { css as p, LitElement as m, html as v } from "lit";
|
|
2
|
-
import { property as c, customElement as d } from "lit/decorators.js";
|
|
3
|
-
import { classMap as f } from "lit/directives/class-map.js";
|
|
4
|
-
import { styleMap as u } from "lit/directives/style-map.js";
|
|
5
|
-
import { sharedStyles as y } from "../styles/shared.js";
|
|
6
|
-
var h = Object.defineProperty, g = Object.getOwnPropertyDescriptor, l = (s, e, i, r) => {
|
|
7
|
-
for (var t = r > 1 ? void 0 : r ? g(e, i) : e, n = s.length - 1, a; n >= 0; n--)
|
|
8
|
-
(a = s[n]) && (t = (r ? a(e, i, t) : a(t)) || t);
|
|
9
|
-
return r && t && h(e, i, t), t;
|
|
10
|
-
};
|
|
11
|
-
let o = class extends m {
|
|
12
|
-
constructor() {
|
|
13
|
-
super(...arguments), this.variant = "info", this.sx = {};
|
|
14
|
-
}
|
|
15
|
-
render() {
|
|
16
|
-
const s = this.variant === "error", e = {
|
|
17
|
-
notice: !s,
|
|
18
|
-
"notice-info": this.variant === "info",
|
|
19
|
-
"notice-success": this.variant === "success",
|
|
20
|
-
"notice-warning": this.variant === "warning",
|
|
21
|
-
"error-message": s
|
|
22
|
-
};
|
|
23
|
-
return v`
|
|
24
|
-
<div part="callout" class=${f(e)} style=${u(this.sx)} role="alert">
|
|
25
|
-
<div class="callout-inner">
|
|
26
|
-
<div part="icon" class="callout-icon">
|
|
27
|
-
<slot name="icon"></slot>
|
|
28
|
-
</div>
|
|
29
|
-
<div part="content" class="callout-content">
|
|
30
|
-
<slot></slot>
|
|
31
|
-
</div>
|
|
32
|
-
</div>
|
|
33
|
-
</div>
|
|
34
|
-
`;
|
|
35
|
-
}
|
|
36
|
-
};
|
|
37
|
-
o.styles = [
|
|
38
|
-
y,
|
|
39
|
-
p`
|
|
40
|
-
:host {
|
|
41
|
-
display: block;
|
|
42
|
-
width: 100%;
|
|
43
|
-
min-width: 0;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
/* Override animation from design-tokens for immediate display */
|
|
47
|
-
.notice {
|
|
48
|
-
animation: none;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
/* Error variant uses error-message class from design-tokens */
|
|
52
|
-
.error-message {
|
|
53
|
-
animation: none;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
/* Icon + content layout */
|
|
57
|
-
.callout-inner {
|
|
58
|
-
display: flex;
|
|
59
|
-
align-items: flex-start;
|
|
60
|
-
gap: var(--space-sm);
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
.callout-icon {
|
|
64
|
-
flex-shrink: 0;
|
|
65
|
-
display: flex;
|
|
66
|
-
align-items: center;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
/* Hide icon container when empty */
|
|
70
|
-
.callout-icon:empty {
|
|
71
|
-
display: none;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
.callout-content {
|
|
75
|
-
flex: 1;
|
|
76
|
-
min-width: 0;
|
|
77
|
-
}
|
|
78
|
-
`
|
|
79
|
-
];
|
|
80
|
-
l([
|
|
81
|
-
c({ type: String })
|
|
82
|
-
], o.prototype, "variant", 2);
|
|
83
|
-
l([
|
|
84
|
-
c({ type: Object })
|
|
85
|
-
], o.prototype, "sx", 2);
|
|
86
|
-
o = l([
|
|
87
|
-
d("tc-callout")
|
|
88
|
-
], o);
|
|
89
|
-
export {
|
|
90
|
-
o as TcCallout
|
|
91
|
-
};
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { LitElement } from 'lit';
|
|
2
|
-
import { SxProps } from '../types.js';
|
|
3
|
-
/**
|
|
4
|
-
* Card component with layered shadows and optional inner border effect.
|
|
5
|
-
* Uses design-tokens .card class.
|
|
6
|
-
*
|
|
7
|
-
* @slot - Card content
|
|
8
|
-
* @csspart card - The card container
|
|
9
|
-
*/
|
|
10
|
-
export declare class TcCard extends LitElement {
|
|
11
|
-
noBorder: boolean;
|
|
12
|
-
sx: SxProps;
|
|
13
|
-
static styles: import('lit').CSSResult[];
|
|
14
|
-
render(): import('lit').TemplateResult<1>;
|
|
15
|
-
}
|
|
16
|
-
declare global {
|
|
17
|
-
interface HTMLElementTagNameMap {
|
|
18
|
-
'tc-card': TcCard;
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
//# sourceMappingURL=tc-card.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tc-card.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;;GAMG;AACH,qBACa,MAAO,SAAQ,UAAU;IACiB,QAAQ,UAAS;IAC1C,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,4BAoCpB;IAEO,MAAM;CAchB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}
|
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
import { css as p, LitElement as l, html as f } from "lit";
|
|
2
|
-
import { property as c, customElement as m } from "lit/decorators.js";
|
|
3
|
-
import { classMap as b } from "lit/directives/class-map.js";
|
|
4
|
-
import { styleMap as h } from "lit/directives/style-map.js";
|
|
5
|
-
import { sharedStyles as u } from "../styles/shared.js";
|
|
6
|
-
var v = Object.defineProperty, y = Object.getOwnPropertyDescriptor, d = (t, o, n, s) => {
|
|
7
|
-
for (var e = s > 1 ? void 0 : s ? y(o, n) : o, a = t.length - 1, i; a >= 0; a--)
|
|
8
|
-
(i = t[a]) && (e = (s ? i(o, n, e) : i(e)) || e);
|
|
9
|
-
return s && e && v(o, n, e), e;
|
|
10
|
-
};
|
|
11
|
-
let r = class extends l {
|
|
12
|
-
constructor() {
|
|
13
|
-
super(...arguments), this.noBorder = !1, this.sx = {};
|
|
14
|
-
}
|
|
15
|
-
render() {
|
|
16
|
-
const t = {
|
|
17
|
-
card: !0,
|
|
18
|
-
"card--no-border": this.noBorder
|
|
19
|
-
};
|
|
20
|
-
return f`
|
|
21
|
-
<div part="card" class=${b(t)} style=${h(this.sx)}>
|
|
22
|
-
<div class="card-content">
|
|
23
|
-
<slot></slot>
|
|
24
|
-
</div>
|
|
25
|
-
</div>
|
|
26
|
-
`;
|
|
27
|
-
}
|
|
28
|
-
};
|
|
29
|
-
r.styles = [
|
|
30
|
-
u,
|
|
31
|
-
p`
|
|
32
|
-
:host {
|
|
33
|
-
display: block;
|
|
34
|
-
min-width: 0;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
/* Inner border effect using mask - extends design-tokens .card */
|
|
38
|
-
.card::before {
|
|
39
|
-
content: '';
|
|
40
|
-
position: absolute;
|
|
41
|
-
inset: 0;
|
|
42
|
-
border-radius: inherit;
|
|
43
|
-
padding: 0.0625rem;
|
|
44
|
-
background: linear-gradient(
|
|
45
|
-
180deg,
|
|
46
|
-
var(--alpha-white90) 0%,
|
|
47
|
-
var(--alpha-white30) 100%
|
|
48
|
-
);
|
|
49
|
-
mask:
|
|
50
|
-
linear-gradient(#fff 0 0) content-box,
|
|
51
|
-
linear-gradient(#fff 0 0);
|
|
52
|
-
mask-composite: exclude;
|
|
53
|
-
pointer-events: none;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
.card--no-border::before {
|
|
57
|
-
display: none;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
.card-content {
|
|
61
|
-
position: relative;
|
|
62
|
-
z-index: 1;
|
|
63
|
-
}
|
|
64
|
-
`
|
|
65
|
-
];
|
|
66
|
-
d([
|
|
67
|
-
c({ type: Boolean, attribute: "no-border" })
|
|
68
|
-
], r.prototype, "noBorder", 2);
|
|
69
|
-
d([
|
|
70
|
-
c({ type: Object })
|
|
71
|
-
], r.prototype, "sx", 2);
|
|
72
|
-
r = d([
|
|
73
|
-
m("tc-card")
|
|
74
|
-
], r);
|
|
75
|
-
export {
|
|
76
|
-
r as TcCard
|
|
77
|
-
};
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { LitElement } from 'lit';
|
|
2
|
-
import { SxProps } from '../types.js';
|
|
3
|
-
/**
|
|
4
|
-
* A chip/tag component for labels and badges.
|
|
5
|
-
*
|
|
6
|
-
* @slot - Chip content
|
|
7
|
-
* @csspart chip - The chip container
|
|
8
|
-
*/
|
|
9
|
-
export declare class TcChip extends LitElement {
|
|
10
|
-
variant: 'default' | 'success' | 'error' | 'info';
|
|
11
|
-
size: 'sm' | 'md';
|
|
12
|
-
sx: SxProps;
|
|
13
|
-
static styles: import('lit').CSSResult[];
|
|
14
|
-
render(): import('lit').TemplateResult<1>;
|
|
15
|
-
}
|
|
16
|
-
declare global {
|
|
17
|
-
interface HTMLElementTagNameMap {
|
|
18
|
-
'tc-chip': TcChip;
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
//# sourceMappingURL=tc-chip.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tc-chip.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-chip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;GAKG;AACH,qBACa,MAAO,SAAQ,UAAU;IACR,OAAO,EAC/B,SAAS,GACT,SAAS,GACT,OAAO,GACP,MAAM,CAAa;IACK,IAAI,EAAE,IAAI,GAAG,IAAI,CAAQ;IACzB,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,4BAiDpB;IAEO,MAAM;CAWhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}
|
|
@@ -1,90 +0,0 @@
|
|
|
1
|
-
import { css as l, LitElement as h, html as f } from "lit";
|
|
2
|
-
import { property as c, customElement as m } from "lit/decorators.js";
|
|
3
|
-
import { styleMap as d } from "lit/directives/style-map.js";
|
|
4
|
-
import { sharedStyles as v } from "../styles/shared.js";
|
|
5
|
-
var u = Object.defineProperty, y = Object.getOwnPropertyDescriptor, i = (n, t, a, s) => {
|
|
6
|
-
for (var r = s > 1 ? void 0 : s ? y(t, a) : t, p = n.length - 1, o; p >= 0; p--)
|
|
7
|
-
(o = n[p]) && (r = (s ? o(t, a, r) : o(r)) || r);
|
|
8
|
-
return s && r && u(t, a, r), r;
|
|
9
|
-
};
|
|
10
|
-
let e = class extends h {
|
|
11
|
-
constructor() {
|
|
12
|
-
super(...arguments), this.variant = "default", this.size = "md", this.sx = {};
|
|
13
|
-
}
|
|
14
|
-
render() {
|
|
15
|
-
return f`
|
|
16
|
-
<span
|
|
17
|
-
part="chip"
|
|
18
|
-
class="chip chip--${this.variant} chip--${this.size}"
|
|
19
|
-
style=${d(this.sx)}
|
|
20
|
-
>
|
|
21
|
-
<slot></slot>
|
|
22
|
-
</span>
|
|
23
|
-
`;
|
|
24
|
-
}
|
|
25
|
-
};
|
|
26
|
-
e.styles = [
|
|
27
|
-
v,
|
|
28
|
-
l`
|
|
29
|
-
:host {
|
|
30
|
-
display: inline-flex;
|
|
31
|
-
align-items: center;
|
|
32
|
-
justify-content: center;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
.chip {
|
|
36
|
-
display: inline-flex;
|
|
37
|
-
align-items: center;
|
|
38
|
-
justify-content: center;
|
|
39
|
-
border-radius: var(--radius-full);
|
|
40
|
-
font-family: var(--font-body);
|
|
41
|
-
font-weight: 500;
|
|
42
|
-
text-transform: uppercase;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
.chip--sm {
|
|
46
|
-
padding: var(--size-chip-padding-sm);
|
|
47
|
-
font-size: var(--font-size-xs);
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
.chip--md {
|
|
51
|
-
padding: var(--size-chip-padding-md);
|
|
52
|
-
font-size: var(--font-size-sm);
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
.chip--default {
|
|
56
|
-
background: var(--paper-cream);
|
|
57
|
-
color: var(--ink-dark);
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
.chip--success {
|
|
61
|
-
background: var(--alpha-success15);
|
|
62
|
-
color: var(--accent-success);
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
.chip--error {
|
|
66
|
-
background: var(--error-bg);
|
|
67
|
-
color: var(--error-base);
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
.chip--info {
|
|
71
|
-
background: var(--alpha-primary10);
|
|
72
|
-
color: var(--accent-primary);
|
|
73
|
-
}
|
|
74
|
-
`
|
|
75
|
-
];
|
|
76
|
-
i([
|
|
77
|
-
c({ type: String })
|
|
78
|
-
], e.prototype, "variant", 2);
|
|
79
|
-
i([
|
|
80
|
-
c({ type: String })
|
|
81
|
-
], e.prototype, "size", 2);
|
|
82
|
-
i([
|
|
83
|
-
c({ type: Object })
|
|
84
|
-
], e.prototype, "sx", 2);
|
|
85
|
-
e = i([
|
|
86
|
-
m("tc-chip")
|
|
87
|
-
], e);
|
|
88
|
-
export {
|
|
89
|
-
e as TcChip
|
|
90
|
-
};
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { LitElement } from 'lit';
|
|
2
|
-
import { SxProps } from '../types.js';
|
|
3
|
-
/**
|
|
4
|
-
* A flex container component with column layout by default.
|
|
5
|
-
*
|
|
6
|
-
* @slot - Content to display inside the container
|
|
7
|
-
* @csspart container - The container element
|
|
8
|
-
*/
|
|
9
|
-
export declare class TcContainer extends LitElement {
|
|
10
|
-
wide: boolean;
|
|
11
|
-
sx: SxProps;
|
|
12
|
-
private defaultStyles;
|
|
13
|
-
static styles: import('lit').CSSResult;
|
|
14
|
-
render(): import('lit').TemplateResult<1>;
|
|
15
|
-
}
|
|
16
|
-
declare global {
|
|
17
|
-
interface HTMLElementTagNameMap {
|
|
18
|
-
'tc-container': TcContainer;
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
//# sourceMappingURL=tc-container.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tc-container.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-container.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;GAKG;AACH,qBACa,WAAY,SAAQ,UAAU;IACZ,IAAI,UAAS;IACd,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAO,CAAC,aAAa,CAKnB;IAEF,OAAgB,MAAM,0BAkBpB;IAEO,MAAM;CAgBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}
|