@amsterdam/design-system-css 0.11.1 → 0.12.0

package/dist/radio/radio.css

@@ -1 +1 @@
-.ams-radio__input{appearance:none;inline-size:0;margin-block:0;margin-inline:0}.ams-radio__input:focus+label{outline:auto}.ams-radio__input:focus:not(:focus-visible)+label{outline:0}.ams-radio__circle{align-items:center;block-size:calc(var(--ams-radio-font-size)*var(--ams-radio-line-height));display:flex;flex-shrink:0;inline-size:1.5rem}.ams-radio__circle::after{background-position:center;background-repeat:no-repeat;background-size:1rem;block-size:1.5rem;border-color:var(--ams-radio-circle-border-color);border-radius:100%;border-style:solid;border-width:var(--ams-radio-circle-border-width);box-sizing:border-box;content:"";inline-size:100%}.ams-radio__label{color:var(--ams-radio-color);cursor:pointer;display:inline-flex;font-family:var(--ams-radio-font-family);font-size:var(--ams-radio-font-size);font-weight:var(--ams-radio-font-weight);gap:var(--ams-radio-gap);line-height:var(--ams-radio-line-height);outline-offset:var(--ams-radio-outline-offset);text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}.ams-radio__label:hover{color:var(--ams-radio-hover-color);text-decoration-line:underline;text-decoration-thickness:var(--ams-radio-hover-text-decoration-thickness);text-underline-offset:.375rem}.ams-radio__label:hover .ams-radio__circle::after{border-color:var(--ams-radio-circle-hover-border-color)}.ams-radio__input:checked+.ams-radio__label .ams-radio__circle::after{background-image:var(--ams-radio-circle-checked-background-image)}.ams-radio__input[aria-invalid=true]+.ams-radio__label .ams-radio__circle::after{border-color:var(--ams-radio-circle-invalid-border-color)}.ams-radio__input:disabled+.ams-radio__label{color:var(--ams-radio-disabled-color);cursor:not-allowed}.ams-radio__input:disabled+.ams-radio__label .ams-radio__circle::after{border-color:var(--ams-radio-circle-disabled-border-color);border-width:var(--ams-radio-circle-disabled-border-width)}.ams-radio__input[aria-invalid=true]:checked+.ams-radio__label .ams-radio__circle::after{background-image:var(--ams-radio-circle-invalid-checked-background-image)}.ams-radio__input:disabled+.ams-radio__label:hover{text-decoration:none}.ams-radio__input:disabled:checked+.ams-radio__label .ams-radio__circle::after{background-image:var(--ams-radio-circle-disabled-checked-background-image)}.ams-radio__input[aria-invalid=true]:disabled+.ams-radio__label .ams-radio__circle::after{border-color:var(--ams-radio-circle-disabled-border-color)}.ams-radio__input[aria-invalid=true]+.ams-radio__label:hover .ams-radio__circle::after{border-color:var(--ams-radio-circle-invalid-hover-border-color)}.ams-radio__input:checked+.ams-radio__label:hover .ams-radio__circle::after{background-image:var(--ams-radio-circle-checked-hover-background-image)}.ams-radio__input[aria-invalid=true]:checked+.ams-radio__label:hover .ams-radio__circle::after{background-image:var(--ams-radio-circle-invalid-checked-hover-background-image)}.ams-radio__input:disabled:checked+.ams-radio__label:hover .ams-radio__circle::after{background-image:var(--ams-radio-circle-disabled-checked-hover-background-image)}.ams-radio__input[aria-invalid=true]:disabled+.ams-radio__label:hover .ams-radio__circle::after{border-color:var(--ams-radio-circle-disabled-border-color)}.ams-radio__input[aria-invalid=true]:disabled:checked+.ams-radio__label .ams-radio__circle::after{background-image:var(--ams-radio-circle-disabled-checked-background-image)}/*# sourceMappingURL=radio.css.map */
+.ams-radio__input{appearance:none;inline-size:0;margin-block:0;margin-inline:0}.ams-radio__input:focus+label{outline:auto}.ams-radio__input:focus:not(:focus-visible)+label{outline:0}.ams-radio__label{color:var(--ams-radio-color);cursor:pointer;display:inline-flex;font-family:var(--ams-radio-font-family);font-size:var(--ams-radio-font-size);font-weight:var(--ams-radio-font-weight);gap:var(--ams-radio-gap);line-height:var(--ams-radio-line-height);outline-offset:var(--ams-radio-outline-offset);text-decoration-thickness:var(--ams-radio-text-decoration-thickness);text-underline-offset:var(--ams-radio-text-underline-offset);text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}.ams-radio__icon-container{block-size:var(--ams-radio-icon-container-block-size);display:flex;flex:none;inline-size:var(--ams-radio-icon-container-inline-size)}.ams-radio__circle{fill:none;stroke:var(--ams-radio-circle-stroke);stroke-width:.125rem}.ams-radio__checked-indicator{display:none;fill:var(--ams-radio-checked-indicator-fill)}.ams-radio__label:hover{color:var(--ams-radio-hover-color);text-decoration-line:var(--ams-radio-hover-text-decoration-line)}.ams-radio__label:hover .ams-radio__circle{stroke:var(--ams-radio-circle-hover-stroke)}.ams-radio__label:hover .ams-radio__checked-indicator{fill:var(--ams-radio-checked-indicator-hover-fill)}.ams-radio__input[aria-invalid=true]+.ams-radio__label .ams-radio__circle{stroke:var(--ams-radio-circle-invalid-stroke)}.ams-radio__input[aria-invalid=true]+.ams-radio__label .ams-radio__checked-indicator{fill:var(--ams-radio-checked-indicator-invalid-fill)}.ams-radio__input:checked+.ams-radio__label .ams-radio__checked-indicator{display:block}.ams-radio__input:disabled+.ams-radio__label{color:var(--ams-radio-disabled-color);cursor:not-allowed}.ams-radio__input:disabled+.ams-radio__label .ams-radio__circle{stroke:var(--ams-radio-circle-disabled-stroke)}.ams-radio__input:disabled+.ams-radio__label .ams-radio__checked-indicator{fill:var(--ams-radio-checked-indicator-disabled-fill)}.ams-radio__input[aria-invalid=true]:disabled+.ams-radio__label .ams-radio__circle{stroke:var(--ams-radio-circle-disabled-invalid-stroke)}.ams-radio__input[aria-invalid=true]:disabled+.ams-radio__label .ams-radio__checked-indicator{fill:var(--ams-radio-checked-indicator-disabled-invalid-fill)}.ams-radio__input:disabled+.ams-radio__label:hover{text-decoration:none}.ams-radio__input[aria-invalid=true]+.ams-radio__label:hover .ams-radio__circle{stroke:var(--ams-radio-circle-invalid-hover-stroke)}.ams-radio__input[aria-invalid=true]+.ams-radio__label:hover .ams-radio__checked-indicator{fill:var(--ams-radio-checked-indicator-invalid-hover-fill)}.ams-radio__input[aria-invalid=true]:disabled+.ams-radio__label:hover .ams-radio__circle{stroke:var(--ams-radio-circle-disabled-invalid-hover-stroke)}.ams-radio__input[aria-invalid=true]:disabled+.ams-radio__label:hover .ams-radio__checked-indicator{fill:var(--ams-radio-checked-indicator-disabled-invalid-hover-fill)}@media(forced-colors: active){.ams-radio__label .ams-radio__circle,.ams-radio__label:hover .ams-radio__circle,.ams-radio__input[aria-invalid=true]+.ams-radio__label .ams-radio__circle,.ams-radio__input[aria-invalid=true]+.ams-radio__label:hover .ams-radio__circle{stroke:FieldText}.ams-radio__label .ams-radio__checked-indicator,.ams-radio__label:hover .ams-radio__checked-indicator,.ams-radio__input[aria-invalid=true]+.ams-radio__label .ams-radio__checked-indicator,.ams-radio__input[aria-invalid=true]+.ams-radio__label:hover .ams-radio__checked-indicator{fill:FieldText}}@media(forced-colors: active){.ams-radio__input:checked+.ams-radio__label .ams-radio__circle,.ams-radio__input[aria-invalid=true]:checked+.ams-radio__label:hover .ams-radio__circle{stroke:ActiveText}.ams-radio__input:checked+.ams-radio__label .ams-radio__checked-indicator,.ams-radio__input[aria-invalid=true]:checked+.ams-radio__label:hover .ams-radio__checked-indicator{fill:ActiveText}}@media(forced-colors: active){.ams-radio__input:disabled+.ams-radio__label .ams-radio__circle,.ams-radio__input[aria-invalid=true]:disabled+.ams-radio__label .ams-radio__circle,.ams-radio__input[aria-invalid=true]:disabled+.ams-radio__label:hover .ams-radio__circle{stroke:GrayText}.ams-radio__input:disabled+.ams-radio__label .ams-radio__checked-indicator,.ams-radio__input[aria-invalid=true]:disabled+.ams-radio__label .ams-radio__checked-indicator,.ams-radio__input[aria-invalid=true]:disabled+.ams-radio__label:hover .ams-radio__checked-indicator{fill:GrayText}}/*# sourceMappingURL=radio.css.map */

