@coreui/coreui 5.5.0 → 5.6.0

package/dist/css/coreui.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /*!
- * CoreUI  v5.5.0 (https://coreui.io)
- * Copyright (c) 2025 creativeLabs Łukasz Holeczek
+ * CoreUI  v5.6.0 (https://coreui.io)
+ * Copyright (c) 2026 creativeLabs Łukasz Holeczek
  * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
  */
 :root,
@@ -69,6 +69,14 @@
   --cui-danger-border-subtle: #f2a9a9;
   --cui-light-border-subtle: #e7eaee;
   --cui-dark-border-subtle: #aab3c5;
+  --cui-primary-contrast: #fff;
+  --cui-secondary-contrast: #fff;
+  --cui-success-contrast: #080a0c;
+  --cui-info-contrast: #080a0c;
+  --cui-warning-contrast: #080a0c;
+  --cui-danger-contrast: #080a0c;
+  --cui-light-contrast: #080a0c;
+  --cui-dark-contrast: #fff;
   --cui-white-rgb: 255, 255, 255;
   --cui-black-rgb: 8, 10, 12;
   --cui-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
@@ -139,6 +147,7 @@
   --cui-focus-ring-width: 0.25rem;
   --cui-focus-ring-opacity: 0.25;
   --cui-focus-ring-color: rgba(88, 86, 214, 0.25);
+  --cui-focus-ring-blur: 0;
   --cui-form-valid-color: #1b9e3e;
   --cui-form-valid-border-color: #1b9e3e;
   --cui-form-invalid-color: #e55353;
@@ -2219,6 +2228,77 @@ progress {
     -webkit-overflow-scrolling: touch;
   }
 }
+.chip-input {
+  --cui-chip-input-min-height: calc(1.5em + 0.75rem + calc(var(--cui-border-width) * 2));
+  --cui-chip-input-padding-y: 0.25rem;
+  --cui-chip-input-padding-x: 0.75rem;
+  --cui-chip-input-font-size: 1rem;
+  --cui-chip-input-bg: var(--cui-body-bg);
+  --cui-chip-input-color: var(--cui-body-color);
+  --cui-chip-input-border-width: var(--cui-border-width);
+  --cui-chip-input-border-color: var(--cui-border-color);
+  --cui-chip-input-border-radius: var(--cui-border-radius);
+  --cui-chip-input-gap: 0.375rem;
+  --cui-chip-input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--cui-chip-input-gap);
+  align-items: center;
+  min-height: var(--cui-chip-input-min-height);
+  padding: var(--cui-chip-input-padding-y) var(--cui-chip-input-padding-x);
+  font-size: var(--cui-chip-input-font-size);
+  color: var(--cui-chip-input-color);
+  background-color: var(--cui-chip-input-bg);
+  border: var(--cui-chip-input-border-width) solid var(--cui-chip-input-border-color);
+  border-radius: var(--cui-chip-input-border-radius);
+  transition: var(--cui-chip-input-transition);
+}
+@media (prefers-reduced-motion: reduce) {
+  .chip-input {
+    transition: none;
+  }
+}
+.chip-input:focus-within {
+  border-color: rgb(171.5, 170.5, 234.5);
+  outline: 0;
+  box-shadow: 0 0 var(--cui-focus-ring-blur) var(--cui-focus-ring-width) var(--cui-focus-ring-color);
+}
+.chip-input.disabled {
+  background-color: var(--cui-secondary-bg);
+  opacity: 1;
+}
+.chip-input.disabled > .chip {
+  opacity: 0.65;
+}
+.chip-input.disabled > .chip .chip-dismiss {
+  pointer-events: none;
+}
+
+.chip-input-field {
+  flex: 1 1 auto;
+  margin: 0;
+  border: 0;
+  outline: 0;
+}
+
+.chip-input-lg {
+  --cui-chip-input-min-height: calc(1.5em + 1rem + calc(var(--cui-border-width) * 2));
+  --cui-chip-input-padding-y: 0.375rem;
+  --cui-chip-input-padding-x: 1rem;
+  --cui-chip-input-border-radius: var(--cui-border-radius-lg);
+  --cui-chip-input-font-size: 1.25rem;
+  --cui-chip-input-gap: 0.5rem;
+}
+
+.chip-input-sm {
+  --cui-chip-input-min-height: calc(1.5em + 0.5rem + calc(var(--cui-border-width) * 2));
+  --cui-chip-input-padding-y: 0.125rem;
+  --cui-chip-input-padding-x: 0.5rem;
+  --cui-chip-input-border-radius: var(--cui-border-radius-sm);
+  --cui-chip-input-font-size: 0.875rem;
+  --cui-chip-input-gap: 0.125rem;
+}
+
 .form-label {
   margin-bottom: 0.5rem;
 }
