@bi-digital/css 0.0.0-experimental-aff96f9 → 0.0.0-experimental-2ec4984

package/dist/baseline.css

@@ -10,39 +10,3 @@ html:has(bi-navbar) {
 html:has(bi-in-page-links) {
   scroll-padding-top: var(--bi-layout-navbar-height);
 }
-
-html:has(.bi-navbar) {
-  scroll-padding-top: var(--bi-layout-navbar-height);
-}
-
-html:has(.bi-sub-navbar) {
-  scroll-padding-top: var(--bi-layout-navbar-height);
-}
-
-html .bi-sticky-header {
-  top: 0;
-}
-
-html:has(.bi-navbar[data-fixed="true"]) .bi-sticky-header {
-  top: var(--bi-layout-navbar-height);
-}
-
-html:has(.bi-sub-navbar[data-fixed="true"][data-scroll-dir="down"]) .bi-navbar > header {
-  transform: translateY(-100%);
-}
-
-html:has(.bi-sub-navbar[data-fixed="true"][data-scroll-dir="down"]) .bi-sub-navbar {
-  top: 0;
-}
-
-html:has(.bi-navbar[data-fixed="true"]):has(.bi-sub-navbar[data-fixed="true"][data-scroll-dir="up"]) .bi-navbar > header {
-  transform: translateY(0);
-}
-
-html:has(.bi-navbar[data-fixed="true"]):has(.bi-sub-navbar[data-fixed="true"][data-scroll-dir="up"]) .bi-sub-navbar {
-  top: var(--bi-layout-navbar-height);
-}
-
-html:has(.bi-navbar[data-fixed="true"]):has(.bi-sub-navbar[data-fixed="true"][data-scroll-dir="up"]) .bi-sticky-header {
-  top: calc(var(--bi-layout-navbar-height)  + var(--bi-layout-navbar-height));
-}

package/dist/components/avatar.css

@@ -48,3 +48,9 @@
   --bic-avatar-size: var(--bi-scale-16x);
   --bic-avatar-font-size: 1.25rem;
 }
+
+.bi-avatar > img {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}

package/dist/components/card.css

@@ -109,15 +109,96 @@
 .bi-card .bi-card--content {
   padding: var(--bic-card-content-padding);
   gap: var(--bi-scale-4x);
+  border-radius: inherit;
+  border: none;
   flex-direction: column;
   flex: auto;
   display: flex;
 }
 
+.bi-card .bi-card--content > p {
+  color: var(--bic-card-content-color);
+  white-space: break-spaces;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  margin: 0;
+  font-size: .875rem;
+  font-weight: 500;
+  line-height: 1.5;
+  display: -webkit-box;
+  overflow: hidden;
+}
+
+@media not (min-width: 768px) {
+  .bi-card .bi-card--content {
+    --bic-card-content-padding: var(--bi-scale-3x);
+    gap: var(--bi-scale-3x);
+  }
+}
+
+.bi-card:-webkit-any(a, button) {
+  cursor: pointer;
+  background: none;
+  text-decoration: none;
+  position: relative;
+}
+
+.bi-card:-webkit-any(a, button):not(.disabled):focus-visible {
+  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white), var(--bic-button-box-shadow));
+  outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
+  outline-offset: var(--_bi--focus, 2px);
+}
+
+.bi-card:-webkit-any(a, button):not(.disabled):focus-visible * {
+  --_bi--focus: ;
+}
+
+.bi-card:-webkit-any(a, button):not(.disabled):hover {
+  box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
+}
+
+.bi-card:-webkit-any(a, button):not(.disabled):active {
+  box-shadow: 0px 0px 0px var(--bi-stroke-default) var(--bi-primary-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
+}
+
+.bi-card:-webkit-any(a, button):disabled {
+  cursor: not-allowed;
+}
+
+.bi-card:is(a, button) {
+  cursor: pointer;
+  background: none;
+  text-decoration: none;
+  position: relative;
+}
+
+.bi-card:is(a, button):not(.disabled):focus-visible {
+  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white), var(--bic-button-box-shadow));
+  outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
+  outline-offset: var(--_bi--focus, 2px);
+}
+
+.bi-card:is(a, button):not(.disabled):focus-visible * {
+  --_bi--focus: ;
+}
+
+.bi-card:is(a, button):not(.disabled):hover {
+  box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
+}
+
+.bi-card:is(a, button):not(.disabled):active {
+  box-shadow: 0px 0px 0px var(--bi-stroke-default) var(--bi-primary-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
+}
+
+.bi-card:is(a, button):disabled {
+  cursor: not-allowed;
+}
+
 .bi-card .bi-card--content:-webkit-any(a, button) {
   cursor: pointer;
   background: none;
-  border: none;
   text-decoration: none;
   position: relative;
 }
@@ -147,7 +228,6 @@
 .bi-card .bi-card--content:is(a, button) {
   cursor: pointer;
   background: none;
-  border: none;
   text-decoration: none;
   position: relative;
 }
@@ -174,28 +254,6 @@
   cursor: not-allowed;
 }
 
