docs: clickdelegatefor

apps/www/app/content/components-docs/en/utilities/clickdelegatefor.mdx

@@ -0,0 +1,48 @@
+---
+title: clickdelegatefor
+sidebar_title: clickdelegatefor
+order: 60
+---
+
+Used to delegate click to another element. This is useful to make elements that cannot be focused, such as a `<div>`, clickable without changing their semantic meaning.
+
+Based on these:
+- [https://open-ui.org/components/link-area-delegation-explainer/](https://open-ui.org/components/link-area-delegation-explainer/)
+- [https://github.com/openui/open-ui/issues/1104](https://github.com/openui/open-ui/issues/1104)
+
+## Usage
+
+You add `data-clickdelegatefor` to an element, and set the value to the id of the element you want to delegate the click to.
+
+```html
+<div class="ds-card" data-clickdelegatefor="target">
+  <a id="target" href="https://example.com" rel="noopener">Go to example.com</a>
+  <span>Clicking this card will open example in a new tab</span>
+</div>
+```
+
+### When should I use `data-clickdelegatefor`?
+Use `data-clickdelegatefor` when you have an element that cannot be focused, but you want it to be clickable and perform an action. This is especially useful for elements like `<div>`, `<span>`, or other non-interactive elements that you want to make interactive without changing their semantic meaning.
+
+In the example above, we make a card (`<div>`) clickable by delegating the click to a link (`<a>`). This means that screen reader users get standard focus on the link, but the entire card will be clickable, improving the user experience without compromising accessibility.
+
+### Nested clickable elements
+If you add other clickable elements inside the card, such as a button, `data-clickdelegatefor` will not delegate the click when you click on the button. This applies to all interactive elements.
+
+```html
+<div class="ds-card" data-clickdelegatefor="target">
+  <a id="target" href="https://example.com" rel="noopener">Go to example.com</a>
+  <span>Clicking this card will open example in a new tab</span>
+  <button>button</button>
+</div>
+```
+
+### CSS
+
+The element that receives the delegated click will get the class `.\:click-delegate-hover` when you hover over the element with `data-clickdelegatefor`. This allows you to style what should be clickable, for example by adding a hover effect.
+
+```css
+.\:click-delegate-hover {
+  /* Add your own styles here */
+}
+```

apps/www/app/content/components-docs/no/utilities/clickdelegatefor.mdx

@@ -0,0 +1,49 @@
+---
+title: clickdelegatefor
+sidebar_title: clickdelegatefor
+order: 60
+---
+
+Dette er nyttig når du for eksempel vil gjøre en helt tabellrad klikkbar, eller et kort klikkbart uten at hele kortets innhold blir lenketeksten for skjermlesere.
+
+Baserer ser på disse:
+- [https://open-ui.org/components/link-area-delegation-explainer/](https://open-ui.org/components/link-area-delegation-explainer/)
+- [https://github.com/openui/open-ui/issues/1104](https://github.com/openui/open-ui/issues/1104)
+
+## Bruk
+
+Legg til `data-clickdelegatefor` på et element, og sett verdien til id-en på elementet du vil delegere klikket til.
+
+```html
+<div class="ds-card" data-clickdelegatefor="target">
+  <a id="target" href="https://example.com" rel="noopener">Gå til example.com</a>
+  <span>Trykk på kortet for å åpne eksemplet i en ny fane</span>
+</div>
+```
+
+### Når bør jeg bruke `data-clickdelegatefor`?
+Bruk `data-clickdelegatefor` når du har et interaktivt element som `a`, `button` eller `input[type="checked"]`, men du ønsker å utvide klikkflaten. Dette er spesielt nyttig for for tabellrader (`<tr>`) og cards(`<div>`).
+
+I eksempelet ovenfor gjør vi et kort (`<div>`) klikkbart ved å delegere klikket til en lenke (`<a>`). Dette betyr at skjermleserbrukere får standard fokus på lenka, men hele kortet vil være klikkbart, noe som forbedrer brukeropplevelsen uten å gå på bekostning av tilgjengeligheten.
+
+### Nøsta klikkbare elementer
+
+Dersom du legger andre klikkbare elementer inne i kortet, som for eksempel en knapp, vil `data-clickdelegatefor` ikke delegere klikket når du klikker på knappen. Dette gjelder alle interaktive elementer.
+
+```html
+<div class="ds-card" data-clickdelegatefor="target">
+  <a id="target" href="https://example.com" rel="noopener">Gå til example.com</a>
+  <span>Trykk på kortet for å åpne eksemplet i en ny fane</span>
+  <button>knapp</button>
+</div>
+```
+
+### CSS
+
+Elementet som får delegert klikk vil få klassen `.\:click-delegate-hover` når du hover over elementet med `data-clickdelegatefor`. Dette gjør at du kan style det som skal være klikkbart, for eksempel ved å legge til en hover-effekt.
+
+```css
+.\:click-delegate-hover {
+  /* Legg til dine egne stiler her */
+}
+```

apps/www/app/content/components/field/no/code.mdx

@@ -41,7 +41,7 @@ Du kan endre teksten ved å sende inn props, som du kan se øverst på siden. Sp
 ## HTML
 
 Legg klassenavnet `ds-field` på `<ds-field>` elementet.
-`<ds-field>` kobler sammen label, input og valideringsmelding.
+`<ds-field>` kobler sammen label, input, valideringsmelding og counter.
 
 ```html
 <ds-field class="ds-field">
@@ -55,7 +55,7 @@ Legg klassenavnet `ds-field` på `<ds-field>` elementet.
 
 ### Antall tegn
 
-For å få en teller på inout og textarea, legg til en `<p>` med attributtet `data-field="counter"` inne i `ds-field`.
+For å få en teller på input og textarea, legg til en `<p>` med attributtet `data-field="counter"` inne i `ds-field`.
 
 ```html
 <ds-field class="ds-field">