@cck-ui/core 0.36.0 → 0.38.0

package/styles/indicator.css

@@ -0,0 +1,64 @@
+@keyframes m_7c93cd91 {
+  0% {
+    opacity: 0.6;
+    transform: scale(0);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(2.8);
+  }
+}
+
+.m_20df55e0 {
+  --indicator-size: calc(0.625rem * var(--c-scale));
+  --indicator-color: var(--c-primary-color-filled);
+
+  position: relative;
+  display: block;
+}
+
+.m_20df55e0:where([data-inline]) {
+    display: inline-block;
+  }
+
+.m_2b5957d1 {
+  position: absolute;
+  top: var(--indicator-top);
+  left: var(--indicator-left);
+  right: var(--indicator-right);
+  bottom: var(--indicator-bottom);
+  transform: translate(var(--indicator-translate-x), var(--indicator-translate-y));
+  min-width: var(--indicator-size);
+  height: var(--indicator-size);
+  border-radius: var(--indicator-radius, 1000rem);
+  z-index: var(--indicator-z-index, 200);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--c-font-size-xs);
+  background-color: var(--indicator-color);
+  color: var(--indicator-text-color, var(--c-color-white));
+  white-space: nowrap;
+}
+
+.m_2b5957d1::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-color: var(--indicator-color);
+    border-radius: var(--indicator-radius, 1000rem);
+    z-index: -1;
+  }
+
+.m_2b5957d1:where([data-with-label]) {
+    padding-inline: calc(var(--c-spacing-xs) / 2);
+  }
+
+.m_2b5957d1:where([data-with-border]) {
+    border: 2px solid var(--c-color-body);
+  }
+
+.m_2b5957d1[data-processing]::before {
+      animation: m_7c93cd91 1000ms linear infinite;
+    }

package/styles/indicator.layer.css

@@ -0,0 +1,65 @@
+@layer cck {@keyframes m_7c93cd91 {
+  0% {
+    opacity: 0.6;
+    transform: scale(0);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(2.8);
+  }
+}
+
+.m_20df55e0 {
+  --indicator-size: calc(0.625rem * var(--c-scale));
+  --indicator-color: var(--c-primary-color-filled);
+
+  position: relative;
+  display: block;
+}
+
+.m_20df55e0:where([data-inline]) {
+    display: inline-block;
+  }
+
+.m_2b5957d1 {
+  position: absolute;
+  top: var(--indicator-top);
+  left: var(--indicator-left);
+  right: var(--indicator-right);
+  bottom: var(--indicator-bottom);
+  transform: translate(var(--indicator-translate-x), var(--indicator-translate-y));
+  min-width: var(--indicator-size);
+  height: var(--indicator-size);
+  border-radius: var(--indicator-radius, 1000rem);
+  z-index: var(--indicator-z-index, 200);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--c-font-size-xs);
+  background-color: var(--indicator-color);
+  color: var(--indicator-text-color, var(--c-color-white));
+  white-space: nowrap;
+}
+
+.m_2b5957d1::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-color: var(--indicator-color);
+    border-radius: var(--indicator-radius, 1000rem);
+    z-index: -1;
+  }
+
+.m_2b5957d1:where([data-with-label]) {
+    padding-inline: calc(var(--c-spacing-xs) / 2);
+  }
+
+.m_2b5957d1:where([data-with-border]) {
+    border: 2px solid var(--c-color-body);
+  }
+
+.m_2b5957d1[data-processing]::before {
+      animation: m_7c93cd91 1000ms linear infinite;
+    }
+}

package/styles/kbd.css

@@ -0,0 +1,31 @@
+.m_d894b0c2 {
+  --kbd-fz-xs: calc(0.625rem * var(--c-scale));
+  --kbd-fz-sm: calc(0.75rem * var(--c-scale));
+  --kbd-fz-md: calc(0.875rem * var(--c-scale));
+  --kbd-fz-lg: calc(1rem * var(--c-scale));
+  --kbd-fz-xl: calc(1.25rem * var(--c-scale));
+  --kbd-fz: var(--kbd-fz-sm);
+
+  font-family: var(--c-font-family-monospace);
+  line-height: var(--c-line-height);
+  font-weight: var(--c-font-weight-bold);
+  font-size: var(--kbd-fz);
+  border-radius: var(--c-radius-sm);
+  border: calc(0.0625rem * var(--c-scale)) solid;
+  border-bottom-width: calc(0.1875rem * var(--c-scale));
+  unicode-bidi: embed;
+  text-align: center;
+  padding: 0.12em 0.45em;
+}
+
+  :where([data-c-color-scheme='light']) .m_d894b0c2 {
+    border-color: var(--c-color-gray-3);
+    color: var(--c-color-gray-7);
+    background-color: var(--c-color-gray-0);
+}
+
+  :where([data-c-color-scheme='dark']) .m_d894b0c2 {
+    border-color: var(--c-color-dark-4);
+    color: var(--c-color-dark-0);
+    background-color: var(--c-color-dark-6);
+}

