@internetstiftelsen/styleguide 5.1.9 → 5.1.11-beta.0.1

package/dist/assets/js/textToggle.js

@@ -3,12 +3,16 @@
 function toggleTextOnClick(e) {
     e.preventDefault();
     const el = e.target;
+    if (!el.dataset.toggleText) {
+        console.warn('No data-toggle-text attribute found on element', el);
+        return;
+    }
     const target = el.dataset.toggleTarget ? document.getElementById(el.dataset.toggleTarget) : el;
     const i = parseInt(el.dataset.iteration || 0, 10);
     const options = el.dataset.toggleText.split('|');
     const nextIteration = i + 1 === options.length ? 0 : i + 1;
     const ariaPressed = el.getAttribute('aria-pressed');
-    el.dataset.iteration = nextIteration;
+    el.dataset.iteration = nextIteration.toString();
     target.innerText = options[nextIteration];
     if (ariaPressed) {
         el.setAttribute('aria-pressed', ariaPressed === 'true' ? 'false' : 'true');

package/dist/atoms/tooltip/tooltip.js

@@ -12,7 +12,7 @@ function positionToolTip() {
         toolTipText.classList.add('down');
     }
 }
-if (toolTip) {
+if (toolTip && toolTipText) {
     positionToolTip();
     window.addEventListener('scroll', positionToolTip);
 }

package/dist/components.js

@@ -32,6 +32,7 @@ require("./organisms/video-guide/video-guide");
 require("./organisms/timeline/timeline");
 require("./molecules/overview-navigation/overview-navigation");
 require("./organisms/schedule/schedule-filter");
+require("./organisms/selectable/selectable");
 require("./assets/js/ot");
 require("./assets/js/charCounter");
 require("./atoms/range/range");

package/dist/organisms/selectable/selectable.js

@@ -0,0 +1,77 @@
+"use strict";
+function toggleItems(selectable, value) {
+    const items = selectable.querySelectorAll('[data-selectable-item]');
+    items.forEach((item)=>{
+        item.setAttribute('aria-hidden', item.id === `${selectable.id}-${value}` || value === null ? 'false' : 'true');
+    });
+}
+function onChange(selectable, value) {
+    toggleItems(selectable, value);
+}
+document.addEventListener('change', (e)=>{
+    const container = e.target.closest('[data-selectable]');
+    if (container && e.target.matches('[data-selectable-select]')) {
+        onChange(container, e.target.value);
+    }
+});
+document.addEventListener('click', (e)=>{
+    const button = e.target.closest('[data-selectable-all]');
+    if (button) {
+        const selectable = button.closest('[data-selectable]');
+        if (selectable) {
+            const select = selectable.querySelector('[data-selectable-select]');
+            if (select) {
+                select.value = '';
+            }
+            toggleItems(selectable, null);
+        }
+        return;
+    }
+    const copy = e.target.closest('[data-selectable-copy]');
+    if (copy) {
+        const selectable = copy.closest('[data-selectable]');
+        const select = selectable.querySelector('[data-selectable-select]');
+        const value = select.value;
+        let id = selectable.id;
+        if (value) {
+            id = `${id}-${value}`;
+        }
+        const url = window.location.href.replace(/#.*$/, '') + '#' + id;
+        navigator.clipboard.writeText(url).then(()=>{
+            const text = copy.querySelector('span');
+            text.dataset.original = text.innerText;
+            text.innerText = text.dataset.copied;
+            setTimeout(()=>{
+                text.innerText = text.dataset.original;
+            }, 1000);
+        });
+    }
+});
+const selectables = document.querySelectorAll('[data-selectable]');
+selectables.forEach((selectable)=>{
+    const select = selectable.querySelector('[data-selectable-select]');
+    toggleItems(selectable, select.value);
+});
+// Read current hash and select item
+const hash = window.location.hash.replace(/^#/, '');
+if (hash) {
+    const item = document.getElementById(hash);
+    if (item) {
+        if (item.matches('[data-selectable]')) {
+            const select = item.querySelector('[data-selectable-select]');
+            if (select) {
+                select.value = '';
+            }
+            toggleItems(item, null);
+        } else {
+            const selectable = item.closest('[data-selectable]');
+            if (selectable) {
+                const select = selectable.querySelector('[data-selectable-select]');
+                if (select) {
+                    select.value = hash.replace(`${selectable.id}-`, '');
+                }
+                toggleItems(selectable, select.value);
+            }
+        }
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@internetstiftelsen/styleguide",
-    "version": "5.1.9",
+    "version": "5.1.11-beta.0.1",
     "main": "dist/components.js",
     "ports": {
         "fractal": "3000"

package/src/app.scss

@@ -93,6 +93,7 @@
 @use 'organisms/members-service-product/members-service-product';
 @use 'organisms/schedule/schedule';
 @use 'organisms/haveibeenpwned/haveibeenpwned';
+@use 'organisms/selectable/selectable';
 // Structures
 @use 'structures/manifest';
 

package/src/assets/js/textToggle.js

@@ -3,13 +3,19 @@ function toggleTextOnClick(e) {
 	e.preventDefault();
 
 	const el = e.target;
+
+	if (!el.dataset.toggleText) {
+		console.warn('No data-toggle-text attribute found on element', el);
+		return;
+	}
+
 	const target = (el.dataset.toggleTarget) ? document.getElementById(el.dataset.toggleTarget) : el;
 	const i = parseInt(el.dataset.iteration || 0, 10);
 	const options = el.dataset.toggleText.split('|');
 	const nextIteration = (i + 1) === options.length ?	 0 : i + 1;
 	const ariaPressed = el.getAttribute('aria-pressed');
 
-	el.dataset.iteration = nextIteration;
+	el.dataset.iteration = nextIteration.toString();
 	target.innerText = options[nextIteration];
 
 	if (ariaPressed) {
@@ -17,7 +23,7 @@ function toggleTextOnClick(e) {
 	}
 }
 
- 
+
 document.addEventListener('click', (e) => {
 	if (e.target.closest('[data-toggle-text]')) {
 		toggleTextOnClick(e);

package/src/atoms/icon/at.svg

@@ -0,0 +1,3 @@
+<svg id="icon-at" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
+	<path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10c1.466 0 2.961-.371 4.442-1.104l-.885-1.793C14.353 19.698 13.156 20 12 20c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8v1c0 .692-.313 2-1.5 2-1.396 0-1.494-1.819-1.5-2V8h-2v.025A4.954 4.954 0 0 0 12 7c-2.757 0-5 2.243-5 5s2.243 5 5 5c1.45 0 2.748-.631 3.662-1.621.524.89 1.408 1.621 2.838 1.621 2.273 0 3.5-2.061 3.5-4v-1c0-5.514-4.486-10-10-10zm0 13c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3-1.346 3-3 3z"/>
+</svg>

package/src/atoms/icon/security.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32"><path d="M27.7 4.3c-.3-.1-5.9-2.5-11.7-2.5S4.7 4.2 4.4 4.3l-.5.2v14.1c0 5.08 4.33 8.27 7.8 10.02.01 0 .02.01.03.02a28.129 28.129 0 0 0 3.47 1.46c.3.1.5.1.8.1h.1c.3 0 .5 0 .8-.1.76-.26 2.04-.75 3.47-1.47.01 0 .02-.01.03-.02 3.46-1.75 7.8-4.93 7.8-10.02V4.5zm-1.3 14.3c0 6.1-8.4 9.2-10.1 9.8a.9.9 0 0 1-.25.07.5.5 0 0 1-.25-.07c-1.7-.6-10.1-3.7-10.1-9.8v-13c1.49-.6 5.95-2.08 10.32-2.1l2.9.2c-.94-.12-1.91-.2-2.87-.2h.05c1.02 0 2.05.08 3.04.21h-.22c3.33.41 6.31 1.42 7.48 1.89z"/><path d="M21.07 12.58v-2.22a2.83 2.83 0 0 0-2.85-2.85h-4.44a2.83 2.83 0 0 0-2.85 2.85v2.22H9.72v8.69h12.56v-8.69zm-8.69-2.22c0-.77.63-1.4 1.4-1.4h4.44c.77 0 1.4.63 1.4 1.4v2.22h-7.24zm8.45 9.46h-9.66v-5.8h9.66z"/><path d="M16.92 16.15c0-.53-.43-.92-.92-.92s-.92.43-.92.92c0 .29.1.53.29.68v1.79h1.21v-1.79c.24-.14.34-.39.34-.68"/></svg>

package/src/atoms/icon/sprite.svg

@@ -278,6 +278,10 @@
 			<path d="M.375.454v18.092h25.25V.454H.375zm23.333 5.504v7.997l-6.773-3.72 6.773-4.277zm0 10.184v.488H2.292v-.488l8.627-4.738L13 12.716l2.082-1.312 8.626 4.738zm0-12.451L13 10.45 2.292 3.691v-1.32h21.417v1.32zM2.292 13.954V5.958l6.774 4.276-6.774 3.72z"/>
 		</symbol>
 
+		<symbol id="icon-at" viewbox="0 0 24 24">
+			<path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10c1.466 0 2.961-.371 4.442-1.104l-.885-1.793C14.353 19.698 13.156 20 12 20c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8v1c0 .692-.313 2-1.5 2-1.396 0-1.494-1.819-1.5-2V8h-2v.025A4.954 4.954 0 0 0 12 7c-2.757 0-5 2.243-5 5s2.243 5 5 5c1.45 0 2.748-.631 3.662-1.621.524.89 1.408 1.621 2.838 1.621 2.273 0 3.5-2.061 3.5-4v-1c0-5.514-4.486-10-10-10zm0 13c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3-1.346 3-3 3z"/>
+		</symbol>
+
 		<symbol id="icon-headset" viewbox="0 0 25 25">
 			<path d="M22.63 11.185v-1C22.63 4.597 18.084.051 12.496.051S2.362 4.597 2.362 10.185v1H.365v7.258h2.448l3.075 5.808H10v.699h5v-2.997h-5v.698H6.852l-2.49-4.703v-7.763c0-4.485 3.649-8.134 8.134-8.134S20.63 5.7 20.63 10.185v8.258h4.005v-7.258H22.63z"/>
 		</symbol>
@@ -361,6 +365,10 @@
 			<path d="M25.3 15.8c-3.1 0-5.5 2.5-5.5 5.5s2.5 5.5 5.5 5.5 5.5-2.5 5.5-5.5-2.4-5.5-5.5-5.5zm-.7 7.8l-2.3-2.1.5-.6 1.7 1.6 3.2-3.5.6.5-3.7 4.1z"/>
 		</symbol>
 
+		<symbol id="icon-security" viewbox="0 0 32 32">
+			<path d="M27.7 4.3c-.3-.1-5.9-2.5-11.7-2.5S4.7 4.2 4.4 4.3l-.5.2v14.1c0 5.08 4.33 8.27 7.8 10.02.01 0 .02.01.03.02a28.129 28.129 0 0 0 3.47 1.46c.3.1.5.1.8.1h.1c.3 0 .5 0 .8-.1.76-.26 2.04-.75 3.47-1.47.01 0 .02-.01.03-.02 3.46-1.75 7.8-4.93 7.8-10.02V4.5zm-1.3 14.3c0 6.1-8.4 9.2-10.1 9.8a.9.9 0 0 1-.25.07.5.5 0 0 1-.25-.07c-1.7-.6-10.1-3.7-10.1-9.8v-13c1.49-.6 5.95-2.08 10.32-2.1l2.9.2c-.94-.12-1.91-.2-2.87-.2h.05c1.02 0 2.05.08 3.04.21h-.22c3.33.41 6.31 1.42 7.48 1.89z"/><path d="M21.07 12.58v-2.22a2.83 2.83 0 0 0-2.85-2.85h-4.44a2.83 2.83 0 0 0-2.85 2.85v2.22H9.72v8.69h12.56v-8.69zm-8.69-2.22c0-.77.63-1.4 1.4-1.4h4.44c.77 0 1.4.63 1.4 1.4v2.22h-7.24zm8.45 9.46h-9.66v-5.8h9.66z"/><path d="M16.92 16.15c0-.53-.43-.92-.92-.92s-.92.43-.92.92c0 .29.1.53.29.68v1.79h1.21v-1.79c.24-.14.34-.39.34-.68"/>
+		</symbol>
+
 		<symbol id="icon-romance" viewbox="0 0 32 32">
 			<path d="M15.953 29.329l-12.6-12.7c-3.2-3.2-3.2-8.4 0-11.7 1.5-1.6 3.6-2.4 5.8-2.4 2.2 0 4.3.8 5.8 2.4l.9.9.9-.9c3.2-3.2 8.5-3.2 11.7 0 3.2 3.2 3.2 8.5 0 11.7l-12.5 12.7zm-6.8-24.6c-1.6 0-3.2.6-4.4 1.8-2.4 2.4-2.4 6.3 0 8.8l11.1 11.1 11.1-11.1c2.4-2.4 2.4-6.3 0-8.8-2.4-2.4-6.3-2.4-8.8 0l-2.4 2.4-2.4-2.4c-.9-1.2-2.6-1.8-4.2-1.8z"/>
 			<path d="M15.953 29.329l-12.6-12.7c-3.2-3.2-3.2-8.4 0-11.7 1.5-1.6 3.6-2.4 5.8-2.4 2.2 0 4.3.8 5.8 2.4l.9.9.9-.9c3.2-3.2 8.5-3.2 11.7 0 3.2 3.2 3.2 8.5 0 11.7l-12.5 12.7zm-6.8-24.6c-1.6 0-3.2.6-4.4 1.8-2.4 2.4-2.4 6.3 0 8.8l11.1 11.1 11.1-11.1c2.4-2.4 2.4-6.3 0-8.8-2.4-2.4-6.3-2.4-8.8 0l-2.4 2.4-2.4-2.4c-.9-1.2-2.6-1.8-4.2-1.8z"/>

package/src/atoms/input/_input.scss

@@ -20,6 +20,13 @@
 
 	&[disabled] {
 		@extend %disabled;
+
+		&[disabled] {
+			+ figure svg {
+				opacity: 0.3;
+				cursor: not-allowed;
+			}
+		}
 	}
 
 	@include bem.m(discreet) {

package/src/atoms/main-menu/_main-menu.scss

@@ -259,6 +259,21 @@
 				}
 			}
 		}
+
+		@include bem.m(right-aligned) {
+			left: auto;
+			right: 0;
+
+			&::after,
+			&:before {
+				left: auto;
+				right: func.rhythm(3);
+			}
+
+			&:before {
+				margin-right: -1px;
+			}
+		}
 	}
 }
 

package/src/atoms/progress/_progress.scss

@@ -7,8 +7,16 @@
 @use '../../configurations/colors/colors-functions' as colorFunc;
 @use '../../vendor/grid/breakpoints' as breakpoint;
 
-
 @include mixin.atom(progress) {
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+	padding: 0;
+	pointer-events: none;
+	cursor: none;
+	border-radius: var.$border-radius;
+	overflow: hidden;
+
 	&[value] {
 		-webkit-appearance: none;
 		-moz-appearance: none;
@@ -18,23 +26,17 @@
 		background: colors.$color-concrete;
 		border: none;
 		width: 100%;
-		border-radius: 0;
+		border-radius: var.$border-radius;
 		height: func.rhythm(1);
+		position: relative;
 
 		@include breakpoint.bp-up(md) {
 			height: func.rhythm(2);
 		}
 	}
-	&[value]::-webkit-progress-bar {
-		border-radius: 0;
-		background: colors.$color-concrete;
-	}
-	&[value]::-webkit-progress-value {
-		border-radius: 0;
-		background: colors.$color-ocean;
-		transition: width 5s ease;
-	}
-	&[value]::-moz-progress-bar {
+
+	&[value]::-moz-progress-value,
+	&[value]::-moz-meter-optimum {
 		border-radius: 0;
 		background: colors.$color-ocean;
 		transition: padding-bottom 5s ease;
@@ -44,13 +46,77 @@
 		transform-origin: 0 0;
 		transform: rotate(-90deg) translateX(-60px) ;
 	}
+
+	&[value]::-webkit-progress-bar,
+	&[value]::-webkit-meter-bar,
+	&[value]::-webkit-meter-optimum-value
+	{
+		border-radius: 0;
+		background: colors.$color-concrete;
+		transition: width 5s ease;
+		block-size: func.rhythm(1);
+
+		@include breakpoint.bp-up(md) {
+			block-size: func.rhythm(2);
+		}
+	}
+
+	&[value]::-webkit-progress-value,
+	&[value]::-webkit-meter-optimum-value {
+		background: colors.$color-ocean;
+	}
+
+	&::-moz-progress-bar {
+		background: colors.$color-ocean;
+	}
+
+	&::-moz-meter-bar {
+		background: colors.$color-ocean;
+	}
+
+	&:-moz-meter-optimum::slider-fill {
+		background: colors.$color-ocean;
+	}
+
+	@include bem.m(large) {
+		&[value],
+		&[value]::-webkit-progress-bar,
+		&[value]::-webkit-meter-bar,
+		&[value]::-webkit-meter-optimum-value {
+			height: func.rhythm(4);
+			block-size: func.rhythm(4);
+		}
+	}
+
+	@include bem.m(heat) {
+		&[value]::-webkit-progress-value,
+		&[value]::-webkit-meter-optimum-value {
+			border-radius: 0;
+			transition: width 5s ease;
+			background: linear-gradient(90deg, rgba(217, 0, 47, 1) 0%, rgba(217, 0, 47, 1) 19.99%, rgba(255, 64, 105, 1) 20%, rgba(255, 64, 105, 1) 39.99%, rgba(249, 153, 99, 1) 40%, rgba(249, 153, 99, 1) 59.99%, rgba(255, 206, 46, 1) 60%, rgba(255, 206, 46, 1) 79.99%, rgba(37, 194, 121, 1) 80%, rgba(37, 194, 121, 1) 89.99%, rgba(25, 135, 84, 1) 90%, rgba(25, 135, 84, 1) 100%);
+			background-size: var(--progressbar-width) 100%; /* This is calculated by JS and set in the DOM */
+			background-repeat: no-repeat;
+		}
+
+		&::-moz-progress-bar {
+			transition: width 5s ease;
+			background: linear-gradient(90deg, rgba(217, 0, 47, 1) 0%, rgba(217, 0, 47, 1) 19.99%, rgba(255, 64, 105, 1) 20%, rgba(255, 64, 105, 1) 39.99%, rgba(249, 153, 99, 1) 40%, rgba(249, 153, 99, 1) 59.99%, rgba(255, 206, 46, 1) 60%, rgba(255, 206, 46, 1) 79.99%, rgba(37, 194, 121, 1) 80%, rgba(37, 194, 121, 1) 89.99%, rgba(25, 135, 84, 1) 90%, rgba(25, 135, 84, 1) 100%);
+			background-size: var(--progressbar-width) 100%; /* This is calculated by JS and set in the DOM */
+			background-repeat: no-repeat;
+		}
+	}
 }
 
 @include mixin.atom(progress-label) {
 	display: flex;
 	align-items: center;
 
-	> progress {
+	> progress,
+	> meter {
 		margin-left: func.rhythm(1);
 	}
+
+	@include bem.m(large) {
+		font-size: var.$size-base * 1.5;
+	}
 }

package/src/atoms/progress/progress.config.js

@@ -7,5 +7,22 @@ module.exports = {
 		max: '100',
 		max_width: false,
 		additional_classes: false,
-	}
+		meter: false
+	},
+	variants: [
+		{
+			name: 'Heat',
+			context: {
+				heat: true,
+				meter: false,
+				value: '100'
+			}
+		},
+		{
+			name: 'Meter',
+			context: {
+				meter: true
+			}
+		}
+	]
 };

package/src/atoms/progress/progress.js

@@ -0,0 +1,13 @@
+const progressbars = document.querySelectorAll('[data-width-progress]')
+
+if (progressbars) {
+	function progressBarWidths() {
+		progressbars.forEach((container, index) => {
+			const width = container.offsetWidth;
+			document.documentElement.style.setProperty(`--progressbar-width`, width + 'px');
+		});
+	}
+
+	window.addEventListener('DOMContentLoaded', progressBarWidths);
+	window.addEventListener('resize', progressBarWidths);
+}

package/src/atoms/tooltip/tooltip.js

@@ -19,7 +19,7 @@ function positionToolTip() {
 	}
 }
 
-if (toolTip) {
+if (toolTip && toolTipText) {
 	positionToolTip();
 	window.addEventListener('scroll', positionToolTip);
 }

package/src/components.js

@@ -28,6 +28,7 @@ import './organisms/video-guide/video-guide';
 import './organisms/timeline/timeline';
 import './molecules/overview-navigation/overview-navigation';
 import './organisms/schedule/schedule-filter';
+import './organisms/selectable/selectable';
 import './assets/js/ot';
 import './assets/js/charCounter';
 import './atoms/range/range';
@@ -36,3 +37,4 @@ import './assets/js/textToggle';
 import './assets/js/iconToggle';
 import './molecules/multi-select/multi-select';
 import './organisms/haveibeenpwned/haveibeenpwned';
+import './atoms/progress/progress';

package/src/configurations/_mixins.scss

@@ -100,3 +100,22 @@
 		}
 	}
 }
+
+@mixin value-range($from, $to) {
+	@for $i from $from through $to {
+		// main element
+		@at-root #{&}[value="#{$i}"] {
+			@content;
+		}
+
+		// WebKit progress bar (Chrome, Safari, Edge)
+		@at-root #{&}[value="#{$i}"]::-webkit-progress-value {
+			@content;
+		}
+
+		// Firefox progress bar
+		@at-root #{&}[value="#{$i}"]::-moz-progress-bar {
+			@content;
+		}
+	}
+}

package/src/configurations/colors/_colors-functions.scss

@@ -26,38 +26,48 @@ $colors: (
 	ruby: (
 		base: colors.$color-ruby,
 		light: colors.$color-ruby-light,
+		lighter: colors.$color-ruby-lighter,
 		dark: colors.$color-ruby-dark,
 		medium-dark: colors.$color-ruby-medium-dark
 	),
 	peacock: (
 		base: colors.$color-peacock,
 		light: colors.$color-peacock-light,
+		lighter: colors.$color-peacock-lighter,
 		dark: colors.$color-peacock-dark,
 		medium-dark: colors.$color-peacock-medium-dark
 	),
 	jade: (
 		base: colors.$color-jade,
 		light: colors.$color-jade-light,
+		lighter: colors.$color-jade-lighter,
 		dark: colors.$color-jade-dark,
 		medium-dark: colors.$color-jade-medium-dark
 	),
 	sandstone: (
 		base: colors.$color-sandstone,
 		light: colors.$color-sandstone-light,
+		lighter: colors.$color-sandstone-lighter,
 		dark: colors.$color-sandstone-dark,
 		medium-dark: colors.$color-sandstone-medium-dark
 	),
 	lemon: (
 		base: colors.$color-lemon,
 		light: colors.$color-lemon-light,
+		lighter: colors.$color-lemon-lighter,
 		dark: colors.$color-lemon-dark,
 		medium-dark: colors.$color-lemon-medium-dark
 	),
 	ocean: (
 		base: colors.$color-ocean,
 		light: colors.$color-ocean-light,
+		lighter: colors.$color-ocean-lighter,
 		dark : colors.$color-ocean-dark,
 		medium-dark: colors.$color-ocean-medium-dark
+	),
+	success: (
+		base: colors.$color-success,
+		dark: colors.$color-success-dark
 	)
 );
 

package/src/configurations/colors/_colors.scss

@@ -9,16 +9,22 @@ $color-concrete: #d8d8d8;
 $color-ash: #ededed !default;
 $color-ruby: #ff4069 !default;
 $color-ruby-light: #ff9fb4 !default;
+$color-ruby-lighter: color.adjust($color-ruby-light, $lightness: 10%) !default;
 $color-peacock: #c27fec !default;
 $color-peacock-light: #e0bff5 !default;
+$color-peacock-lighter: color.adjust($color-peacock-light, $lightness: 10%) !default;
 $color-jade: #55c7b4 !default;
 $color-jade-light: #aae3d9 !default;
+$color-jade-lighter: color.adjust($color-jade-light, $lightness: 10%) !default;
 $color-sandstone: #f99963 !default;
 $color-sandstone-light: #fcccb1 !default;
+$color-sandstone-lighter: color.adjust($color-sandstone-light, $lightness: 10%) !default;
 $color-lemon: #ffce2e !default;
 $color-lemon-light: #ffe696 !default;
+$color-lemon-lighter: color.adjust($color-lemon-light, $lightness: 10%) !default;
 $color-ocean: #50b2fc !default;
 $color-ocean-light: #a7d8fd !default;
+$color-ocean-lighter: color.adjust(	$color-ocean-light, $lightness: 10%) !default;
 $color-cyberspace: #1f2a36 !default;
 $color-dark: #4c4c4c !default;
 $color-facebook: #0866ff !default;
@@ -40,3 +46,7 @@ $color-jade-medium-dark: color.adjust($color-jade, $lightness: -10%);
 $color-sandstone-medium-dark: color.adjust($color-sandstone, $lightness: -10%);
 $color-lemon-medium-dark: color.adjust($color-lemon, $lightness: -10%);
 $color-ocean-medium-dark: color.adjust($color-ocean, $lightness: -10%);
+
+/* Special colors not ound in the graphic profile */
+$color-success: #25c279 !default;
+$color-success-dark: #198754 !default;

package/src/configurations/icons.json

@@ -1 +1 @@
-[{"id":"search","name":"Search"},{"id":"search-domain","name":"Search Domain"},{"id":"arrow-forwards","name":"Arrow Forwards"},{"id":"arrow-backwards","name":"Arrow Backwards"},{"id":"arrow-down","name":"Arrow Down"},{"id":"arrow-variant","name":"Arrow Variant"},{"id":"hamburger","name":"Hamburger"},{"id":"close","name":"Close"},{"id":"check","name":"Check"},{"id":"quote","name":"Quote"},{"id":"file","name":"File"},{"id":"download","name":"Download"},{"id":"upload","name":"Upload"},{"id":"filter","name":"Filter"},{"id":"read","name":"Read"},{"id":"pin","name":"Pin"},{"id":"user","name":"User"},{"id":"language","name":"Language"},{"id":"linkedin","name":"Linkedin"},{"id":"facebook","name":"Facebook"},{"id":"instagram","name":"Instagram"},{"id":"twitter","name":"Twitter"},{"id":"x","name":"X"},{"id":"external-link","name":"External Link"},{"id":"app-share","name":"App Share"},{"id":"print","name":"Print"},{"id":"chapters","name":"Chapters"},{"id":"article","name":"Article"},{"id":"padlock","name":"Padlock"},{"id":"trash","name":"Trash"},{"id":"link","name":"Link"},{"id":"share","name":"Share"},{"id":"questionmark","name":"Questionmark"},{"id":"info","name":"Info"},{"id":"contrast","name":"Contrast"},{"id":"gauge","name":"Gauge"},{"id":"backward-15","name":"Backward 15"},{"id":"step-backwards","name":"Step Backwards"},{"id":"play","name":"Play"},{"id":"step-forwards","name":"Step Forwards"},{"id":"forward-60","name":"Forward 60"},{"id":"pause","name":"Pause"},{"id":"subtitles","name":"Subtitles"},{"id":"author","name":"Author"},{"id":"copy","name":"Copy"},{"id":"speaker","name":"Speaker"},{"id":"mute","name":"Mute"},{"id":"settings","name":"Settings"},{"id":"lte","name":"Lte"},{"id":"wifi","name":"Wifi"},{"id":"reception","name":"Reception"},{"id":"2g","name":"2g"},{"id":"3g","name":"3g"},{"id":"4g","name":"4g"},{"id":"5g","name":"5g"},{"id":"latency","name":"Latency"},{"id":"spinner","name":"Spinner"},{"id":"spinner-white","name":"Spinner White"},{"id":"3d","name":"3d"},{"id":"accessibility","name":"Accessibility"},{"id":"cafe","name":"Cafe"},{"id":"capacity","name":"Capacity"},{"id":"display","name":"Display"},{"id":"email","name":"Email"},{"id":"headset","name":"Headset"},{"id":"phone","name":"Phone"},{"id":"plus","name":"Plus"},{"id":"podcast","name":"Podcast"},{"id":"richtext-bold","name":"Richtext Bold"},{"id":"richtext-italic","name":"Richtext Italic"},{"id":"richtext-heading-2","name":"Richtext Heading 2"},{"id":"richtext-heading-3","name":"Richtext Heading 3"},{"id":"richtext-bullet-list","name":"Richtext Bullet List"},{"id":"richtext-ordered-list","name":"Richtext Ordered List"},{"id":"streaming","name":"Streaming"},{"id":"time","name":"Time"},{"id":"drag-item","name":"Drag Item"},{"id":"personal-data","name":"Personal Data"},{"id":"romance","name":"Romance"},{"id":"shopping","name":"Shopping"},{"id":"warning","name":"Warning"},{"id":"diamond","name":"Diamond"},{"id":"world","name":"World"},{"id":"table","name":"Table"}]
+[{"id":"search","name":"Search"},{"id":"search-domain","name":"Search Domain"},{"id":"arrow-forwards","name":"Arrow Forwards"},{"id":"arrow-backwards","name":"Arrow Backwards"},{"id":"arrow-down","name":"Arrow Down"},{"id":"arrow-variant","name":"Arrow Variant"},{"id":"hamburger","name":"Hamburger"},{"id":"close","name":"Close"},{"id":"check","name":"Check"},{"id":"quote","name":"Quote"},{"id":"file","name":"File"},{"id":"download","name":"Download"},{"id":"upload","name":"Upload"},{"id":"filter","name":"Filter"},{"id":"read","name":"Read"},{"id":"pin","name":"Pin"},{"id":"user","name":"User"},{"id":"language","name":"Language"},{"id":"linkedin","name":"Linkedin"},{"id":"facebook","name":"Facebook"},{"id":"instagram","name":"Instagram"},{"id":"twitter","name":"Twitter"},{"id":"x","name":"X"},{"id":"external-link","name":"External Link"},{"id":"app-share","name":"App Share"},{"id":"print","name":"Print"},{"id":"chapters","name":"Chapters"},{"id":"article","name":"Article"},{"id":"padlock","name":"Padlock"},{"id":"trash","name":"Trash"},{"id":"link","name":"Link"},{"id":"share","name":"Share"},{"id":"questionmark","name":"Questionmark"},{"id":"info","name":"Info"},{"id":"contrast","name":"Contrast"},{"id":"gauge","name":"Gauge"},{"id":"backward-15","name":"Backward 15"},{"id":"step-backwards","name":"Step Backwards"},{"id":"play","name":"Play"},{"id":"step-forwards","name":"Step Forwards"},{"id":"forward-60","name":"Forward 60"},{"id":"pause","name":"Pause"},{"id":"subtitles","name":"Subtitles"},{"id":"author","name":"Author"},{"id":"copy","name":"Copy"},{"id":"speaker","name":"Speaker"},{"id":"mute","name":"Mute"},{"id":"settings","name":"Settings"},{"id":"lte","name":"Lte"},{"id":"wifi","name":"Wifi"},{"id":"reception","name":"Reception"},{"id":"2g","name":"2g"},{"id":"3g","name":"3g"},{"id":"4g","name":"4g"},{"id":"5g","name":"5g"},{"id":"latency","name":"Latency"},{"id":"spinner","name":"Spinner"},{"id":"spinner-white","name":"Spinner White"},{"id":"3d","name":"3d"},{"id":"accessibility","name":"Accessibility"},{"id":"cafe","name":"Cafe"},{"id":"capacity","name":"Capacity"},{"id":"display","name":"Display"},{"id":"email","name":"Email"},{"id":"at","name":"At"},{"id":"headset","name":"Headset"},{"id":"phone","name":"Phone"},{"id":"plus","name":"Plus"},{"id":"podcast","name":"Podcast"},{"id":"richtext-bold","name":"Richtext Bold"},{"id":"richtext-italic","name":"Richtext Italic"},{"id":"richtext-heading-2","name":"Richtext Heading 2"},{"id":"richtext-heading-3","name":"Richtext Heading 3"},{"id":"richtext-bullet-list","name":"Richtext Bullet List"},{"id":"richtext-ordered-list","name":"Richtext Ordered List"},{"id":"streaming","name":"Streaming"},{"id":"time","name":"Time"},{"id":"drag-item","name":"Drag Item"},{"id":"personal-data","name":"Personal Data"},{"id":"security","name":"Security"},{"id":"romance","name":"Romance"},{"id":"shopping","name":"Shopping"},{"id":"warning","name":"Warning"},{"id":"diamond","name":"Diamond"},{"id":"world","name":"World"},{"id":"table","name":"Table"}]

package/src/organisms/selectable/_selectable.scss

@@ -0,0 +1,43 @@
+@charset "UTF-8";
+@use "sass:color";
+@use '../../configurations/mixins' as mixin;
+@use '../../configurations/extends';
+@use '../../configurations/bem' as bem;
+@use '../../configurations/variables' as var;
+@use '../../configurations/functions' as func;
+@use '../../configurations/colors/colors' as colors;
+@use '../../vendor/grid/breakpoints' as breakpoint;
+
+@include mixin.organism(selectable) {
+	padding: func.rhythm(1);
+
+	[aria-hidden="true"] {
+		display: none;
+	}
+
+	@include breakpoint.bp-up(md) {
+		padding: func.rhythm(2);
+	}
+
+	@include bem.e(item) {
+		border-top: 1px solid colors.$color-concrete;
+		padding-top: func.rhythm(2);
+		margin-top: func.rhythm(3);
+
+		.js &:not(:first-child):not([aria-hidden]) {
+			display: none;
+		}
+	}
+
+	@include bem.m(border-radius) {
+		border-radius: var.$border-radius;
+	}
+
+	@include bem.m(shadow-small) {
+		@include mixin.box-shadow(colors.$color-cyberspace, 0.2);
+	}
+
+	@include bem.m(shadow-large) {
+		@include mixin.card-shadow(colors.$color-cyberspace, 0.2);
+	}
+}

package/src/organisms/selectable/selectable.js

@@ -0,0 +1,105 @@
+function toggleItems(selectable, value) {
+	const items = selectable.querySelectorAll('[data-selectable-item]');
+
+	items.forEach((item) => {
+		item.setAttribute('aria-hidden', item.id === `${selectable.id}-${value}` || value === null ? 'false' : 'true');
+	});
+}
+
+function onChange(selectable, value) {
+	toggleItems(selectable, value);
+}
+
+document.addEventListener('change', (e) => {
+	const container = e.target.closest('[data-selectable]');
+
+	if (container && e.target.matches('[data-selectable-select]')) {
+		onChange(container, e.target.value);
+	}
+});
+
+document.addEventListener('click', (e) => {
+	const button = e.target.closest('[data-selectable-all]');
+
+	if (button) {
+		const selectable = button.closest('[data-selectable]');
+
+		if (selectable) {
+			const select = selectable.querySelector('[data-selectable-select]');
+
+			if (select) {
+				select.value = '';
+			}
+
+			toggleItems(selectable, null);
+		}
+
+		return;
+	}
+
+	const copy = e.target.closest('[data-selectable-copy]');
+
+	if (copy) {
+		const selectable = copy.closest('[data-selectable]');
+		const select = selectable.querySelector('[data-selectable-select]');
+		const value = select.value;
+		let id = selectable.id;
+
+		if (value) {
+			id = `${id}-${value}`;
+		}
+
+		const url = window.location.href.replace(/#.*$/, '') + '#' + id;
+
+		navigator.clipboard.writeText(url)
+			.then(() => {
+				const text = copy.querySelector('span');
+
+				text.dataset.original = text.innerText;
+				text.innerText = text.dataset.copied;
+
+				setTimeout(() => {
+					text.innerText = text.dataset.original;
+				}, 1000);
+			});
+	}
+});
+
+const selectables = document.querySelectorAll('[data-selectable]');
+
+selectables.forEach((selectable) => {
+	const select = selectable.querySelector('[data-selectable-select]');
+
+	toggleItems(selectable, select.value);
+})
+
+// Read current hash and select item
+const hash = window.location.hash.replace(/^#/, '');
+
+if (hash) {
+	const item = document.getElementById(hash);
+
+	if (item) {
+		if (item.matches('[data-selectable]')) {
+			const select = item.querySelector('[data-selectable-select]');
+
+			if (select) {
+				select.value = '';
+			}
+
+			toggleItems(item, null);
+		} else {
+			const selectable = item.closest('[data-selectable]');
+
+			if (selectable) {
+				const select = selectable.querySelector('[data-selectable-select]');
+
+				if (select) {
+					select.value = hash.replace(`${selectable.id}-`, '');
+				}
+
+				toggleItems(selectable, select.value);
+			}
+		}
+	}
+}

package/src/organisms/tabs/_tabs.scss

@@ -25,6 +25,7 @@
 	mask-repeat: repeat-y;
 	mask-position: top right;
 	mask-size: 100% func.rhythm(6);
+	pointer-events: none;
 
 	&::-webkit-scrollbar {
 		position: absolute;
@@ -64,10 +65,16 @@
 		display: flex;
 		flex: 0 0 auto;
 		padding: 0;
+		font-size: var.$size-medium;
+		pointer-events: auto;
 
 		+ li {
 			margin-left: func.rhythm(1);
 		}
+
+		@include breakpoint.bp-up(md) {
+			font-size: var.$size-base;
+		}
 	}
 
 	@include bem.e(link) {
@@ -76,7 +83,7 @@
 		display: inline-flex;
 		position: relative;
 		align-items: center;
-		padding: func.rhythm(1.5) func.rhythm(3);
+		padding: func.rhythm(1) func.rhythm(2);
 		border-top-left-radius: var.$border-radius;
 		border-top-right-radius: var.$border-radius;
 		background-color: colors.$color-concrete;
@@ -96,6 +103,10 @@
 		&:hover {
 			background-color: color.adjust(colors.$color-concrete, $lightness: -5%);
 		}
+
+		@include breakpoint.bp-up(md) {
+			padding: func.rhythm(1.5) func.rhythm(3);
+		}
 	}
 
 	[data-tab-active] {
@@ -118,7 +129,7 @@
 	position: relative;
 	top: -1px;
 	z-index: 2;
-	padding: func.rhythm(2) func.rhythm(3);
+	padding: func.rhythm(1) func.rhythm(2);
 	border-top-right-radius: var.$border-radius;
 	border-bottom-right-radius: var.$border-radius;
 	border-bottom-left-radius: var.$border-radius;
@@ -137,6 +148,10 @@
 		background-color: colors.$color-ash;
 		border-color: colors.$color-concrete;
 	}
+
+	@include breakpoint.bp-up(md) {
+		padding: func.rhythm(2) func.rhythm(3);
+	}
 }
 
 .no-js {

package/src/utilities/_fill.scss

@@ -16,3 +16,27 @@
 .u-fill-ocean-dark {
 	fill: colors.$color-ocean-dark !important;
 }
+
+.u-fill-jade {
+	fill: colors.$color-jade !important;
+}
+
+.u-fill-jade-dark {
+	fill: colors.$color-jade-dark !important;
+}
+
+.u-fill-ruby {
+	fill: colors.$color-ruby !important;
+}
+
+.u-fill-ruby-dark {
+	fill: colors.$color-ruby-dark !important;
+}
+
+.u-fill-success {
+	fill: colors.$color-success !important;
+}
+
+.u-fill-success-dark {
+	fill: colors.$color-success-dark !important;
+}