@selimssevgi/cube-design-angular 0.6.1 → 0.6.2

package/CHANGELOG.md

@@ -4,6 +4,10 @@
 
 nothing yet.
 
+## 0.6.2 (4 november 2026: a held square stands in the middle)
+
+- **`align` on `<cube-square>`**, `'center'` by default: a square narrower than its place (held to the window's height so it is seen whole, or to `maxSide`) stands in the middle of it, its spare width shared on both sides. before, it stood at the start and left the spare width empty on the right: selim saw it on mosaic's todarch at 1280 × 860, a 4 × 4 (eight tiles, `least: 'room'`) held to 756 px in an 812 px column. `align: 'start'` keeps the old place. the turning rows' band is centred the same way. an app changes nothing.
+
 ## 0.6.1 (4 november 2026: an empty square is seen whole on a short desktop window)
 
 - **the square counts what stands above it.** `<cube-square>` held the square view to the window's height less a fixed 48 px, so under mosaic's top bar and head an empty piece's 5 × 5 (`least`) ran below a short desktop window. the room's `tall` is now the window's height less where the square starts on the page and 16 px below, never less than 320: the pure `squareTall(windowHeight, top, { below, least })`, `SQUARE_ROOM_BELOW` (16) and `SQUARE_LEAST_TALL` (320). it is measured again when the page above it changes (a head's line arriving). an app changes nothing; a square low on a page is smaller than before, and `least` follows it (3 × 3 or 4 × 4 where the window is short).

package/fesm2022/selimssevgi-cube-design-angular.mjs

