@onetype/framework 2.0.40 → 2.0.42

package/lib/items/elements/navigation/sidebar/sidebar.css

@@ -1,3 +1,5 @@
+/* Root */
+
 .e-210c16c7
 {
 	display: flex;
@@ -6,13 +8,14 @@
 	height: 100%;
 }
 
+/* Holder */
+
 .e-210c16c7 > .holder
 {
 	display: flex;
 	flex-direction: column;
 	width: 100%;
 	padding: var(--ot-spacing-m) var(--ot-spacing-s);
-	gap: 0;
 	overflow-y: auto;
 }
 
@@ -24,7 +27,7 @@
 {
 	display: flex;
 	flex-direction: column;
-	gap: 2px;
+	gap: var(--ot-spacing-x);
 	padding: var(--ot-spacing-s) 0;
 	border-top: 1px solid var(--ot-bg-3-border);
 }
@@ -43,7 +46,7 @@
 .e-210c16c7 > .holder > .bottom > .group > .title,
 .e-210c16c7 > .drawer > .group > .title
 {
-	font-size: 10px;
+	font-size: var(--ot-size-s);
 	font-weight: 600;
 	color: var(--ot-text-2);
 	text-transform: uppercase;
@@ -70,14 +73,14 @@
 	border: 1px solid transparent;
 	border-radius: var(--ot-radius-m);
 	cursor: pointer;
-	transition: all 0.15s ease;
+	transition: color 0.15s ease, background 0.15s ease;
 }
 
 .e-210c16c7 > .holder > .group > .item > i,
 .e-210c16c7 > .holder > .bottom > .group > .item > i,
 .e-210c16c7 > .drawer > .group > .item > i
 {
-	font-size: 20px;
+	font-size: var(--ot-size-l);
 	opacity: 0.4;
 	transition: opacity 0.15s ease;
 }
@@ -91,18 +94,20 @@
 	text-overflow: ellipsis;
 }
 
+/* Count badge */
+
 .e-210c16c7 > .holder > .group > .item > .count,
 .e-210c16c7 > .holder > .bottom > .group > .item > .count,
 .e-210c16c7 > .drawer > .group > .item > .count
 {
 	margin-left: auto;
 	font-size: var(--ot-size-s);
-	min-width: 20px;
-	height: 20px;
+	min-width: var(--ot-height-x);
+	height: var(--ot-height-x);
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	border-radius: 10px;
+	border-radius: var(--ot-radius-m);
 	background: var(--ot-bg-4);
 	color: var(--ot-text-2);
 	font-weight: 500;
@@ -153,17 +158,16 @@
 	margin-top: auto;
 }
 
-/* Variants */
+/* Background variants */
 
-.e-210c16c7 > .holder.bg-2
-{
-	background: var(--ot-bg-2);
-}
+.e-210c16c7 > .holder.bg-1 { background: var(--ot-bg-1); }
+.e-210c16c7 > .holder.bg-2 { background: var(--ot-bg-2); }
+.e-210c16c7 > .holder.bg-3 { background: var(--ot-bg-3); }
+.e-210c16c7 > .holder.bg-4 { background: var(--ot-bg-4); }
 
-.e-210c16c7 > .holder.border
-{
-	border-right: 1px solid var(--ot-bg-2-border);
-}
+/* Border variant */
+
+.e-210c16c7 > .holder.border { border-right: 1px solid var(--ot-bg-2-border); }
 
 /* Bar, Overlay, Drawer — hidden on desktop */
 
@@ -198,7 +202,7 @@
 		bottom: 0;
 		left: 0;
 		width: 100vw;
-		height: 40px;
+		height: var(--ot-height-l);
 		background: var(--ot-bg-1);
 		border-top: 1px solid var(--ot-bg-2-border);
 		border-bottom: 1px solid var(--ot-bg-2-border);
@@ -208,29 +212,11 @@
 
 	.e-210c16c7 > .bar > .toggle
 	{
-		font-size: 20px;
+		font-size: var(--ot-size-l);
 		color: var(--ot-brand);
 		pointer-events: none;
 	}
 
