@nl-rvo/css-image 1.2.0 → 1.3.0

package/dist/image.css

@@ -0,0 +1 @@
+.rvo-image{--rvo-image-width: auto;--rvo-image-height: auto;--rvo-image-max-width: 100%;--rvo-image-object-fit: cover;--rvo-image-object-position: center;--rvo-image-border-radius: var(--rvo-border-radius-2xl, 4px);block-size:var(--rvo-image-height);display:block;inline-size:var(--rvo-image-width);max-inline-size:var(--rvo-image-max-width);object-fit:var(--rvo-image-object-fit);object-position:var(--rvo-image-object-position)}.rvo-image--radius-size-sm{--rvo-image-border-radius: var(--rvo-border-radius-sm, 3px)}.rvo-image--radius-size-md{--rvo-image-border-radius: var(--rvo-border-radius-md, 5px)}.rvo-image--radius-size-lg{--rvo-image-border-radius: var(--rvo-border-radius-lg, 10px)}.rvo-image--radius-size-xl{--rvo-image-border-radius: var(--rvo-border-radius-xl, 20px)}.rvo-image--radius-size-2xl{--rvo-image-border-radius: var(--rvo-border-radius-2xl, 50px)}.rvo-image--radius-all{border-radius:var(--rvo-image-border-radius)}.rvo-image--radius-top-left{border-start-start-radius:var(--rvo-image-border-radius)}.rvo-image--radius-top-right{border-start-end-radius:var(--rvo-image-border-radius)}.rvo-image--radius-bottom-right{border-end-end-radius:var(--rvo-image-border-radius)}.rvo-image--radius-bottom-left{border-end-start-radius:var(--rvo-image-border-radius)}.rvo-image__wrapper{display:inline-block;line-height:0;margin:0}/*# sourceMappingURL=image.css.map */

package/dist/image.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../src/image.scss"],"names":[],"mappings":"AAKA,WACE,wBACA,yBACA,4BACA,8BACA,oCACA,6DAEA,mCACA,cACA,mCACA,2CACA,uCACA,iDAGE,2BACE,4DAGF,2BACE,4DAGF,2BACE,6DAGF,2BACE,6DAGF,4BACE,8DAKF,uBACE,6CAGF,4BACE,yDAGF,6BACE,uDAGF,gCACE,qDAGF,+BACE,uDAIJ,oBACE,qBACA,cACA","file":"image.css"}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.0",
+  "version": "1.3.0",
   "author": "Community for NL Design System",
   "license": "CC0-1.0",
   "name": "@nl-rvo/css-image",
@@ -9,27 +9,26 @@
     "css",
     "image"
   ],
-  "files": [
-    "src/index.scss",
-    "dist/",
-    "design-tokens.json",
-    "*.md"
-  ],
-  "main": "dist/index.css",
-  "style": "dist/index.css",
-  "publishConfig": {
-    "access": "public"
-  },
   "repository": {
     "type": "git+ssh",
     "url": "git@github.com:nl-design-system/rvo.git",
-    "directory": "components/image"
+    "directory": "components/image/style"
   },
-  "devDependencies": {
-    "@nl-rvo/build-utils-css": "0.1.0"
+  "files": [
+    "src/",
+    "dist/"
+  ],
+  "exports": {
+    ".": "./dist/image.css",
+    "./dist/*": "./dist/*"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
   },
   "scripts": {
-    "build": "build-css-package",
-    "clean": "rimraf dist"
+    "build": "sass --pkg-importer=node --style=compressed ./src/:./dist/",
+    "watch": "sass --pkg-importer=node --style=compressed --watch ./src/:./dist/",
+    "clean": "rimraf ./dist/"
   }
 }

package/src/{index.scss → image.scss}

@@ -11,12 +11,12 @@
   --rvo-image-object-position: center;
   --rvo-image-border-radius: var(--rvo-border-radius-2xl, 4px);
 
+  block-size: var(--rvo-image-height);
   display: block;
-  height: var(--rvo-image-height);
-  max-width: var(--rvo-image-max-width);
+  inline-size: var(--rvo-image-width);
+  max-inline-size: var(--rvo-image-max-width);
   object-fit: var(--rvo-image-object-fit);
   object-position: var(--rvo-image-object-position);