-.bi-card .bi-card--content > p {
-  color: var(--bic-card-content-color);
-  white-space: break-spaces;
-  text-overflow: ellipsis;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  -webkit-box-orient: vertical;
-  margin: 0;
-  font-size: .875rem;
-  font-weight: 500;
-  line-height: 1.5;
-  display: -webkit-box;
-  overflow: hidden;
-}
-
-@media not (min-width: 768px) {
-  .bi-card .bi-card--content {
-    --bic-card-content-padding: var(--bi-scale-3x);
-    gap: var(--bi-scale-3x);
-  }
-}
-
 .bi-card .bi-card--actions {
   flex-direction: var(--bic-card-actions-flex-direction, column);
   justify-content: center;
@@ -215,7 +273,7 @@
   --bic-button-font-size: var(--bi-icon-medium);
   --bic-button-color: var(--bic-card-actions-icon-color);
   --bic-button-size: var(--bi-scale-14x);
-  height: 100%;
+  flex: 1;
 }
 
 @media not (min-width: 768px) {

package/dist/components.css

@@ -153,6 +153,12 @@
   --bic-avatar-font-size: 1.25rem;
 }
 
+.bi-avatar > img {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+
 .bi-badge {
   --bic-badge-background: transparent;
   --bic-badge-color: var(--bi-neutral-60);
@@ -561,15 +567,96 @@
 .bi-card .bi-card--content {
   padding: var(--bic-card-content-padding);
   gap: var(--bi-scale-4x);
+  border-radius: inherit;
+  border: none;
   flex-direction: column;
   flex: auto;
   display: flex;
 }
 
+.bi-card .bi-card--content > p {
+  color: var(--bic-card-content-color);
+  white-space: break-spaces;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  margin: 0;
+  font-size: .875rem;
+  font-weight: 500;
+  line-height: 1.5;
+  display: -webkit-box;
+  overflow: hidden;
+}
+
+@media not (min-width: 768px) {
+  .bi-card .bi-card--content {
+    --bic-card-content-padding: var(--bi-scale-3x);
+    gap: var(--bi-scale-3x);
+  }
+}
+
+.bi-card:-webkit-any(a, button) {
+  cursor: pointer;
+  background: none;
+  text-decoration: none;
+  position: relative;
+}
+
+.bi-card:-webkit-any(a, button):not(.disabled):focus-visible {
+  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white), var(--bic-button-box-shadow));
+  outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
+  outline-offset: var(--_bi--focus, 2px);
+}
+
+.bi-card:-webkit-any(a, button):not(.disabled):focus-visible * {
+  --_bi--focus: ;
+}
+
+.bi-card:-webkit-any(a, button):not(.disabled):hover {
+  box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
+}
+
+.bi-card:-webkit-any(a, button):not(.disabled):active {
+  box-shadow: 0px 0px 0px var(--bi-stroke-default) var(--bi-primary-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
+}
+
+.bi-card:-webkit-any(a, button):disabled {
+  cursor: not-allowed;
+}
+
+.bi-card:is(a, button) {
+  cursor: pointer;
+  background: none;
+  text-decoration: none;
+  position: relative;
+}
+
+.bi-card:is(a, button):not(.disabled):focus-visible {
+  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white), var(--bic-button-box-shadow));
+  outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
+  outline-offset: var(--_bi--focus, 2px);
+}
+
+.bi-card:is(a, button):not(.disabled):focus-visible * {
+  --_bi--focus: ;
+}
+
+.bi-card:is(a, button):not(.disabled):hover {
+  box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
+}
+
+.bi-card:is(a, button):not(.disabled):active {
+  box-shadow: 0px 0px 0px var(--bi-stroke-default) var(--bi-primary-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
+}
+
+.bi-card:is(a, button):disabled {
+  cursor: not-allowed;
+}
+
 .bi-card .bi-card--content:-webkit-any(a, button) {
   cursor: pointer;
   background: none;
-  border: none;
   text-decoration: none;
   position: relative;
 }
@@ -599,7 +686,6 @@
 .bi-card .bi-card--content:is(a, button) {
   cursor: pointer;
   background: none;
-  border: none;
   text-decoration: none;
   position: relative;
 }
@@ -626,28 +712,6 @@
   cursor: not-allowed;
 }
 