-	.e-210c16c7 > .drawer > .toggle
-	{
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 34px;
-		height: 34px;
-		background: none;
-		border: none;
-		color: var(--ot-text-2);
-		cursor: pointer;
-	}
-
-	.e-210c16c7 > .drawer > .toggle > i
-	{
-		font-size: 20px;
-	}
-
 	.e-210c16c7 > .overlay
 	{
 		display: block;
@@ -262,7 +248,7 @@
 		align-items: center;
 		justify-content: center;
 		width: 100%;
-		height: 40px;
+		height: var(--ot-height-l);
 		background: none;
 		border: none;
 		border-bottom: 1px solid var(--ot-bg-2-border);
@@ -273,7 +259,7 @@
 
 	.e-210c16c7 > .drawer > .toggle > i
 	{
-		font-size: 20px;
+		font-size: var(--ot-size-l);
 	}
 
 	.e-210c16c7 > .drawer > .group

package/lib/items/elements/navigation/sidebar/sidebar.js

@@ -10,7 +10,29 @@ onetype.AddonReady('elements', (elements) =>
 		config: {
 			groups: {
 				type: 'array',
-				value: []
+				value: [],
+				each: {
+					type: 'object',
+					config: {
+						title: { type: 'string', value: '' },
+						placement: { type: 'string', value: 'top', options: ['top', 'bottom'] },
+						items: {
+							type: 'array',
+							value: [],
+							each: {
+								type: 'object',
+								config: {
+									icon: { type: 'string', value: '' },
+									label: { type: 'string', value: '' },
+									href: { type: 'string', value: '' },
+									value: { type: 'string', value: '' },
+									match: { type: 'string', value: '' },
+									count: { type: 'number', value: null }
+								}
+							}
+						}
+					}
+				}
 			},
 			active: {
 				type: 'string',
@@ -19,7 +41,7 @@ onetype.AddonReady('elements', (elements) =>
 			variant: {
 				type: 'array',
 				value: [],
-				options: ['bg-2', 'border']
+				options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'border']
 			},
 			_click: {
 				type: 'function'
@@ -68,7 +90,7 @@ onetype.AddonReady('elements', (elements) =>
 						<a ot-for="item in group.items" :class="'item' + (isActive(item) ? ' active' : '')" :href="item.href || 'javascript:void(0)'" ot-click="handleClick(item)">
 							<i ot-if="item.icon">{{ item.icon }}</i>
 							<span>{{ item.label }}</span>
-							<span ot-if="item.count !== undefined" class="count">{{ item.count }}</span>
+							<span ot-if="item.count !== undefined && item.count !== null" class="count">{{ item.count }}</span>
 						</a>
 					</div>
 					<div ot-if="bottom.length" class="bottom">
@@ -77,7 +99,7 @@ onetype.AddonReady('elements', (elements) =>
 							<a ot-for="item in group.items" :class="'item' + (isActive(item) ? ' active' : '')" :href="item.href || 'javascript:void(0)'" ot-click="handleClick(item)">
 								<i ot-if="item.icon">{{ item.icon }}</i>
 								<span>{{ item.label }}</span>
-								<span ot-if="item.count !== undefined" class="count">{{ item.count }}</span>
+								<span ot-if="item.count !== undefined && item.count !== null" class="count">{{ item.count }}</span>
 							</a>
 						</div>
 					</div>
@@ -94,7 +116,7 @@ onetype.AddonReady('elements', (elements) =>
 						<a ot-for="item in group.items" :class="'item' + (isActive(item) ? ' active' : '')" :href="item.href || 'javascript:void(0)'" ot-click="handleClick(item)">
 							<i ot-if="item.icon">{{ item.icon }}</i>
 							<span>{{ item.label }}</span>
-							<span ot-if="item.count !== undefined" class="count">{{ item.count }}</span>
+							<span ot-if="item.count !== undefined && item.count !== null" class="count">{{ item.count }}</span>
 						</a>
 					</div>
 					<div ot-if="bottom.length" class="group">
@@ -103,7 +125,7 @@ onetype.AddonReady('elements', (elements) =>
 							<a ot-for="item in group.items" :class="'item' + (isActive(item) ? ' active' : '')" :href="item.href || 'javascript:void(0)'" ot-click="handleClick(item)">
 								<i ot-if="item.icon">{{ item.icon }}</i>
 								<span>{{ item.label }}</span>
-								<span ot-if="item.count !== undefined" class="count">{{ item.count }}</span>
+								<span ot-if="item.count !== undefined && item.count !== null" class="count">{{ item.count }}</span>
 							</a>
 						</div>
 					</div>

package/lib/items/elements/navigation/tabs/tabs.css

@@ -1,47 +1,66 @@
+/* Root */
+
 .e-1a8b6ac1
 {
 	display: flex;
+	width: 100%;
 }
 
+/* Holder */
+
 .e-1a8b6ac1 > .holder
 {
 	display: flex;
 	align-items: center;
-	gap: 0;
-	background: var(--ot-bg-2);
-	border: 1px solid var(--ot-bg-2-border);
-	border-radius: 8px;
-	padding: 4px;
+	border: 1px solid transparent;
+	border-radius: var(--ot-radius-m);
+	padding: var(--ot-spacing-x);
 }
 
+/* Tab */
+
 .e-1a8b6ac1 > .holder > .tab
 {
 	display: flex;
 	align-items: center;
-	gap: 6px;
-	padding: 8px 20px;
-	border-radius: 6px;
+	gap: var(--ot-spacing-s);
+	padding: var(--ot-spacing-s) var(--ot-spacing-m);
+	border-radius: var(--ot-radius-m);
 	font-size: var(--ot-size-m);
 	font-weight: 500;
 	color: var(--ot-text-2);
 	text-decoration: none;
 	white-space: nowrap;
 	cursor: pointer;
-	transition: all 0.2s ease;
+	transition: color 0.15s ease, background 0.15s ease;
 }
 
 .e-1a8b6ac1 > .holder > .tab > i
 {
-	font-size: 16px;
-}
-
-.e-1a8b6ac1 > .holder > .tab.active
-{
-	background: var(--ot-bg-3);
-	color: var(--ot-text-1);
+	font-size: var(--ot-size-m);
 }
 
 .e-1a8b6ac1 > .holder > .tab:hover:not(.active)
 {
 	color: var(--ot-text-1);
 }
+
+/* Active — relative to bg variant */
+
+.e-1a8b6ac1 > .holder.bg-1 > .tab.active { background: var(--ot-bg-2); color: var(--ot-text-1); }
+.e-1a8b6ac1 > .holder.bg-2 > .tab.active { background: var(--ot-bg-3); color: var(--ot-text-1); }
+.e-1a8b6ac1 > .holder.bg-3 > .tab.active { background: var(--ot-bg-4); color: var(--ot-text-1); }
+.e-1a8b6ac1 > .holder.bg-4 > .tab.active { background: var(--ot-bg-4-hover); color: var(--ot-text-1); }
+
+/* Background variants */
+
+.e-1a8b6ac1 > .holder.bg-1 { background: var(--ot-bg-1); border-color: var(--ot-bg-1-border); }
+.e-1a8b6ac1 > .holder.bg-2 { background: var(--ot-bg-2); border-color: var(--ot-bg-2-border); }
+.e-1a8b6ac1 > .holder.bg-3 { background: var(--ot-bg-3); border-color: var(--ot-bg-3-border); }
+.e-1a8b6ac1 > .holder.bg-4 { background: var(--ot-bg-4); border-color: var(--ot-bg-4-border); }
+
+/* Size variants */
+
+.e-1a8b6ac1 > .holder.size-s > .tab { padding: var(--ot-spacing-x) var(--ot-spacing-s); font-size: var(--ot-size-s); }
+.e-1a8b6ac1 > .holder.size-m > .tab { padding: var(--ot-spacing-s) var(--ot-spacing-m); font-size: var(--ot-size-m); }
+.e-1a8b6ac1 > .holder.size-l > .tab { padding: var(--ot-spacing-m) var(--ot-spacing-l); font-size: var(--ot-size-m); }

package/lib/items/elements/navigation/tabs/tabs.js

@@ -14,7 +14,21 @@ onetype.AddonReady('elements', (elements) =>
 			},
 			items: {
 				type: 'array',
-				value: []
+				value: [],
+				each: {
+					type: 'object',
+					config: {
+						id: { type: 'string', value: '' },
+						label: { type: 'string', value: '' },
+						icon: { type: 'string', value: '' },
+						href: { type: 'string', value: '' }
+					}
+				}
+			},
+			variant: {
+				type: 'array',
+				value: ['bg-2'],
+				options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'size-s', 'size-m', 'size-l']
 			},
 			_change: {
 				type: 'function'
@@ -33,7 +47,7 @@ onetype.AddonReady('elements', (elements) =>
 			};
 
 			return `
-				<div class="holder">
+				<div :class="'holder ' + variant.join(' ')">
 					<a ot-for="item in items" :class="'tab' + (active === item.id ? ' active' : '')" :href="item.href || 'javascript:void(0)'" ot-click="select(item.id)">
 						<i ot-if="item.icon">{{ item.icon }}</i>
 						<span>{{ item.label }}</span>

package/lib/items/elements/status/code/code.css

@@ -1,25 +1,30 @@
+/* Root */
+
 .e-471f3f12
 {
-	width: 100%;
-	min-height: calc(100vh - 48px);
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	width: 100%;
+	min-height: calc(100vh - 48px);
 	padding: var(--ot-spacing-l);
 }
 
-.e-471f3f12 .holder
+/* Holder */
+
+.e-471f3f12 > .holder
 {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	gap: 20px;
+	gap: var(--ot-spacing-m);
 	text-align: center;
 	max-width: 400px;
 }
 
-/* Large code number */
-.e-471f3f12 .holder > .code
+/* Code number */
+
+.e-471f3f12 > .holder > .code
 {
 	font-size: 120px;
 	font-weight: 700;
@@ -30,19 +35,23 @@
 	user-select: none;
 }
 
-.e-471f3f12 .holder > .title
+/* Title */
+
+.e-471f3f12 > .holder > .title
 {
-	font-size: 20px;
+	font-size: var(--ot-size-l);
 	font-weight: 600;
 	color: var(--ot-text-1);
 	line-height: 1.3;
-	margin-top: -8px;
+	margin: 0;
 }
 
-.e-471f3f12 .holder > .description
+/* Description */
+
+.e-471f3f12 > .holder > .description
 {
-	font-size: 14px;
+	font-size: var(--ot-size-m);
 	line-height: 1.6;
 	color: var(--ot-text-2);
-	margin-top: -4px;
+	margin: 0;
 }

package/lib/items/elements/status/empty/empty.css

@@ -1,24 +1,30 @@
+/* Root */
+
 .e-631be738
 {
-	width: 100%;
-	min-height: 320px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	width: 100%;
+	min-height: 320px;
 	padding: var(--ot-spacing-l);
 }
 
-.e-631be738 .holder
+/* Holder */
+
+.e-631be738 > .holder
 {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
+	gap: var(--ot-spacing-m);
 	text-align: center;
 	max-width: 400px;
 }
 
-/* Dashed circle — visual emptiness */
-.e-631be738 .holder > .icon-wrap
+/* Dashed circle */
+
+.e-631be738 > .holder > .circle
 {
 	width: 72px;
 	height: 72px;
@@ -29,31 +35,30 @@
 	justify-content: center;
 }
 
-.e-631be738 .holder > .icon-wrap > i
+.e-631be738 > .holder > .circle > i
 {
 	font-size: 32px;
 	color: var(--ot-text-2);
 	opacity: 0.35;
 }
 
-.e-631be738 .holder > .title
+/* Title */
+
+.e-631be738 > .holder > .title
 {
-	font-size: 20px;
+	font-size: var(--ot-size-l);
 	font-weight: 600;
 	color: var(--ot-text-1);
 	line-height: 1.3;
-	margin-top: 24px;
+	margin: 0;
 }
 
-.e-631be738 .holder > .description
+/* Description */
+
+.e-631be738 > .holder > .description
 {
-	font-size: 14px;
+	font-size: var(--ot-size-m);
 	line-height: 1.6;
 	color: var(--ot-text-2);
-	margin-top: 8px;
-}
-
-.e-631be738 .holder > e-form-button
-{
-	margin-top: 24px;
+	margin: 0;
 }

package/lib/items/elements/status/empty/empty.js

@@ -32,7 +32,7 @@ onetype.AddonReady('elements', (elements) =>
 		{
 			return `
 				<div class="holder">
-					<div class="icon-wrap"><i>{{ icon }}</i></div>
+					<div class="circle"><i>{{ icon }}</i></div>
 					<h2 class="title">{{ title }}</h2>
 					<p ot-if="description" class="description">{{ description }}</p>
 					<e-form-button ot-if="action" :text="action" icon="add" :variant="['brand', 'size-m']" :_click="_click"></e-form-button>

package/lib/items/elements/status/error/error.css

@@ -1,55 +1,65 @@
+/* Root */
+
 .e-63199a7d
 {
-	width: 100%;
-	min-height: calc(100vh - 48px);
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	width: 100%;
+	min-height: calc(100vh - 48px);
 	padding: var(--ot-spacing-l);
 }
 
-.e-63199a7d .holder
+/* Holder */
+
+.e-63199a7d > .holder
 {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	gap: 20px;
+	gap: var(--ot-spacing-m);
 	text-align: center;
 	max-width: 400px;
 }
 
 /* Icon circle */
-.e-63199a7d .holder > .icon-wrap
+
+.e-63199a7d > .holder > .circle
 {
 	width: 80px;
 	height: 80px;
 	border-radius: 50%;
 	background: var(--ot-red-opacity);
-	border: 1px solid rgba(244, 63, 94, 0.15);
+	border: 1px solid var(--ot-red-border);
 	display: flex;
 	align-items: center;
 	justify-content: center;
 }
 
-.e-63199a7d .holder > .icon-wrap > i
+.e-63199a7d > .holder > .circle > i
 {
 	font-size: 36px;
 	color: var(--ot-red);
 	opacity: 0.8;
 }
 
-.e-63199a7d .holder > .title
+/* Title */
+
+.e-63199a7d > .holder > .title
 {
-	font-size: 20px;
+	font-size: var(--ot-size-l);
 	font-weight: 600;
 	color: var(--ot-text-1);
 	line-height: 1.3;
+	margin: 0;
 }
 
-.e-63199a7d .holder > .description
+/* Description */
+
+.e-63199a7d > .holder > .description
 {
-	font-size: 14px;
+	font-size: var(--ot-size-m);
 	line-height: 1.6;
 	color: var(--ot-text-2);
-	margin-top: -4px;
+	margin: 0;
 }

package/lib/items/elements/status/error/error.js

@@ -44,7 +44,7 @@ onetype.AddonReady('elements', (elements) =>
 
 			return `
 				<div class="holder">
-					<div class="icon-wrap"><i>{{ icon }}</i></div>
+					<div class="circle"><i>{{ icon }}</i></div>
 					<h2 class="title">{{ title }}</h2>
 					<p ot-if="description" class="description">{{ description }}</p>
 					<e-form-button ot-if="action" :text="action" icon="refresh" :variant="['brand', 'size-m']" :_click="retry"></e-form-button>

package/lib/items/elements/status/loading/loading.css

@@ -1,23 +1,28 @@
+/* Root */
+
 .e-691b81f7
 {
-	width: 100%;
-	min-height: calc(100vh - 48px);
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	width: 100%;
+	min-height: calc(100vh - 48px);
 	padding: var(--ot-spacing-l);
 }
 
-.e-691b81f7 .holder
+/* Holder */
+
+.e-691b81f7 > .holder
 {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	gap: 20px;
+	gap: var(--ot-spacing-m);
 }
 
-/* Spinner with pulsing ring */
-.e-691b81f7 .holder > .spinner-wrap
+/* Spinner circle */
+
+.e-691b81f7 > .holder > .circle
 {
 	position: relative;
 	width: 80px;
@@ -30,25 +35,30 @@
 	animation: e-691b81f7-pulse 2s ease-in-out infinite;
 }
 
-.e-691b81f7 .holder > .spinner-wrap > .spinner
+.e-691b81f7 > .holder > .circle > .spinner
 {
 	font-size: 32px;
 	animation: e-691b81f7-spin 0.8s linear infinite;
 }
 
 /* Color variants */
-.e-691b81f7 .holder[variant="brand"] > .spinner-wrap > .spinner { color: var(--ot-brand); }
-.e-691b81f7 .holder[variant="blue"] > .spinner-wrap > .spinner { color: var(--ot-blue); }
-.e-691b81f7 .holder[variant="red"] > .spinner-wrap > .spinner { color: var(--ot-red); }
-.e-691b81f7 .holder[variant="orange"] > .spinner-wrap > .spinner { color: var(--ot-orange); }
-.e-691b81f7 .holder[variant="green"] > .spinner-wrap > .spinner { color: var(--ot-green); }
 
-.e-691b81f7 .holder > .text
+.e-691b81f7 > .holder.brand > .circle > .spinner { color: var(--ot-brand); }
+.e-691b81f7 > .holder.blue > .circle > .spinner { color: var(--ot-blue); }
+.e-691b81f7 > .holder.red > .circle > .spinner { color: var(--ot-red); }
+.e-691b81f7 > .holder.orange > .circle > .spinner { color: var(--ot-orange); }
+.e-691b81f7 > .holder.green > .circle > .spinner { color: var(--ot-green); }
+
+/* Text */
+
+.e-691b81f7 > .holder > .text
 {
-	font-size: 14px;
+	font-size: var(--ot-size-m);
 	color: var(--ot-text-2);
 }
 
+/* Animations */
+
 @keyframes e-691b81f7-spin
 {
 	from { transform: rotate(0deg); }

package/lib/items/elements/status/loading/loading.js

@@ -13,16 +13,16 @@ onetype.AddonReady('elements', (elements) =>
 				value: ''
 			},
 			variant: {
-				type: 'string',
-				value: 'brand',
+				type: 'array',
+				value: ['brand'],
 				options: ['brand', 'blue', 'red', 'orange', 'green']
 			}
 		},
 		render: function()
 		{
 			return `
-				<div class="holder" :variant="variant">
-					<div class="spinner-wrap"><i class="spinner">progress_activity</i></div>
+				<div :class="'holder ' + variant.join(' ')">
+					<div class="circle"><i class="spinner">progress_activity</i></div>
 					<span ot-if="text" class="text">{{ text }}</span>
 				</div>
 			`;