package/dist/radio/radio.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/components/radio/radio.scss","../../src/common/hide-input.scss","../../src/common/input-label-focus.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AASA,kBCHE,gBACA,cACA,eACA,gBCIA,8BACE,aAGF,kDACE,UFJJ,mBACE,mBACA,yEACA,aACA,cACA,mBAEA,0BACE,2BACA,4BACA,qBACA,kBACA,kDACA,mBACA,mBACA,kDACA,sBACA,WACA,iBAIJ,kBACE,6BACA,eACA,oBACA,yCACA,qCACA,yCACA,yBACA,yCACA,+CGnCA,kCACA,2BACA,8BACA,sBHkCA,wBACE,mCACA,+BACA,2EACA,8BAEA,kDACE,wDASJ,sEACE,kEAMF,iFACE,0DAMF,6CACE,sCACA,mBAEA,uEACE,2DACA,2DAOJ,yFACE,0EAKJ,mDACE,qBAKA,+EACE,2EAMF,0FAEE,2DAOJ,uFAEE,gEAIF,4EACE,wEAIF,+FAEE,gFAIF,qFACE,iFAIF,gGAEE,2DAOA,kGAEE","file":"radio.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/components/radio/radio.scss","../../src/common/hide-input.scss","../../src/common/input-label-focus.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AASA,kBCHE,gBACA,cACA,eACA,gBCIA,8BACE,aAGF,kDACE,UFHJ,kBACE,6BACA,eACA,oBACA,yCACA,qCACA,yCACA,yBACA,yCACA,+CACA,qEACA,6DGhBA,kCACA,2BACA,8BACA,sBHkBF,2BACE,sDACA,aACA,UACA,wDAGF,mBACE,UACA,sCACA,qBAGF,8BACE,aACA,6CAIF,wBACE,mCACA,iEAEA,2CACE,4CAGF,sDACE,mDAMF,0EACE,8CAGF,qFACE,qDAMF,0EACE,cAKJ,6CACE,sCACA,mBAEA,gEACE,+CAGF,2EACE,sDAMF,mFAEE,uDAGF,8FAEE,8DAOJ,mDACE,qBAKA,gFAEE,oDAGF,2FAEE,2DAMF,yFAEE,6DAGF,oGAEE,oEAOJ,8BAKI,0OACE,iBAGF,sRACE,gBAMN,8BAGI,uJACE,kBAGF,6KACE,iBAMN,8BAII,4OACE,gBAGF,6QACE","file":"radio.css"}