package/styles/kbd.layer.css

@@ -0,0 +1,32 @@
+@layer cck {.m_d894b0c2 {
+  --kbd-fz-xs: calc(0.625rem * var(--c-scale));
+  --kbd-fz-sm: calc(0.75rem * var(--c-scale));
+  --kbd-fz-md: calc(0.875rem * var(--c-scale));
+  --kbd-fz-lg: calc(1rem * var(--c-scale));
+  --kbd-fz-xl: calc(1.25rem * var(--c-scale));
+  --kbd-fz: var(--kbd-fz-sm);
+
+  font-family: var(--c-font-family-monospace);
+  line-height: var(--c-line-height);
+  font-weight: var(--c-font-weight-bold);
+  font-size: var(--kbd-fz);
+  border-radius: var(--c-radius-sm);
+  border: calc(0.0625rem * var(--c-scale)) solid;
+  border-bottom-width: calc(0.1875rem * var(--c-scale));
+  unicode-bidi: embed;
+  text-align: center;
+  padding: 0.12em 0.45em;
+}
+
+  :where([data-c-color-scheme='light']) .m_d894b0c2 {
+    border-color: var(--c-color-gray-3);
+    color: var(--c-color-gray-7);
+    background-color: var(--c-color-gray-0);
+}
+
+  :where([data-c-color-scheme='dark']) .m_d894b0c2 {
+    border-color: var(--c-color-dark-4);
+    color: var(--c-color-dark-0);
+    background-color: var(--c-color-dark-6);
+}
+}

package/styles.css

@@ -2180,6 +2180,103 @@ fieldset:disabled .c-active:active {
   border-radius: var(--image-radius, 0);
 }
 
