@konce-pt/angular 0.7.11 → 0.8.0

package/grid/src/lib/llms.txt

@@ -1,37 +1,37 @@
 # KptGrid / KptCol / KptFlex (@konce-pt/angular/grid)
 
-Ergonomia Angulara nad arkuszem `@konce-pt/grid`. Dyrektywy ustawiają wyłącznie
-custom properties inline — nie dodają ani nie usuwają klas, układ przelicza
-natywny silnik CSS.
+Angular ergonomics over the `@konce-pt/grid` stylesheet. The directives set nothing but
+inline custom properties — they neither add nor remove classes, and the layout is computed by
+the native CSS engine.
 
 Import: `import { KptGrid, KptCol, KptFlex } from '@konce-pt/angular/grid';`
-Skrót: `import { KPT_GRID_IMPORTS } from '@konce-pt/angular/grid';` → `imports: [...KPT_GRID_IMPORTS]`
+Shorthand: `import { KPT_GRID_IMPORTS } from '@konce-pt/angular/grid';` → `imports: [...KPT_GRID_IMPORTS]`
 
-Wymaga arkusza: `import '@konce-pt/grid';` (Angular CLI: `angular.json` → `styles[]`).
+Requires the stylesheet: `import '@konce-pt/grid';` (Angular CLI: `angular.json` → `styles[]`).
 
-## Breakpointy (mobile-first)
+## Breakpoints (mobile-first)
 `sm` >= 640px, `md` >= 768px, `lg` >= 1024px, `xl` >= 1280px, `2xl` >= 1536px.
-Wartość obowiązuje od swojego breakpointa w górę, dopóki nie nadpisze jej kolejna:
-`[kptCol]="12" [kptColLg]="5"` daje 12 na mobile, `sm` i `md`, a 5 dopiero od `lg`.
+A value applies from its breakpoint upward until the next one overrides it:
+`[kptCol]="12" [kptColLg]="5"` gives 12 on mobile, `sm` and `md`, and 5 only from `lg` up.
 
-## KptGrid — selektor `[kptGrid]`, `kpt-grid`
-Klasa hosta: `kpt-grid`.
-- `columns`: number — liczba kolumn (domyślnie 12 z CSS). Warianty: `columnsSm`,
+## KptGrid — selector `[kptGrid]`, `kpt-grid`
+Host class: `kpt-grid`.
+- `columns`: number — the column count (12 by default, from CSS). Variants: `columnsSm`,
   `columnsMd`, `columnsLg`, `columnsXl`, `columns2xl`.
-- `gap`: string — odstęp w obu osiach, np. `'1.5rem'`, `'var(--kpt-space-6)'`.
-- `gapX`, `gapY`: string — odstęp w jednej osi, nadpisuje `gap`.
-- `container`: boolean — tryb container queries (patrz niżej).
-
-## KptCol — selektor `[kptCol]`, `[kptColSm]` … `[kptColSelf]`
-- `kptCol`: number | string — rozpiętość, baza mobile-first.
-- `kptColSm`, `kptColMd`, `kptColLg`, `kptColXl`, `kptCol2xl` — nadpisania per breakpoint.
-- `kptColStart`: number — linia siatki, od której zaczyna się kolumna (1-based); tak robi się offsety.
-- `kptColOrder`: number — kolejność wizualna. Nie zmienia DOM: czytniki ekranu
-  i nawigacja klawiaturą idą za DOM, więc nie przenoś nim treści interaktywnej.
+- `gap`: string — the gap on both axes, e.g. `'1.5rem'`, `'var(--kpt-space-6)'`.
+- `gapX`, `gapY`: string — the gap on one axis, overriding `gap`.
+- `container`: boolean — container query mode (see below).
+
+## KptCol — selector `[kptCol]`, `[kptColSm]` … `[kptColSelf]`
+- `kptCol`: number | string — the span, the mobile-first base.
+- `kptColSm`, `kptColMd`, `kptColLg`, `kptColXl`, `kptCol2xl` — per-breakpoint overrides.
+- `kptColStart`: number — the grid line the column starts at (1-based); this is how offsets are done.
+- `kptColOrder`: number — the visual order. It does not change the DOM: screen readers
+  and keyboard navigation follow the DOM, so do not use it to move interactive content around.
 - `kptColSelf`: string — `align-self` (`start`, `end`, `center`, `stretch`, `baseline`).
 
-## KptFlex — selektor `[kptFlex]`
-Klasa hosta: `kpt-flex`. Te same zmienne i breakpointy co grid, jeden wymiar.
+## KptFlex — selector `[kptFlex]`
+Host class: `kpt-flex`. The same variables and breakpoints as the grid, in one dimension.
 - `direction`: 'row' | 'row-reverse' | 'column' | 'column-reverse' (+ `directionMd`, `directionLg`)
 - `wrap`: 'wrap' | 'nowrap' | 'wrap-reverse'
 - `justify`, `align` (+ `justifyMd`, `alignMd`): `start` | `end` | `center` | `stretch` |
@@ -39,53 +39,53 @@ Klasa hosta: `kpt-flex`. Te same zmienne i breakpointy co grid, jeden wymiar.
 - `gap`, `gapX`, `gapY`: string
 - `container`: boolean
 
