@cratis/components 2.5.0 → 2.5.2

package/dist/esm/tailwind-utilities.css

@@ -1,10 +1,11 @@
-/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
   :root, :host {
-    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
-      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
+      "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "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-100: oklch(93.6% 0.032 17.717);
@@ -76,7 +77,7 @@
     -moz-tab-size: 4;
       -o-tab-size: 4;
          tab-size: 4;
-    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
     font-feature-settings: var(--default-font-feature-settings, normal);
     font-variation-settings: var(--default-font-variation-settings, normal);
     -webkit-tap-highlight-color: transparent;
@@ -128,7 +129,7 @@
     border-color: inherit;
     border-collapse: collapse;
   }
-  :-moz-focusring {
+  :-moz-focusring:where(:not(iframe)) {
     outline: auto;
   }
   progress {
@@ -310,7 +311,7 @@
     }
   }
   .m-0 {
-    margin: 0;
+    margin: 0px;
   }
   .m-3 {
     margin: calc(var(--spacing) * 3);
@@ -334,7 +335,7 @@
     margin-right: calc(var(--spacing) * 2);
   }
   .mb-0 {
-    margin-bottom: 0;
+    margin-bottom: 0px;
   }
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
@@ -476,31 +477,23 @@
   .gap-8 {
     gap: calc(var(--spacing) * 8);
   }
-  .space-y-2 {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
-    }
+  :where(.space-y-2 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
   }
-  .divide-y {
-    :where(& > :not(:last-child)) {
-      --tw-divide-y-reverse: 0;
-      border-bottom-style: var(--tw-border-style);
-      border-top-style: var(--tw-border-style);
-      border-top-width: calc(1px * var(--tw-divide-y-reverse));
-      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
-    }
+  :where(.divide-y > :not(:last-child)) {
+    --tw-divide-y-reverse: 0;
+    border-bottom-style: var(--tw-border-style);
+    border-top-style: var(--tw-border-style);
+    border-top-width: calc(1px * var(--tw-divide-y-reverse));
+    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
   }
-  .divide-slate-700 {
-    :where(& > :not(:last-child)) {
-      border-color: var(--color-slate-700);
-    }
+  :where(.divide-slate-700 > :not(:last-child)) {
+    border-color: var(--color-slate-700);
   }
-  .divide-slate-800 {
-    :where(& > :not(:last-child)) {
-      border-color: var(--color-slate-800);
-    }
+  :where(.divide-slate-800 > :not(:last-child)) {
+    border-color: var(--color-slate-800);
   }
   .truncate {
     overflow: hidden;
@@ -780,133 +773,85 @@
     --tw-duration: 150ms;
     transition-duration: 150ms;
   }
-  .group-hover\:opacity-100 {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        opacity: 100%;
-      }
+  @media (hover: hover) {
+    .group-hover\:opacity-100:is(:where(.group):hover *) {
+      opacity: 100%;
     }
   }
-  .placeholder\:text-slate-400 {
-    &::-moz-placeholder {
-      color: var(--color-slate-400);
-    }
-    &::placeholder {
-      color: var(--color-slate-400);
-    }
+  .placeholder\:text-slate-400::-moz-placeholder {
+    color: var(--color-slate-400);
   }
-  .hover\:border-slate-500 {
-    &:hover {
-      @media (hover: hover) {
-        border-color: var(--color-slate-500);
-      }
-    }
+  .placeholder\:text-slate-400::placeholder {
+    color: var(--color-slate-400);
   }
-  .hover\:bg-gray-500 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-gray-500);
-      }
+  @media (hover: hover) {
+    .hover\:border-slate-500:hover {
+      border-color: var(--color-slate-500);
     }
-  }
-  .hover\:bg-sky-400 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-sky-400);
-      }
+    .hover\:bg-gray-500:hover {
+      background-color: var(--color-gray-500);
     }
-  }
-  .hover\:bg-slate-700 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-slate-700);
-      }
+    .hover\:bg-sky-400:hover {
+      background-color: var(--color-sky-400);
     }
