@cck-ui/core 0.30.0 → 0.32.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cck-ui/core",
-  "version": "0.30.0",
+  "version": "0.32.0",
   "description": "Vue component library focused on usability, accessibility and developer experience",
   "homepage": "https://cck-ui.jackatlas.xyz",
   "license": "ISC",

package/styles/avatar.css

@@ -0,0 +1,67 @@
+.m_813a50b {
+  --ag-spacing: var(--c-spacing-sm);
+  --ag-offset: calc(var(--ag-spacing) * -1);
+
+  display: flex;
+  padding-inline-start: var(--ag-spacing);
+}
+
+.m_94ecd0d6 {
+  --avatar-size-xs: calc(1rem * var(--c-scale));
+  --avatar-size-sm: calc(1.625rem * var(--c-scale));
+  --avatar-size-md: calc(2.375rem * var(--c-scale));
+  --avatar-size-lg: calc(3.5rem * var(--c-scale));
+  --avatar-size-xl: calc(5.25rem * var(--c-scale));
+
+  --avatar-size: var(--avatar-size-md);
+  --avatar-radius: calc(62.5rem * var(--c-scale));
+  --avatar-bg: var(--c-color-gray-light);
+  --avatar-bd: calc(0.0625rem * var(--c-scale)) solid transparent;
+  --avatar-color: var(--c-color-gray-light-color);
+  --avatar-placeholder-fz: calc(var(--avatar-size) / 2.5);
+
+  -webkit-tap-highlight-color: transparent;
+  position: relative;
+  display: block;
+  user-select: none;
+  overflow: hidden;
+  border-radius: var(--avatar-radius);
+  text-decoration: none;
+  padding: 0;
+  width: var(--avatar-size);
+  height: var(--avatar-size);
+  min-width: var(--avatar-size);
+}
+
+.m_94ecd0d6:where([data-within-group]) {
+    margin-inline-start: var(--ag-offset);
+    border: 2px solid var(--c-color-body);
+    background: var(--c-color-body);
+  }
+
+.m_82d57e7 {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.m_a2891aff {
+  font-weight: var(--c-font-weight-bold);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  user-select: none;
+  border-radius: var(--avatar-radius);
+  font-size: var(--avatar-placeholder-fz);
+  background: var(--avatar-bg);
+  border: var(--avatar-bd);
+  color: var(--avatar-color);
+}
+
+.m_a2891aff > [data-avatar-placeholder-icon] {
+    width: 70%;
+    height: 70%;
+  }

package/styles/avatar.layer.css

@@ -0,0 +1,68 @@
+@layer cck {.m_813a50b {
+  --ag-spacing: var(--c-spacing-sm);
+  --ag-offset: calc(var(--ag-spacing) * -1);
+
+  display: flex;
+  padding-inline-start: var(--ag-spacing);
+}
+
+.m_94ecd0d6 {
+  --avatar-size-xs: calc(1rem * var(--c-scale));
+  --avatar-size-sm: calc(1.625rem * var(--c-scale));
+  --avatar-size-md: calc(2.375rem * var(--c-scale));
+  --avatar-size-lg: calc(3.5rem * var(--c-scale));
+  --avatar-size-xl: calc(5.25rem * var(--c-scale));
+
+  --avatar-size: var(--avatar-size-md);
+  --avatar-radius: calc(62.5rem * var(--c-scale));
+  --avatar-bg: var(--c-color-gray-light);
+  --avatar-bd: calc(0.0625rem * var(--c-scale)) solid transparent;
+  --avatar-color: var(--c-color-gray-light-color);
+  --avatar-placeholder-fz: calc(var(--avatar-size) / 2.5);
+
+  -webkit-tap-highlight-color: transparent;
+  position: relative;
+  display: block;
+  user-select: none;
+  overflow: hidden;
+  border-radius: var(--avatar-radius);
+  text-decoration: none;
+  padding: 0;
+  width: var(--avatar-size);
+  height: var(--avatar-size);
+  min-width: var(--avatar-size);
+}
+
+.m_94ecd0d6:where([data-within-group]) {
+    margin-inline-start: var(--ag-offset);
+    border: 2px solid var(--c-color-body);
+    background: var(--c-color-body);
+  }
+
+.m_82d57e7 {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.m_a2891aff {
+  font-weight: var(--c-font-weight-bold);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  user-select: none;
+  border-radius: var(--avatar-radius);
+  font-size: var(--avatar-placeholder-fz);
+  background: var(--avatar-bg);
+  border: var(--avatar-bd);
+  color: var(--avatar-color);
+}
+
+.m_a2891aff > [data-avatar-placeholder-icon] {
+    width: 70%;
+    height: 70%;
+  }
+}

package/styles/background-image.css

@@ -0,0 +1,9 @@
+.m_31af4813 {
+  background-size: cover;
+  background-position: center;
+  display: block;
+  width: 100%;
+  border: 0;
+  text-decoration: none;
+  border-radius: var(--bi-radius, 0);
+}

package/styles/background-image.layer.css

@@ -0,0 +1,10 @@
+@layer cck {.m_31af4813 {
+  background-size: cover;
+  background-position: center;
+  display: block;
+  width: 100%;
+  border: 0;
+  text-decoration: none;
+  border-radius: var(--bi-radius, 0);
+}
+}

package/styles.css

@@ -1287,6 +1287,84 @@ fieldset:disabled .c-active:active {
     object-fit: cover;
   }
 
+.m_813a50b {
+  --ag-spacing: var(--c-spacing-sm);
+  --ag-offset: calc(var(--ag-spacing) * -1);
+
+  display: flex;
+  padding-inline-start: var(--ag-spacing);
+}
+
+.m_94ecd0d6 {
+  --avatar-size-xs: calc(1rem * var(--c-scale));
+  --avatar-size-sm: calc(1.625rem * var(--c-scale));
+  --avatar-size-md: calc(2.375rem * var(--c-scale));
+  --avatar-size-lg: calc(3.5rem * var(--c-scale));
+  --avatar-size-xl: calc(5.25rem * var(--c-scale));
+
+  --avatar-size: var(--avatar-size-md);
+  --avatar-radius: calc(62.5rem * var(--c-scale));
+  --avatar-bg: var(--c-color-gray-light);
+  --avatar-bd: calc(0.0625rem * var(--c-scale)) solid transparent;
+  --avatar-color: var(--c-color-gray-light-color);
+  --avatar-placeholder-fz: calc(var(--avatar-size) / 2.5);
+
+  -webkit-tap-highlight-color: transparent;
+  position: relative;
+  display: block;
+  user-select: none;
+  overflow: hidden;
+  border-radius: var(--avatar-radius);
+  text-decoration: none;
+  padding: 0;
+  width: var(--avatar-size);
+  height: var(--avatar-size);
+  min-width: var(--avatar-size);
+}
+
+.m_94ecd0d6:where([data-within-group]) {
+    margin-inline-start: var(--ag-offset);
+    border: 2px solid var(--c-color-body);
+    background: var(--c-color-body);
+  }
+
+.m_82d57e7 {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.m_a2891aff {
+  font-weight: var(--c-font-weight-bold);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  user-select: none;
+  border-radius: var(--avatar-radius);
+  font-size: var(--avatar-placeholder-fz);
+  background: var(--avatar-bg);
+  border: var(--avatar-bd);
+  color: var(--avatar-color);
+}
+
+.m_a2891aff > [data-avatar-placeholder-icon] {
+    width: 70%;
+    height: 70%;
+  }
+
+.m_31af4813 {
+  background-size: cover;
+  background-position: center;
+  display: block;
+  width: 100%;
+  border: 0;
+  text-decoration: none;
+  border-radius: var(--bi-radius, 0);
+}
+
 .m_bd72d3bf {
   display: flex;
   align-items: center;

package/styles.layer.css

@@ -1287,6 +1287,84 @@ fieldset:disabled .c-active:active {
     object-fit: cover;
   }
 
+.m_813a50b {
+  --ag-spacing: var(--c-spacing-sm);
+  --ag-offset: calc(var(--ag-spacing) * -1);
+
+  display: flex;
+  padding-inline-start: var(--ag-spacing);
+}
+
+.m_94ecd0d6 {
+  --avatar-size-xs: calc(1rem * var(--c-scale));
+  --avatar-size-sm: calc(1.625rem * var(--c-scale));
+  --avatar-size-md: calc(2.375rem * var(--c-scale));
+  --avatar-size-lg: calc(3.5rem * var(--c-scale));
+  --avatar-size-xl: calc(5.25rem * var(--c-scale));
+
+  --avatar-size: var(--avatar-size-md);
+  --avatar-radius: calc(62.5rem * var(--c-scale));
+  --avatar-bg: var(--c-color-gray-light);
+  --avatar-bd: calc(0.0625rem * var(--c-scale)) solid transparent;
+  --avatar-color: var(--c-color-gray-light-color);
+  --avatar-placeholder-fz: calc(var(--avatar-size) / 2.5);
+
+  -webkit-tap-highlight-color: transparent;
+  position: relative;
+  display: block;
+  user-select: none;
+  overflow: hidden;
+  border-radius: var(--avatar-radius);
+  text-decoration: none;
+  padding: 0;
+  width: var(--avatar-size);
+  height: var(--avatar-size);
+  min-width: var(--avatar-size);
+}
+
+.m_94ecd0d6:where([data-within-group]) {
+    margin-inline-start: var(--ag-offset);
+    border: 2px solid var(--c-color-body);
+    background: var(--c-color-body);
+  }
+
+.m_82d57e7 {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.m_a2891aff {
+  font-weight: var(--c-font-weight-bold);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  user-select: none;
+  border-radius: var(--avatar-radius);
+  font-size: var(--avatar-placeholder-fz);
+  background: var(--avatar-bg);
+  border: var(--avatar-bd);
+  color: var(--avatar-color);
+}
+
+.m_a2891aff > [data-avatar-placeholder-icon] {
+    width: 70%;
+    height: 70%;
+  }
+
+.m_31af4813 {
+  background-size: cover;
+  background-position: center;
+  display: block;
+  width: 100%;
+  border: 0;
+  text-decoration: none;
+  border-radius: var(--bi-radius, 0);
+}
+
 .m_bd72d3bf {
   display: flex;
   align-items: center;