package/dist/screen/screen.css

@@ -1 +1 @@
-.ams-screen{background-color:var(--ams-screen-background-color);margin-inline:auto;box-sizing:border-box}.ams-screen--full-height{min-block-size:100vh}.ams-screen--wide{max-inline-size:var(--ams-screen-wide-max-inline-size)}.ams-screen--x-wide{max-inline-size:var(--ams-screen-x-wide-max-inline-size)}/*# sourceMappingURL=screen.css.map */
+.ams-screen{background-color:var(--ams-screen-background-color);margin-inline:auto;position:relative;box-sizing:border-box}.ams-screen--full-height{min-block-size:100vh}.ams-screen--wide{max-inline-size:var(--ams-screen-wide-max-inline-size)}.ams-screen--x-wide{max-inline-size:var(--ams-screen-x-wide-max-inline-size)}/*# sourceMappingURL=screen.css.map */

package/dist/screen/screen.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/components/screen/screen.scss"],"names":[],"mappings":"AASA,YACE,oDACA,mBALA,sBAUF,yBACE,qBAGF,kBACE,uDAGF,oBACE","file":"screen.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/components/screen/screen.scss"],"names":[],"mappings":"AASA,YACE,oDACA,mBACA,kBANA,sBAWF,yBACE,qBAGF,kBACE,uDAGF,oBACE","file":"screen.css"}

package/dist/search-field/search-field.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/components/search-field/search-field.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAOA,kBACE,aACA,kBAYF,yBACE,gEACA,oDACA,0CACA,sDACA,kDACA,sDACA,iBACA,sDACA,4DACA,0DACA,4DACA,0BCvBA,kCACA,2BACA,8BACA,8CDCA,gBACA,SACA,gBACA,sBACA,eAoBA,+BACE,0DAGF,+BACE,UAIJ,6EAEE,4DAEA,yFAEE,kEAIJ,sCACE,sDACA,aAGF,uDACE,gBACA,8EACA,kEACA,eACA,oEACA,0BAWF,0BACE,iEACA,2CACA,eACA,6DAGA,2DACA,6DACA,0BAhBA,SAGA,eACA,gBAgBA,gCACE","file":"search-field.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/components/search-field/search-field.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAOA,kBACE,aACA,kBAYF,yBACE,gEACA,oDACA,0CACA,sDACA,kDACA,sDACA,iBACA,sDACA,4DACA,0DACA,4DACA,0BCvBA,kCACA,2BACA,8BACA,8CDCA,gBACA,SACA,gBACA,sBACA,eAoBA,+BACE,0DAGF,+BACE,UAIJ,6EAEE,4DAEA,yFAEE,kEAIJ,sCACE,sDACA,aAGF,uDACE,gBACA,8EACA,kEACA,eACA,oEACA,0BAWF,0BACE,iEACA,2CACA,eACA,6DAGA,2DACA,6DACA,0BAhBA,SACA,eACA,gBAkBA,gCACE","file":"search-field.css"}

package/dist/select/select.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/components/select/select.scss"],"names":[],"mappings":"AAWA,YACE,oDACA,wCACA,8BACA,0CACA,sCACA,0CACA,iBACA,0CACA,gDACA,8CACA,gDACA,0BAjBA,gBACA,SACA,gBAiBA,4BACE,oDACA,0DACA,4BACA,wBAGF,kBACE,8CAMJ,mDAEE,gDAGF,qBACE,iDACA,uCACA,mBAEA,qCACE,6DAIJ,+DAEE,sDAGF,6BACE","file":"select.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/components/select/select.scss"],"names":[],"mappings":"AAWA,YACE,oDACA,wCACA,8BACA,0CACA,sCACA,0CACA,iBACA,0CACA,gDACA,8CACA,gDACA,0BAjBA,gBACA,SACA,gBAmBA,4BACE,oDACA,0DACA,4BACA,wBAGF,kBACE,8CAIJ,mDAEE,gDAGF,qBACE,iDACA,uCACA,mBAEA,qCACE,6DAIJ,+DAEE,sDAGF,6BACE","file":"select.css"}

package/dist/switch/switch.css

