Merge branch 'main' of https://github.com/coreui/coreui

build/build-plugins.mjs

@@ -9,15 +9,15 @@
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { babel } from '@rollup/plugin-babel'
-import globby from 'globby'
+import { globby } from 'globby'
 import { rollup } from 'rollup'
 import banner from './banner.mjs'
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
 
 const sourcePath = path.resolve(__dirname, '../js/src/').replace(/\\/g, '/')
-const jsFiles = globby.sync(`${sourcePath}/**/*.js`)
+const jsFiles = await globby(`${sourcePath}/**/*.js`)
 
 // Array which holds the resolved plugins
 const resolvedPlugins = []
@@ -37,6 +37,9 @@ for (const file of jsFiles) {
 }
 
 const build = async plugin => {
+  /**
+   * @type {import('rollup').GlobalsOption}
+   */
   const globals = {}
 
   const bundle = await rollup({

docs/content/components/avatar.md

@@ -1,7 +1,7 @@
 ---
 layout: docs
 title: Avatar
-description: Avatar component can be used to display circular user profile pictures. Avatar can be used to portray people or objects. It supports images, icons, or letters.
+description: The Avatar component is used to display circular user profile pictures. Avatars can portray people or objects and support images, icons, or letters.
 group: components
 aliases:
   - "/4.0/components/avatar/"
@@ -13,6 +13,8 @@ other_frameworks: avatar
 
 ## Image avatars
 
+Showcase avatars using images. These avatars are typically circular and can display user profile pictures.
+
 {{< example >}}
 <div class="avatar">
   <img class="avatar-img" src="/assets/img/avatars/1.jpg" alt="[email protected]">
@@ -27,6 +29,8 @@ other_frameworks: avatar
 
 ## Letter avatars
 
+Use letters inside avatars to represent users or objects when images are not available. This can be useful for displaying initials.
+
 {{< example >}}
 <div class="avatar bg-primary text-white">CUI</div>
 <div class="avatar bg-secondary">CUI</div>
@@ -35,6 +39,8 @@ other_frameworks: avatar
 
 ## Icons avatars
 
+Incorporate icons within avatars, allowing for a visual representation using scalable vector graphics (SVG).
+
 {{< example >}}
 <div class="avatar bg-info text-white">
   <svg id="cib-coreui-c" class="icon" viewBox="0 0 32 32">
@@ -55,7 +61,7 @@ other_frameworks: avatar
 
 ## Rounded avatars
 
-Use the `.rounded` class to make avatars squared with rounded corners.
+Create avatars with rounded corners by adding the `.rounded` class. This gives a softer, less angular appearance.
 
 {{< example >}}
 <div class="avatar rounded bg-primary text-white">CUI</div>
@@ -65,7 +71,7 @@ Use the `.rounded` class to make avatars squared with rounded corners.
 
 ## Square avatars
 
-Use the `.rounded-0` class to make avatars squared.
+Make avatars square by using the `.rounded-0` class, removing any rounded edges for a sharper look.
 
 {{< example >}}
 <div class="avatar rounded-0 bg-primary text-white">CUI</div>
@@ -75,16 +81,19 @@ Use the `.rounded-0` class to make avatars squared.
 
 ## Sizes
 
-Fancy larger or smaller avatar? Add .avatar-lg or .avatar-sm for additional sizes.
-
+Adjust the size of avatars using the `.avatar-sm`, `.avatar-md`, `.avatar-lg`, and `.avatar-xl` classes for larger or smaller versions.
 {{< example >}}
+<div class="avatar avatar-xl bg-secondary">CUI</div>
 <div class="avatar avatar-lg bg-secondary">CUI</div>
+<div class="avatar avatar-md bg-secondary">CUI</div>
 <div class="avatar bg-secondary">CUI</div>
 <div class="avatar avatar-sm bg-secondary">CUI</div>
 {{< /example >}}
 
 ## Stacked avatars
 
+Display multiple avatars in a stack to represent a group of users or items, with additional count if there are more avatars than can be displayed.
+
 {{< example >}}
 <div class="avatars-stack">
   <div class="avatar">
@@ -104,6 +113,8 @@ Fancy larger or smaller avatar? Add .avatar-lg or .avatar-sm for additional size
 
 ## Avatars with status
 
+Add a status indicator to avatars using the .avatar-status class to show online or offline status.
+
 {{< example >}}
 <div class="avatar">
   <img class="avatar-img" src="/assets/img/avatars/1.jpg" alt="[email protected]">
@@ -118,6 +129,12 @@ Fancy larger or smaller avatar? Add .avatar-lg or .avatar-sm for additional size
 
 ## Customizing
 
+### CSS variables
+
+Avatars use local CSS variables on `.avatar` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+{{< scss-docs name="avatar-css-vars" file="scss/_avatar.scss" >}}
+
 ### SASS variables
 
 {{< scss-docs name="avatar-variables" file="scss/_variables.scss" >}}

package.json

@@ -64,7 +64,7 @@
     "docs-serve": "hugo server --port 9001 --disableFastRender --printUnusedTemplates",
     "docs-serve-only": "npx sirv-cli _gh_pages --port 9001",
     "lockfile-lint": "lockfile-lint --allowed-hosts npm --allowed-schemes https: --empty-hostname false --type npm --path package-lock.json",
-    "update-deps": "ncu -u -x globby,jasmine,karma-browserstack-launcher,karma-rollup-preprocessor,terser && echo Manually update docs/assets/js/vendor",
+    "update-deps": "ncu -u -x jasmine,karma-browserstack-launcher,karma-rollup-preprocessor,terser && echo Manually update docs/assets/js/vendor",
     "release": "npm-run-all dist release-sri docs-build release-zip*",
     "release-sri": "node build/generate-sri.mjs",
     "release-version": "node build/change-version.mjs",