+@keyframes m_7c93cd91 {
+  0% {
+    opacity: 0.6;
+    transform: scale(0);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(2.8);
+  }
+}
+
+.m_20df55e0 {
+  --indicator-size: calc(0.625rem * var(--c-scale));
+  --indicator-color: var(--c-primary-color-filled);
+
+  position: relative;
+  display: block;
+}
+
+.m_20df55e0:where([data-inline]) {
+    display: inline-block;
+  }
+
+.m_2b5957d1 {
+  position: absolute;
+  top: var(--indicator-top);
+  left: var(--indicator-left);
+  right: var(--indicator-right);
+  bottom: var(--indicator-bottom);
+  transform: translate(var(--indicator-translate-x), var(--indicator-translate-y));
+  min-width: var(--indicator-size);
+  height: var(--indicator-size);
+  border-radius: var(--indicator-radius, 1000rem);
+  z-index: var(--indicator-z-index, 200);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--c-font-size-xs);
+  background-color: var(--indicator-color);
+  color: var(--indicator-text-color, var(--c-color-white));
+  white-space: nowrap;
+}
+
+.m_2b5957d1::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-color: var(--indicator-color);
+    border-radius: var(--indicator-radius, 1000rem);
+    z-index: -1;
+  }
+
+.m_2b5957d1:where([data-with-label]) {
+    padding-inline: calc(var(--c-spacing-xs) / 2);
+  }
+
+.m_2b5957d1:where([data-with-border]) {
+    border: 2px solid var(--c-color-body);
+  }
+
+.m_2b5957d1[data-processing]::before {
+      animation: m_7c93cd91 1000ms linear infinite;
+    }
+
+.m_d894b0c2 {
+  --kbd-fz-xs: calc(0.625rem * var(--c-scale));
+  --kbd-fz-sm: calc(0.75rem * var(--c-scale));
+  --kbd-fz-md: calc(0.875rem * var(--c-scale));
+  --kbd-fz-lg: calc(1rem * var(--c-scale));
+  --kbd-fz-xl: calc(1.25rem * var(--c-scale));
+  --kbd-fz: var(--kbd-fz-sm);
+
+  font-family: var(--c-font-family-monospace);
+  line-height: var(--c-line-height);
+  font-weight: var(--c-font-weight-bold);
+  font-size: var(--kbd-fz);
+  border-radius: var(--c-radius-sm);
+  border: calc(0.0625rem * var(--c-scale)) solid;
+  border-bottom-width: calc(0.1875rem * var(--c-scale));
+  unicode-bidi: embed;
+  text-align: center;
+  padding: 0.12em 0.45em;
+}
+
+  :where([data-c-color-scheme='light']) .m_d894b0c2 {
+    border-color: var(--c-color-gray-3);
+    color: var(--c-color-gray-7);
+    background-color: var(--c-color-gray-0);
+}
+
+  :where([data-c-color-scheme='dark']) .m_d894b0c2 {
+    border-color: var(--c-color-dark-4);
+    color: var(--c-color-dark-0);
+    background-color: var(--c-color-dark-6);
+}
+
 .m_a244865c {
   --loader-size-xs: calc(1.125rem * var(--c-scale));
   --loader-size-sm: calc(1.375rem * var(--c-scale));

package/styles.layer.css

@@ -2180,6 +2180,103 @@ fieldset:disabled .c-active:active {
   border-radius: var(--image-radius, 0);
 }
 
+@keyframes m_7c93cd91 {
+  0% {
+    opacity: 0.6;
+    transform: scale(0);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(2.8);
+  }
+}
+
+.m_20df55e0 {
+  --indicator-size: calc(0.625rem * var(--c-scale));
+  --indicator-color: var(--c-primary-color-filled);
+
+  position: relative;
+  display: block;
+}
+
+.m_20df55e0:where([data-inline]) {
+    display: inline-block;
+  }
+
+.m_2b5957d1 {
+  position: absolute;
+  top: var(--indicator-top);
+  left: var(--indicator-left);
+  right: var(--indicator-right);
+  bottom: var(--indicator-bottom);
+  transform: translate(var(--indicator-translate-x), var(--indicator-translate-y));
+  min-width: var(--indicator-size);
+  height: var(--indicator-size);
+  border-radius: var(--indicator-radius, 1000rem);
+  z-index: var(--indicator-z-index, 200);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--c-font-size-xs);
+  background-color: var(--indicator-color);
+  color: var(--indicator-text-color, var(--c-color-white));
+  white-space: nowrap;
+}
+
+.m_2b5957d1::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-color: var(--indicator-color);
+    border-radius: var(--indicator-radius, 1000rem);
+    z-index: -1;
+  }
+
+.m_2b5957d1:where([data-with-label]) {
+    padding-inline: calc(var(--c-spacing-xs) / 2);
+  }
+
+.m_2b5957d1:where([data-with-border]) {
+    border: 2px solid var(--c-color-body);
+  }
+
+.m_2b5957d1[data-processing]::before {
+      animation: m_7c93cd91 1000ms linear infinite;
+    }
+
+.m_d894b0c2 {
+  --kbd-fz-xs: calc(0.625rem * var(--c-scale));
+  --kbd-fz-sm: calc(0.75rem * var(--c-scale));
+  --kbd-fz-md: calc(0.875rem * var(--c-scale));
+  --kbd-fz-lg: calc(1rem * var(--c-scale));
+  --kbd-fz-xl: calc(1.25rem * var(--c-scale));
+  --kbd-fz: var(--kbd-fz-sm);
+
+  font-family: var(--c-font-family-monospace);
+  line-height: var(--c-line-height);
+  font-weight: var(--c-font-weight-bold);
+  font-size: var(--kbd-fz);
+  border-radius: var(--c-radius-sm);
+  border: calc(0.0625rem * var(--c-scale)) solid;
+  border-bottom-width: calc(0.1875rem * var(--c-scale));
+  unicode-bidi: embed;
+  text-align: center;
+  padding: 0.12em 0.45em;
+}
+
+  :where([data-c-color-scheme='light']) .m_d894b0c2 {
+    border-color: var(--c-color-gray-3);
+    color: var(--c-color-gray-7);
+    background-color: var(--c-color-gray-0);
+}
+
+  :where([data-c-color-scheme='dark']) .m_d894b0c2 {
+    border-color: var(--c-color-dark-4);
+    color: var(--c-color-dark-0);
+    background-color: var(--c-color-dark-6);
+}
+
 .m_a244865c {
   --loader-size-xs: calc(1.125rem * var(--c-scale));
   --loader-size-sm: calc(1.375rem * var(--c-scale));