<css-color>

color-js · Mar 23, 2024 · 3744ab4 · 3744ab4
1 parent 2d64fdd
commit 3744ab4
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 6 deletions.
diff --git a/elements/css-color/css-color.js b/elements/css-color/css-color.js
@@ -19,8 +19,12 @@ export default class CSSColor extends HTMLElement {
 				<div id="swatch" part="swatch"></div>
 			</slot>
 			<div id="wrapper">
-				<slot></slot>
-				<color-gamut id="gamut" part="gamut" gamuts="srgb, p3, rec2020: P3+"></color-gamut>
+				<slot name="before-color"></slot>
+				<div part="color-wrapper">
+					<slot></slot>
+					<color-gamut id="gamut" part="gamut" gamuts="srgb, p3, rec2020: P3+"></color-gamut>
+				</div>
+				<slot name="after-color"></slot>
 			</div>
 		`;
 	}

diff --git a/elements/css-color/index.njk b/elements/css-color/index.njk
@@ -13,6 +13,16 @@
 	<input value="oklch(70% 0.25 138)" />
 </css-color>
 
+<h2>With name</h2>
+<css-color>
+	<label slot="before-color">Accent color:</label>
+	<input value="oklch(70% 0.25 138)" />
+</css-color>
+<css-color swatch="large">
+	<label slot="before-color">Accent color:</label>
+	<input value="oklch(70% 0.25 138)" />
+</css-color>
+
 <h2>Update via JS</h2>
 <h3>Static</h3>
 <css-color id="dynamic_static">oklch(70% 0.25 138)</css-color>

diff --git a/elements/css-color/style.css b/elements/css-color/style.css
@@ -12,22 +12,32 @@
 
 #wrapper {
 	display: flex;
-	position: relative;
+	flex-flow: inherit;
 
 	&.static {
 		gap: .4em;
 	}
 
 	&:not(.static) {
+
+	}
+}
+
+[part="color-wrapper"] {
+	position: relative;
+	display: flex;
+	gap: .2em;
+
+	&:not(.static *) {
 		#gamut {
 			position: absolute;
 			inset: .3em;
 			inset-inline-start: auto;
 		}
+	}
 
-		::slotted(input) {
-			padding-inline-end: 2em;
-		}
+	::slotted(input) {
+		padding-inline-end: 2em;
 	}
 }
 
@@ -44,6 +54,10 @@
 
 :host(:not([for])):host([swatch="large"]) {
 	flex-flow: column;
+
+	#wrapper {
+		flex-flow: column;
+	}
 }
 
 :host(:not([for])):host([swatch="large"]) #swatch {