@cck-ui/core 0.4.8 → 0.4.10

package/styles.css

@@ -32,67 +32,55 @@ body,
 
   -webkit-font-smoothing: var(--c-webkit-font-smoothing);
   -moz-osx-font-smoothing: var(--c-moz-font-smoothing);
+}
 
-  @media screen and (max-device-width: em(500px)) {
-    -webkit-text-size-adjust: 100%;
-  }
+@media screen and (max-device-width: 31.25em) {
+
+body,
+:host {
+    -webkit-text-size-adjust: 100%
 }
+  }
 
-[data-respect-reduced-motion] {
-  @media (prefers-reduced-motion: reduce) {
-    [data-reduce-motion] {
+@media (prefers-reduced-motion: reduce) {
+    [data-respect-reduced-motion] [data-reduce-motion] {
       transition: none;
       animation: none;
     }
   }
-}
 
-.c-light-hidden {
-  @mixin light {
+[data-c-color-scheme='light'] .c-light-hidden {
     display: none;
-  }
 }
 
-.c-dark-hidden {
-  @mixin dark {
+[data-c-color-scheme='dark'] .c-dark-hidden {
     display: none;
-  }
 }
 
-.c-focus-auto {
-  &:focus-visible {
+.c-focus-auto:focus-visible {
     outline: 2px solid var(--c-primary-color-filled);
-    outline-offset: 2px;
+    outline-offset: calc(0.125rem * var(--c-scale));
   }
-}
 
-.c-focus-always {
-  &:focus {
+.c-focus-always:focus {
     outline: 2px solid var(--c-primary-color-filled);
-    outline-offset: 2px;
+    outline-offset: calc(0.125rem * var(--c-scale));
   }
-}
 
-.c-focus-never {
-  &:focus {
+.c-focus-never:focus {
     outline: none;
   }
-}
 
-.c-active {
-  &:active {
-    transform: translateY(rem(1px));
+.c-active:active {
+    transform: translateY(calc(0.0625rem * var(--c-scale)));
   }
 
-  fieldset:disabled &:active {
+fieldset:disabled .c-active:active {
     transform: none;
   }
-}
 
-.c-rotate-rtl {
-  @mixin where-rtl {
+:where([dir="rtl"]) .c-rotate-rtl {
     transform: rotate(180deg);
-  }
 }
 
 /* This file is automatically generated, do not modify it directly. */
@@ -632,29 +620,29 @@ body,
 }
 
 .m_14602a9d {
-  --button-height-xs: 30px;
-  --button-height-sm: 36px;
-  --button-height-md: 42px;
-  --button-height-lg: 50px;
-  --button-height-xl: 60px;
-
-  --button-height-compact-xs: 22px;
-  --button-height-compact-sm: 26px;
-  --button-height-compact-md: 30px;
-  --button-height-compact-lg: 34px;
-  --button-height-compact-xl: 40px;
-
-  --button-padding-x-xs: 14px;
-  --button-padding-x-sm: 18px;
-  --button-padding-x-md: 22px;
-  --button-padding-x-lg: 26px;
-  --button-padding-x-xl: 32px;
-
-  --button-padding-x-compact-xs: 7px;
-  --button-padding-x-compact-sm: 8px;
-  --button-padding-x-compact-md: 10px;
-  --button-padding-x-compact-lg: 12px;
-  --button-padding-x-compact-xl: 14px;
+  --button-height-xs: calc(1.875rem * var(--c-scale));
+  --button-height-sm: calc(2.25rem * var(--c-scale));
+  --button-height-md: calc(2.625rem * var(--c-scale));
+  --button-height-lg: calc(3.125rem * var(--c-scale));
+  --button-height-xl: calc(3.75rem * var(--c-scale));
+
+  --button-height-compact-xs: calc(1.375rem * var(--c-scale));
+  --button-height-compact-sm: calc(1.625rem * var(--c-scale));
+  --button-height-compact-md: calc(1.875rem * var(--c-scale));
+  --button-height-compact-lg: calc(2.125rem * var(--c-scale));
+  --button-height-compact-xl: calc(2.5rem * var(--c-scale));
+
+  --button-padding-x-xs: calc(0.875rem * var(--c-scale));
+  --button-padding-x-sm: calc(1.125rem * var(--c-scale));
+  --button-padding-x-md: calc(1.375rem * var(--c-scale));
+  --button-padding-x-lg: calc(1.625rem * var(--c-scale));
+  --button-padding-x-xl: calc(2rem * var(--c-scale));
+
+  --button-padding-x-compact-xs: calc(0.4375rem * var(--c-scale));
+  --button-padding-x-compact-sm: calc(0.5rem * var(--c-scale));
+  --button-padding-x-compact-md: calc(0.625rem * var(--c-scale));
+  --button-padding-x-compact-lg: calc(0.75rem * var(--c-scale));
+  --button-padding-x-compact-xl: calc(0.875rem * var(--c-scale));
 
   --button-height: var(--button-height-sm);
   --button-padding-x: var(--button-padding-x-sm);
@@ -673,26 +661,27 @@ body,
   border-radius: var(--button-radius, var(--c-radius-default));
   font-size: var(--button-fz, var(--c-font-size-sm));
   background: var(--button-bg, var(--c-color-default));
-  border: var(--button-bd, rem(1px) solid var(--c-color-default-border));
+  border: var(--button-bd, calc(0.0625rem * var(--c-scale)) solid var(--c-color-default-border));
   color: var(--button-color, var(--c-color-default-color));
   height: var(--button-height, var(--button-height-sm));
   padding-inline: var(--button-padding-x, var(--button-padding-x-sm));
   vertical-align: middle;
+}
 
-  &:where([data-block]) {
+  .m_14602a9d:where([data-block]) {
     display: block;
     width: 100%;
   }
 
-  &:where([data-with-left-section]) {
+  .m_14602a9d:where([data-with-left-section]) {
     padding-inline-start: calc(var(--button-padding-x) / 1.5);
   }
 
-  &:where([data-with-right-section]) {
+  .m_14602a9d:where([data-with-right-section]) {
     padding-inline-end: calc(var(--button-padding-x) / 1.5);
   }
 
-  &:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])) {
+  .m_14602a9d:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])) {
     cursor: not-allowed;
     border-color: transparent;
     transform: none;
@@ -700,11 +689,11 @@ body,
     background: var(--c-color-disabled);
   }
 
-  &::before {
+  .m_14602a9d::before {
     content: '';
     pointer-events: none;
     position: absolute;
-    inset: -1px;
+    inset: calc(-0.0625rem * var(--c-scale));
     border-radius: var(--button-radius, var(--c-radius-default));
     transform: translateY(-100%);
     opacity: 0;
@@ -712,37 +701,43 @@ body,
     transition:
       transform 150ms ease,
       opacity 100ms ease;
+  }
 
-    @mixin where-light {
+  :where([data-c-color-scheme='light']) .m_14602a9d::before {
       background-color: rgba(255, 255, 255, 0.15);
-    }
+}
 
-    @mixin where-dark {
+  :where([data-c-color-scheme='dark']) .m_14602a9d::before {
       background-color: rgba(0, 0, 0, 0.15);
-    }
-  }
+}
 
-  &:where([data-loading]) {
+  .m_14602a9d:where([data-loading]) {
     cursor: not-allowed;
     transform: none;
+  }
 
-    &::before {
+  .m_14602a9d:where([data-loading])::before {
       transform: translateY(0);
       opacity: 1;
     }
 
-    & .m_7725dbfb {
+  .m_14602a9d:where([data-loading]) .m_7725dbfb {
       opacity: 0;
       transform: translateY(100%);
     }
-  }
 
-  @mixin hover {
-    &:where(:not([data-loading], :disabled, [data-disabled])) {
+  @media (hover: hover) {
+    .m_14602a9d:hover:where(:not([data-loading], :disabled, [data-disabled])) {
+      background-color: var(--button-hover, var(--c-color-default-hover));
+      color: var(--button-hover-color, var(--button-color));
+    }
+}
+
+  @media (hover: none) {
+    .m_14602a9d:active:where(:not([data-loading], :disabled, [data-disabled])) {
       background-color: var(--button-hover, var(--c-color-default-hover));
       color: var(--button-hover-color, var(--button-color));
     }
-  }
 }
 
 .m_7725dbfb {
@@ -765,24 +760,24 @@ body,
   opacity: 1;
   text-box-trim: trim-both;
   text-box-edge: cap alphabetic;
+}
 
-  &:where([data-loading]) {
+.m_774a0c99:where([data-loading]) {
     opacity: 0.2;
   }
-}
 
 .m_462d374a {
   display: flex;
   align-items: center;
+}
 
-  &:where([data-position='left']) {
+.m_462d374a:where([data-position='left']) {
     margin-inline-end: var(--c-spacing-xs);
   }
 
-  &:where([data-position='right']) {
+.m_462d374a:where([data-position='right']) {
     margin-inline-start: var(--c-spacing-xs);
   }
-}
 
 .m_72bc570e {
   position: absolute;
@@ -791,90 +786,82 @@ body,
 }
 
 .m_770b8424 {
-  --button-border-width: 1px;
+  --button-border-width: calc(0.0625rem * var(--c-scale));
   display: flex;
+}
 
-  & :where(.m_14602a9d) {
-    &:focus {
+.m_770b8424 :where(.m_14602a9d):focus {
       position: relative;
       z-index: 1;
     }
-  }
 
-  &[data-orientation='horizontal'] {
+.m_770b8424[data-orientation='horizontal'] {
     flex-direction: row;
+  }
 
-    & .m_14602a9d,
-    & .m_260a6221 {
-      &:not(:only-child):first-child {
+.m_770b8424[data-orientation='horizontal'] .m_14602a9d:not(:only-child):first-child, .m_770b8424[data-orientation='horizontal'] .m_260a6221:not(:only-child):first-child {
         border-end-end-radius: 0;
         border-start-end-radius: 0;
         border-inline-end-width: calc(var(--button-border-width) / 2);
       }
 
-      &:not(:only-child):last-child {
+.m_770b8424[data-orientation='horizontal'] .m_14602a9d:not(:only-child):last-child, .m_770b8424[data-orientation='horizontal'] .m_260a6221:not(:only-child):last-child {
         border-end-start-radius: 0;
         border-start-start-radius: 0;
         border-inline-start-width: calc(var(--button-border-width) / 2);
       }
 
-      &:not(:only-child):not(:first-child):not(:last-child) {
+.m_770b8424[data-orientation='horizontal'] .m_14602a9d:not(:only-child):not(:first-child):not(:last-child), .m_770b8424[data-orientation='horizontal'] .m_260a6221:not(:only-child):not(:first-child):not(:last-child) {
         border-radius: 0;
         border-inline-width: calc(var(--button-border-width) / 2);
       }
-    }
-  }
 
-  &[data-orientation='vertical'] {
+.m_770b8424[data-orientation='vertical'] {
     flex-direction: column;
+  }
 
-    & .m_14602a9d,
-    & .m_260a6221 {
-      &:not(:only-child):first-child {
+.m_770b8424[data-orientation='vertical'] .m_14602a9d:not(:only-child):first-child, .m_770b8424[data-orientation='vertical'] .m_260a6221:not(:only-child):first-child {
         border-end-start-radius: 0;
         border-end-end-radius: 0;
         border-bottom-width: calc(var(--button-border-width) / 2);
       }
 
-      &:not(:only-child):last-child {
+.m_770b8424[data-orientation='vertical'] .m_14602a9d:not(:only-child):last-child, .m_770b8424[data-orientation='vertical'] .m_260a6221:not(:only-child):last-child {
         border-start-start-radius: 0;
         border-start-end-radius: 0;
         border-top-width: calc(var(--button-border-width) / 2);
       }
 
-      &:not(:only-child):not(:first-child):not(:last-child) {
+.m_770b8424[data-orientation='vertical'] .m_14602a9d:not(:only-child):not(:first-child):not(:last-child), .m_770b8424[data-orientation='vertical'] .m_260a6221:not(:only-child):not(:first-child):not(:last-child) {
         border-radius: 0;
         border-bottom-width: calc(var(--button-border-width) / 2);
         border-top-width: calc(var(--button-border-width) / 2);
       }
-    }
-  }
-}
 
 .m_260a6221 {
-  --section-height-xs: 30px;
-  --section-height-sm: 36px;
-  --section-height-md: 42px;
-  --section-height-lg: 50px;
-  --section-height-xl: 60px;
-
-  --section-height-compact-xs: 22px;
-  --section-height-compact-sm: 26px;
-  --section-height-compact-md: 30px;
-  --section-height-compact-lg: 34px;
-  --section-height-compact-xl: 40px;
-
-  --section-padding-x-xs: 14px;
-  --section-padding-x-sm: 18px;
-  --section-padding-x-md: 22px;
-  --section-padding-x-lg: 26px;
-  --section-padding-x-xl: 32px;
-
-  --section-padding-x-compact-xs: 7px;
-  --section-padding-x-compact-sm: 8px;
-  --section-padding-x-compact-md: 10px;
-  --section-padding-x-compact-lg: 12px;
-  --section-padding-x-compact-xl: 14px;
+  --section-height-xs: calc(1.875rem * var(--c-scale));
+  --section-height-sm: calc(2.25rem * var(--c-scale));
+  --section-height-md: calc(2.625rem * var(--c-scale));
+  --section-height-lg: calc(3.125rem * var(--c-scale));
+  --section-height-xl: calc(3.75rem * var(--c-scale));
+
+  --section-height-compact-xs: calc(1.375rem * var(--c-scale));
+  --section-height-compact-sm: calc(1.625rem * var(--c-scale));
+  --section-height-compact-md: calc(1.875rem * var(--c-scale));
+  --section-height-compact-lg: calc(2.125rem * var(--c-scale));
+  --section-height-compact-xl: calc(2.5rem * var(--c-scale));
+
+  --section-padding-x-xs: calc(0.875rem * var(--c-scale));
+  --section-padding-x-sm: calc(1.125rem * var(--c-scale));
+  --section-padding-x-md: calc(1.375rem * var(--c-scale));
+  --section-padding-x-lg: calc(1.625rem * var(--c-scale));
+  --section-padding-x-xl: calc(2rem * var(--c-scale));
+
+  --section-padding-x-compact-xs: calc(0.4375rem * var(--c-scale));
+  --section-padding-x-compact-sm: calc(0.5rem * var(--c-scale));
+  --section-padding-x-compact-md: calc(0.625rem * var(--c-scale));
+  --section-padding-x-compact-lg: calc(0.75rem * var(--c-scale));
+  --section-padding-x-compact-xl: calc(0.875rem * var(--c-scale));
 
   --section-height: var(--section-height-sm);
   --section-padding-x: var(--section-padding-x-sm);
@@ -885,7 +872,7 @@ body,
   border-radius: var(--section-radius, var(--c-radius-default));
   font-size: var(--section-fz, var(--c-font-size-sm));
   background: var(--section-bg, var(--c-primary-color-filled));
-  border: var(--section-bd, rem(1px) solid transparent);
+  border: var(--section-bd, calc(0.0625rem * var(--c-scale)) solid transparent);
   height: var(--section-height, var(--section-height-sm));
   padding-inline: var(--section-padding-x, var(--section-padding-x-sm));
   vertical-align: middle;
@@ -936,21 +923,19 @@ body,
   justify-content: var(--group-justify, flex-start);
   align-items: var(--group-align, center);
   gap: var(--group-gap, var(--c-spacing-md));
+}
 
-  &:where([data-grow]) {
-    & > * {
+  .m_c9afe370:where([data-grow]) > * {
       flex-grow: 1;
       max-width: var(--group-child-width);
     }
-  }
-}
 
 .m_a244865c {
-  --loader-size-xs: 18px;
-  --loader-size-sm: 22px;
-  --loader-size-md: 36px;
-  --loader-size-lg: 44px;
-  --loader-size-xl: 58px;
+  --loader-size-xs: calc(1.125rem * var(--c-scale));
+  --loader-size-sm: calc(1.375rem * var(--c-scale));
+  --loader-size-md: calc(2.25rem * var(--c-scale));
+  --loader-size-lg: calc(2.75rem * var(--c-scale));
+  --loader-size-xl: calc(3.625rem * var(--c-scale));
   --loader-size: var(--loader-size-md);
   --loader-color: var(--c-primary-color-filled);
 }
@@ -986,20 +971,20 @@ body,
   flex: 1;
   background: var(--loader-color);
   animation: m_774c277d 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
-  border-radius: 2px;
+  border-radius: calc(0.125rem * var(--c-scale));
+}
 
-  &:nth-of-type(1) {
+.m_919edf59:nth-of-type(1) {
     animation-delay: -240ms;
   }
 
-  &:nth-of-type(2) {
+.m_919edf59:nth-of-type(2) {
     animation-delay: -120ms;
   }
 
-  &:nth-of-type(3) {
+.m_919edf59:nth-of-type(3) {
     animation-delay: 0;
   }
-}
 
 @keyframes m_24cd2081 {
   0%,
@@ -1030,11 +1015,11 @@ body,
   border-radius: 50%;
   background: var(--loader-color);
   animation: m_24cd2081 0.8s infinite linear;
+}
 
-  &:nth-child(2) {
+.m_919ee88f:nth-child(2) {
     animation-delay: 0.4s;
   }
-}
 
 @keyframes m_1309882b {
   0% {
@@ -1050,20 +1035,20 @@ body,
   display: inline-block;
   width: var(--loader-size);
   height: var(--loader-size);
+}
 
-  &::after {
+.m_c87fd4ff::after {
     content: '';
     display: block;
     width: var(--loader-size);
     height: var(--loader-size);
-    border-radius: 10000px;
+    border-radius: calc(625rem * var(--c-scale));
     border-width: calc(var(--loader-size) / 8);
     border-style: solid;
     border-color: var(--loader-color) var(--loader-color) var(--loader-color)
       transparent;
     animation: m_1309882b 1.2s linear infinite;
   }
-}
 
 .m_cd6f7c35 {
   container: simple-grid / inline-size;
@@ -1093,31 +1078,32 @@ body,
   text-wrap: var(--text-text-wrap, var(--c-text-wrap));
   margin: 0;
   padding: 0;
+}
 
-  &:where([data-truncate]) {
+  .m_3f669182:where([data-truncate]) {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
-  &:where([data-truncate='start']) {
+  .m_3f669182:where([data-truncate='start']) {
     direction: rtl;
     text-align: end;
+  }
 
-    @mixin where-rtl {
+  :where([dir="rtl"]) .m_3f669182:where([data-truncate='start']) {
       direction: ltr;
       text-align: start;
-    }
-  }
+}
 
-  &:where([data-variant='gradient']) {
+  .m_3f669182:where([data-variant='gradient']) {
     background-image: var(--text-gradient);
     -webkit-text-fill-color: transparent;
     -webkit-background-clip: text;
     background-clip: text;
   }
 
-  &:where([data-line-clamp]) {
+  .m_3f669182:where([data-line-clamp]) {
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
@@ -1125,13 +1111,12 @@ body,
     -webkit-box-orient: vertical;
   }
 
-  &:where([data-inherit]) {
+  .m_3f669182:where([data-inherit]) {
     line-height: inherit;
     font-weight: inherit;
     font-size: inherit;
   }
 
-  &:where([data-inline]) {
+  .m_3f669182:where([data-inline]) {
     line-height: 1;
   }
-}