-.bi-card .bi-card--content > p {
-  color: var(--bic-card-content-color);
-  white-space: break-spaces;
-  text-overflow: ellipsis;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  -webkit-box-orient: vertical;
-  margin: 0;
-  font-size: .875rem;
-  font-weight: 500;
-  line-height: 1.5;
-  display: -webkit-box;
-  overflow: hidden;
-}
-
-@media not (min-width: 768px) {
-  .bi-card .bi-card--content {
-    --bic-card-content-padding: var(--bi-scale-3x);
-    gap: var(--bi-scale-3x);
-  }
-}
-
 .bi-card .bi-card--actions {
   flex-direction: var(--bic-card-actions-flex-direction, column);
   justify-content: center;
@@ -667,7 +731,7 @@
   --bic-button-font-size: var(--bi-icon-medium);
   --bic-button-color: var(--bic-card-actions-icon-color);
   --bic-button-size: var(--bi-scale-14x);
-  height: 100%;
+  flex: 1;
 }
 
 @media not (min-width: 768px) {
@@ -2842,3 +2906,39 @@ body:has(.bi-dialog:modal) {
   left: var(--bic-validation-message-padding);
   position: absolute;
 }
+
+html:has(.bi-navbar) {
+  scroll-padding-top: var(--bi-layout-navbar-height);
+}
+
+html:has(.bi-sub-navbar) {
+  scroll-padding-top: var(--bi-layout-navbar-height);
+}
+
+html .bi-sticky-header {
+  top: 0;
+}
+
+html:has(.bi-navbar[data-fixed="true"]) .bi-sticky-header {
+  top: var(--bi-layout-navbar-height);
+}
+
+html:has(.bi-sub-navbar[data-fixed="true"][data-scroll-dir="down"]) .bi-navbar > header {
+  transform: translateY(-100%);
+}
+
+html:has(.bi-sub-navbar[data-fixed="true"][data-scroll-dir="down"]) .bi-sub-navbar {
+  top: 0;
+}
+
+html:has(.bi-navbar[data-fixed="true"]):has(.bi-sub-navbar[data-fixed="true"][data-scroll-dir="up"]) .bi-navbar > header {
+  transform: translateY(0);
+}
+
+html:has(.bi-navbar[data-fixed="true"]):has(.bi-sub-navbar[data-fixed="true"][data-scroll-dir="up"]) .bi-sub-navbar {
+  top: var(--bi-layout-navbar-height);
+}
+
+html:has(.bi-navbar[data-fixed="true"]):has(.bi-sub-navbar[data-fixed="true"][data-scroll-dir="up"]) .bi-sticky-header {
+  top: calc(var(--bi-layout-navbar-height)  + var(--bi-layout-navbar-height));
+}

package/dist/index.css

@@ -396,39 +396,3 @@ html:has(bi-navbar) {
 html:has(bi-in-page-links) {
   scroll-padding-top: var(--bi-layout-navbar-height);
 }
-
-html:has(.bi-navbar) {
-  scroll-padding-top: var(--bi-layout-navbar-height);
-}
-
-html:has(.bi-sub-navbar) {
-  scroll-padding-top: var(--bi-layout-navbar-height);
-}
-
-html .bi-sticky-header {
-  top: 0;
-}
-
-html:has(.bi-navbar[data-fixed="true"]) .bi-sticky-header {
-  top: var(--bi-layout-navbar-height);
-}
-
-html:has(.bi-sub-navbar[data-fixed="true"][data-scroll-dir="down"]) .bi-navbar > header {
-  transform: translateY(-100%);
-}
-
-html:has(.bi-sub-navbar[data-fixed="true"][data-scroll-dir="down"]) .bi-sub-navbar {
-  top: 0;
-}
-
-html:has(.bi-navbar[data-fixed="true"]):has(.bi-sub-navbar[data-fixed="true"][data-scroll-dir="up"]) .bi-navbar > header {
-  transform: translateY(0);
-}
-
-html:has(.bi-navbar[data-fixed="true"]):has(.bi-sub-navbar[data-fixed="true"][data-scroll-dir="up"]) .bi-sub-navbar {
-  top: var(--bi-layout-navbar-height);
-}
-
-html:has(.bi-navbar[data-fixed="true"]):has(.bi-sub-navbar[data-fixed="true"][data-scroll-dir="up"]) .bi-sticky-header {
-  top: calc(var(--bi-layout-navbar-height)  + var(--bi-layout-navbar-height));
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bi-digital/css",
-  "version": "0.0.0-experimental-aff96f9",
+  "version": "0.0.0-experimental-2ec4984",
   "description": "CSS for the BI Design System",
   "author": "BI Digital",
   "license": "ISC",
@@ -23,7 +23,7 @@
     "lightningcss": "^1.30.1",
     "modern-normalize": "^3.0.1",
     "rimraf": "^6.0.1",
-    "@bi-digital/tokens": "0.0.0-experimental-aff96f9"
+    "@bi-digital/tokens": "0.0.0-experimental-2ec4984"
   },
   "scripts": {
     "build": "rimraf dist && node config.js",