@pictogrammers/components 0.5.15 → 0.5.18

package/pg/inputPixelEditor/utils/bitmapToMask.ts

@@ -13,7 +13,7 @@ interface Options {
   scale?: number;
   offsetX?: number;
   offsetY?: number;
-  include?: number[];
+  include?: number[][];
 }
 
 export function toIndex(x: number, y: number, width: number) {
@@ -21,10 +21,10 @@ export function toIndex(x: number, y: number, width: number) {
 }
 
 /**
- * Convert a 2d array to a SVG path.
+ * Convert a 2d array to SVG paths.
  * @param data
  * @param options
- * @returns path string
+ * @returns array of path strings, one per include grouping
  */
 export default function bitmaskToPath(data: number[] | number[][], options: Options = {}) {
 
@@ -34,10 +34,10 @@ export default function bitmaskToPath(data: number[] | number[][], options: Opti
     scale = 1,
     offsetX = 0,
     offsetY = 0,
-    include = [1];
+    include: number[][] = [[1]];
 
   if (options.width) {
-    bitmask = data as number[]; // already flat
+    bitmask = data as number[];
     width = options.width;
     height = bitmask.length / width;
     if (height % 1 !== 0) {
@@ -67,28 +67,38 @@ export default function bitmaskToPath(data: number[] | number[][], options: Opti
     include = options.include;
   }
 
-  // Naively copy into a new bitmask with a border of 1 to make sampling easier (no out of bounds checks)
+  const groupCount = include.length;
   const newWidth = width + 2;
   const newHeight = height + 2;
-  const bm = Array(newWidth * newHeight).fill(0);
 
-  // BM is just shifted over (1, 1) for the padding
   function BMXYToIndex(x: number, y: number) {
     return (y + 1) * newWidth + (x + 1);
   }
 
+  // Build value → group bitmask lookup
+  const valueToGroupBits = new Map<number, number>();
+  for (let g = 0; g < groupCount; ++g) {
+    for (const val of include[g]) {
+      valueToGroupBits.set(val, (valueToGroupBits.get(val) ?? 0) | (1 << g));
+    }
+  }
+
+  // Single pass: build padded cellMask where each cell stores a bitfield of group membership
+  const cellMask = new Int32Array(newWidth * newHeight);
   for (let y = 0; y < height; ++y) {
     for (let x = 0; x < width; ++x) {
-      bm[BMXYToIndex(x, y)] = include.includes(bitmask[toIndex(x, y, width)]) ? 1 : 0;
+      const bits = valueToGroupBits.get(bitmask[toIndex(x, y, width)]) ?? 0;
+      if (bits) {
+        cellMask[BMXYToIndex(x, y)] = bits;
+      }
     }
   }
 
-  // Edges data structure has [x, y, nextEdge, group]
+  // Allocate per-group edge structures upfront
   const edgeXCount = width * (height + 1);
   const edgeYCount = (width + 1) * height;
   const edgeCount = edgeXCount + edgeYCount;
 
-  const edges = Array(edgeCount).fill(0).map(() => ({ x: 0, y: 0, next: undefined })) as Edge[];
   function EdgeXIndex(x: number, y: number) {
     return y * width + x;
   }
@@ -96,121 +106,145 @@ export default function bitmaskToPath(data: number[] | number[][], options: Opti
     return edgeXCount + y * (width + 1) + x;
   }
 
-  const groups = new Set<Edge>();
+  const allEdges: Edge[][] = [];
+  const allContours: Set<Edge>[] = [];
+  for (let g = 0; g < groupCount; ++g) {
+    allEdges.push(Array(edgeCount).fill(0).map(() => ({ x: 0, y: 0, next: undefined })) as Edge[]);
+    allContours.push(new Set<Edge>());
+  }
 
-  function SetEdge(edge: Edge, x: number, y: number) {
+  // Helper: check group membership via cellMask bit
+  function isSet(x: number, y: number, bit: number) {
+    return (cellMask[BMXYToIndex(x, y)] & bit) !== 0;
+  }
+
+  function SetEdge(contours: Set<Edge>, edge: Edge, x: number, y: number) {
     edge.x = x;
     edge.y = y;
-    groups.add(edge);
+    contours.add(edge);
   }
 
-  function UnionGroup(edge: Edge) {
+  function UnionGroup(contours: Set<Edge>, edge: Edge) {
     for (var itr = edge.next; itr !== undefined && itr !== edge; itr = itr.next) {
-      groups.delete(itr);
+      contours.delete(itr);
     }
     if (itr !== undefined) {
-      groups.add(edge);
+      contours.add(edge);
     }
   }
 
+  // Single pass edge detection for all groups
   for (let y = 0; y < height; ++y) {
     for (let x = 0; x < width; ++x) {
-      if (bm[BMXYToIndex(x, y)] === 1) {
-        const left = bm[BMXYToIndex(x - 1, y)];
-        if (left == 0) {
+      const myMask = cellMask[BMXYToIndex(x, y)];
+      if (myMask === 0) continue;
+
+      for (let g = 0; g < groupCount; ++g) {
+        const groupBit = 1 << g;
+        if ((myMask & groupBit) === 0) continue;
+
+        const edges = allEdges[g];
+        const contours = allContours[g];
+
+        if (!isSet(x - 1, y, groupBit)) {
           const edge = edges[EdgeYIndex(x, y)];
-          SetEdge(edge, x, y + 1);
-          if (bm[BMXYToIndex(x - 1, y - 1)]) {
+          SetEdge(contours, edge, x, y + 1);
+          if (isSet(x - 1, y - 1, groupBit)) {
             edge.next = edges[EdgeXIndex(x - 1, y)];
-          } else if (bm[BMXYToIndex(x, y - 1)]) {
+          } else if (isSet(x, y - 1, groupBit)) {
             edge.next = edges[EdgeYIndex(x, y - 1)];
           } else {
             edge.next = edges[EdgeXIndex(x, y)];
           }
-          UnionGroup(edge);
+          UnionGroup(contours, edge);
         }
-        const right = bm[BMXYToIndex(x + 1, y)];
-        if (right === 0) {
+        if (!isSet(x + 1, y, groupBit)) {
           const edge = edges[EdgeYIndex(x + 1, y)];
-          SetEdge(edge, x + 1, y);
-          if (bm[BMXYToIndex(x + 1, y + 1)]) {
+          SetEdge(contours, edge, x + 1, y);
+          if (isSet(x + 1, y + 1, groupBit)) {
             edge.next = edges[EdgeXIndex(x + 1, y + 1)];
-          } else if (bm[BMXYToIndex(x, y + 1)]) {
+          } else if (isSet(x, y + 1, groupBit)) {
             edge.next = edges[EdgeYIndex(x + 1, y + 1)];
           } else {
             edge.next = edges[EdgeXIndex(x, y + 1)];
           }
-          UnionGroup(edge);
+          UnionGroup(contours, edge);
         }
-        const top = bm[BMXYToIndex(x, y - 1)];
-        if (top === 0) {
-          const edge: Edge = edges[EdgeXIndex(x, y)];
-          SetEdge(edge, x, y);
-          if (bm[BMXYToIndex(x + 1, y - 1)]) {
+        if (!isSet(x, y - 1, groupBit)) {
+          const edge = edges[EdgeXIndex(x, y)];
+          SetEdge(contours, edge, x, y);
+          if (isSet(x + 1, y - 1, groupBit)) {
             edge.next = edges[EdgeYIndex(x + 1, y - 1)];
-          } else if (bm[BMXYToIndex(x + 1, y)]) {
+          } else if (isSet(x + 1, y, groupBit)) {
             edge.next = edges[EdgeXIndex(x + 1, y)];
           } else {
             edge.next = edges[EdgeYIndex(x + 1, y)];
           }
-          UnionGroup(edge);
+          UnionGroup(contours, edge);
         }
-        const bottom = bm[BMXYToIndex(x, y + 1)];
-        if (bottom === 0) {
+        if (!isSet(x, y + 1, groupBit)) {
           const edge = edges[EdgeXIndex(x, y + 1)];
-          SetEdge(edge, x + 1, y + 1);
-          if (bm[BMXYToIndex(x - 1, y + 1)]) {
+          SetEdge(contours, edge, x + 1, y + 1);
+          if (isSet(x - 1, y + 1, groupBit)) {
             edge.next = edges[EdgeYIndex(x, y + 1)];
-          } else if (bm[BMXYToIndex(x - 1, y)]) {
+          } else if (isSet(x - 1, y, groupBit)) {
             edge.next = edges[EdgeXIndex(x - 1, y + 1)];
           } else {
             edge.next = edges[EdgeYIndex(x, y)];
           }
-          UnionGroup(edge);
+          UnionGroup(contours, edge);
         }
       }
     }
   }
 
-  for (const edge of groups) {
-    let itr = edge;
-    do {
-      if (itr.next) {
-        itr.next.type = itr.x == itr?.next?.x ? 'V' : 'H';
-        itr = itr.next;
-      }
-    } while (itr !== edge);
-  }
-
-  // Compress sequences of H and V
-  for (let edge of groups) {
-    let itr = edge;
-    do {
-      if (itr.type != itr.next?.type) {
-        while (itr.next?.type == itr.next?.next?.type) {
-          if (itr.next === edge) {
-            groups.delete(edge);
-            edge = itr.next.next as Edge;
-            groups.add(edge); // Note this will cause it to iterate over this group again, meh.
+  // Per-group post-processing: type assignment, compression, path building
+  const paths: string[] = [];
+
+  for (let g = 0; g < groupCount; ++g) {
+    const contours = allContours[g];
+
+    for (const edge of contours) {
+      let itr = edge;
+      do {
+        if (itr.next) {
+          itr.next.type = itr.x == itr?.next?.x ? 'V' : 'H';
+          itr = itr.next;
+        }
+      } while (itr !== edge);
+    }
+
+    for (let edge of contours) {
+      let itr = edge;
+      do {
+        if (itr.type != itr.next?.type) {
+          while (itr.next?.type == itr.next?.next?.type) {
+            if (itr.next === edge) {
+              contours.delete(edge);
+              edge = itr.next.next as Edge;
+              contours.add(edge);
+            }
+            itr.next = itr.next?.next;
           }
-          itr.next = itr.next?.next;
+        }
+        itr = itr.next as Edge;
+      } while (itr !== edge);
+    }
+
+    let path = '';
+    for (const edge of contours) {
+      path += `M${edge.x * scale},${edge.y * scale}`;
+      for (var itr = edge.next; itr != edge; itr = itr?.next) {
+        if (itr?.type == 'H') {
+          path += `H${(itr?.x * scale) + offsetX}`;
+        } else if (itr?.type == 'V') {
+          path += `V${(itr?.y * scale) + offsetY}`;
         }
       }
-      itr = itr.next as Edge;
-    } while (itr !== edge);
-  }
-
-  let path = '';
-  for (const edge of groups) {
-    path += `M${edge.x * scale},${edge.y * scale}`;
-    for (var itr = edge.next; itr != edge; itr = itr?.next) {
-      if (itr?.type == 'H') {
-        path += `H${(itr?.x * scale) + offsetX}`;
-      } else if (itr?.type == 'V') {
-        path += `V${(itr?.y * scale) + offsetY}`;
-      }
+      path += 'Z';
     }
-    path += 'Z';
+    paths.push(path);
   }
-  return path;
+
+  return paths;
 }

package/pg/inputPixelEditor/utils/getLassoPixels.ts

@@ -0,0 +1,51 @@
+import getLinePixels from './getLinePixels';
+import { Pixel } from './constants';
+
+/**
+ * Returns all pixels inside (and on the border of) a freehand lasso path.
+ *
+ * The path is a sequence of grid-cell coordinates visited during the drag.
+ * Consecutive points are connected with Bresenham lines to form the outline,
+ * and the interior is filled with an even-odd scanline rule.
+ */
+export default function getLassoPixels(path: [number, number][]): Pixel[] {
+  if (path.length < 3) { return []; }
+
+  const result = new Map<string, Pixel>();
+  const n = path.length;
+
+  // Outline: Bresenham lines between consecutive path points, closing back to start
+  for (let i = 0; i < n; i++) {
+    const [x0, y0] = path[i];
+    const [x1, y1] = path[(i + 1) % n];
+    for (const { x, y } of getLinePixels(x0, y0, x1, y1)) {
+      result.set(`${x},${y}`, { x, y });
+    }
+  }
+
+  // Scanline interior fill — test at row + 0.5 to avoid vertex ambiguities
+  const minY = Math.min(...path.map(([, y]) => y));
+  const maxY = Math.max(...path.map(([, y]) => y));
+
+  for (let row = minY; row <= maxY; row++) {
+    const intersections: number[] = [];
+    for (let i = 0; i < n; i++) {
+      const [x0, y0] = path[i];
+      const [x1, y1] = path[(i + 1) % n];
+      if ((y0 <= row && y1 > row) || (y1 <= row && y0 > row)) {
+        const t = (row + 0.5 - y0) / (y1 - y0);
+        intersections.push(x0 + t * (x1 - x0));
+      }
+    }
+    intersections.sort((a, b) => a - b);
+    for (let i = 0; i + 1 < intersections.length; i += 2) {
+      const xStart = Math.ceil(intersections[i]);
+      const xEnd = Math.floor(intersections[i + 1]);
+      for (let x = xStart; x <= xEnd; x++) {
+        result.set(`${x},${row}`, { x, y: row });
+      }
+    }
+  }
+
+  return Array.from(result.values());
+}

package/pg/inputSelect/inputSelect.ts

@@ -40,6 +40,10 @@ export default class PgInputSelect extends HTMLElement {
 
   #menuOpen = false;
   async #handleClick() {
+    if (this.options.length === 0) {
+      // No options
+      return;
+    }
     if (this.#menuOpen) { return; }
     this.#menuOpen = true;
     const result = await PgOverlaySelectMenu.open({
@@ -48,7 +52,7 @@ export default class PgInputSelect extends HTMLElement {
       value: this.options.find(x => x.value === this.value) ?? null,
       items: this.options,
     });
-    if (result !== undefined) {
+    if (result && result.value !== null) {
       this.dispatchEvent(new CustomEvent('change', {
         detail: {
           value: result.value,

package/pg/inputText/README.md

@@ -30,9 +30,9 @@ import { PgInputText } from '@pictogrammers/components/pgInputText';
 
 | CSS Variables       | Default   | Description |
 | ------------------- | --------- | ----------- |
-| `--pg-button-padding-inline` | `0.5rem` | Padding inline. |
-| `--pg-button-padding-inline-start` | `0.5rem` | Padding inline start. |
-| `--pg-button-padding-inline-end` | `0.5rem` | Padding inline end. |
-| `--pg-button-padding-block` | `0.25rem` | Padding block. |
-| `--pg-button-padding-block-start` | `0.25rem` | Padding block start. |
-| `--pg-button-padding-block-end` | `0.25rem` | Padding block end. |
+| `--pg-input-text-padding-inline` | `0.5rem` | Padding inline. |
+| `--pg-input-text-padding-inline-start` | `0.5rem` | Padding inline start. |
+| `--pg-input-text-padding-inline-end` | `0.5rem` | Padding inline end. |
+| `--pg-input-text-padding-block` | `0.25rem` | Padding block. |
+| `--pg-input-text-padding-block-start` | `0.25rem` | Padding block start. |
+| `--pg-input-text-padding-block-end` | `0.25rem` | Padding block end. |

package/pg/inputText/__examples__/basic/basic.ts

@@ -5,7 +5,7 @@ import template from './basic.html';
 
 @Component({
   selector: 'x-pg-input-text-basic',
-  template
+  template,
 })
 export default class XPgInputTextBasic extends HTMLElement {
 

package/pg/inputText/inputText.css

@@ -5,7 +5,7 @@
 
 [part=input] {
   border: 1px solid var(--pg-input-text-border-color, #453C4F);
-  border-radius: 0.125rem;
+  border-radius: var(--pg-input-border-radius, 0.125rem);
   padding-inline-start: var(--pg-input-text-padding-inline-start, var(--pg-input-text-padding-inline, 0.5rem));
   padding-inline-end: var(--pg-input-text-padding-inline-end, var(--pg-input-text-padding-inline, 0.5rem));
   padding-block-start: var(--pg-input-text-padding-block-start, var(--pg-input-text-padding-block, 0.25rem));
@@ -26,7 +26,7 @@
     - var(--pg-input-text-padding-inline-end, var(--pg-input-text-padding-inline, 0.5rem))
     - 2px
   );
-  background-color: transparent;
+  background-color: #FFF;
 }
 
 [part=input]:read-only {

package/pg/inputText copy/README.md

@@ -0,0 +1,38 @@
+# `<pg-input-text>`
+
+The `pg-input-text` component creates an input that accepts text input.
+
+```typescript
+import '@pictogrammers/components/pgInputText';
+import { PgInputText } from '@pictogrammers/components/pgInputText';
+```
+
+```html
+<pg-input-text value="50"></pg-input-text>
+```
+
+## Attributes
+
+| Attributes  | Tested   | Description |
+| ----------- | -------- | ----------- |
+| name        |          | Unique name in `pg-form` |
+| value       |          | Field value |
+| placeholder |          | Placeholder text |
+
+## Events
+
+| Events     | Tested   | Description |
+| ---------- | -------- | ----------- |
+| change     |          | `{ detail: { value }` |
+| input      |          | `{ detail: { value }` |
+
+## CSS Variables
+
+| CSS Variables       | Default   | Description |
+| ------------------- | --------- | ----------- |
+| `--pg-button-padding-inline` | `0.5rem` | Padding inline. |
+| `--pg-button-padding-inline-start` | `0.5rem` | Padding inline start. |
+| `--pg-button-padding-inline-end` | `0.5rem` | Padding inline end. |
+| `--pg-button-padding-block` | `0.25rem` | Padding block. |
+| `--pg-button-padding-block-start` | `0.25rem` | Padding block start. |
+| `--pg-button-padding-block-end` | `0.25rem` | Padding block end. |

package/pg/inputText copy/inputText.css

@@ -0,0 +1,41 @@
+:host {
+  display: block;
+  font-family: var(--pg-font-family, system-ui);
+}
+
+[part=input] {
+  border: 1px solid var(--pg-input-text-border-color, #453C4F);
+  border-radius: 0.125rem;
+  padding-inline-start: var(--pg-input-text-padding-inline-start, var(--pg-input-text-padding-inline, 0.5rem));
+  padding-inline-end: var(--pg-input-text-padding-inline-end, var(--pg-input-text-padding-inline, 0.5rem));
+  padding-block-start: var(--pg-input-text-padding-block-start, var(--pg-input-text-padding-block, 0.25rem));
+  padding-block-end: var(--pg-input-text-padding-block-start, var(--pg-input-text-padding-block, 0.25rem));
+  font-family: var(--pg-input-text-font-family, var(--pg-font-family));
+  font-size: 1rem;
+  outline: none;
+  field-sizing: content;
+  min-width: calc(
+    100%
+    - var(--pg-input-text-padding-inline-start, var(--pg-input-text-padding-inline, 0.5rem))
+    - var(--pg-input-text-padding-inline-end, var(--pg-input-text-padding-inline, 0.5rem))
+    - 2px
+  );
+  max-width: calc(
+    var(--pg-input-text-max-width, 100%)
+    - var(--pg-input-text-padding-inline-start, var(--pg-input-text-padding-inline, 0.5rem))
+    - var(--pg-input-text-padding-inline-end, var(--pg-input-text-padding-inline, 0.5rem))
+    - 2px
+  );
+  background-color: transparent;
+}
+
+[part=input]:read-only {
+  border-color: transparent;
+}
+
+[part=input]:active {
+  box-shadow: 0 0 0 3px var(--pg-input-text-active-glow, rgb(79, 143, 249, 0.6));
+}
+[part=input]:focus {
+  box-shadow: 0 0 0 3px var(--pg-input-text-focus-glow, rgb(79, 143, 249, 0.5));
+}

package/pg/inputText copy/inputText.html

@@ -0,0 +1 @@
+<input part="input" type="text" />

package/pg/inputText copy/inputText.spec.ts

@@ -0,0 +1,59 @@
+import { selectComponent, getProps } from '@pictogrammers/element';
+
+import './inputText';
+import PgInputText from './inputText';
+
+const PG_INPUT_TEXT = 'pg-input-text';
+
+describe('pg-input-text', () => {
+
+  beforeEach(() => {
+    var c = document.createElement(PG_INPUT_TEXT);
+    document.body.appendChild(c);
+  });
+
+  afterEach(() => {
+    while (document.body.firstChild) {
+      document.body.removeChild(document.body.firstChild);
+    }
+  });
+
+  it('should be registered', () => {
+    expect(customElements.get(PG_INPUT_TEXT)).toBeDefined();
+  });
+
+  it('should only expose known props', () => {
+    const props = getProps(PG_INPUT_TEXT);
+    expect(props.length).toBe(3);
+    expect(props).toContain('name');
+    expect(props).toContain('value');
+    expect(props).toContain('placeholder');
+  });
+
+  it('should default value to empty', () => {
+    const component = selectComponent<PgInputText>(PG_INPUT_TEXT);
+    const { $input } = component;
+    expect($input.value).toEqual('');
+  });
+
+  it('should set value to "Hello World!"', () => {
+    const component = selectComponent<PgInputText>(PG_INPUT_TEXT);
+    component.value = 'Hello World!';
+    const { $input } = component;
+    expect($input.value).toEqual('Hello World!');
+  });
+
+  it('should default placeholder to empty', () => {
+    const component = selectComponent<PgInputText>(PG_INPUT_TEXT);
+    const { $input } = component;
+    expect($input.placeholder).toEqual('');
+  });
+
+  it('should set placeholder to "Hello World!"', () => {
+    const component = selectComponent<PgInputText>(PG_INPUT_TEXT);
+    component.placeholder = 'Hello World!';
+    const { $input } = component;
+    expect($input.placeholder).toEqual('Hello World!');
+  });
+
+});

package/pg/inputText copy/inputText.ts

@@ -0,0 +1,67 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import template from './inputText.html';
+import style from './inputText.css';
+
+@Component({
+  selector: 'pg-input-text',
+  style,
+  template
+})
+export default class PgInputText extends HTMLElement {
+  @Prop() name: string = '';
+  @Prop() value: string = '';
+  @Prop() placeholder: string = '';
+  @Prop() readOnly: boolean = false;
+
+  @Part() $input: HTMLInputElement;
+
+  connectedCallback() {
+    this.$input.addEventListener('input', this.handleInput.bind(this));
+    this.$input.addEventListener('change', this.handleChange.bind(this));
+  }
+
+  focus() {
+    this.$input.focus();
+  }
+
+  skipValue = false;
+
+  render(changes) {
+    if (changes.value && !this.skipValue) {
+      this.$input.value = this.value;
+    }
+    if (changes.placeholder) {
+      this.$input.placeholder = this.placeholder;
+    }
+    if (changes.readOnly) {
+      this.$input.readOnly = this.readOnly;
+    }
+    this.skipValue = false;
+  }
+
+  handleInput(e) {
+    e.stopPropagation();
+    this.skipValue = true;
+    this.value = e.target.value;
+    this.dispatchEvent(
+      new CustomEvent('input', {
+        detail: {
+          value: e.target.value,
+          name: e.name
+        }
+      })
+    );
+  }
+
+  handleChange(e) {
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        detail: {
+          value: e.target.value,
+          name: e.name
+        }
+      })
+    );
+  }
+}

package/pg/inputTextarea/README.md

@@ -0,0 +1,39 @@
+# `<pg-input-textarea>`
+
+The `pg-input-textarea` component creates an input that accepts multiline text. Additionally it can resize.
+
+```typescript
+import '@pictogrammers/components/pgInputTextarea';
+import { PgInputTextarea } from '@pictogrammers/components/pgInputTextarea';
+```
+
+```html
+<pg-input-textarea value="50"></pg-input-textarea>
+```
+
+## Attributes
+
+| Attributes  | Tested   | Description |
+| ----------- | -------- | ----------- |
+| name        |          | Unique name in `pg-form` |
+| value       |          | Field value |
+| placeholder |          | Placeholder text |
+
+## Events
+
+| Events     | Tested   | Description |
+| ---------- | -------- | ----------- |
+| change     |          | `{ detail: { value }` |
+| input      |          | `{ detail: { value }` |
+| caret      |          | `{ detail: { column, row }}` |
+
+## CSS Variables
+
+| CSS Variables       | Default   | Description |
+| ------------------- | --------- | ----------- |
+| `--pg-input-textarea-padding-inline` | `0.5rem` | Padding inline. |
+| `--pg-input-textarea-padding-inline-start` | `0.5rem` | Padding inline start. |
+| `--pg-input-textarea-padding-inline-end` | `0.5rem` | Padding inline end. |
+| `--pg-input-textarea-padding-block` | `0.25rem` | Padding block. |
+| `--pg-input-textarea-padding-block-start` | `0.25rem` | Padding block start. |
+| `--pg-input-textarea-padding-block-end` | `0.25rem` | Padding block end. |

package/pg/inputTextarea/__examples__/basic/basic.html

@@ -0,0 +1,9 @@
+<div class="example">
+  <pg-input-textarea part="input" value="Hello World!"></pg-input-textarea>
+  <div>
+    <code>onchange: <span part="value1"></span></code>
+  </div>
+  <div>
+    <code>oninput: <span part="value2"></span></code>
+  </div>
+</div>