-  }
-  .hover\:bg-slate-800 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-slate-800);
-      }
+    .hover\:bg-slate-700:hover {
+      background-color: var(--color-slate-700);
     }
-  }
-  .hover\:bg-slate-800\/60 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 60%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-slate-800) 60%, transparent);
-        }
+    .hover\:bg-slate-800:hover {
+      background-color: var(--color-slate-800);
+    }
+    .hover\:bg-slate-800\/60:hover {
+      background-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 60%, transparent);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-slate-800\/60:hover {
+        background-color: color-mix(in oklab, var(--color-slate-800) 60%, transparent);
       }
     }
   }
-  .focus\:border-sky-400 {
-    &:focus {
-      border-color: var(--color-sky-400);
-    }
+  .focus\:border-sky-400:focus {
+    border-color: var(--color-sky-400);
   }
-  .focus\:outline-none {
-    &:focus {
-      --tw-outline-style: none;
-      outline-style: none;
-    }
+  .focus\:outline-none:focus {
+    --tw-outline-style: none;
+    outline-style: none;
   }
-  .focus-visible\:ring-2 {
-    &:focus-visible {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
+  .focus-visible\:ring-2:focus-visible {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .focus-visible\:ring-sky-400 {
-    &:focus-visible {
-      --tw-ring-color: var(--color-sky-400);
-    }
+  .focus-visible\:ring-sky-400:focus-visible {
+    --tw-ring-color: var(--color-sky-400);
   }
-  .active\:bg-sky-600 {
-    &:active {
-      background-color: var(--color-sky-600);
-    }
+  .active\:bg-sky-600:active {
+    background-color: var(--color-sky-600);
   }
-  .disabled\:cursor-not-allowed {
-    &:disabled {
-      cursor: not-allowed;
-    }
+  .disabled\:cursor-not-allowed:disabled {
+    cursor: not-allowed;
   }
-  .disabled\:opacity-50 {
-    &:disabled {
-      opacity: 50%;
-    }
+  .disabled\:opacity-50:disabled {
+    opacity: 50%;
   }
-  .data-\[p-highlight\=true\]\:border-sky-500 {
-    &[data-p-highlight="true"] {
-      border-color: var(--color-sky-500);
-    }
+  .data-\[p-highlight\=true\]\:border-sky-500[data-p-highlight="true"] {
+    border-color: var(--color-sky-500);
   }
-  .data-\[p-highlight\=true\]\:bg-sky-500 {
-    &[data-p-highlight="true"] {
-      background-color: var(--color-sky-500);
-    }
+  .data-\[p-highlight\=true\]\:bg-sky-500[data-p-highlight="true"] {
+    background-color: var(--color-sky-500);
   }
-  .data-\[p-highlight\=true\]\:bg-sky-500\/10 {
-    &[data-p-highlight="true"] {
-      background-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 10%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-sky-500) 10%, transparent);
-      }
+  .data-\[p-highlight\=true\]\:bg-sky-500\/10[data-p-highlight="true"] {
+    background-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-sky-500) 10%, transparent);
     }
   }
-  .data-\[p-highlight\=true\]\:text-sky-100 {
-    &[data-p-highlight="true"] {
-      color: var(--color-sky-100);
-    }
+  .data-\[p-highlight\=true\]\:text-sky-100[data-p-highlight="true"] {
+    color: var(--color-sky-100);
   }
-  .data-\[p-highlight\=true\]\:text-white {
-    &[data-p-highlight="true"] {
-      color: var(--color-white);
-    }
+  .data-\[p-highlight\=true\]\:text-white[data-p-highlight="true"] {
+    color: var(--color-white);
   }
-  .md\:flex-row {
-    @media (width >= 48rem) {
+  @media (width >= 48rem) {
+    .md\:flex-row {
       flex-direction: row;
     }
   }