@phis/ui 0.4.0 → 0.4.2

package/styles/root.css

@@ -114,29 +114,30 @@ samp {
   animation-timing-function: var(--phi-effects-animation-easing, ease-out);
 }
 
-:where([data-phi-renderable-block="true"][data-phi-effects-transition="composite"][data-phi-effects-trigger="on_visible"]) {
-  animation-composition: var(--phi-effects-animation-composition, replace);
-  animation-delay: var(--phi-effects-animation-delay, 0ms);
-  animation-duration: var(--phi-effects-animation-duration, 1000ms);
-  animation-name: var(--phi-effects-animation-name);
-  animation-play-state: paused;
-  animation-timing-function: var(--phi-effects-animation-easing, ease-out);
-}
-
-:where([data-phi-renderable-block="true"][data-phi-effects-transition="composite"][data-phi-effects-trigger="on_visible"][data-phi-effects-state="running"]) {
-  animation-play-state: running;
-}
-
 /*
- * On ready, the whole rule inside the query that asks whether anything can release it.
+ * On visible and on ready, the whole rule inside the query that asks whether anything can release it.
  *
- * The animation is held at its first frame until the page has finished arriving, so a Widget whose
- * content the server streams in a segment of its own can land, and everything below it can settle,
- * behind an entrance that has not started. Only scripting sets the state that releases it; where there
- * is none the Block would stand at that first frame for good, which for a fade in means invisible. So
- * without scripting there is no animation at all and the Block is simply there.
+ * The animation is held at its first frame -- until the Block is scrolled into view, or until the page
+ * has finished arriving, so a Widget whose content the server streams in a segment of its own can land,
+ * and everything below it can settle, behind an entrance that has not started. Only scripting sets the
+ * state that releases it; where there is none the Block would stand at that first frame for good, which
+ * for a fade in means invisible. So without scripting there is no animation at all and the Block is
+ * simply there.
  */
 @media (scripting: enabled) {
+  :where([data-phi-renderable-block="true"][data-phi-effects-transition="composite"][data-phi-effects-trigger="on_visible"]) {
+    animation-composition: var(--phi-effects-animation-composition, replace);
+    animation-delay: var(--phi-effects-animation-delay, 0ms);
+    animation-duration: var(--phi-effects-animation-duration, 1000ms);
+    animation-name: var(--phi-effects-animation-name);
+    animation-play-state: paused;
+    animation-timing-function: var(--phi-effects-animation-easing, ease-out);
+  }
+
+  :where([data-phi-renderable-block="true"][data-phi-effects-transition="composite"][data-phi-effects-trigger="on_visible"][data-phi-effects-state="running"]) {
+    animation-play-state: running;
+  }
+
   :where([data-phi-renderable-block="true"][data-phi-effects-transition="composite"][data-phi-effects-trigger="on_ready"]) {
     animation-composition: var(--phi-effects-animation-composition, replace);
     animation-delay: var(--phi-effects-animation-delay, 0ms);

package/types/core-widget-placements.d.ts

@@ -1,5 +1,6 @@
 import type { PhiBulletListEntry, PhiBulletListStyle } from "../components/widgets/shared/bullet-list-vocabulary";
 import type { PhiRenderableBlockBase } from "./renderable-block";
+import type { PhiTextSource } from "../helpers/text-source";
 import type { PhiRuntimeConditionExpression } from "./runtime-condition";
 import type { PhiSignalRoute, PhiSignalValue } from "./signals";
 import type { PhiCssLength } from "./length";
@@ -41,6 +42,8 @@ export type PhiWidgetPlacementSignalRoutes = {
 type PhiControlPlacement = Omit<PhiControlConfig, "signalRoutes">;
 /** Logical, not left and right: a Site in an RTL locale reads "start" as the right-hand edge. */
 export type PhiMarkdownTextAlign = "start" | "center" | "end" | "justify";
+/** Which edge the text's pictures stand at, with the words flowing past them; logical like the align. */
+export type PhiMarkdownImageFloat = "start" | "end";
 export type PhiMarkdownWidgetPlacement = PhiWidgetPlacementBase & {
     sourceMode?: "inline" | "url";
     markdown?: string;
@@ -48,6 +51,7 @@ export type PhiMarkdownWidgetPlacement = PhiWidgetPlacementBase & {
     sourceLocale?: string;
     revalidateSeconds?: number;
     textAlign?: PhiMarkdownTextAlign;
+    imageFloat?: PhiMarkdownImageFloat;
     textBlockSpacingBefore?: PhiSpacingScaleKey;
     textBlockSpacingAfter?: PhiSpacingScaleKey;
     headingBlockSpacingBefore?: PhiSpacingScaleKey;
@@ -71,6 +75,8 @@ export type PhiSimpleTextWidgetPlacement = PhiWidgetPlacementBase & {
     tone?: PhiTextTone;
     marks?: PhiSimpleTextMark[];
     disabled?: boolean;
+    /** `"preset"` while the words are a Preset's (`helpers/text-source.ts`). */
+    textSource?: PhiTextSource;
 };
 export type PhiDescriptionWidgetPlacement = PhiWidgetPlacementBase & {
     eyebrow?: string;
@@ -81,6 +87,8 @@ export type PhiDescriptionWidgetPlacement = PhiWidgetPlacementBase & {
     asideList?: PhiBulletListStyle;
     footer?: string;
     tone?: PhiTextTone;
+    /** `"preset"` while the words are a Preset's (`helpers/text-source.ts`). */
+    textSource?: PhiTextSource;
 };
 export type PhiButtonWidgetPlacement = PhiWidgetPlacementBase & PhiControlPlacement & PhiControlBadgeConfig & {
     action?: PhiCommonControlActionKey;

package/types/table-widget.d.ts

@@ -306,6 +306,8 @@ export type PhiTableWidgetPresentation = PhiControlPresentationConfig & {
     borders?: boolean;
     /** The header row; shown unless this says `false`. */
     header?: boolean;
+    /** Whether the header row stays at the top while the rows scroll under it; on unless this says `false`. */
+    stickyHeader?: boolean;
     footer?: PhiTableFooterConfig;
     summary?: PhiTableSummaryConfig;
     row?: {