@dictu/textarea 2.1.0

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @dictu/textarea
+
+## 2.1.0
+
+### Minor Changes
+
+- 17d6143: Release package.
+
+## 2.0.0
+
+### Major Changes
+
+- 0f31000: Added textarea component

package/README.md

@@ -0,0 +1,21 @@
+<!-- @license CC0-1.0 -->
+
+## De Textarea component implementeren
+
+Je kunt de CSS zo in je project installeren:
+
+```console
+npm install --save-dev @dictu/textarea
+```
+
+Je kunt de CSS uit `node_modules/` importeren:
+
+```html
+<link rel="stylesheet" href="node_modules/@dictu/textarea/dist/index.css" />
+```
+
+Als je CSS imports gebruikt vanuit JavaScript:
+
+```javascript
+import "@dictu/textarea/dist/index.css";
+```

package/dist/index.css

@@ -0,0 +1 @@
+.dictu-textarea{background-color:var(--govnl-text-input-background-color);border:var(--govnl-textarea-border-width) solid var(--govnl-text-input-border-color);border-radius:var(--govnl-textarea-border-radius);box-sizing:border-box;color:var(--govnl-text-input-color);font-family:var(--govnl-textarea-font-family);font-size:var(--govnl-textarea-font-size);font-weight:var(--govnl-textarea-font-weight);line-height:var(--govnl-textarea-line-height);min-block-size:var(--govnl-textarea-min-block-size);padding-block:var(--govnl-textarea-padding-block-start) var(--govnl-textarea-padding-block-end);padding-inline:var(--govnl-textarea-padding-inline-start) var(--govnl-textarea-padding-inline-end)}.dictu-textarea::placeholder{color:var(--govnl-textarea-placeholder-color)}.dictu-textarea:hover{background-color:var(--govnl-textarea-hover-background-color);border-color:var(--govnl-textarea-hover-border-color);color:var(--govnl-textarea-hover-color)}.dictu-textarea:active{background-color:var(--govnl-textarea-active-background-color);border-color:var(--govnl-textarea-active-border-color);color:var(--govnl-textarea-active-color)}.dictu-textarea:focus-visible{background-color:var(--govnl-textarea-focus-background-color);border-color:var(--govnl-textarea-focus-border-color);color:var(--govnl-textarea-focus-color);outline-color:var(--govnl-textarea-focus-outline-color)}.dictu-textarea--read-only{background-color:var(--govnl-textarea-read-only-background-color);border-color:var(--govnl-textarea-read-only-border-color);color:var(--govnl-textarea-read-only-color)}.dictu-textarea--error{background-color:var(--govnl-textarea-error-background-color);border:var(--govnl-textarea-error-border-width) solid var(--govnl-textarea-error-border-color);color:var(--govnl-textarea-error-color)}/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../src/index.scss","../src/_mixin.scss"],"names":[],"mappings":"AAOA,gBCDE,0DACA,qFACA,kDACA,sBACA,oCACA,8CACA,0CACA,8CACA,8CACA,oDACA,gGACA,mGAEA,6BACE,8CDVF,sBCeA,8DACA,sDACA,wCDbA,uBCiBA,+DACA,uDACA,yCDfA,8BCmBA,8DACA,sDACA,wCACA,wDDjBF,2BC2BE,kEACA,0DACA,4CDzBF,uBCiBE,8DACA,+FACA","file":"index.css"}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@dictu/textarea",
+  "version": "2.1.0",
+  "author": "Dienst ICT Uitvoering",
+  "description": "Textarea CSS component.",
+  "license": "EUPL-1.2",
+  "keywords": [
+    "nl-design-system",
+    "css",
+    "textarea"
+  ],
+  "repository": {
+    "type": "git+ssh",
+    "url": "git@github.com:drupalgovnl/govnl-nlds.git",
+    "directory": "components/textarea"
+  },
+  "files": [
+    "src/",
+    "dist/",
+    "*.md"
+  ],
+  "exports": {
+    "./dist/*": "./dist/*"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "scripts": {
+    "build": "npx sass --pkg-importer=node --style=compressed ./src/:./dist/",
+    "watch": "npx sass --pkg-importer=node --style=compressed --watch ./src/:./dist/",
+    "clean": "rimraf ./dist/"
+  }
+}

package/src/_mixin.scss

@@ -0,0 +1,54 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021-2025 dictu
+ */
+
+@mixin dictu-textarea {
+  background-color: var(--govnl-text-input-background-color);
+  border: var(--govnl-textarea-border-width) solid var(--govnl-text-input-border-color);
+  border-radius: var(--govnl-textarea-border-radius);
+  box-sizing: border-box;
+  color: var(--govnl-text-input-color);
+  font-family: var(--govnl-textarea-font-family);
+  font-size: var(--govnl-textarea-font-size);
+  font-weight: var(--govnl-textarea-font-weight);
+  line-height: var(--govnl-textarea-line-height);
+  min-block-size: var(--govnl-textarea-min-block-size);
+  padding-block: var(--govnl-textarea-padding-block-start) var(--govnl-textarea-padding-block-end);
+  padding-inline: var(--govnl-textarea-padding-inline-start) var(--govnl-textarea-padding-inline-end);
+
+  &::placeholder {
+    color: var(--govnl-textarea-placeholder-color);
+  }
+}
+
+@mixin dictu-textarea-hover {
+  background-color: var(--govnl-textarea-hover-background-color);
+  border-color: var(--govnl-textarea-hover-border-color);
+  color: var(--govnl-textarea-hover-color);
+}
+
+@mixin dictu-textarea-active {
+  background-color: var(--govnl-textarea-active-background-color);
+  border-color: var(--govnl-textarea-active-border-color);
+  color: var(--govnl-textarea-active-color);
+}
+
+@mixin dictu-textarea-focus {
+  background-color: var(--govnl-textarea-focus-background-color);
+  border-color: var(--govnl-textarea-focus-border-color);
+  color: var(--govnl-textarea-focus-color);
+  outline-color: var(--govnl-textarea-focus-outline-color);
+}
+
+@mixin dictu-textarea--error {
+  background-color: var(--govnl-textarea-error-background-color);
+  border: var(--govnl-textarea-error-border-width) solid var(--govnl-textarea-error-border-color);
+  color: var(--govnl-textarea-error-color);
+}
+
+@mixin dictu-textarea--read-only {
+  background-color: var(--govnl-textarea-read-only-background-color);
+  border-color: var(--govnl-textarea-read-only-border-color);
+  color: var(--govnl-textarea-read-only-color);
+}

package/src/index.scss

@@ -0,0 +1,30 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021-2025 dictu
+ */
+
+@use "mixin" as mixin;
+
+.dictu-textarea {
+  @include mixin.dictu-textarea;
+
+  &:hover {
+    @include mixin.dictu-textarea-hover;
+  }
+
+  &:active {
+    @include mixin.dictu-textarea-active;
+  }
+
+  &:focus-visible {
+    @include mixin.dictu-textarea-focus;
+  }
+}
+
+.dictu-textarea--read-only {
+  @include mixin.dictu-textarea--read-only;
+}
+
+.dictu-textarea--error {
+  @include mixin.dictu-textarea--error;
+}