@nextrap/ntl-2col 0.1.3 → 2.0.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/.agents/skills/ntl-2col-theming/SKILL.md +101 -0
- package/.agents/skills/ntl-2col-theming/references/examples.md +72 -0
- package/.agents/skills/ntl-2col-usage/SKILL.md +108 -0
- package/.agents/skills/ntl-2col-usage/references/examples.md +58 -0
- package/.ai-usage-info.md +132 -0
- package/CHANGELOG.md +4 -0
- package/README.md +1 -1
- package/default.scss +13 -0
- package/index.d.ts +1 -2
- package/index.js +41 -724
- package/index.scss +11 -0
- package/package.json +16 -3
- package/src/components/ntl-2col/ntl-2col.d.ts +7 -0
- package/src/components/ntl-2col/ntl-2col.scss +133 -0
- package/src/scss/_default-style.scss +78 -0
- package/src/scss/_with-alternating.scss +10 -0
- package/src/scss/_with-background-and-divider.scss +25 -0
- package/src/scss/_with-breakout-end.scss +28 -0
- package/src/scss/_with-breakout-start.scss +30 -0
- package/src/scss/_with-image-auto-objectfit.scss +28 -0
- package/src/scss/_with-justify.scss +10 -0
- package/src/scss/_with-main-sticky-top.scss +13 -0
- package/src/scss/_with-modifier-classes.scss +52 -0
- package/src/scss/_with-reverse.scss +5 -0
- package/src/scss/_with-wrapper-bg-color.scss +5 -0
- package/web-types.json +216 -0
- package/index.css +0 -1
- package/lib/ntl-2col.d.ts +0 -9
package/web-types.json
ADDED
|
@@ -0,0 +1,216 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
|
|
3
|
+
"name": "@nextrap/ntl-2col",
|
|
4
|
+
"version": "1.1.5",
|
|
5
|
+
"description": "Responsive two-column layout web component for Nextrap content sections.",
|
|
6
|
+
"contributions": {
|
|
7
|
+
"html": {
|
|
8
|
+
"elements": [
|
|
9
|
+
{
|
|
10
|
+
"name": "ntl-2col",
|
|
11
|
+
"description": "Responsive two-column layout with header/footer outside and top/bottom inside the wrapper.",
|
|
12
|
+
"attributes": [
|
|
13
|
+
{
|
|
14
|
+
"name": "mode",
|
|
15
|
+
"type": "string",
|
|
16
|
+
"description": "Reflected breakpoint mode, usually managed by the component.",
|
|
17
|
+
"values": [{ "name": "mobile" }, { "name": "desktop" }]
|
|
18
|
+
}
|
|
19
|
+
],
|
|
20
|
+
"slots": [
|
|
21
|
+
{
|
|
22
|
+
"name": "",
|
|
23
|
+
"description": "Main column content. Direct p:has(img) children can be moved automatically to the aside slot."
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"name": "header",
|
|
27
|
+
"description": "Content rendered above and outside the wrapper frame. Direct children with class .header are assigned automatically."
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"name": "top",
|
|
31
|
+
"description": "Content rendered at the top inside the wrapper frame. Direct children with class .top are assigned automatically."
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
"name": "aside",
|
|
35
|
+
"description": "Aside column content. Direct children with class .aside and direct p:has(img) children are assigned automatically."
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"name": "bottom",
|
|
39
|
+
"description": "Content rendered at the bottom inside the wrapper frame. Direct children with class .bottom are assigned automatically."
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
"name": "footer",
|
|
43
|
+
"description": "Content rendered below and outside the wrapper frame. Direct children with class .footer are assigned automatically."
|
|
44
|
+
}
|
|
45
|
+
]
|
|
46
|
+
}
|
|
47
|
+
]
|
|
48
|
+
},
|
|
49
|
+
"css": {
|
|
50
|
+
"classes": [
|
|
51
|
+
{
|
|
52
|
+
"name": "ntl-2col",
|
|
53
|
+
"description": "Base class added automatically by the component."
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"name": "default",
|
|
57
|
+
"description": "Semantic default styling hook used by the package default.scss."
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
"name": "reverse",
|
|
61
|
+
"description": "Reverse the order of the columns in mobile and desktop mode."
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
"name": "reverse-desktop",
|
|
65
|
+
"description": "Reverse the order of the columns only in desktop mode."
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"name": "mobile-reverse",
|
|
69
|
+
"description": "Reverse the order of the columns in mobile mode."
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
"name": "desktop-reverse",
|
|
73
|
+
"description": "Reverse the order of the columns in desktop mode."
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
"name": "alternating",
|
|
77
|
+
"description": "Styling hook for alternating desktop column order, usually applied to a wrapper around multiple ntl-2col elements."
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"name": "breakout-start",
|
|
81
|
+
"description": "Enable a desktop breakout layout towards the viewport start."
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
"name": "breakout-end",
|
|
85
|
+
"description": "Enable a desktop breakout layout towards the viewport end."
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
"name": "with-justify-top",
|
|
89
|
+
"description": "Align the content of both columns to the top in desktop mode."
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
"name": "with-justify-center",
|
|
93
|
+
"description": "Explicitly center the content of both columns in desktop mode; default-style() already centers it."
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
"name": "with-justify-bottom",
|
|
97
|
+
"description": "Align the content of both columns to the bottom in desktop mode."
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
"name": "with-main-sticky-top",
|
|
101
|
+
"description": "Keep a shorter main column sticky at the top in desktop mode."
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
"name": "with-background-and-divider",
|
|
105
|
+
"description": "Apply the background-and-divider variant when the matching SCSS mixin is included."
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
"name": "header",
|
|
109
|
+
"description": "Light DOM helper class: direct children with this class are assigned to the header slot."
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
"name": "top",
|
|
113
|
+
"description": "Light DOM helper class: direct children with this class are assigned to the top slot."
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
"name": "aside",
|
|
117
|
+
"description": "Light DOM helper class: direct children with this class are assigned to the aside slot."
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
"name": "bottom",
|
|
121
|
+
"description": "Light DOM helper class: direct children with this class are assigned to the bottom slot."
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
"name": "footer",
|
|
125
|
+
"description": "Light DOM helper class: direct children with this class are assigned to the footer slot."
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
"name": "auto",
|
|
129
|
+
"description": "Class set by the component on automatically assigned aside content such as direct p:has(img) children."
|
|
130
|
+
}
|
|
131
|
+
],
|
|
132
|
+
"properties": [
|
|
133
|
+
{
|
|
134
|
+
"name": "--breakpoint",
|
|
135
|
+
"description": "Breakpoint where the layout switches between mobile and desktop mode. Default: md.",
|
|
136
|
+
"value": { "type": "string" }
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
"name": "--cols",
|
|
140
|
+
"description": "Desktop main column width in a 12-column model. Default: 6.",
|
|
141
|
+
"value": { "type": "number" }
|
|
142
|
+
},
|
|
143
|
+
{
|
|
144
|
+
"name": "--container-width",
|
|
145
|
+
"description": "Maximum/rendered container width. Default: var(--nt-container-width, 100%).",
|
|
146
|
+
"value": { "type": "string" }
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
"name": "--container-render-width",
|
|
150
|
+
"description": "Internal/advanced rendered container width override, used by breakout variants.",
|
|
151
|
+
"value": { "type": "string" }
|
|
152
|
+
},
|
|
153
|
+
{
|
|
154
|
+
"name": "--container-margin-left",
|
|
155
|
+
"description": "Internal/advanced container left margin override, used by breakout variants.",
|
|
156
|
+
"value": { "type": "string" }
|
|
157
|
+
},
|
|
158
|
+
{
|
|
159
|
+
"name": "--container-margin-right",
|
|
160
|
+
"description": "Internal/advanced container right margin override, used by breakout variants.",
|
|
161
|
+
"value": { "type": "string" }
|
|
162
|
+
},
|
|
163
|
+
{
|
|
164
|
+
"name": "--gap",
|
|
165
|
+
"description": "Gap between columns. Default: var(--nt-spacing-layout).",
|
|
166
|
+
"value": { "type": "string" }
|
|
167
|
+
},
|
|
168
|
+
{
|
|
169
|
+
"name": "--main-sticky-top",
|
|
170
|
+
"description": "Viewport offset for with-main-sticky-top. Default: var(--nt-spacing-layout).",
|
|
171
|
+
"value": { "type": "string" }
|
|
172
|
+
},
|
|
173
|
+
{
|
|
174
|
+
"name": "--inner-padding",
|
|
175
|
+
"description": "Padding applied to wrapper children. Default: var(--nt-space-3).",
|
|
176
|
+
"value": { "type": "string" }
|
|
177
|
+
},
|
|
178
|
+
{
|
|
179
|
+
"name": "--section-bg",
|
|
180
|
+
"description": "Background of the host section. Default: transparent.",
|
|
181
|
+
"value": { "type": "color" }
|
|
182
|
+
},
|
|
183
|
+
{
|
|
184
|
+
"name": "--background",
|
|
185
|
+
"description": "Default-style internal wrapper background variable. The wrapper is transparent by default via $wrapper-bg-color.",
|
|
186
|
+
"value": { "type": "color" }
|
|
187
|
+
},
|
|
188
|
+
{
|
|
189
|
+
"name": "--border",
|
|
190
|
+
"description": "Wrapper border set by default-style(). Default: 1px solid var(--nt-dark).",
|
|
191
|
+
"value": { "type": "string" }
|
|
192
|
+
},
|
|
193
|
+
{
|
|
194
|
+
"name": "--border-radius",
|
|
195
|
+
"description": "Wrapper border radius set by default-style(). Default: var(--nt-border-radius).",
|
|
196
|
+
"value": { "type": "string" }
|
|
197
|
+
},
|
|
198
|
+
{
|
|
199
|
+
"name": "--aspectRatio",
|
|
200
|
+
"description": "Aside aspect ratio when default-style($aspectRatio: ...) is used.",
|
|
201
|
+
"value": { "type": "string" }
|
|
202
|
+
},
|
|
203
|
+
{
|
|
204
|
+
"name": "--breakout-container-width",
|
|
205
|
+
"description": "Internal/advanced breakout container width, used by breakout variants.",
|
|
206
|
+
"value": { "type": "string" }
|
|
207
|
+
},
|
|
208
|
+
{
|
|
209
|
+
"name": "--breakout-space",
|
|
210
|
+
"description": "Internal/advanced calculated breakout space, used by breakout variants.",
|
|
211
|
+
"value": { "type": "string" }
|
|
212
|
+
}
|
|
213
|
+
]
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
}
|
package/index.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
:root{--nt-primary: #007bff;--nt-secondary: #6c757d;--nt-accent: #6610f2;--nt-success: #28a745;--nt-info: #17a2b8;--nt-warning: #ffc107;--nt-danger: #dc3545;--nt-light: #f8f9fa;--nt-dark: #343a40;--nt-white: #fff;--nt-black: #000;--nt-soft-primary: rgb(204, 228.6, 255);--nt-soft-secondary: rgb(215.8369098712, 218.6566523605, 221.1630901288);--nt-soft-accent: rgb(225.8571428571, 209.4761904762, 252.5238095238);--nt-soft-success: rgb(175.1304347826, 235.8695652174, 189);--nt-soft-info: rgb(167, 233.4782608696, 244);--nt-soft-warning: #fff4d3;--nt-soft-danger: rgb(250.1265822785, 226.8734177215, 229.1012658228);--nt-soft-light: hsl(210, 16.6666666667%, 137.6470588235%);--nt-soft-dark: rgb(150.1724137931, 160, 169.8275862069);--nt-text-on-soft-colors: #000;--nt-text: #000;--nt-text-on-primary: #fff;--nt-text-on-secondary: #fff;--nt-text-on-accent: #fff;--nt-text-on-success: #000;--nt-text-on-info: #000;--nt-text-on-warning: #000;--nt-text-on-danger: #000;--nt-text-on-light: #000;--nt-text-on-dark: #fff;--nt-text-on-white: #000;--nt-text-on-black: #fff;--nt-background: #fff;--nt-link: #007bff;--nt-link-on-dark: #fff;--nt-text-decoration-link: underline;--nt-font-family-base: sans-serif;--nt-font-family-header: sans-serif;--nt-font-size-base: 1rem;--nt-font-size-header: 1rem;--nt-header: header;--nt-font-size-small: .875rem;--nt-gap: 1.25rem;--nt-border-radius: .25rem;--nt-border-width: 1px;--nt-space: 1rem;--nt-space-1: calc(var(--nt-space) * .25);--nt-space-2: calc(var(--nt-space) * .5);--nt-space-3: calc(var(--nt-space) * 1);--nt-space-4: calc(var(--nt-space) * 1.5);--nt-space-5: calc(var(--nt-space) * 3);--nt-content-space: 10rem;--nt-content-space-1: calc(var(--nt-content-space) * .25);--nt-content-space-2: calc(var(--nt-content-space) * .5);--nt-content-space-3: calc(var(--nt-content-space) * 1);--nt-content-space-4: calc(var(--nt-content-space) * 1.5);--nt-content-space-5: calc(var(--nt-content-space) * 3);--nt-fs-1: calc(var(--nt-font-size-base) * 1.5);--nt-fs-2: calc(var(--nt-font-size-base) * 1.25);--nt-fs-3: calc(var(--nt-font-size-base) * 1);--nt-fs-4: calc(var(--nt-font-size-base) * .9);--nt-fs-5: calc(var(--nt-font-size-base) * .85);--nt-fs-6: calc(var(--nt-font-size-base) * .75);--nt-fs-h1: calc(var(--nt-font-size-header) * 2.5);--nt-fs-h2: calc(var(--nt-font-size-header) * 2);--nt-fs-h3: calc(var(--nt-font-size-header) * 1.75);--nt-fs-h4: calc(var(--nt-font-size-header) * 1.5);--nt-fs-h5: calc(var(--nt-font-size-header) * 1.25);--nt-fs-h6: calc(var(--nt-font-size-header) * 1)}html{font-size:1rem}@media (min-width: 576px){html{--nt-container-width: 540px}}@media (min-width: 768px){html{--nt-container-width: 720px}}@media (min-width: 992px){html{--nt-container-width: 960px}}@media (min-width: 1200px){html{--nt-container-width: 1140px}}@media (min-width: 1400px){html{--nt-container-width: 1320px}}
|
package/lib/ntl-2col.d.ts
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { LitElement, PropertyValues } from 'lit';
|
|
2
|
-
export declare class Ntl2Col extends LitElement {
|
|
3
|
-
static styles: import('lit').CSSResult[];
|
|
4
|
-
breakAt: string;
|
|
5
|
-
cols: number;
|
|
6
|
-
connectedCallback(): void;
|
|
7
|
-
protected firstUpdated(_changedProperties: PropertyValues): void;
|
|
8
|
-
protected render(): unknown;
|
|
9
|
-
}
|