@@ -1 +1 @@
-.ams-switch__input{appearance:none;inline-size:0;margin-block:0;margin-inline:0}.ams-switch__input:focus+label{outline:auto}.ams-switch__input:focus:not(:focus-visible)+label{outline:0}.ams-switch__label{--ams-switch-track-padding: 0.0625rem;background-color:var(--ams-switch-background-color);border-radius:calc(var(--ams-switch-thumb-inline-size)*2);cursor:pointer;display:inline-block;inline-size:var(--ams-switch-inline-size);outline-offset:var(--ams-switch-outline-offset);padding-block:var(--ams-switch-track-padding);padding-inline:var(--ams-switch-track-padding);transition:background-color .2s ease-in-out;box-sizing:border-box}.ams-switch__label::before{background-color:var(--ams-switch-thumb-background-color);block-size:var(--ams-switch-thumb-block-size);border-radius:50%;content:"";display:block;inline-size:var(--ams-switch-thumb-inline-size);transition-duration:.1s;transition-property:box-shadow,transform;transition-timing-function:ease-in-out}.ams-switch__input:checked+.ams-switch__label{background-color:var(--ams-switch-checked-background-color)}.ams-switch__input:disabled+.ams-switch__label{background-color:var(--ams-switch-disabled-background-color);cursor:not-allowed}.ams-switch__input:checked+.ams-switch__label::before{transform:translate(calc(var(--ams-switch-inline-size) - var(--ams-switch-thumb-inline-size) - 2 * var(--ams-switch-track-padding)))}.ams-switch:hover .ams-switch__input:enabled+.ams-switch__label::before{box-shadow:var(--ams-switch-thumb-hover-box-shadow)}/*# sourceMappingURL=switch.css.map */
+.ams-switch__input{appearance:none;inline-size:0;margin-block:0;margin-inline:0}.ams-switch__input:focus+label{outline:auto}.ams-switch__input:focus:not(:focus-visible)+label{outline:0}.ams-switch__label{--ams-switch-track-border-width: 0.0625rem;background-color:var(--ams-switch-background-color);border:var(--ams-switch-track-border-width) solid rgba(0,0,0,0);border-radius:calc(var(--ams-switch-thumb-inline-size)*2);cursor:pointer;display:inline-block;inline-size:var(--ams-switch-inline-size);outline-offset:var(--ams-switch-outline-offset);transition:background-color .2s ease-in-out;box-sizing:border-box}.ams-switch__label::before{background-color:var(--ams-switch-thumb-background-color);block-size:var(--ams-switch-thumb-block-size);border-radius:50%;content:"";display:block;inline-size:var(--ams-switch-thumb-inline-size);transition-duration:.1s;transition-property:box-shadow,transform;transition-timing-function:ease-in-out}@media(forced-colors: active){.ams-switch__label::before{background-color:FieldText}}.ams-switch__input:checked+.ams-switch__label{background-color:var(--ams-switch-checked-background-color)}.ams-switch__input:disabled+.ams-switch__label{background-color:var(--ams-switch-disabled-background-color);cursor:not-allowed}.ams-switch__input:checked+.ams-switch__label::before{transform:translate(calc(100% - 2 * var(--ams-switch-track-border-width)))}.ams-switch:hover .ams-switch__input:enabled+.ams-switch__label::before{box-shadow:var(--ams-switch-thumb-hover-box-shadow)}/*# sourceMappingURL=switch.css.map */

package/dist/switch/switch.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/components/switch/switch.scss","../../src/common/hide-input.scss","../../src/common/input-label-focus.scss"],"names":[],"mappings":"AAYA,mBCNE,gBACA,cACA,eACA,gBCIA,+BACE,aAGF,mDACE,UFDJ,mBACE,sCAEA,oDACA,0DACA,eACA,qBACA,0CACA,gDACA,8CACA,+CACA,4CAnBA,sBAwBF,2BACE,0DACA,8CACA,kBACA,WACA,cACA,gDACA,wBACA,yCACA,uCAGF,8CACE,4DAGF,+CACE,6DACA,mBAGF,sDACE,qIAKF,wEACE","file":"switch.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/components/switch/switch.scss","../../src/common/hide-input.scss","../../src/common/input-label-focus.scss"],"names":[],"mappings":"AAYA,mBCNE,gBACA,cACA,eACA,gBCIA,+BACE,aAGF,mDACE,UFDJ,mBACE,2CAEA,oDAGA,gEACA,0DACA,eACA,qBACA,0CACA,gDACA,4CApBA,sBAyBF,2BACE,0DACA,8CACA,kBACA,WACA,cACA,gDACA,wBACA,yCACA,uCAEA,8BAXF,2BAYI,4BAIJ,8CACE,4DAGF,+CACE,6DACA,mBAGF,sDACE,2EAGF,wEACE","file":"switch.css"}

package/dist/tabs/tabs.css

@@ -1 +1 @@
-.ams-tabs{display:grid;gap:var(--ams-tabs-gap)}.ams-tabs__list{background-color:var(--ams-tabs-list-background-color);border-block-end:var(--ams-tabs-list-border-block-end);display:flex;overflow-x:auto}.ams-tabs__button{color:var(--ams-tabs-button-color);cursor:var(--ams-tabs-button-cursor);font-family:var(--ams-tabs-button-font-family);font-size:var(--ams-tabs-button-font-size);font-weight:var(--ams-tabs-button-font-weight);line-height:var(--ams-tabs-button-line-height);outline-offset:var(--ams-tabs-button-outline-offset);padding-block:var(--ams-tabs-button-padding-block);padding-inline:var(--ams-tabs-button-padding-inline);background-color:rgba(0,0,0,0);border:0}.ams-tabs__button:disabled{color:var(--ams-tabs-button-disabled-color);cursor:var(--ams-tab-button-disabled-cursor)}.ams-tabs__button:hover:not([aria-selected=true],[disabled]){box-shadow:var(--ams-tabs-button-hover-box-shadow);color:var(--ams-tabs-button-hover-color)}.ams-tabs__button[aria-selected=true]{background-color:var(--ams-tabs-button-selected-background-color);color:var(--ams-tabs-button-selected-color)}/*# sourceMappingURL=tabs.css.map */
+.ams-tabs{display:grid;gap:var(--ams-tabs-gap)}.ams-tabs__list{background-color:var(--ams-tabs-list-background-color);border-block-end:var(--ams-tabs-list-border-block-end);display:flex;overflow-x:auto}.ams-tabs__button{color:var(--ams-tabs-button-color);cursor:var(--ams-tabs-button-cursor);font-family:var(--ams-tabs-button-font-family);font-size:var(--ams-tabs-button-font-size);font-weight:var(--ams-tabs-button-font-weight);line-height:var(--ams-tabs-button-line-height);outline-offset:var(--ams-tabs-button-outline-offset);padding-block:var(--ams-tabs-button-padding-block);padding-inline:var(--ams-tabs-button-padding-inline);background-color:rgba(0,0,0,0);border:0;margin-block:0;margin-inline:0}.ams-tabs__button:disabled{color:var(--ams-tabs-button-disabled-color);cursor:var(--ams-tab-button-disabled-cursor)}@media(forced-colors: active){.ams-tabs__button:disabled{color:GrayText}}.ams-tabs__button:hover:not([aria-selected=true],[disabled]){box-shadow:var(--ams-tabs-button-hover-box-shadow);color:var(--ams-tabs-button-hover-color)}.ams-tabs__button[aria-selected=true]{background-color:var(--ams-tabs-button-selected-background-color);color:var(--ams-tabs-button-selected-color)}@media(forced-colors: active){.ams-tabs__button[aria-selected=true]{background-color:SelectedItem}}/*# sourceMappingURL=tabs.css.map */

