@melodicdev/components 1.4.0 → 1.5.1

package/lib/components/navigation/tabs/tabs.styles.js

@@ -1,6 +1,75 @@
 import { css } from '@melodicdev/core';
 export const tabsStyles = () => css `
 	:host {
+		/* Tab list */
+		--ml-tabs-list-gap: var(--ml-space-1);
+		--ml-tabs-list-border-width: var(--ml-border);
+		--ml-tabs-list-border-color: var(--ml-color-border);
+
+		/* Tab button base */
+		--ml-tabs-tab-gap: var(--ml-space-2);
+		--ml-tabs-tab-padding-y: var(--ml-space-2);
+		--ml-tabs-tab-padding-x: var(--ml-space-4);
+		--ml-tabs-tab-font-family: var(--ml-font-sans);
+		--ml-tabs-tab-font-weight: var(--ml-font-medium);
+		--ml-tabs-tab-color: var(--ml-color-text-secondary);
+		--ml-tabs-tab-transition: var(--ml-duration-150) var(--ml-ease-in-out);
+
+		/* Tab hover */
+		--ml-tabs-tab-hover-color: var(--ml-color-text);
+
+		/* Tab focus */
+		--ml-tabs-tab-focus-color: var(--ml-color-primary);
+
+		/* Tab active */
+		--ml-tabs-tab-active-color: var(--ml-color-primary);
+
+		/* Tab disabled */
+		--ml-tabs-tab-disabled-color: var(--ml-color-text-muted);
+		--ml-tabs-tab-disabled-opacity: 0.6;
+
+		/* Label */
+		--ml-tabs-tab-label-line-height: var(--ml-leading-tight);
+
+		/* Panels */
+		--ml-tabs-panels-padding-top: var(--ml-space-4);
+
+		/* Vertical border */
+		--ml-tabs-vertical-border-padding: var(--ml-space-2);
+		--ml-tabs-vertical-border-margin: var(--ml-space-4);
+
+		/* Line variant - indicator */
+		--ml-tabs-line-indicator-height: 2px;
+		--ml-tabs-line-indicator-color: var(--ml-color-primary);
+
+		/* Enclosed variant */
+		--ml-tabs-enclosed-tab-radius: var(--ml-radius);
+		--ml-tabs-enclosed-active-bg: var(--ml-color-surface);
+		--ml-tabs-enclosed-active-border-color: var(--ml-color-border);
+		--ml-tabs-enclosed-active-color: var(--ml-color-text);
+		--ml-tabs-enclosed-hover-bg: var(--ml-color-surface-secondary);
+
+		/* Pills variant */
+		--ml-tabs-pills-tab-radius: var(--ml-radius);
+		--ml-tabs-pills-active-bg: var(--ml-color-primary-subtle);
+		--ml-tabs-pills-active-color: var(--ml-color-primary);
+		--ml-tabs-pills-hover-bg: var(--ml-color-surface-secondary);
+
+		/* Size: sm */
+		--ml-tabs-sm-padding-y: var(--ml-space-1-5);
+		--ml-tabs-sm-padding-x: var(--ml-space-3);
+		--ml-tabs-sm-font-size: var(--ml-text-sm);
+
+		/* Size: md */
+		--ml-tabs-md-padding-y: var(--ml-space-2);
+		--ml-tabs-md-padding-x: var(--ml-space-4);
+		--ml-tabs-md-font-size: var(--ml-text-sm);
+
+		/* Size: lg */
+		--ml-tabs-lg-padding-y: var(--ml-space-2-5);
+		--ml-tabs-lg-padding-x: var(--ml-space-5);
+		--ml-tabs-lg-font-size: var(--ml-text-base);
+
 		display: block;
 		width: 100%;
 	}
@@ -18,9 +87,9 @@ export const tabsStyles = () => css `
 	.ml-tabs--vertical .ml-tabs__list {
 		flex-direction: column;
 		border-bottom: none;
-		border-right: var(--ml-border) solid var(--ml-color-border);
-		padding-right: var(--ml-space-2);
-		margin-right: var(--ml-space-4);
+		border-right: var(--ml-tabs-list-border-width) solid var(--ml-tabs-list-border-color);
+		padding-right: var(--ml-tabs-vertical-border-padding);
+		margin-right: var(--ml-tabs-vertical-border-margin);
 	}
 
 	.ml-tabs--vertical .ml-tabs__panels {
@@ -31,7 +100,7 @@ export const tabsStyles = () => css `
 	/* Tab list */
 	.ml-tabs__list {
 		display: flex;
-		gap: var(--ml-space-1);
+		gap: var(--ml-tabs-list-gap);
 		position: relative;
 	}
 
@@ -39,47 +108,47 @@ export const tabsStyles = () => css `
 	.ml-tabs__tab {
 		display: inline-flex;
 		align-items: center;
-		gap: var(--ml-space-2);
-		padding: var(--ml-space-2) var(--ml-space-4);
-		font-family: var(--ml-font-sans);
-		font-weight: var(--ml-font-medium);
-		color: var(--ml-color-text-secondary);
+		gap: var(--ml-tabs-tab-gap);
+		padding: var(--ml-tabs-tab-padding-y) var(--ml-tabs-tab-padding-x);
+		font-family: var(--ml-tabs-tab-font-family);
+		font-weight: var(--ml-tabs-tab-font-weight);
+		color: var(--ml-tabs-tab-color);
 		background: transparent;
 		border: none;
 		cursor: pointer;
 		white-space: nowrap;
 		transition:
-			color var(--ml-duration-150) var(--ml-ease-in-out),
-			background-color var(--ml-duration-150) var(--ml-ease-in-out),
-			border-color var(--ml-duration-150) var(--ml-ease-in-out);
+			color var(--ml-tabs-tab-transition),
+			background-color var(--ml-tabs-tab-transition),
+			border-color var(--ml-tabs-tab-transition);
 	}
 
 	.ml-tabs__tab:hover:not(:disabled) {
-		color: var(--ml-color-text);
+		color: var(--ml-tabs-tab-hover-color);
 	}
 
 	.ml-tabs__tab:focus-visible {
-		outline: 2px solid var(--ml-color-primary);
+		outline: 2px solid var(--ml-tabs-tab-focus-color);
 		outline-offset: 2px;
 	}
 
 	.ml-tabs__tab--active {
-		color: var(--ml-color-primary);
+		color: var(--ml-tabs-tab-active-color);
 	}
 
 	.ml-tabs__tab--disabled {
-		color: var(--ml-color-text-muted);
+		color: var(--ml-tabs-tab-disabled-color);
 		cursor: not-allowed;
-		opacity: 0.6;
+		opacity: var(--ml-tabs-tab-disabled-opacity);
 	}
 
 	.ml-tabs__tab-label {
-		line-height: var(--ml-leading-tight);
+		line-height: var(--ml-tabs-tab-label-line-height);
 	}
 
 	/* Panels */
 	.ml-tabs__panels {
-		padding-top: var(--ml-space-4);
+		padding-top: var(--ml-tabs-panels-padding-top);
 	}
 
 	.ml-tabs--vertical .ml-tabs__panels {
@@ -90,13 +159,13 @@ export const tabsStyles = () => css `
 	   VARIANT: Line (underline style)
 	   ============================================ */
 	.ml-tabs--line .ml-tabs__list {
-		border-bottom: var(--ml-border) solid var(--ml-color-border);
+		border-bottom: var(--ml-tabs-list-border-width) solid var(--ml-tabs-list-border-color);
 		gap: 0;
 	}
 
 	.ml-tabs--line .ml-tabs__tab {
 		position: relative;
-		padding-bottom: calc(var(--ml-space-2) + 2px);
+		padding-bottom: calc(var(--ml-tabs-tab-padding-y) + var(--ml-tabs-line-indicator-height));
 		margin-bottom: -1px;
 	}
 
@@ -106,23 +175,23 @@ export const tabsStyles = () => css `
 		bottom: 0;
 		left: 0;
 		right: 0;
-		height: 2px;
+		height: var(--ml-tabs-line-indicator-height);
 		background-color: transparent;
-		transition: background-color var(--ml-duration-150) var(--ml-ease-in-out);
+		transition: background-color var(--ml-tabs-tab-transition);
 	}
 
 	.ml-tabs--line .ml-tabs__tab--active::after {
-		background-color: var(--ml-color-primary);
+		background-color: var(--ml-tabs-line-indicator-color);
 	}
 
 	.ml-tabs--line.ml-tabs--vertical .ml-tabs__list {
 		border-bottom: none;
-		border-right: var(--ml-border) solid var(--ml-color-border);
+		border-right: var(--ml-tabs-list-border-width) solid var(--ml-tabs-list-border-color);
 	}
 
 	.ml-tabs--line.ml-tabs--vertical .ml-tabs__tab {
-		padding-bottom: var(--ml-space-2);
-		padding-right: calc(var(--ml-space-4) + 2px);
+		padding-bottom: var(--ml-tabs-tab-padding-y);
+		padding-right: calc(var(--ml-tabs-tab-padding-x) + var(--ml-tabs-line-indicator-height));
 		margin-bottom: 0;
 		margin-right: -1px;
 	}
@@ -132,7 +201,7 @@ export const tabsStyles = () => css `
 		left: auto;
 		top: 0;
 		right: 0;
-		width: 2px;
+		width: var(--ml-tabs-line-indicator-height);
 		height: 100%;
 	}
 
@@ -140,27 +209,27 @@ export const tabsStyles = () => css `
 	   VARIANT: Enclosed (bordered tab style)
 	   ============================================ */
 	.ml-tabs--enclosed .ml-tabs__list {
-		border-bottom: var(--ml-border) solid var(--ml-color-border);
+		border-bottom: var(--ml-tabs-list-border-width) solid var(--ml-tabs-list-border-color);
 		gap: 0;
 	}
 
 	.ml-tabs--enclosed .ml-tabs__tab {
 		position: relative;
-		border: var(--ml-border) solid transparent;
+		border: var(--ml-tabs-list-border-width) solid transparent;
 		border-bottom: none;
-		border-radius: var(--ml-radius) var(--ml-radius) 0 0;
+		border-radius: var(--ml-tabs-enclosed-tab-radius) var(--ml-tabs-enclosed-tab-radius) 0 0;
 		margin-bottom: -1px;
 		background-color: transparent;
 	}
 
 	.ml-tabs--enclosed .ml-tabs__tab:hover:not(:disabled):not(.ml-tabs__tab--active) {
-		background-color: var(--ml-color-surface-secondary);
+		background-color: var(--ml-tabs-enclosed-hover-bg);
 	}
 
 	.ml-tabs--enclosed .ml-tabs__tab--active {
-		background-color: var(--ml-color-surface);
-		border-color: var(--ml-color-border);
-		color: var(--ml-color-text);
+		background-color: var(--ml-tabs-enclosed-active-bg);
+		border-color: var(--ml-tabs-enclosed-active-border-color);
+		color: var(--ml-tabs-enclosed-active-color);
 	}
 
 	.ml-tabs--enclosed .ml-tabs__tab--active::after {
@@ -170,45 +239,45 @@ export const tabsStyles = () => css `
 		left: 0;
 		right: 0;
 		height: 1px;
-		background-color: var(--ml-color-surface);
+		background-color: var(--ml-tabs-enclosed-active-bg);
 	}
 
 	/* ============================================
 	   VARIANT: Pills (soft rounded style)
 	   ============================================ */
 	.ml-tabs--pills .ml-tabs__list {
-		gap: var(--ml-space-1);
+		gap: var(--ml-tabs-list-gap);
 	}
 
 	.ml-tabs--pills .ml-tabs__tab {
-		border-radius: var(--ml-radius);
+		border-radius: var(--ml-tabs-pills-tab-radius);
 	}
 
 	.ml-tabs--pills .ml-tabs__tab:hover:not(:disabled):not(.ml-tabs__tab--active) {
-		background-color: var(--ml-color-surface-secondary);
+		background-color: var(--ml-tabs-pills-hover-bg);
 	}
 
 	.ml-tabs--pills .ml-tabs__tab--active {
-		background-color: var(--ml-color-primary-subtle);
-		color: var(--ml-color-primary);
+		background-color: var(--ml-tabs-pills-active-bg);
+		color: var(--ml-tabs-pills-active-color);
 	}
 
 	/* ============================================
 	   SIZE VARIANTS
 	   ============================================ */
 	.ml-tabs--sm .ml-tabs__tab {
-		padding: var(--ml-space-1-5) var(--ml-space-3);
-		font-size: var(--ml-text-sm);
+		padding: var(--ml-tabs-sm-padding-y) var(--ml-tabs-sm-padding-x);
+		font-size: var(--ml-tabs-sm-font-size);
 	}
 
 	.ml-tabs--md .ml-tabs__tab {
-		padding: var(--ml-space-2) var(--ml-space-4);
-		font-size: var(--ml-text-sm);
+		padding: var(--ml-tabs-md-padding-y) var(--ml-tabs-md-padding-x);
+		font-size: var(--ml-tabs-md-font-size);
 	}
 
 	.ml-tabs--lg .ml-tabs__tab {
-		padding: var(--ml-space-2-5) var(--ml-space-5);
-		font-size: var(--ml-text-base);
+		padding: var(--ml-tabs-lg-padding-y) var(--ml-tabs-lg-padding-x);
+		font-size: var(--ml-tabs-lg-font-size);
 	}
 
 	/* ============================================
@@ -217,30 +286,30 @@ export const tabsStyles = () => css `
 	::slotted(ml-tab) {
 		display: inline-flex;
 		align-items: center;
-		gap: var(--ml-space-2);
-		padding: var(--ml-space-2) var(--ml-space-4);
-		font-family: var(--ml-font-sans);
-		font-weight: var(--ml-font-medium);
-		color: var(--ml-color-text-secondary);
+		gap: var(--ml-tabs-tab-gap);
+		padding: var(--ml-tabs-tab-padding-y) var(--ml-tabs-tab-padding-x);
+		font-family: var(--ml-tabs-tab-font-family);
+		font-weight: var(--ml-tabs-tab-font-weight);
+		color: var(--ml-tabs-tab-color);
 		background: transparent;
 		border: none;
 		cursor: pointer;
 		white-space: nowrap;
 		transition:
-			color var(--ml-duration-150) var(--ml-ease-in-out),
-			background-color var(--ml-duration-150) var(--ml-ease-in-out);
+			color var(--ml-tabs-tab-transition),
+			background-color var(--ml-tabs-tab-transition);
 	}
 
 	::slotted(ml-tab:hover) {
-		color: var(--ml-color-text);
+		color: var(--ml-tabs-tab-hover-color);
 	}
 
 	::slotted(ml-tab[active]) {
-		color: var(--ml-color-primary);
+		color: var(--ml-tabs-tab-active-color);
 	}
 
 	::slotted(ml-tab[disabled]) {
-		color: var(--ml-color-text-muted);
+		color: var(--ml-tabs-tab-disabled-color);
 		cursor: not-allowed;
 	}
 `;

package/lib/components/overlays/dialog/dialog.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/overlays/dialog/dialog.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,iDAkLxB,CAAC"}
+{"version":3,"file":"dialog.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/overlays/dialog/dialog.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,iDA0NxB,CAAC"}

package/lib/components/overlays/dialog/dialog.styles.js

@@ -1,6 +1,46 @@
 import { css } from '@melodicdev/core';
 export const dialogStyles = () => css `
 	:host {
+		/* Dialog panel */
+		--ml-dialog-max-width: 500px;
+		--ml-dialog-bg: var(--ml-color-surface);
+		--ml-dialog-radius: var(--ml-radius-xl);
+		--ml-dialog-shadow: var(--ml-shadow-xl);
+		--ml-dialog-transition: var(--ml-transition-normal);
+
+		/* Backdrop */
+		--ml-dialog-backdrop-color: rgba(0, 0, 0, 0.5);
+
+		/* Size variants */
+		--ml-dialog-sm-max-width: 400px;
+		--ml-dialog-md-max-width: 500px;
+		--ml-dialog-lg-max-width: 640px;
+		--ml-dialog-xl-max-width: 800px;
+
+		/* Header */
+		--ml-dialog-header-padding: var(--ml-space-6);
+		--ml-dialog-header-gap: var(--ml-space-4);
+		--ml-dialog-header-title-font-size: var(--ml-text-lg);
+		--ml-dialog-header-title-font-weight: var(--ml-font-semibold);
+		--ml-dialog-header-title-color: var(--ml-color-text);
+		--ml-dialog-header-title-line-height: var(--ml-leading-tight);
+		--ml-dialog-header-desc-font-size: var(--ml-text-sm);
+		--ml-dialog-header-desc-color: var(--ml-color-text-secondary);
+		--ml-dialog-header-desc-line-height: var(--ml-leading-relaxed);
+
+		/* Body */
+		--ml-dialog-body-padding: var(--ml-space-6);
+		--ml-dialog-body-font-size: var(--ml-text-sm);
+		--ml-dialog-body-color: var(--ml-color-text-secondary);
+		--ml-dialog-body-line-height: var(--ml-leading-relaxed);
+
+		/* Footer */
+		--ml-dialog-footer-padding-y: var(--ml-space-4);
+		--ml-dialog-footer-padding-x: var(--ml-space-6);
+		--ml-dialog-footer-gap: var(--ml-space-3);
+		--ml-dialog-footer-border-color: var(--ml-color-border);
+		--ml-dialog-footer-bg: var(--ml-color-surface);
+
 		display: contents;
 	}
 
@@ -10,23 +50,23 @@ export const dialogStyles = () => css `
 		display: flex;
 		flex-direction: column;
 		width: 100%;
-		max-width: 500px;
+		max-width: var(--ml-dialog-max-width);
 		max-height: calc(100vh - var(--ml-space-8));
 		margin: auto;
 		padding: 0;
-		background-color: var(--ml-color-surface);
+		background-color: var(--ml-dialog-bg);
 		border: none;
-		border-radius: var(--ml-radius-xl);
-		box-shadow: var(--ml-shadow-xl);
+		border-radius: var(--ml-dialog-radius);
+		box-shadow: var(--ml-dialog-shadow);
 		outline: none;
 		overflow: hidden;
 		transform: scale(0.95) translateY(10px);
 		opacity: 0;
 		transition:
-			transform var(--ml-transition-normal),
-			opacity var(--ml-transition-normal),
-			overlay var(--ml-transition-normal) allow-discrete,
-			display var(--ml-transition-normal) allow-discrete;
+			transform var(--ml-dialog-transition),
+			opacity var(--ml-dialog-transition),
+			overlay var(--ml-dialog-transition) allow-discrete,
+			display var(--ml-dialog-transition) allow-discrete;
 	}
 
 	dialog.ml-dialog[open] {
@@ -45,13 +85,13 @@ export const dialogStyles = () => css `
 	dialog.ml-dialog::backdrop {
 		background-color: rgba(0, 0, 0, 0);
 		transition:
-			background-color var(--ml-transition-normal),
-			overlay var(--ml-transition-normal) allow-discrete,
-			display var(--ml-transition-normal) allow-discrete;
+			background-color var(--ml-dialog-transition),
+			overlay var(--ml-dialog-transition) allow-discrete,
+			display var(--ml-dialog-transition) allow-discrete;
 	}
 
 	dialog.ml-dialog[open]::backdrop {
-		background-color: rgba(0, 0, 0, 0.5);
+		background-color: var(--ml-dialog-backdrop-color);
 	}
 
 	@starting-style {
@@ -62,19 +102,19 @@ export const dialogStyles = () => css `
 
 	/* Size variants */
 	dialog.ml-dialog--sm {
-		max-width: 400px;
+		max-width: var(--ml-dialog-sm-max-width);
 	}
 
 	dialog.ml-dialog--md {
-		max-width: 500px;
+		max-width: var(--ml-dialog-md-max-width);
 	}
 
 	dialog.ml-dialog--lg {
-		max-width: 640px;
+		max-width: var(--ml-dialog-lg-max-width);
 	}
 
 	dialog.ml-dialog--xl {
-		max-width: 800px;
+		max-width: var(--ml-dialog-xl-max-width);
 	}
 
 	dialog.ml-dialog--full {
@@ -86,8 +126,8 @@ export const dialogStyles = () => css `
 	.ml-dialog-header {
 		display: flex;
 		align-items: flex-start;
-		gap: var(--ml-space-4);
-		padding: var(--ml-space-6);
+		gap: var(--ml-dialog-header-gap);
+		padding: var(--ml-dialog-header-padding);
 		padding-bottom: 0;
 	}
 
@@ -105,27 +145,27 @@ export const dialogStyles = () => css `
 	.ml-dialog-header ::slotted(h3),
 	.ml-dialog-header ::slotted(h4) {
 		margin: 0;
-		font-size: var(--ml-text-lg);
-		font-weight: var(--ml-font-semibold);
-		color: var(--ml-color-text);
-		line-height: var(--ml-leading-tight);
+		font-size: var(--ml-dialog-header-title-font-size);
+		font-weight: var(--ml-dialog-header-title-font-weight);
+		color: var(--ml-dialog-header-title-color);
+		line-height: var(--ml-dialog-header-title-line-height);
 	}
 
 	.ml-dialog-header ::slotted(p) {
 		margin: var(--ml-space-1) 0 0;
-		font-size: var(--ml-text-sm);
-		color: var(--ml-color-text-secondary);
-		line-height: var(--ml-leading-relaxed);
+		font-size: var(--ml-dialog-header-desc-font-size);
+		color: var(--ml-dialog-header-desc-color);
+		line-height: var(--ml-dialog-header-desc-line-height);
 	}
 
 	/* Body */
 	.ml-dialog-body {
 		flex: 1;
-		padding: var(--ml-space-6);
+		padding: var(--ml-dialog-body-padding);
 		overflow-y: auto;
-		font-size: var(--ml-text-sm);
-		color: var(--ml-color-text-secondary);
-		line-height: var(--ml-leading-relaxed);
+		font-size: var(--ml-dialog-body-font-size);
+		color: var(--ml-dialog-body-color);
+		line-height: var(--ml-dialog-body-line-height);
 	}
 
 	.ml-dialog-body ::slotted(p) {
@@ -141,10 +181,10 @@ export const dialogStyles = () => css `
 		display: flex;
 		align-items: center;
 		justify-content: flex-end;
-		gap: var(--ml-space-3);
-		padding: var(--ml-space-4) var(--ml-space-6);
-		border-top: 1px solid var(--ml-color-border);
-		background-color: var(--ml-color-surface);
+		gap: var(--ml-dialog-footer-gap);
+		padding: var(--ml-dialog-footer-padding-y) var(--ml-dialog-footer-padding-x);
+		border-top: 1px solid var(--ml-dialog-footer-border-color);
+		background-color: var(--ml-dialog-footer-bg);
 	}
 
 	.ml-dialog-footer:not(:has(*)) {

package/lib/components/overlays/drawer/drawer.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/overlays/drawer/drawer.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,iDAwKxB,CAAC"}
+{"version":3,"file":"drawer.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/overlays/drawer/drawer.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,iDAoNxB,CAAC"}