scaling mock data

src/Umbraco.Web.UI.Client/src/mocks/data/data-type/data-type.data.ts

@@ -648,6 +648,23 @@ export const data: Array<UmbMockDataTypeModel> = [
 						contentElementTypeKey: '4f68ba66-6fb2-4778-83b8-6ab4ca3a7c5c',
 						rowMinSpan: 1,
 						rowMaxSpan: 1,
+						columnSpanOptions: [
+							{
+								columnSpan: 1,
+							},
+							{
+								columnSpan: 2,
+							},
+							{
+								columnSpan: 3,
+							},
+							{
+								columnSpan: 6,
+							},
+							{
+								columnSpan: 12,
+							},
+						],
 						areas: [
 							{
 								key: 'area1_key',

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-scale-handler/block-scale-handler.element.ts

@@ -14,10 +14,13 @@ export class UmbBlockGridScaleHandlerElement extends UmbLitElement implements Um
 		this.addEventListener('dragstart', (e: DragEvent) => {
 			e.preventDefault();
 		});
+		this.addEventListener('dragstart', (e: DragEvent) => {
+			e.preventDefault();
+		});
 	}
 	render() {
 		return html`
-			<div id="handler"></div>
+			<button aria-label="TODO: Some introduction to keyboard scaling" id="handler"></button>
 			<div id="label">TODO: Label content [NL]</div>
 		`;
 	}
@@ -38,7 +41,7 @@ export class UmbBlockGridScaleHandlerElement extends UmbLitElement implements Um
 
 			#handler {
 				position: absolute;
-				// TODO: Look at the feature I out-commented here, what was that supose to do [NL]:
+				// TODO: Look at the feature I out-commented here, what was that suppose to do [NL]:
 				//display: var(--umb-block-grid--block-ui-display, block);
 				display: block;
 				z-index: 2;
@@ -61,6 +64,10 @@ export class UmbBlockGridScaleHandlerElement extends UmbLitElement implements Um
 			#handler:focus {
 				opacity: 1;
 			}
+			#handler:focus {
+				outline: 2px solid var(--uui-color-selected);
+				outline-offset: 1px;
+			}
 			#handler::after {
 				content: '';
 				position: absolute;

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/ref-grid-block/ref-grid-block.element.ts

@@ -18,6 +18,7 @@ export class UmbRefGridBlockElement extends UUIRefNodeElement {
 		...UUIRefNodeElement.styles,
 		css`
 			:host {
+				min-width: 20px; // Set to something, to overwrite UUI min width.
 				min-height: var(--uui-size-16);
 				flex-flow: row wrap;
 			}