package/dist/tabs/tabs.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/components/tabs/tabs.scss"],"names":[],"mappings":"AAYA,UACE,aACA,wBAGF,gBACE,uDACA,uDACA,aACA,gBAGF,kBACE,mCACA,qCACA,+CACA,2CACA,+CACA,+CACA,qDACA,mDACA,qDAzBA,+BACA,SA4BA,2BACE,4CACA,6CAGF,6DACE,mDACA,yCAGF,sCACE,kEACA","file":"tabs.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/components/tabs/tabs.scss"],"names":[],"mappings":"AAgBA,UACE,aACA,wBAGF,gBACE,uDACA,uDACA,aACA,gBAGF,kBACE,mCACA,qCACA,+CACA,2CACA,+CACA,+CACA,qDACA,mDACA,qDA7BA,+BACA,SACA,eACA,gBA8BA,2BACE,4CACA,6CAEA,8BAJF,2BAKI,gBAIJ,6DACE,mDACA,yCAGF,sCACE,kEACA,4CAEA,8BAJF,sCAKI","file":"tabs.css"}

package/dist/unordered-list/unordered-list.css

@@ -1 +1 @@
-.ams-unordered-list{display:grid;gap:var(--ams-unordered-list-gap);text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;box-sizing:border-box;list-style:none;margin-block:0;padding-inline-start:0}.ams-unordered-list:not(.ams-unordered-list--no-markers){color:var(--ams-unordered-list-color);font-family:var(--ams-unordered-list-font-family);font-size:var(--ams-unordered-list-font-size);font-weight:var(--ams-unordered-list-font-weight);line-height:var(--ams-unordered-list-line-height);list-style-type:var(--ams-unordered-list-list-style-type)}.ams-unordered-list:not(.ams-unordered-list--no-markers) .ams-unordered-list__item{margin-inline-start:var(--ams-unordered-list-item-margin-inline-start);padding-inline-start:var(--ams-unordered-list-item-padding-inline-start)}.ams-unordered-list--inverse-color:not(.ams-unordered-list--no-markers){color:var(--ams-unordered-list-inverse-color)}.ams-unordered-list--small:not(.ams-unordered-list--no-markers){font-size:var(--ams-unordered-list-small-font-size);line-height:var(--ams-unordered-list-small-line-height)}:is(.ams-ordered-list,.ams-unordered-list) .ams-unordered-list{list-style-type:var(--ams-unordered-list-unordered-list-list-style-type)}:is(.ams-ordered-list,.ams-unordered-list) .ams-unordered-list .ams-unordered-list__item{margin-inline-start:var(--ams-unordered-list-unordered-list-item-margin-inline-start);padding-inline-start:var(--ams-unordered-list-unordered-list-item-padding-inline-start)}/*# sourceMappingURL=unordered-list.css.map */
+.ams-unordered-list{display:grid;gap:var(--ams-unordered-list-gap);text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;box-sizing:border-box;list-style:none;margin-block:0;padding-inline-start:0}.ams-unordered-list:not(.ams-unordered-list--no-markers){color:var(--ams-unordered-list-color);font-family:var(--ams-unordered-list-font-family);font-size:var(--ams-unordered-list-font-size);font-weight:var(--ams-unordered-list-font-weight);line-height:var(--ams-unordered-list-line-height);list-style-type:var(--ams-unordered-list-list-style-type)}.ams-unordered-list:not(.ams-unordered-list--no-markers) .ams-unordered-list__item{margin-inline-start:var(--ams-unordered-list-item-margin-inline-start);padding-inline-start:var(--ams-unordered-list-item-padding-inline-start)}.ams-unordered-list--inverse-color:not(.ams-unordered-list--no-markers){color:var(--ams-unordered-list-inverse-color)}.ams-unordered-list--small:not(.ams-unordered-list--no-markers){font-size:var(--ams-unordered-list-small-font-size);line-height:var(--ams-unordered-list-small-line-height)}:is(.ams-ordered-list,.ams-unordered-list) .ams-unordered-list{gap:var(--ams-unordered-list-unordered-list-gap);list-style-type:var(--ams-unordered-list-unordered-list-list-style-type);padding-block-end:var(--ams-unordered-list-unordered-list-padding-block-end);padding-block-start:var(--ams-unordered-list-unordered-list-padding-block-start)}:is(.ams-ordered-list,.ams-unordered-list) .ams-unordered-list .ams-unordered-list__item{margin-inline-start:var(--ams-unordered-list-unordered-list-item-margin-inline-start);padding-inline-start:var(--ams-unordered-list-unordered-list-item-padding-inline-start)}/*# sourceMappingURL=unordered-list.css.map */

