@pontive/pontkit-core 1.11.1 → 1.12.0

package/dist/styles.css

@@ -650,6 +650,7 @@
 :root {
   /* * WIDTH * */
   --pont-ref-sizing-w-auto: auto;
+  --pont-ref-sizing-w-px: 1px;
   --pont-ref-sizing-w-full: 100%;
   --pont-ref-sizing-w-screen: 100vw;
   --pont-ref-sizing-w-dvw: 100dvw;
@@ -664,6 +665,7 @@
 
   /* * HEIGHT * */
   --pont-ref-sizing-h-auto: auto;
+  --pont-ref-sizing-h-px: 1px;
   --pont-ref-sizing-h-full: 100%;
   --pont-ref-sizing-h-screen: 100vh;
   --pont-ref-sizing-h-dvh: 100dvh;
@@ -679,6 +681,7 @@
 
   /* * MIN WIDTH * */
   --pont-ref-sizing-min-w-auto: auto;
+  --pont-ref-sizing-min-w-px: 1px;
   --pont-ref-sizing-min-w-full: 100%;
   --pont-ref-sizing-min-w-screen: 100vw;
   --pont-ref-sizing-min-w-dvw: 100dvw;
@@ -693,6 +696,7 @@
 
   /* * MAX WIDTH * */
   --pont-ref-sizing-max-w-none: none;
+  --pont-ref-sizing-max-w-px: 1px;
   --pont-ref-sizing-max-w-full: 100%;
   --pont-ref-sizing-max-w-dvw: 100dvw;
   --pont-ref-sizing-max-w-dvh: 100dvh;
@@ -706,6 +710,7 @@
   --pont-ref-sizing-max-w-fit: fit-content;
 
   /* * MIN HEIGHT * */
+  --pont-ref-sizing-min-h-px: 1px;
   --pont-ref-sizing-min-h-full: 100%;
   --pont-ref-sizing-min-h-screen: 100vh;
   --pont-ref-sizing-min-h-dvh: 100dvh;
@@ -722,6 +727,7 @@
 
   /* * MAX HEIGHT * */
   --pont-ref-sizing-max-h-none: none;
+  --pont-ref-sizing-max-h-px: 1px;
   --pont-ref-sizing-max-h-full: 100%;
   --pont-ref-sizing-max-h-screen: 100vh;
   --pont-ref-sizing-max-h-dvh: 100dvh;
@@ -7734,9 +7740,36 @@ them all being named `--pont-checkbox-icon-*`. */
  */
 
 :root {
-  --pont-separator-color-bg: hsl(var(--pont-sem-color-border));
-  --pont-separator-horizontal-space-h: var(--pont-sem-width-border);
-  --pont-separator-vertical-space-w: var(--pont-sem-width-border);
+  /* BACKGROUND */
+  --pont-separator-bg-color: hsl(var(--pont-sem-color-border));
+}
+
+/* * -------- ORIENTATIONS -------- * */
+
+/* * HORIZONTAL * */
+
+:root {
+  /* SIZING */
+  --pont-separator-horizontal-sizing-w: var(--pont-ref-sizing-w-full);
+  --pont-separator-horizontal-sizing-h: var(--pont-ref-sizing-h-px);
+
+  --pont-separator-horizontal-sizing-min-w: var(--pont-ref-sizing-min-w-auto);
+  --pont-separator-horizontal-sizing-max-w: var(--pont-ref-sizing-max-w-none);
+  --pont-separator-horizontal-sizing-min-h: var(--pont-ref-sizing-min-h-auto);
+  --pont-separator-horizontal-sizing-max-h: var(--pont-ref-sizing-max-h-none);
+}
+
+/* * VERTICAL * */
+
+:root {
+  /* SIZING */
+  --pont-separator-vertical-sizing-w: var(--pont-ref-sizing-w-px);
+  --pont-separator-vertical-sizing-h: var(--pont-ref-sizing-h-auto);
+
+  --pont-separator-vertical-sizing-min-w: var(--pont-ref-sizing-min-w-auto);
+  --pont-separator-vertical-sizing-max-w: var(--pont-ref-sizing-max-w-none);
+  --pont-separator-vertical-sizing-min-h: var(--pont-ref-sizing-min-h-auto);
+  --pont-separator-vertical-sizing-max-h: var(--pont-ref-sizing-max-h-none);
 }
 
 /*
@@ -13274,20 +13307,39 @@ pont-separator {
   flex-shrink: 0;
 }
 
-pont-separator:has(> [data-slot="separator"][data-orientation="horizontal"]) {
+[data-pont-separator] {
   width: 100%;
-  height: var(--pont-separator-horizontal-space-h);
+  height: 100%;
+
+  background-color: var(--pont-separator-bg-color);
 }
 
-pont-separator:has(> [data-slot="separator"][data-orientation="vertical"]) {
-  align-self: stretch;
-  width: var(--pont-separator-vertical-space-w);
+/* * -------- ORIENTATIONS -------- * */
+
+/* * HORIZONTAL * */
+
+pont-separator:has([data-orientation="horizontal"]) {
+  width: var(--pont-separator-horizontal-sizing-w);
+  height: var(--pont-separator-horizontal-sizing-h);
+
+  min-width: var(--pont-separator-horizontal-sizing-min-w);
+  max-width: var(--pont-separator-horizontal-sizing-max-w);
+  min-height: var(--pont-separator-horizontal-sizing-min-h);
+  max-height: var(--pont-separator-horizontal-sizing-max-h);
 }
 
-pont-separator > [data-slot="separator"] {
-  width: 100%;
-  height: 100%;
-  background-color: var(--pont-separator-color-bg);
+/* * VERTICAL * */
+
+pont-separator:has([data-orientation="vertical"]) {
+  align-self: stretch;
+
+  width: var(--pont-separator-vertical-sizing-w);
+  height: var(--pont-separator-vertical-sizing-h);
+
+  min-width: var(--pont-separator-horizontal-sizing-min-w);
+  max-width: var(--pont-separator-horizontal-sizing-max-w);
+  min-height: var(--pont-separator-horizontal-sizing-min-h);
+  max-height: var(--pont-separator-horizontal-sizing-max-h);
 }
 
 /*

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pontive/pontkit-core",
-  "version": "1.11.1",
+  "version": "1.12.0",
   "license": "MIT",
   "description": "A collection of core components for Pontive",
   "main": "dist/index.js",