-Wartości bez odpowiednika w inputach podaje się klasami utility z `@konce-pt/grid`:
+Values with no matching input are supplied with utility classes from `@konce-pt/grid`:
 `kpt-grow-1`, `kpt-shrink-0`, `kpt-order-first`, `kpt-self-end`, `kpt-gap-6`.
 
-## Tryb kontenerowy (`container`)
-Spany dzieci reagują na szerokość TEJ siatki zamiast okna — karta w wąskim
-sidebarze układa się jednokolumnowo, choć viewport jest szeroki.
+## Container mode (`container`)
+The children's spans react to the width of THIS grid instead of the window — a card in a narrow
+sidebar lays itself out in a single column even though the viewport is wide.
 
-Ograniczenie CSS, nie paczki: `@container` odpytuje najbliższy kontener przodka,
-więc element nie może odpytać własnego. Responsywne są zmienne dziecka (span,
-start, order, self); liczba kolumn i odstępy nadal idą za viewportem.
+A CSS limitation, not a package one: `@container` queries the nearest ancestor container,
+so an element cannot query its own. What is responsive are the child's variables (span,
+start, order, self); the column count and the gaps still follow the viewport.
 
-## Przykłady
+## Examples
     <div kptGrid>
-      <div [kptCol]="12" [kptColSm]="6" [kptColMd]="4">Karta</div>
-      <div [kptCol]="12" [kptColSm]="6" [kptColMd]="4">Karta</div>
-      <div [kptCol]="12" [kptColMd]="4">Karta</div>
+      <div [kptCol]="12" [kptColSm]="6" [kptColMd]="4">Card</div>
+      <div [kptCol]="12" [kptColSm]="6" [kptColMd]="4">Card</div>
+      <div [kptCol]="12" [kptColMd]="4">Card</div>
     </div>
 
-    <!-- 18 kolumn bez rekompilacji SCSS -->
+    <!-- 18 columns with no SCSS recompilation -->
     <div kptGrid [columns]="18" gap="1.5rem">
       <div [kptCol]="18" [kptColLg]="5">Sidebar</div>
-      <div [kptCol]="18" [kptColLg]="13">Treść</div>
+      <div [kptCol]="18" [kptColLg]="13">Content</div>
     </div>
 
-    <!-- offset i zmiana kolejności na mobile -->
+    <!-- an offset and a reordering on mobile -->
     <div kptGrid>
       <div [kptCol]="6" [kptColStart]="4">start 4, span 6</div>
-      <div [kptCol]="12" [kptColMd]="6" class="kpt-order-first kpt-order-md-none">drugi w DOM</div>
-      <div [kptCol]="12" [kptColMd]="6">pierwszy w DOM</div>
+      <div [kptCol]="12" [kptColMd]="6" class="kpt-order-first kpt-order-md-none">second in the DOM</div>
+      <div [kptCol]="12" [kptColMd]="6">first in the DOM</div>
     </div>
 
     <!-- flexbox -->
     <div kptFlex direction="column" directionMd="row" justify="space-between" align="center" gap="1rem">
-      <span>Lewa</span>
-      <span>Prawa</span>
+      <span>Left</span>
+      <span>Right</span>
     </div>
 
-    <!-- układ formularza (preset CSS, bez klas na dzieciach) -->
+    <!-- a form layout (a CSS preset, no classes on the children) -->
     <form class="kpt-grid kpt-form-grid">
-      <kpt-form-field label="Imię"><kpt-input [(value)]="firstName" /></kpt-form-field>
-      <kpt-form-field label="Nazwisko"><kpt-input [(value)]="lastName" /></kpt-form-field>
-      <kpt-form-field label="Notatki" class="kpt-col-md-12"><kpt-input [(value)]="notes" /></kpt-form-field>
+      <kpt-form-field label="First name"><kpt-input [(value)]="firstName" /></kpt-form-field>
+      <kpt-form-field label="Last name"><kpt-input [(value)]="lastName" /></kpt-form-field>
+      <kpt-form-field label="Notes" class="kpt-col-md-12"><kpt-input [(value)]="notes" /></kpt-form-field>
     </form>
 
 ## Custom properties
-Siatka: `--kpt-grid-columns`, `--kpt-gap`, `--kpt-gap-x`, `--kpt-gap-y`,
+The grid: `--kpt-grid-columns`, `--kpt-gap`, `--kpt-gap-x`, `--kpt-gap-y`,
 `--kpt-justify`, `--kpt-align`, `--kpt-content`, `--kpt-flex-direction`, `--kpt-flex-wrap`.
-Dziecko: `--kpt-col`, `--kpt-col-start`, `--kpt-order`, `--kpt-self`, `--kpt-flex`,
+The child: `--kpt-col`, `--kpt-col-start`, `--kpt-order`, `--kpt-self`, `--kpt-flex`,
 `--kpt-grow`, `--kpt-shrink`.
-Każda ma warianty per breakpoint: `--kpt-col` → `--kpt-col-md`.
+Each one has per-breakpoint variants: `--kpt-col` → `--kpt-col-md`.