@threadlabs/looma 0.38.0 → 0.39.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/EXPRESSIVE-MARKDOWN.md +2 -0
- package/README.md +1 -1
- package/components/ui-skeleton/ui-skeleton.html +36 -7
- package/components/ui-skeleton/ui-skeleton.js +46 -0
- package/dist/index.js +13 -12
- package/docs/README.md +3 -3
- package/docs/catalog.json +9 -9
- package/docs/cli.mjs +1 -1
- package/docs/commands.mjs +2 -2
- package/docs/index.d.ts +3 -3
- package/docs/local-server.mjs +1 -1
- package/docs/site.mjs +6 -6
- package/editor/expressmark.js +12 -4
- package/package.json +6 -6
- package/styles/ui-skeleton.css +30 -5
- package/vanilla/UiSkeleton.js +5 -3
- package/vue/UiSkeleton.vue +71 -10
- package/vue/chunks/UiSkeleton.js +41 -9
- package/vue/components.css +30 -4
package/vue/components.css
CHANGED
|
@@ -10486,13 +10486,26 @@ dialog:where([data-hn-ui-search-shell]) {
|
|
|
10486
10486
|
syntax: "*";
|
|
10487
10487
|
inherits: false;
|
|
10488
10488
|
}
|
|
10489
|
-
@
|
|
10490
|
-
|
|
10491
|
-
|
|
10489
|
+
@property --_ui-skeleton-viewport-x {
|
|
10490
|
+
syntax: "<length>";
|
|
10491
|
+
inherits: false;
|
|
10492
|
+
initial-value: 0px;
|
|
10493
|
+
}
|
|
10494
|
+
@property --_ui-skeleton-viewport-scale {
|
|
10495
|
+
syntax: "<number>";
|
|
10496
|
+
inherits: false;
|
|
10497
|
+
initial-value: 1;
|
|
10498
|
+
}
|
|
10499
|
+
@keyframes ui-skeleton-shimmer-908ae327 {
|
|
10500
|
+
to {
|
|
10501
|
+
background-position: calc(100vw / var(--_ui-skeleton-paint-scale) - var(--_ui-skeleton-paint-x))
|
|
10502
|
+
0;
|
|
10492
10503
|
}
|
|
10493
10504
|
}
|
|
10494
10505
|
@scope (.ui-skeleton) to ([data-hn]) {
|
|
10495
10506
|
:scope {
|
|
10507
|
+
--_ui-skeleton-paint-x: var(--_ui-skeleton-viewport-x);
|
|
10508
|
+
--_ui-skeleton-paint-scale: var(--_ui-skeleton-viewport-scale);
|
|
10496
10509
|
display: block !important;
|
|
10497
10510
|
position: relative;
|
|
10498
10511
|
box-sizing: border-box !important;
|
|
@@ -10529,18 +10542,31 @@ dialog:where([data-hn-ui-search-shell]) {
|
|
|
10529
10542
|
border-radius: var(--ui-radius-md);
|
|
10530
10543
|
}
|
|
10531
10544
|
:scope[data-ui-skeleton-state~="animated"]::before {
|
|
10532
|
-
|
|
10545
|
+
background-image: linear-gradient(
|
|
10546
|
+
90deg,
|
|
10547
|
+
transparent,
|
|
10548
|
+
light-dark(rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.14)) 50%,
|
|
10549
|
+
transparent
|
|
10550
|
+
);
|
|
10551
|
+
background-size: calc(100vw / var(--_ui-skeleton-paint-scale)) 100%;
|
|
10552
|
+
background-position: calc(0vw - var(--_ui-skeleton-paint-x)) 0;
|
|
10553
|
+
background-repeat: repeat-x;
|
|
10554
|
+
animation: ui-skeleton-shimmer-908ae327 3s linear infinite;
|
|
10533
10555
|
}
|
|
10534
10556
|
@media (prefers-reduced-motion: reduce) {
|
|
10535
10557
|
:scope[data-ui-skeleton-state~="animated"]::before {
|
|
10536
10558
|
animation: none;
|
|
10559
|
+
background-image: none;
|
|
10537
10560
|
}
|
|
10538
10561
|
}
|
|
10539
10562
|
@media (forced-colors: active) {
|
|
10540
10563
|
:scope::before {
|
|
10541
10564
|
background: CanvasText;
|
|
10542
10565
|
opacity: 0.2;
|
|
10566
|
+
}
|
|
10567
|
+
:scope[data-ui-skeleton-state~="animated"]::before {
|
|
10543
10568
|
animation: none;
|
|
10569
|
+
background-image: none;
|
|
10544
10570
|
}
|
|
10545
10571
|
}
|
|
10546
10572
|
:scope[hidden] {
|