@castlabs/ui 7.6.0 → 7.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@castlabs/ui",
-  "version": "7.6.0",
+  "version": "7.6.2",
   "repository": "https://github.com/castlabs/ui-styleguide",
   "private": false,
   "description": "A vanilla HTML/CS/JS & Vue.js component library for Castlabs.",

package/src/components/ClAlert/style.scss

@@ -117,6 +117,7 @@
       line-height: 1;
       padding: 0;
       text-decoration: underline;
+      text-decoration-thickness: px(1);
     }
   }
 }

package/src/components/ClBadge/style.scss

@@ -14,6 +14,7 @@
   &:hover {
     color: var(--cl-color-text);
     text-decoration: underline;
+    text-decoration-thickness: px(1);
   }
 }
 

package/src/components/ClBadge/style.variables.scss

@@ -1,7 +1,5 @@
 @use '../../styles/global' as *;
 
-// $badge-color-fg: $color-ci-white;
-// $badge-color-bg: $color-dark;
 $badge-padding: px(4) px(8);
 $badge-min-height: 1.642857143em; // 23px @ 14pt
 
@@ -12,9 +10,14 @@ $badge-min-height: 1.642857143em; // 23px @ 14pt
 }
 
 %cl-badge {
-  @include cl-colors-secondary;
+  @include cl-colors-ci;
+  @include cl-colors-admin;
   @extend %cl-p-tag;
 
+  #{'--cl-color-background'}: $color-ci-steel;
+  #{'--cl-color-border'}: $color-ci-steel;
+  #{'--cl-color-text'}: $color-ci-eggshell;
+  #{'--cl-color-accent'}: $color-ci-eggshell;
   background-color: var(--cl-color-background);
   border: $brand-line-width solid var(--cl-color-border);
   border-radius: $brand-border-radius;
@@ -26,14 +29,6 @@ $badge-min-height: 1.642857143em; // 23px @ 14pt
   text-transform: uppercase;
   white-space: nowrap;
 
-  &:not([class*='cl-color-']) {
-    // default color
-    #{'--cl-color-background'}: $color-ci-steel;
-    #{'--cl-color-border'}: $color-ci-steel;
-    #{'--cl-color-text'}: $color-ci-eggshell;
-    #{'--cl-color-accent'}: $color-ci-eggshell;
-  }
-
   &.cl-badge-sm {
     @include cl-badge-small;
   }

package/src/components/ClFooter/style.scss

@@ -18,6 +18,7 @@
 
     &:hover {
       text-decoration: underline;
+      text-decoration-thickness: px(1);
     }
   }
 }

package/src/components/ClPagination/style.scss

@@ -59,6 +59,7 @@
 
       border-radius: $brand-border-radius !important; // overrule BS
       cursor: not-allowed;
+      max-height: 36px;
       min-width: 36px;
       padding: $spacing-tiny;
       pointer-events: none;
@@ -90,3 +91,40 @@
     }
   }
 }
+
+.cl-pagination-autosize {
+  // for use by simple code that can’t hide bubbles by itself
+  // will hide all but the first, last and +/-5 bubbles around the .active one
+  .page-item {
+    display: none;
+
+    &:first-of-type,
+    &.active,
+    &.disabled,
+    &:last-of-type {
+      display: list-item;
+    }
+
+    @include media-breakpoint-up(md) {
+      &.active {
+        display: list-item;
+
+        + .page-item,
+        + .page-item + .page-item,
+        + .page-item + .page-item + .page-item,
+        + .page-item + .page-item + .page-item + .page-item,
+        + .page-item + .page-item + .page-item + .page-item + .page-item {
+          display: list-item;
+        }
+      }
+
+      &:has(+ .active),
+      &:has(+ * + .active),
+      &:has(+ * + * + .active),
+      &:has(+ * + * + * + .active),
+      &:has(+ * + * + * + * + .active) {
+        display: list-item;
+      }
+    }
+  }
+}

package/src/components/section/ClSectionForm/style.scss

@@ -6,6 +6,6 @@
 
   &,
   + .cl-section {
-    margin-top: 0 !important; // do not merge form-sections with other sections
+    margin-top: 0 !important; // don’t merge form-sections with other sections
   }
 }

package/src/components/text/ClCopy/style.scss

@@ -20,9 +20,11 @@
   &:hover * {
     color: $color-hover;
     text-decoration-color: $color-hover;
+    text-decoration-thickness: px(1);
   }
 }
 
 .cl-copy-text {
   text-decoration: underline;
+  text-decoration-thickness: px(1);
 }

package/src/components/text/ClLinkExternal/style.scss

@@ -15,7 +15,7 @@ main a {
 }
 
 .cl-a-btn {
-  // a link that is more an embedded button, e.g. in table actions
+  // a link that’s more an embedded button, e.g. in table actions
   @extend %cl-a-btn;
 }
 

package/src/styles/abstracts/color.scss

@@ -144,7 +144,41 @@ $color-opacity-active: 0.8;
   }
 }
 