package/dist/unordered-list/unordered-list.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/components/unordered-list/unordered-list.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAgBA,oBACE,aACA,kCCRA,kCACA,2BACA,8BACA,sBDJA,sBACA,gBACA,eACA,uBAaF,yDACE,sCACA,kDACA,8CACA,kDACA,kDACA,0DAGA,mFACE,uEACA,yEAIJ,wEACE,8CAGF,gEACE,oDACA,wDAIF,+DACE,yEAEA,yFACE,sFACA","file":"unordered-list.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/components/unordered-list/unordered-list.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAcA,oBACE,aACA,kCCNA,kCACA,2BACA,8BACA,sBDLA,sBACA,gBACA,eACA,uBAWF,yDACE,sCACA,kDACA,8CACA,kDACA,kDACA,0DAEA,mFACE,uEACA,yEAIJ,wEACE,8CAGF,gEACE,oDACA,wDAGF,+DACE,iDACA,yEACA,6EACA,iFAEA,yFACE,sFACA","file":"unordered-list.css"}

package/package.json

@@ -1,10 +1,15 @@
 {
-  "version": "0.11.1",
-  "author": "Community for NL Design System",
-  "description": "CSS files for components for the City of Amsterdam based on the NL Design System architecture",
+  "version": "0.12.0",
+  "author": "Design System Team, City of Amsterdam <designsystem@amsterdam.nl>",
+  "description": "Stylesheets for all components from the Amsterdam Design System and some general utilities. Use it to apply the visual design of the City of Amsterdam to your HTML elements or non-React components.",
+  "homepage": "https://designsystem.amsterdam/",
   "license": "EUPL-1.2",
   "name": "@amsterdam/design-system-css",
   "keywords": [
+    "amsterdam",
+    "amsterdam-design-system",
+    "css",
+    "design-system",
     "nl-design-system"
   ],
   "private": false,
@@ -14,11 +19,11 @@
     "directory": "packages/css"
   },
   "devDependencies": {
-    "sass": "1.77.8"
+    "sass": "1.80.3"
   },
   "peerDependencies": {
-    "@amsterdam/design-system-tokens": "0.11.0",
-    "@amsterdam/design-system-assets": "0.2.1"
+    "@amsterdam/design-system-tokens": "0.12.0",
+    "@amsterdam/design-system-assets": "0.2.2"
   },
   "scripts": {
     "build": "sass src/components:dist/ --style=compressed",

package/src/components/accordion/accordion.scss

@@ -19,9 +19,16 @@
   margin-inline: 0;
 }
 
+@mixin reset-button {
+  border: 0;
+  margin-block: 0; // [1]
+  margin-inline: 0; // [1]
+
+  // [1] Remove the margin in older Safari.
+}
+
 .ams-accordion__button {
   background-color: transparent;
-  border: 0;
   color: var(--ams-accordion-button-color);
   cursor: pointer;
   display: flex;
@@ -35,6 +42,8 @@
   padding-inline: var(--ams-accordion-button-padding-inline);
   text-align: start;
 
+  @include reset-button;
+
   &:focus {
     outline-offset: var(--ams-accordion-button-focus-outline-offset);
   }

package/src/components/action-group/README.md

@@ -0,0 +1,14 @@
+<!-- @license CC0-1.0 -->
+
+# Action Group
+
+Groups one or more related actions and manages their layout.
+
+## How to use
+
+- Both a [Button](?path=/docs/components-buttons-button--docs) and a [Link](?path=/docs/components-navigation-link--docs) can provide an ‘action’ in this context.
+- If two or more buttons or links are in a row, put the one for the primary action first and the other buttons behind it.
+- Sighted users will read the primary action first, in line with the natural reading order.
+  The same goes for users of screen readers, who will hear the primary action first, and users of a keyboard, who will focus the primary action first.
+- Also, this approach keeps the order of buttons consistent on both narrow and wide screens: if the buttons do not fit next to each other, they get stacked vertically with the primary action on top.
+- Replace the default ’group’ role with `role="toolbar"` for button toolbars.

package/src/components/action-group/action-group.scss

@@ -0,0 +1,15 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+.ams-action-group {
+  align-items: baseline;
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: var(--ams-action-group-gap);
+
+  > * {
+    flex: auto;
+  }
+}

package/src/components/avatar/README.md

@@ -9,7 +9,7 @@ A circular badge representing a person.
 The avatar contains 1 or 2 initial letters from the person's full name, a picture, or a generic icon.
 The default background colour is dark blue.
 
-## Usage
+## Guidelines
 
-Display an avatar for the person currently using the application,
-or to associate a person with a content item.
+- Display an avatar for the person currently using the application,
+  or to associate a person with a content item.

package/src/components/avatar/avatar.scss

@@ -20,6 +20,15 @@
   }
 }
 
