@x33025/sveltely 0.1.0 → 0.1.2

package/dist/style.css

@@ -7,7 +7,10 @@
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
+    --color-red-500: oklch(63.7% 0.237 25.331);
     --color-red-600: oklch(57.7% 0.245 27.325);
+    --color-green-500: oklch(72.3% 0.219 149.579);
+    --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-gray-200: oklch(92.8% 0.006 264.531);
     --color-gray-700: oklch(37.3% 0.034 259.733);
     --color-zinc-50: oklch(98.5% 0 0);
@@ -21,6 +24,7 @@
     --color-zinc-800: oklch(27.4% 0.006 286.033);
     --color-zinc-900: oklch(21% 0.006 285.885);
     --color-zinc-950: oklch(14.1% 0.005 285.823);
+    --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
     --container-sm: 24rem;
@@ -203,6 +207,9 @@
   .pointer-events-none {
     pointer-events: none;
   }
+  .visible {
+    visibility: visible;
+  }
   .absolute {
     position: absolute;
   }
@@ -257,6 +264,9 @@
   .inline-grid {
     display: inline-grid;
   }
+  .aspect-square {
+    aspect-ratio: 1 / 1;
+  }
   .size-4 {
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
@@ -280,15 +290,15 @@
   .w-5 {
     width: calc(var(--spacing) * 5);
   }
-  .w-64 {
-    width: calc(var(--spacing) * 64);
-  }
   .w-fit {
     width: fit-content;
   }
   .w-full {
     width: 100%;
   }
+  .w-px {
+    width: 1px;
+  }
   .max-w-3xl {
     max-width: var(--container-3xl);
   }
@@ -304,9 +314,18 @@
   .flex-shrink {
     flex-shrink: 1;
   }
+  .shrink {
+    flex-shrink: 1;
+  }
   .shrink-0 {
     flex-shrink: 0;
   }
+  .flex-grow {
+    flex-grow: 1;
+  }
+  .grow {
+    flex-grow: 1;
+  }
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
@@ -319,6 +338,9 @@
   .cursor-pointer {
     cursor: pointer;
   }
+  .touch-none {
+    touch-action: none;
+  }
   .resize {
     resize: both;
   }
@@ -337,15 +359,15 @@
   .items-center {
     align-items: center;
   }
+  .items-start {
+    align-items: flex-start;
+  }
   .justify-between {
     justify-content: space-between;
   }
   .justify-center {
     justify-content: center;
   }
-  .justify-end {
-    justify-content: flex-end;
-  }
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
@@ -393,9 +415,24 @@
   .border-zinc-200 {
     border-color: var(--color-zinc-200);
   }
+  .bg-black {
+    background-color: var(--color-black);
+  }
   .bg-white {
     background-color: var(--color-white);
   }
+  .bg-zinc-100 {
+    background-color: var(--color-zinc-100);
+  }
+  .bg-zinc-200 {
+    background-color: var(--color-zinc-200);
+  }
+  .object-contain {
+    object-fit: contain;
+  }
+  .object-cover {
+    object-fit: cover;
+  }
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
@@ -504,6 +541,10 @@
     --tw-blur: blur(var(--blur-xs));
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
+  .grayscale {
+    --tw-grayscale: grayscale(100%);
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
   .filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
@@ -550,19 +591,9 @@
       opacity: 50%;
     }
   }
-  .md\:grid-flow-dense {
-    @media (width >= 48rem) {
-      grid-auto-flow: dense;
-    }
-  }
-  .md\:grid-cols-2 {
+  .md\:grid-cols-\[minmax\(0\,18rem\)_minmax\(8rem\,1fr\)\] {
     @media (width >= 48rem) {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-  }
-  .xl\:grid-cols-3 {
-    @media (width >= 80rem) {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
+      grid-template-columns: minmax(0,18rem) minmax(8rem,1fr);
     }
   }
 }
@@ -570,7 +601,7 @@
   :root {
     --sveltely-font-size: 1rem;
     --sveltely-border-radius: 0.75rem;
-    --sveltely-inset: 0px;
+    --sveltely-inset: 0.25rem;
     --sveltely-nested-inset: var(--sveltely-inset);
     --sveltely-padding-x: 0.75rem;
     --sveltely-padding-y: 0.75rem;
@@ -612,6 +643,12 @@
     appearance: none;
     background-clip: padding-box;
   }
+  button {
+    cursor: pointer;
+  }
+  button:disabled {
+    cursor: not-allowed;
+  }
   input::-webkit-search-decoration,	input::-webkit-search-cancel-button,	input::-webkit-search-results-button,	input::-webkit-search-results-decoration {
     -webkit-appearance: none;
     appearance: none;
@@ -647,24 +684,10 @@
     min-width: calc(var(--spacing) * 0);
     flex-direction: row;
   }
-  .spacer {
-    flex: 1 1 auto;
-  }
-  .divider {
-    background-color: color-mix(in srgb, oklch(92.8% 0.006 264.531) 70%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-gray-200) 70%, transparent);
-    }
+  .button,	.async-button,	.segmented-picker,	.switch,	.checkbox,	.search-input,	.token-search-input,	.chip-input,	.dropdown,	.pagination,	.calendar,	.wheel-picker,	.time-picker,	.slider,	.spinner,	.image,	.image-mask,	.text-shimmer {
+    flex-shrink: 0;
   }
 }
-.hstack > .divider {
-  width: 1px;
-  align-self: stretch;
-}
-.vstack > .divider {
-  height: 1px;
-  width: 100%;
-}
 .overflow-auto > .vstack, .overflow-auto > .hstack, .overflow-auto > .grid {
   flex-shrink: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@x33025/sveltely",
-	"version": "0.1.0",
+	"version": "0.1.2",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",