@smwb/ui-css 1.0.0 → 1.0.2

package/dist/ui.css

@@ -1,5 +1,6 @@
 @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");
 .smwb-appbar {
+  box-sizing: border-box;
   padding: 0 16px;
   display: flex;
   align-items: center;
@@ -4019,7 +4020,7 @@
   outline-offset: 2px;
 }
 .smwb-carousel {
-  max-width: 412px;
+  max-width: var(--smwb-carousel-max-width, 412px);
 }
 .smwb-carousel__inner {
   position: relative;
@@ -4028,8 +4029,8 @@
   text-align: center;
   overflow: hidden;
   cursor: pointer;
-  margin-left: -4px;
-  margin-right: -4px;
+  margin-left: calc(-1 * var(--smwb-carousel-gap, 4px));
+  margin-right: calc(-1 * var(--smwb-carousel-gap, 4px));
   touch-action: pan-y;
 }
 .smwb-carousel__layer {
@@ -4040,20 +4041,24 @@
 }
 .smwb-carousel__slide {
   flex-shrink: 0;
-  padding-left: 4px;
-  padding-right: 4px;
+  padding-left: var(--smwb-carousel-gap, 4px);
+  padding-right: var(--smwb-carousel-gap, 4px);
 }
 .smwb-carousel__slide-inner {
   border-radius: 28px;
   overflow: hidden;
   will-change: width;
 }
+.smwb-carousel__slide-inner_clickable {
+  cursor: zoom-in;
+}
 .smwb-carousel__slide-inner img {
-  height: 205px;
-  aspect-ratio: 0.9;
+  height: var(--smwb-carousel-cell-height, 205px);
+  aspect-ratio: var(--smwb-carousel-aspect-ratio, 0.9);
   object-fit: cover;
   width: 100%;
   user-select: none;
+  -webkit-user-drag: none;
 }
 .smwb-carousel__navigation {
   display: flex;
@@ -4080,6 +4085,64 @@
   align-items: center;
   justify-content: center;
 }
+.smwb-carousel__fullscreen-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.smwb-carousel__fullscreen-stage {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  touch-action: pan-y;
+}
+.smwb-carousel__fullscreen-track {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  will-change: transform;
+}
+.smwb-carousel__fullscreen-slide {
+  flex: 0 0 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.smwb-carousel__fullscreen-slide img {
+  max-width: 96vw;
+  max-height: 92vh;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+.smwb-carousel__fullscreen-arrow,
+.smwb-carousel__fullscreen-close {
+  position: absolute;
+  z-index: 1;
+  cursor: pointer;
+  color: #fff;
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
+}
+.smwb-carousel__fullscreen-arrow {
+  top: 50%;
+  transform: translateY(-50%);
+}
+.smwb-carousel__fullscreen-arrow_prev {
+  left: 16px;
+}
+.smwb-carousel__fullscreen-arrow_next {
+  right: 16px;
+}
+.smwb-carousel__fullscreen-close {
+  top: 16px;
+  right: 16px;
+}
 .smwb-accordion {
   display: flex;
   flex-direction: column;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smwb/ui-css",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Prebuilt aggregate stylesheet for the @smwb design system (compiled from @smwb/ui-styles). Framework-agnostic — shared by the React and SolidJS libraries.",
   "license": "MIT",
   "sideEffects": [
@@ -19,7 +19,13 @@
     "build": "lessc -rp=/ ../styles/less/components.less ./dist/ui.css"
   },
   "devDependencies": {
-    "@smwb/ui-styles": "^1.0.0",
+    "@smwb/ui-styles": "^1.0.4",
     "less": "^4.6.4"
+  },
+  "homepage": "https://sourcecraft.dev/elfenmail/ui",
+  "repository": {
+    "type": "git",
+    "url": "git+https://git.sourcecraft.dev/elfenmail/ui.git",
+    "directory": "packages/ui-css"
   }
 }