+.ams-avatar:not(.ams-avatar--has-image) {
+  @media (forced-colors: active) {
+    border-style: solid;
+    border-width: var(--ams-avatar-forced-colors-border-width);
+    padding-block: calc(var(--ams-avatar-padding-block) - var(--ams-avatar-forced-colors-border-width));
+    padding-inline: calc(var(--ams-avatar-padding-inline) - var(--ams-avatar-forced-colors-border-width));
+  }
+}
+
 .ams-avatar--has-image {
   inline-size: calc(var(--ams-avatar-line-height) * var(--ams-avatar-font-size) + 2 * var(--ams-avatar-padding-inline));
   overflow: hidden;

package/src/components/blockquote/blockquote.scss

@@ -21,6 +21,10 @@
   line-height: var(--ams-blockquote-line-height);
   quotes: "“" "”";
 
+  @include hyphenation;
+  @include text-rendering;
+  @include reset;
+
   &::before {
     content: open-quote;
   }
@@ -28,10 +32,6 @@
   &::after {
     content: close-quote;
   }
-
-  @include hyphenation;
-  @include text-rendering;
-  @include reset;
 }
 
 .ams-blockquote--inverse-color {

package/src/components/breadcrumb/README.md

@@ -7,14 +7,12 @@ Users can use it to navigate.
 
 ## Guidelines
 
-### Use like this
+- Only use the breadcrumb trail if it adds something functional for the user and the structure is ‘static’.
+- Do not display the breadcrumb trail on a form page.
+  It distracts the user from their task, or one can accidentally interpret it as a Progress Indicator.
+- This is a secondary navigation pattern.
+  It can’t replace the main navigation.
 
-Only use the breadcrumb trail if it adds something functional for the user and the structure is ‘static’.
+### Using links with routing libraries
 
-### Avoid this
-
-Do not display the breadcrumb trail on a form page.
-It distracts the user from their task, or one can accidentally interpret it as a Progress Indicator.
-
-It is a secondary navigation pattern.
-It can’t replace the main navigation.
+Check out the [developer guide](/docs/docs-developer-guide-routing-libraries--docs) on how to integrate links with external routing libraries.

package/src/components/breakout/README.md

@@ -0,0 +1,5 @@
+<!-- @license CC0-1.0 -->
+
+# Breakout
+
+A composition that lets a figure – e.g. an image, video or map – break out of a Spotlight.

package/src/components/breakout/breakout.scss

@@ -0,0 +1,163 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@import "../../common/breakpoint";
+@import "../grid/grid";
+@import "../grid/mixins";
+
+$ams-breakout-row-span-max: 4;
+
+.ams-breakout {
+  @include ams-grid;
+}
+
+// Grid gap
+
+.ams-breakout--gap-vertical--none {
+  @include ams-grid--gap-vertical--none;
+}
+
+.ams-breakout--gap-vertical--small {
+  @include ams-grid--gap-vertical--small;
+}
+
+.ams-breakout--gap-vertical--large {
+  @include ams-grid--gap-vertical--large;
+}
+
+// Grid padding
+
+.ams-breakout--padding-bottom--small {
+  @include ams-grid--padding-bottom--small;
+}
+
+.ams-breakout--padding-bottom--medium {
+  @include ams-grid--padding-bottom--medium;
+}
+
+.ams-breakout--padding-bottom--large {
+  @include ams-grid--padding-bottom--large;
+}
+
+.ams-breakout--padding-top--small {
+  @include ams-grid--padding-top--small;
+}
+
+.ams-breakout--padding-top--medium {
+  @include ams-grid--padding-top--medium;
+}
+
+.ams-breakout--padding-top--large {
+  @include ams-grid--padding-top--large;
+}
+
+.ams-breakout--padding-vertical--small {
+  @include ams-grid--padding-vertical--small;
+}
+
+.ams-breakout--padding-vertical--medium {
+  @include ams-grid--padding-vertical--medium;
+}
+
+.ams-breakout--padding-vertical--large {
+  @include ams-grid--padding-vertical--large;
+}
+
+// Column span
+// The order of these declaration blocks ensures the intended specificity.
+
+.ams-breakout__cell--col-span-all {
+  @include ams-grid__cell--span-all;
+}
+
+@for $i from 1 through $ams-grid-column-count {
+  .ams-breakout__cell--col-span-#{$i} {
+    @include ams-grid__cell--span($i);
+  }
+
+  .ams-breakout__cell--col-start-#{$i} {
+    @include ams-grid__cell--start($i);
+  }
+}
+
+@media screen and (min-width: $ams-breakpoint-medium) {
+  @for $i from 1 through $ams-grid-column-count {
+    .ams-breakout__cell--col-span-#{$i}-medium {
+      @include ams-grid__cell--span-medium($i);
+    }
+
+    .ams-breakout__cell--col-start-#{$i}-medium {
+      @include ams-grid__cell--start-medium($i);
+    }
+  }
+}
+
+@media screen and (min-width: $ams-breakpoint-wide) {
+  @for $i from 1 through $ams-grid-column-count {
+    .ams-breakout__cell--col-span-#{$i}-wide {
+      @include ams-grid__cell--span-wide($i);
+    }
+
+    .ams-breakout__cell--col-start-#{$i}-wide {
+      @include ams-grid__cell--start-wide($i);
+    }
+  }
+}
+
+// Has content
+
+.ams-breakout__cell--has-figure {
+  align-self: end;
+}
+
+.ams-breakout__cell--has-spotlight {
+  display: grid; /* Stretches the empty Spotlight vertically. */
+  margin-block: calc(var(--ams-space-grid-md) * -1);
+  margin-inline: calc(var(--ams-space-grid-lg) * -1);
+
+  .ams-breakout--gap-vertical--small > & {
+    margin-block: calc(var(--ams-space-grid-sm) * -1);
+  }
+
+  .ams-breakout--gap-vertical--large > & {
+    margin-block: calc(var(--ams-space-grid-lg) * -1);
+  }
+}
+
+// Row span
+
+@for $i from 1 through $ams-breakout-row-span-max {
+  .ams-breakout__cell--row-span-#{$i} {
+    grid-row-end: span $i;
+  }
+
+  .ams-breakout__cell--row-start-#{$i} {
+    grid-row-start: $i;
+  }
+}
+
+@media screen and (min-width: $ams-breakpoint-medium) {
+  @for $i from 1 through $ams-breakout-row-span-max {
+    .ams-breakout__cell--row-span-#{$i}-medium {
+      grid-row-end: span $i;
+    }
+
+    .ams-breakout__cell--row-start-#{$i}-medium {
+      grid-row-start: $i;
+    }
+  }
+}
+
+@media screen and (min-width: $ams-breakpoint-wide) {
+  @for $i from 1 through $ams-breakout-row-span-max {
+    .ams-breakout__cell--row-span-#{$i}-wide {
+      grid-row-end: span $i;
+    }
+
+    .ams-breakout__cell--row-start-#{$i}-wide {
+      grid-row-start: $i;
+    }
+  }
+}