@@ -2044,6 +2044,7 @@ var CubeSquare = class CubeSquare {
 	tiles = input.required(...ngDevMode ? [{ debugName: "tiles" }] : /* istanbul ignore next */ []);
 	view = input("square", ...ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []);
 	maxSide = input(880, ...ngDevMode ? [{ debugName: "maxSide" }] : /* istanbul ignore next */ []);
+	align = input("center", ...ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []);
 	listRow = input(76, ...ngDevMode ? [{ debugName: "listRow" }] : /* istanbul ignore next */ []);
 	dashed = input(false, ...ngDevMode ? [{ debugName: "dashed" }] : /* istanbul ignore next */ []);
 	least = input("room", ...ngDevMode ? [{ debugName: "least" }] : /* istanbul ignore next */ []);
@@ -2324,6 +2325,13 @@ var CubeSquare = class CubeSquare {
 				isRequired: false,
 				transformFunction: null
 			},
+			align: {
+				classPropertyName: "align",
+				publicName: "align",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			listRow: {
 				classPropertyName: "listRow",
 				publicName: "listRow",
@@ -2409,6 +2417,7 @@ var CubeSquare = class CubeSquare {
       <div
         class="cs-turning"
         [class]="'cs-turning cs-l' + sq.level"
+        [class.cs-start]="align() === 'start'"
         [class.cs-dashed]="dashed()"
         [attr.data-level]="sq.level"
         [style.width.px]="sq.width"
@@ -2480,6 +2489,7 @@ var CubeSquare = class CubeSquare {
         #grid
         [class]="'cs-square cs-l' + sq.level"
         [class.cs-list]="sq.list"
+        [class.cs-start]="align() === 'start'"
         [class.cs-dashed]="dashed()"
         [attr.data-level]="sq.level"
         [style.width.px]="sq.width"
@@ -2512,7 +2522,7 @@ var CubeSquare = class CubeSquare {
     }
   `,
 		isInline: true,
-		styles: [":host{display:block}.cs-square{display:grid;gap:calc(var(--cs-gap) * var(--cube-square-gap-scale, 1));--cs-radius: var(--cube-square-radius, 20px)}.cs-cell{display:grid;min-width:0;min-height:0}.cs-place{box-sizing:border-box;border:var(--cube-square-place-width, 1.5px) solid var(--cube-square-place, color-mix(in srgb, #dae0d9 55%, transparent));border-radius:var(--cs-radius)}.cs-dashed .cs-place{border-style:dashed;border-color:var(--cube-square-place-dashed, #dae0d9)}.cs-l0{--cs-radius: 28px}.cs-l2{--cs-radius: 16px}.cs-l3{--cs-radius: 12px}.cs-l4{--cs-radius: 9px}.cs-l4 .cs-place{border-width:1px}.cs-turning{display:flex;flex-direction:column;gap:calc(var(--cs-gap) * var(--cube-square-gap-scale, 1));--cs-radius: var(--cube-square-radius, 20px)}.cs-row{position:relative;perspective:1400px;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none}.cs-row:focus-visible{outline:2px solid var(--cube-square-focus, #5f9a80);outline-offset:3px;border-radius:var(--cs-radius)}.cs-band{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .38s cubic-bezier(.2,.8,.2,1)}.cs-band.cs-nudging{transition:transform .52s cubic-bezier(.4,0,.2,1)}.cs-band.cs-still{transition:none}.cs-side{position:absolute;inset:0;display:grid;gap:calc(var(--cs-gap) * var(--cube-square-gap-scale, 1));backface-visibility:hidden}.cs-edge{pointer-events:none;position:absolute;top:18%;bottom:18%;right:calc(-1*max(4px,var(--cs-gap) - 2px));z-index:1;width:3px;border-radius:999px;background:var(--cube-square-edge, color-mix(in srgb, #5f9a80 45%, transparent))}\n"],
+		styles: [":host{display:block}.cs-square,.cs-turning{margin-inline:auto}.cs-square.cs-start,.cs-turning.cs-start{margin-inline:0}.cs-square{display:grid;gap:calc(var(--cs-gap) * var(--cube-square-gap-scale, 1));--cs-radius: var(--cube-square-radius, 20px)}.cs-cell{display:grid;min-width:0;min-height:0}.cs-place{box-sizing:border-box;border:var(--cube-square-place-width, 1.5px) solid var(--cube-square-place, color-mix(in srgb, #dae0d9 55%, transparent));border-radius:var(--cs-radius)}.cs-dashed .cs-place{border-style:dashed;border-color:var(--cube-square-place-dashed, #dae0d9)}.cs-l0{--cs-radius: 28px}.cs-l2{--cs-radius: 16px}.cs-l3{--cs-radius: 12px}.cs-l4{--cs-radius: 9px}.cs-l4 .cs-place{border-width:1px}.cs-turning{display:flex;flex-direction:column;gap:calc(var(--cs-gap) * var(--cube-square-gap-scale, 1));--cs-radius: var(--cube-square-radius, 20px)}.cs-row{position:relative;perspective:1400px;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none}.cs-row:focus-visible{outline:2px solid var(--cube-square-focus, #5f9a80);outline-offset:3px;border-radius:var(--cs-radius)}.cs-band{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .38s cubic-bezier(.2,.8,.2,1)}.cs-band.cs-nudging{transition:transform .52s cubic-bezier(.4,0,.2,1)}.cs-band.cs-still{transition:none}.cs-side{position:absolute;inset:0;display:grid;gap:calc(var(--cs-gap) * var(--cube-square-gap-scale, 1));backface-visibility:hidden}.cs-edge{pointer-events:none;position:absolute;top:18%;bottom:18%;right:calc(-1*max(4px,var(--cs-gap) - 2px));z-index:1;width:3px;border-radius:999px;background:var(--cube-square-edge, color-mix(in srgb, #5f9a80 45%, transparent))}\n"],
 		dependencies: [{
 			kind: "directive",
 			type: NgTemplateOutlet,
@@ -2542,6 +2552,7 @@ i0.ɵɵngDeclareClassMetadata({
       <div
         class="cs-turning"
         [class]="'cs-turning cs-l' + sq.level"
+        [class.cs-start]="align() === 'start'"
         [class.cs-dashed]="dashed()"
         [attr.data-level]="sq.level"
         [style.width.px]="sq.width"
@@ -2613,6 +2624,7 @@ i0.ɵɵngDeclareClassMetadata({
         #grid
         [class]="'cs-square cs-l' + sq.level"
         [class.cs-list]="sq.list"
+        [class.cs-start]="align() === 'start'"
         [class.cs-dashed]="dashed()"
         [attr.data-level]="sq.level"
         [style.width.px]="sq.width"
@@ -2645,7 +2657,7 @@ i0.ɵɵngDeclareClassMetadata({
     }
   `,
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			styles: [":host{display:block}.cs-square{display:grid;gap:calc(var(--cs-gap) * var(--cube-square-gap-scale, 1));--cs-radius: var(--cube-square-radius, 20px)}.cs-cell{display:grid;min-width:0;min-height:0}.cs-place{box-sizing:border-box;border:var(--cube-square-place-width, 1.5px) solid var(--cube-square-place, color-mix(in srgb, #dae0d9 55%, transparent));border-radius:var(--cs-radius)}.cs-dashed .cs-place{border-style:dashed;border-color:var(--cube-square-place-dashed, #dae0d9)}.cs-l0{--cs-radius: 28px}.cs-l2{--cs-radius: 16px}.cs-l3{--cs-radius: 12px}.cs-l4{--cs-radius: 9px}.cs-l4 .cs-place{border-width:1px}.cs-turning{display:flex;flex-direction:column;gap:calc(var(--cs-gap) * var(--cube-square-gap-scale, 1));--cs-radius: var(--cube-square-radius, 20px)}.cs-row{position:relative;perspective:1400px;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none}.cs-row:focus-visible{outline:2px solid var(--cube-square-focus, #5f9a80);outline-offset:3px;border-radius:var(--cs-radius)}.cs-band{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .38s cubic-bezier(.2,.8,.2,1)}.cs-band.cs-nudging{transition:transform .52s cubic-bezier(.4,0,.2,1)}.cs-band.cs-still{transition:none}.cs-side{position:absolute;inset:0;display:grid;gap:calc(var(--cs-gap) * var(--cube-square-gap-scale, 1));backface-visibility:hidden}.cs-edge{pointer-events:none;position:absolute;top:18%;bottom:18%;right:calc(-1*max(4px,var(--cs-gap) - 2px));z-index:1;width:3px;border-radius:999px;background:var(--cube-square-edge, color-mix(in srgb, #5f9a80 45%, transparent))}\n"]
+			styles: [":host{display:block}.cs-square,.cs-turning{margin-inline:auto}.cs-square.cs-start,.cs-turning.cs-start{margin-inline:0}.cs-square{display:grid;gap:calc(var(--cs-gap) * var(--cube-square-gap-scale, 1));--cs-radius: var(--cube-square-radius, 20px)}.cs-cell{display:grid;min-width:0;min-height:0}.cs-place{box-sizing:border-box;border:var(--cube-square-place-width, 1.5px) solid var(--cube-square-place, color-mix(in srgb, #dae0d9 55%, transparent));border-radius:var(--cs-radius)}.cs-dashed .cs-place{border-style:dashed;border-color:var(--cube-square-place-dashed, #dae0d9)}.cs-l0{--cs-radius: 28px}.cs-l2{--cs-radius: 16px}.cs-l3{--cs-radius: 12px}.cs-l4{--cs-radius: 9px}.cs-l4 .cs-place{border-width:1px}.cs-turning{display:flex;flex-direction:column;gap:calc(var(--cs-gap) * var(--cube-square-gap-scale, 1));--cs-radius: var(--cube-square-radius, 20px)}.cs-row{position:relative;perspective:1400px;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none}.cs-row:focus-visible{outline:2px solid var(--cube-square-focus, #5f9a80);outline-offset:3px;border-radius:var(--cs-radius)}.cs-band{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .38s cubic-bezier(.2,.8,.2,1)}.cs-band.cs-nudging{transition:transform .52s cubic-bezier(.4,0,.2,1)}.cs-band.cs-still{transition:none}.cs-side{position:absolute;inset:0;display:grid;gap:calc(var(--cs-gap) * var(--cube-square-gap-scale, 1));backface-visibility:hidden}.cs-edge{pointer-events:none;position:absolute;top:18%;bottom:18%;right:calc(-1*max(4px,var(--cs-gap) - 2px));z-index:1;width:3px;border-radius:999px;background:var(--cube-square-edge, color-mix(in srgb, #5f9a80 45%, transparent))}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -2674,6 +2686,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		align: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "align",
+				required: false
+			}]
+		}],
 		listRow: [{
 			type: i0.Input,
 			args: [{
@@ -3051,6 +3071,7 @@ var CubeContext = class CubeContext {
 					"tiles",
 					"view",
 					"maxSide",
+					"align",
 					"listRow",
 					"dashed",
 					"least",
@@ -3395,6 +3416,7 @@ var CubeLoading = class CubeLoading {
 					"tiles",
 					"view",
 					"maxSide",
+					"align",
 					"listRow",
 					"dashed",
 					"least",