-  width: var(--rvo-image-width);
 
   &--radius-size {
     &-sm {

package/CHANGELOG.md

@@ -1,31 +0,0 @@
-# @nl-rvo/css-image
-
-## 1.2.0
-
-### Minor Changes
-
-- fa36e07: Project structure updates
-
-  - Moved all Storybook stories to the /stories directory.
-  - Moved all documentation files to the /docs directory.
-  - Removed React components from library-component-react and moved them into this package.
-  - Update all .stories imports to the right react package "component-library-react"
-  - Fix all Redundant / PascalCase lint warnings for .stories files.
-
-## 1.1.1
-
-### Patch Changes
-
-- 11eb258: Update imports to support storybook v10
-
-## 1.1.0
-
-### Minor Changes
-
-- ebc334a: Add readme docpage for image component.
-
-## 1.0.0
-
-### Major Changes
-
-- ebe26f1: Introduce a new image component.

package/README.md

@@ -1,30 +0,0 @@
-# Image component
-
-Een toegankelijke, responsieve afbeeldingcomponent voor het NL Design System. En het tonen van een afbeelding op een duurzame en toegankelijke manier.
-
-De **Image** component toont afbeeldingen op een consistente en toegankelijke manier, met optionele bijschriften, afgeronde hoeken op basis van design tokens en ondersteuning voor responsieve `<picture>`-bronnen.  
-Gebruik deze component voor contentafbeeldingen, hero-secties of illustraties die onderdeel zijn van de inhoudsstructuur.
-
----
-
-## Kenmerken
-
-- Responsief: ondersteunt `<picture>` met meerdere bronformaten.
-- Toegankelijk: vereist `alt`-tekst en ondersteunt `caption` via `<figure>` en `<figcaption>`.
-- Design tokens: radius-groottes en spacing volgen het tokensysteem.
-- Prestatiegericht: optionele ondersteuning voor `loading`, `decoding` en `fetchPriority`.
-- Herbruikbaar: geschikt voor gebruik binnen elk project als zelfstandige React-component.
-
-## Richtlijnen
-
-- Gebruik bij voorkeur het WebP-bestandsformaat voor afbeeldingen die zijn opgebouwd uit pixels, zoals foto's, screenshots en complexe afbeeldingen. Als het niet mogelijk is om WebP te gebruiken, hanteer dan het JPG- of PNG-formaat.
-- Gebruik het SVG-bestandsformaat voor afbeeldingen die zijn opgebouwd uit geometrische vormen (vectorafbeeldingen), zoals logo's, iconen, illustraties, grafieken en diagrammen.
-- Laad een afbeelding in met de juiste grootte. Bijvoorbeeld: als de container een maximale breedte heeft van 1280 pixels, zorg er dan voor dat de afbeelding ook met een breedte van 1280 pixels, en niet groter, wordt ingeladen.
-- Bied waar mogelijk meerdere variaties van een afbeelding aan om retinaschermen te ondersteunen.
-- Stel de kwaliteit van rasterafbeeldingen (WebP, JPG en PNG) in op maximaal 85 procent. Dit maakt de bestandsgrootte kleiner, want alles boven 85 procent is voor het menselijk oog niet zichtbaar.
-- Geef elke afbeelding die belangrijk is om de inhoud te begrijpen een alt-tekst mee die de inhoud van de afbeelding duidelijk omschrijft voor gebruikers die een schermlezer gebruiken.
-- Als een afbeelding enkel decoratief is, geef de afbeelding wel een alt-attribuut mee, maar laat deze leeg.
-
-## Wanneer gebruik je image
-
-Als er een afbeelding getoond moet worden.

package/design-tokens.json

@@ -1,38 +0,0 @@
-{
-  "$schema": "https://raw.githubusercontent.com/design-tokens/community-group/main/schemas/tokens.json",
-  "rvo-image": {
-    "description": "Design tokens for the RVO Image component.",
-    "tokens": {
-      "width": {
-        "value": "auto",
-        "type": "sizing",
-        "description": "Standaard afbeeldingsbreedte."
-      },
-      "height": {
-        "value": "auto",
-        "type": "sizing",
-        "description": "Standaard afbeeldingshoogte."
-      },
-      "max-width": {
-        "value": "100%",
-        "type": "sizing",
-        "description": "Maximale breedte van de afbeelding."
-      },
-      "object-fit": {
-        "value": "cover",
-        "type": "other",
-        "description": "Bepaalt hoe de afbeelding binnen zijn kader past."
-      },
-      "object-position": {
-        "value": "center",
-        "type": "other",
-        "description": "Bepaalt de positie van de afbeelding binnen zijn kader."
-      },
-      "border-radius": {
-        "value": "{rvo-border-radius.2xl}",
-        "type": "borderRadius",
-        "description": "Hoekafronding van de afbeelding. Wordt beïnvloed door radius-varianten."
-      }
-    }
-  }
-}

package/dist/index.css

@@ -1,53 +0,0 @@
-/**
- * @license CC0-1.0
- * Copyright (c) 2025 Community for NL Design System
- */
-.rvo-image {
-  --rvo-image-width: auto;
-  --rvo-image-height: auto;
-  --rvo-image-max-width: 100%;
-  --rvo-image-object-fit: cover;
-  --rvo-image-object-position: center;
-  --rvo-image-border-radius: var(--rvo-border-radius-2xl, 4px);
-  display: block;
-  height: var(--rvo-image-height);
-  max-width: var(--rvo-image-max-width);
-  object-fit: var(--rvo-image-object-fit);
-  object-position: var(--rvo-image-object-position);
-  width: var(--rvo-image-width);
-}
-.rvo-image--radius-size-sm {
-  --rvo-image-border-radius: var(--rvo-border-radius-sm, 3px);
-}
-.rvo-image--radius-size-md {
-  --rvo-image-border-radius: var(--rvo-border-radius-md, 5px);
-}
-.rvo-image--radius-size-lg {
-  --rvo-image-border-radius: var(--rvo-border-radius-lg, 10px);
-}
-.rvo-image--radius-size-xl {
-  --rvo-image-border-radius: var(--rvo-border-radius-xl, 20px);
-}
-.rvo-image--radius-size-2xl {
-  --rvo-image-border-radius: var(--rvo-border-radius-2xl, 50px);
-}
-.rvo-image--radius-all {
-  border-radius: var(--rvo-image-border-radius);
-}
-.rvo-image--radius-top-left {
-  border-start-start-radius: var(--rvo-image-border-radius);
-}
-.rvo-image--radius-top-right {
-  border-start-end-radius: var(--rvo-image-border-radius);
-}
-.rvo-image--radius-bottom-right {
-  border-end-end-radius: var(--rvo-image-border-radius);
-}
-.rvo-image--radius-bottom-left {
-  border-end-start-radius: var(--rvo-image-border-radius);
-}
-.rvo-image__wrapper {
-  display: inline-block;
-  line-height: 0;
-  margin: 0;
-}

package/dist/index.min.css

@@ -1 +0,0 @@
-.rvo-image{--rvo-image-width:auto;--rvo-image-height:auto;--rvo-image-max-width:100%;--rvo-image-object-fit:cover;--rvo-image-object-position:center;--rvo-image-border-radius:var(--rvo-border-radius-2xl,4px);display:block;height:var(--rvo-image-height);max-width:var(--rvo-image-max-width);object-fit:var(--rvo-image-object-fit);object-position:var(--rvo-image-object-position);width:var(--rvo-image-width)}.rvo-image--radius-size-sm{--rvo-image-border-radius:var(--rvo-border-radius-sm,3px)}.rvo-image--radius-size-md{--rvo-image-border-radius:var(--rvo-border-radius-md,5px)}.rvo-image--radius-size-lg{--rvo-image-border-radius:var(--rvo-border-radius-lg,10px)}.rvo-image--radius-size-xl{--rvo-image-border-radius:var(--rvo-border-radius-xl,20px)}.rvo-image--radius-size-2xl{--rvo-image-border-radius:var(--rvo-border-radius-2xl,50px)}.rvo-image--radius-all{border-radius:var(--rvo-image-border-radius)}.rvo-image--radius-top-left{border-start-start-radius:var(--rvo-image-border-radius)}.rvo-image--radius-top-right{border-start-end-radius:var(--rvo-image-border-radius)}.rvo-image--radius-bottom-right{border-end-end-radius:var(--rvo-image-border-radius)}.rvo-image--radius-bottom-left{border-end-start-radius:var(--rvo-image-border-radius)}.rvo-image__wrapper{display:inline-block;line-height:0;margin:0}

package/dist/index.mjs

@@ -1 +0,0 @@
-export default ".rvo-image{--rvo-image-width:auto;--rvo-image-height:auto;--rvo-image-max-width:100%;--rvo-image-object-fit:cover;--rvo-image-object-position:center;--rvo-image-border-radius:var(--rvo-border-radius-2xl,4px);display:block;height:var(--rvo-image-height);max-width:var(--rvo-image-max-width);object-fit:var(--rvo-image-object-fit);object-position:var(--rvo-image-object-position);width:var(--rvo-image-width)}.rvo-image--radius-size-sm{--rvo-image-border-radius:var(--rvo-border-radius-sm,3px)}.rvo-image--radius-size-md{--rvo-image-border-radius:var(--rvo-border-radius-md,5px)}.rvo-image--radius-size-lg{--rvo-image-border-radius:var(--rvo-border-radius-lg,10px)}.rvo-image--radius-size-xl{--rvo-image-border-radius:var(--rvo-border-radius-xl,20px)}.rvo-image--radius-size-2xl{--rvo-image-border-radius:var(--rvo-border-radius-2xl,50px)}.rvo-image--radius-all{border-radius:var(--rvo-image-border-radius)}.rvo-image--radius-top-left{border-start-start-radius:var(--rvo-image-border-radius)}.rvo-image--radius-top-right{border-start-end-radius:var(--rvo-image-border-radius)}.rvo-image--radius-bottom-right{border-end-end-radius:var(--rvo-image-border-radius)}.rvo-image--radius-bottom-left{border-end-start-radius:var(--rvo-image-border-radius)}.rvo-image__wrapper{display:inline-block;line-height:0;margin:0}";

package/dist/index.mjs.d.ts

@@ -1,2 +0,0 @@
-declare const css: string;
-export default css;