package/src/components/button/README.md

@@ -6,11 +6,12 @@ Allows the user to perform actions and operate the user interface.
 
 ## Guidelines
 
-- A short label text that describes the function of the button.
-- A clear contrasting colour scheme so that it is easy to recognize and quickly locate.
-- Use the correct type of button for the corresponding application.
-  For example, a button within a form must always be of the type `submit`.
+- Choose a short label that describes the function of the button.
+- Use the correct type of button for the corresponding application, e.g. `type="submit"` for the primary form button.
 - Make sure one can operate a button through a keyboard.
+- Wrap 2 or more consecutive buttons and/or links in an [Action Group](?path=/docs/components-buttons-action-group--docs).
+- Primary, secondary and tertiary buttons can be used side by side.
+  Skipping levels is allowed.
 
 ## Relevant WCAG requirements
 

package/src/components/button/button.scss

@@ -7,6 +7,10 @@
 
 @mixin reset-button {
   border: 0;
+  margin-block: 0; // [1]
+  margin-inline: 0; // [1]
+
+  // [1] Remove the margin in older Safari.
 }
 
 .ams-button {
@@ -22,13 +26,13 @@
   padding-inline: var(--ams-button-padding-inline);
   touch-action: manipulation;
 
+  @include text-rendering;
+  @include reset-button;
+
   &:disabled,
   &[aria-disabled="true"] {
     cursor: var(--ams-button-disabled-cursor);
   }
-
-  @include text-rendering;
-  @include reset-button;
 }
 
 @mixin ams-button-forced-color-mode {
@@ -42,6 +46,8 @@
   box-shadow: var(--ams-button-primary-box-shadow);
   color: var(--ams-button-primary-color);
 
+  @include ams-button-forced-color-mode;
+
   &:disabled,
   [aria-disabled="true"] {
     background-color: var(--ams-button-primary-disabled-background-color);
@@ -52,8 +58,6 @@
     background-color: var(--ams-button-primary-hover-background-color);
     box-shadow: var(--ams-button-primary-hover-box-shadow);
   }
-
-  @include ams-button-forced-color-mode;
 }
 
 .ams-button--secondary {
@@ -61,6 +65,8 @@
   box-shadow: var(--ams-button-secondary-box-shadow);
   color: var(--ams-button-secondary-color);
 
+  @include ams-button-forced-color-mode;
+
   &:disabled,
   [aria-disabled="true"] {
     background-color: var(--ams-button-secondary-disabled-background-color);
@@ -72,8 +78,6 @@
     box-shadow: var(--ams-button-secondary-hover-box-shadow);
     color: var(--ams-button-secondary-hover-color);
   }
-
-  @include ams-button-forced-color-mode;
 }
 
 .ams-button--tertiary {
@@ -91,3 +95,8 @@
     color: var(--ams-button-tertiary-hover-color);
   }
 }
+
+.ams-button--icon-only {
+  padding-block: var(--ams-button-icon-only-padding-block);
+  padding-inline: var(--ams-button-icon-only-padding-inline);
+}

package/src/components/card/README.md

@@ -19,8 +19,12 @@ The link is mandatory.
   For referencing a thematic page, use a [top task link](/docs/components-navigation-top-task-link--docs).
   You can also use a [regular link](/docs/components-navigation-link--docs).
 
-## Screen readers
+### Screen readers
 
 With a screen reader, you can navigate using headings and links in a document.
 The title of a card is a link within a heading, allowing you to utilize both navigation methods.
 A screen reader reads the title first, followed by the rest of the content.
+
+### Using links with routing libraries
+
+Check out the [developer guide](/docs/docs-developer-guide-routing-libraries--docs) on how to integrate links with external routing libraries.

package/src/components/checkbox/README.md

@@ -27,4 +27,4 @@ It is written in the first person when asking the user to agree to the terms and
 
 - [WCAG 1.3.5](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html): It is clear for both users and programmatically what the purpose of a form field is.
 
-Checkbox is an interactive element; therefore, [the general requirements and guidelines for interactivity](/docs/docs-developer-guide-interactivity--docs) apply.
+Checkbox is an interactive element, and the [general requirements and guidelines for interactivity](/docs/docs-developer-guide-interactivity--docs) apply.

package/src/components/checkbox/checkbox.scss

@@ -44,6 +44,8 @@
   line-height: var(--ams-checkbox-line-height);
   outline-offset: var(--ams-checkbox-outline-offset);
 
+  @include text-rendering;
+
   &:hover {
     color: var(--ams-checkbox-hover-color);
     text-decoration-line: underline;
@@ -55,8 +57,6 @@
       border-width: var(--ams-checkbox-checkmark-hover-border-width);
     }
   }
-
-  @include text-rendering;
 }
 
 // Default checked

package/src/components/description-list/README.md

@@ -2,15 +2,16 @@
 
 # Description List
 
-A collection of terms and their details.
+A collection of terms and their descriptions.
 
 ## Design
 
-On a narrow screen, details appear indented below their term.
-From the medium breakpoint, terms and details appear next to each other.
-The column for the details is twice as wide as the one for the term.
+In a narrow window, descriptions appear indented below their term.
+After that, they display in a two-column layout.
+The column for the terms is as wide as the longest term, without wrapping.
+Its width can be adjusted to be ‘large’ (50%), ‘medium’ (33%), or ‘small’ (20%), which also allows the terms to wrap.
 
-Details are set in bold text.
+The term is set in bold text.
 
 ## References