@@ -7643,6 +7723,261 @@ textarea.form-control-lg {
     mask-position: -200% 0%;
   }
 }
+.chip {
+  --cui-chip-height: 1.75rem;
+  --cui-chip-padding-x: 0.625rem;
+  --cui-chip-gap: 0.3125rem;
+  --cui-chip-font-size: 0.875rem;
+  --cui-chip-font-weight: 400;
+  --cui-chip-border-radius: var(--cui-border-radius-pill);
+  --cui-chip-img-size: 1.25rem;
+  --cui-chip-img-border-radius: 50%;
+  --cui-chip-icon-size: 1rem;
+  --cui-chip-remove-size: 1rem;
+  --cui-chip-remove-opacity: 0.65;
+  --cui-chip-remove-hover-opacity: 1;
+  --cui-chip-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, color 0.15s ease-in-out;
+  --cui-chip-color: var(--cui-text-emphasis, var(--cui-body-color));
+  --cui-chip-bg: var(--cui-bg-subtle, var(--cui-secondary-bg));
+  --cui-chip-border-width: var(--cui-border-width);
+  --cui-chip-border-color: transparent;
+  --cui-chip-active-color: var(--cui-contrast, rgba(255, 255, 255, 0.87));
+  --cui-chip-active-bg: var(--cui-color, var(--cui-primary));
+  --cui-chip-active-border-color: transparent;
+  --cui-chip-hover-color: var(--cui-contrast, var(--cui-body-color));
+  --cui-chip-hover-bg: var(--cui-color, color-mix(in srgb, var(--cui-secondary-bg) 95%, #000));
+  --cui-chip-hover-border-color: transparent;
+  display: inline-flex;
+  gap: var(--cui-chip-gap);
+  align-items: center;
+  height: var(--cui-chip-height);
+  padding-inline: var(--cui-chip-padding-x);
+  font-size: var(--cui-chip-font-size);
+  font-weight: var(--cui-chip-font-weight);
+  color: var(--cui-chip-color);
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  background-color: var(--cui-chip-bg);
+  border: var(--cui-chip-border-width) solid var(--cui-chip-border-color);
+  border-radius: var(--cui-chip-border-radius);
+  transition: var(--cui-chip-transition);
+}
+@media (prefers-reduced-motion: reduce) {
+  .chip {
+    transition: none;
+  }
+}
+.chip.active {
+  color: var(--cui-chip-active-color);
+  background-color: var(--cui-chip-active-bg);
+  border-color: var(--cui-chip-active-border-color);
+}
+.chip.disabled, .chip:disabled {
+  pointer-events: none;
+  opacity: 0.65;
+}
+.chip:focus-visible {
+  outline: 0;
+  box-shadow: 0 0 var(--cui-focus-ring-blur) var(--cui-focus-ring-width) var(--cui-focus-ring-color);
+}
+.chip .avatar {
+  --cui-avatar-width: var(--cui-chip-img-size);
+  --cui-avatar-height: var(--cui-chip-img-size);
+  font-size: inherit;
+}
+.chip .avatar:first-child {
+  -webkit-margin-start: -0.375rem;
+  margin-inline-start: -0.375rem;
+}
+
+.chip-outline {
+  --cui-chip-color: var(--cui-color, var(--cui-body-color));
+  --cui-chip-bg: transparent;
+  --cui-chip-border-color: var(--cui-color, var(--cui-border-color));
+  --cui-chip-hover-bg: var(--cui-bg-subtle, color-mix(in srgb, var(--cui-secondary-bg) 95%, #000));
+  --cui-chip-hover-color: var(--cui-text-emphasis, var(--cui-body-color));
+  --cui-chip-hover-border-color: var(--cui-color, var(--cui-border-color));
+  --cui-chip-active-bg: var(--cui-color, var(--cui-primary));
+  --cui-chip-active-color: var(--cui-contrast, rgba(255, 255, 255, 0.87));
+}
+
+.chip-clickable {
+  cursor: pointer;
+}
+.chip-clickable:hover {
+  color: var(--cui-chip-hover-color);
+  background-color: var(--cui-chip-hover-bg);
+  border-color: var(--cui-chip-hover-border-color);
+}
+.chip-clickable.active:hover {
+  color: var(--cui-chip-active-color);
+  background-color: var(--cui-chip-active-bg);
+  opacity: 0.9;
+}
+
+.chip-img {
+  width: var(--cui-chip-img-size);
+  height: var(--cui-chip-img-size);
+  border-radius: var(--cui-chip-img-border-radius);
+}
+.chip-img:first-child {
+  -webkit-margin-start: -0.375rem;
+  margin-inline-start: -0.375rem;
+}
+
+.chip-icon {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  -webkit-margin-start: calc(var(--cui-chip-gap) * -0.25);
+  margin-inline-start: calc(var(--cui-chip-gap) * -0.25);
+}
+.chip-icon > svg {
+  display: block;
+  width: var(--cui-chip-icon-size);
+  height: var(--cui-chip-icon-size);
+}
+.chip-icon > img {
+  width: var(--cui-chip-icon-size);
+  height: var(--cui-chip-icon-size);
+  -o-object-fit: cover;
+  object-fit: cover;
+  border-radius: var(--cui-chip-img-border-radius);
+}
+
+.chip-remove {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: var(--cui-chip-min-height);
+  height: var(--cui-chip-min-height);
+  padding: 0;
+  -webkit-margin-end: calc(var(--cui-chip-padding-x) * -0.25);
+  margin-inline-end: calc(var(--cui-chip-padding-x) * -0.25);
+  color: inherit;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  opacity: var(--cui-chip-remove-opacity);
+  transition: opacity 0.15s ease-in-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .chip-remove {
+    transition: none;
+  }
+}
+.chip-remove:hover {
+  opacity: var(--cui-chip-remove-hover-opacity);
+}
+.chip-remove:focus-visible {
+  outline: 0;
+  opacity: 1;
+  outline: 0;
+  box-shadow: 0 0 var(--cui-focus-ring-blur) var(--cui-focus-ring-width) var(--cui-focus-ring-color);
+}
+.chip-remove > svg {
+  display: block;
+  width: var(--cui-chip-remove-size);
+  height: var(--cui-chip-remove-size);
+}
+
+.chip-lg,
+.chip-input-lg .chip {
+  --cui-chip-height: 2rem;
+  --cui-chip-padding-x: 0.75rem;
+  --cui-chip-gap: 0.375rem;
+  --cui-chip-font-size: 1rem;
+  --cui-chip-img-size: 1.25rem;
+  --cui-chip-icon-size: 1.5rem;
+  --cui-chip-dismiss-size: 1.25rem;
+}
+
+.chip-sm,
+.chip-input-sm .chip {
+  --cui-chip-height: 1.5rem;
+  --cui-chip-padding-x: 0.625rem;
+  --cui-chip-gap: 0.25rem;
+  --cui-chip-font-size: 0.75rem;
+  --cui-chip-img-size: 0.875rem;
+  --cui-chip-icon-size: 1rem;
+  --cui-chip-dismiss-size: 0.875rem;
+}
+
+.chip-primary {
+  --cui-bg-subtle: var(--cui-primary-bg-subtle);
+  --cui-color: var(--cui-primary);
+  --cui-color-rgb: var(--cui-primary-rgb);
+  --cui-contrast: var(--cui-primary-contrast);
+  --cui-text-emphasis: var(--cui-primary-text-emphasis);
+  --cui-focus-ring-color: rgba(var(--cui-primary-rgb), var(--cui-focus-ring-opacity));
+}
+
+.chip-secondary {
+  --cui-bg-subtle: var(--cui-secondary-bg-subtle);
+  --cui-color: var(--cui-secondary);
+  --cui-color-rgb: var(--cui-secondary-rgb);
+  --cui-contrast: var(--cui-secondary-contrast);
+  --cui-text-emphasis: var(--cui-secondary-text-emphasis);
+  --cui-focus-ring-color: rgba(var(--cui-secondary-rgb), var(--cui-focus-ring-opacity));
+}
+
+.chip-success {
+  --cui-bg-subtle: var(--cui-success-bg-subtle);
+  --cui-color: var(--cui-success);
+  --cui-color-rgb: var(--cui-success-rgb);
+  --cui-contrast: var(--cui-success-contrast);
+  --cui-text-emphasis: var(--cui-success-text-emphasis);
+  --cui-focus-ring-color: rgba(var(--cui-success-rgb), var(--cui-focus-ring-opacity));
+}
+
+.chip-info {
+  --cui-bg-subtle: var(--cui-info-bg-subtle);
+  --cui-color: var(--cui-info);
+  --cui-color-rgb: var(--cui-info-rgb);
+  --cui-contrast: var(--cui-info-contrast);
+  --cui-text-emphasis: var(--cui-info-text-emphasis);
+  --cui-focus-ring-color: rgba(var(--cui-info-rgb), var(--cui-focus-ring-opacity));
+}
+
+.chip-warning {
+  --cui-bg-subtle: var(--cui-warning-bg-subtle);
+  --cui-color: var(--cui-warning);
+  --cui-color-rgb: var(--cui-warning-rgb);
+  --cui-contrast: var(--cui-warning-contrast);
+  --cui-text-emphasis: var(--cui-warning-text-emphasis);
+  --cui-focus-ring-color: rgba(var(--cui-warning-rgb), var(--cui-focus-ring-opacity));
+}
+
+.chip-danger {
+  --cui-bg-subtle: var(--cui-danger-bg-subtle);
+  --cui-color: var(--cui-danger);
+  --cui-color-rgb: var(--cui-danger-rgb);
+  --cui-contrast: var(--cui-danger-contrast);
+  --cui-text-emphasis: var(--cui-danger-text-emphasis);
+  --cui-focus-ring-color: rgba(var(--cui-danger-rgb), var(--cui-focus-ring-opacity));
+}
+
+.chip-light {
+  --cui-bg-subtle: var(--cui-light-bg-subtle);
+  --cui-color: var(--cui-light);
+  --cui-color-rgb: var(--cui-light-rgb);
+  --cui-contrast: var(--cui-light-contrast);
+  --cui-text-emphasis: var(--cui-light-text-emphasis);
+  --cui-focus-ring-color: rgba(var(--cui-light-rgb), var(--cui-focus-ring-opacity));
+}
+
+.chip-dark {
+  --cui-bg-subtle: var(--cui-dark-bg-subtle);
+  --cui-color: var(--cui-dark);
+  --cui-color-rgb: var(--cui-dark-rgb);
+  --cui-contrast: var(--cui-dark-contrast);
+  --cui-text-emphasis: var(--cui-dark-text-emphasis);
+  --cui-focus-ring-color: rgba(var(--cui-dark-rgb), var(--cui-focus-ring-opacity));
+}
+
 .avatar {
   --cui-avatar-width: 2rem;
   --cui-avatar-height: 2rem;