-@mixin cl-colors-secondary {
+@mixin cl-colors-ci {
+  &.cl-color-night {
+    @extend %cl-color-night;
+  }
+
+  &.cl-color-eggshell {
+    @extend %cl-color-eggshell;
+  }
+
+  &.cl-color-red {
+    @extend %cl-color-red;
+  }
+
+  &.cl-color-sky {
+    @extend %cl-color-sky;
+  }
+
+  &.cl-color-berry {
+    @extend %cl-color-berry;
+  }
+
+  &.cl-color-petrol {
+    @extend %cl-color-petrol;
+  }
+
+  &.cl-color-ash {
+    @extend %cl-color-ash;
+  }
+
+  &.cl-color-clay {
+    @extend %cl-color-clay;
+  }
+}
+
+@mixin cl-colors-admin {
   &.cl-color-brick {
     @extend %cl-color-brick;
   }

package/src/styles/abstracts/grid.scss

@@ -22,11 +22,11 @@
       padding: math.div($spacing, 2) $spacing-tiny math.div($spacing, 2) $spacing-tiny;
 
       > *:first-child {
-        margin-top: 0; // do not apply top spacing to first element in a cel
+        margin-top: 0; // don’t apply top spacing to first element in a cel
       }
 
       > *:last-child {
-        margin-bottom: 0; // do not apply bottom spacing to last element in a cel
+        margin-bottom: 0; // don’t apply bottom spacing to last element in a cel
       }
     }
   }

package/src/styles/abstracts/typography.scss

@@ -83,6 +83,7 @@ $typography-monospace-line-height: 1.375;
   color: $color;
   display: inline;
   text-decoration: underline $color-underline;
+  text-decoration-thickness: px(1);
 
   &:hover {
     color: $color-hover;
@@ -162,7 +163,7 @@ $typography-monospace-line-height: 1.375;
 }
 
 %cl-a-btn {
-  // a link that is more an embedded button
+  // a link that’s more an embedded button
   @include typography-link;
 
   background-color: transparent;

package/src/styles/fonts/FontAwesome5/index.scss

@@ -225,7 +225,7 @@ $cl-url-postfix: '' !default;
 }
 
 /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
-readers do not read off random characters that represent icons */
+readers don’t read off random characters that represent icons */
 .fa-500px::before {
   content: '\f26e';
 }

package/src/styles/layout/color.scss

@@ -7,7 +7,7 @@
 
 @use '../global' as *;
 
-// note: order of selectors in this file are important. do not move colors around or
+// note: order of selectors in this file are important. don’t move colors around or
 // .cl-color-* overrides might not work
 
 :root {
@@ -126,6 +126,7 @@ div {
   &[class*='cl-color-text-'] {
     color: var(--cl-color-text);
     text-decoration-color: var(--cl-color-text);
+    text-decoration-thickness: px(1);
   }
 }
 

package/src/styles/layout/grid.scss

@@ -19,7 +19,7 @@
 
 .container .containe,
 .container-fluid .container {
-  // nested containers should not limit themselves
+  // nested containers shouldn’t limit themselves
   margin-left: 0;
   margin-right: 0;
   max-width: 100%;
@@ -92,7 +92,7 @@ main {
     #{'--bs-gutter-x'}: $grid-spacing;
 
     > [class^='col-'] {
-      margin-top: $grid-spacing; // columns add top padding as first content line won't
+      margin-top: $grid-spacing; // columns add top padding as first content line won’t
     }
   }
 }

package/src/styles/layout/helper.scss

@@ -45,6 +45,10 @@
   opacity: 0.5;
 }
 
+.cl-strong {
+  font-weight: 700;
+}
+
 h1.cl-faded,
 .cl-h1.cl-faded,
 h2.cl-faded,

package/src/styles/layout/typography.scss

@@ -177,7 +177,7 @@ main {
     overflow-wrap: anywhere;
   }
 
-  b, // <b> defined just for fallback - don't use!
+  b, // <b> defined just for fallback - don’t use!
   strong {
     font-weight: 600;
   }
@@ -250,7 +250,7 @@ hr {
   }
 }
 
-// --- redefine bs utilities we use so we don't need to pull the whole set -----
+// --- redefine bs utilities we use so we don’t need to pull the whole set -----
 
 @each $bp, $px in $grid-breakpoints {
   .text-#{$bp}-start {

package/types/index.d.ts

@@ -3,7 +3,7 @@ import type { App, DefineComponent } from 'vue'
 declare function install (Vue: App): void
 export default install
 
-export function castlabsUi (Vue: App): void
+export function clUi (Vue: App): void
 
 export const ClAlert: DefineComponent
 export const ClBackCancelOk: DefineComponent
@@ -136,6 +136,7 @@ export function clMatch (string: string, expression?: string, caseSensitive?: bo
 
 // --- utils/vitest ------------------------------------------------------------
 
+export const FLECTIONS: RegExp[]
 export function clGetAllComponents(): object
 export function clGetAllPlugins(): [{ install: (app: any) => void }]
 export function clPatch (source: any, patches: any): object