@amsterdam/design-system-css 0.7.1 → 0.9.0

package/dist/tabs/tabs.css

@@ -1 +1 @@
-.ams-tabs__list{border-bottom:var(--ams-tabs-list-border-bottom);display:flex;overflow-x:auto}.ams-tabs__button{background-color:var(--ams-tabs-button-background-color);border:var(--ams-tabs-button-border);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)}.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__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 */

package/dist/tabs/tabs.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/components/tabs/tabs.scss"],"names":[],"mappings":"AAOA,gBACE,iDACA,aACA,gBAGF,kBACE,yDACA,qCACA,mCACA,qCACA,+CACA,2CACA,+CACA,+CACA,qDACA,mDACA,qDAEA,2BACE,4CACA,6CAGF,6DACE,mDACA,yCAGF,sCACE,kEACA","file":"tabs.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/components/tabs/tabs.scss"],"names":[],"mappings":"AAYA,gBACE,uDACA,uDACA,aACA,gBAGF,kBACE,mCACA,qCACA,+CACA,2CACA,+CACA,+CACA,qDACA,mDACA,qDApBA,+BACA,SAuBA,2BACE,4CACA,6CAGF,6DACE,mDACA,yCAGF,sCACE,kEACA","file":"tabs.css"}

package/dist/text-area/text-area.css

@@ -1 +1 @@
-.ams-text-area{border:none;box-shadow:var(--ams-text-area-box-shadow);color:var(--ams-text-area-color);font-family:var(--ams-text-area-font-family);font-size:var(--ams-text-area-font-size);font-weight:var(--ams-text-area-font-weight);line-height:var(--ams-text-area-line-height);max-width:100%;min-height:var(--ams-text-area-min-height);outline-offset:var(--ams-text-area-outline-offset);padding-block:var(--ams-text-area-padding-block);padding-inline:var(--ams-text-area-padding-inline);touch-action:manipulation;width:100%;box-sizing:border-box;margin-block:0;-webkit-text-size-adjust:100%}.ams-text-area:hover{box-shadow:var(--ams-text-area-hover-box-shadow)}.ams-text-area::placeholder{color:var(--ams-text-area-placeholder-color)}.ams-text-area:disabled{background-color:var(--ams-text-area-disabled-background-color);box-shadow:var(--ams-text-area-disabled-box-shadow);color:var(--ams-text-area-disabled-color);cursor:var(--ams-text-area-disabled-cursor)}.ams-text-area:invalid,.ams-text-area[aria-invalid=true]{box-shadow:var(--ams-text-area-invalid-box-shadow)}.ams-text-area:invalid:hover,.ams-text-area[aria-invalid=true]:hover{box-shadow:var(--ams-text-area-invalid-hover-box-shadow)}.ams-text-area--resize-none{resize:none}.ams-text-area--resize-horizontal{resize:inline}.ams-text-area--resize-vertical{resize:block}.ams-text-area--cols{width:auto}/*# sourceMappingURL=text-area.css.map */
+.ams-text-area{background-color:var(--ams-text-area-background-color);box-shadow:var(--ams-text-area-box-shadow);color:var(--ams-text-area-color);font-family:var(--ams-text-area-font-family);font-size:var(--ams-text-area-font-size);font-weight:var(--ams-text-area-font-weight);inline-size:100%;line-height:var(--ams-text-area-line-height);max-inline-size:100%;min-block-size:var(--ams-text-area-min-block-size);outline-offset:var(--ams-text-area-outline-offset);padding-block:var(--ams-text-area-padding-block);padding-inline:var(--ams-text-area-padding-inline);touch-action:manipulation;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;-webkit-appearance:none;appearance:none;border:0;border-radius:0;box-sizing:border-box;margin-block:0}.ams-text-area:hover{box-shadow:var(--ams-text-area-hover-box-shadow)}.ams-text-area::placeholder{color:var(--ams-text-area-placeholder-color);opacity:100%}.ams-text-area:disabled{background-color:var(--ams-text-area-disabled-background-color);box-shadow:var(--ams-text-area-disabled-box-shadow);color:var(--ams-text-area-disabled-color);cursor:var(--ams-text-area-disabled-cursor)}.ams-text-area:invalid,.ams-text-area[aria-invalid=true]{box-shadow:var(--ams-text-area-invalid-box-shadow)}.ams-text-area:invalid:hover,.ams-text-area[aria-invalid=true]:hover{box-shadow:var(--ams-text-area-invalid-hover-box-shadow)}.ams-text-area--resize-none{resize:none}.ams-text-area--resize-horizontal{resize:inline}.ams-text-area--resize-vertical{resize:block}.ams-text-area--cols{inline-size:auto}/*# sourceMappingURL=text-area.css.map */

package/dist/text-area/text-area.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/components/text-area/text-area.scss"],"names":[],"mappings":"AAWA,eACE,YACA,2CACA,iCACA,6CACA,yCACA,6CACA,6CACA,eACA,2CACA,mDACA,iDACA,mDACA,0BACA,WAnBA,sBACA,eACA,8BAqBA,qBACE,iDAIJ,4BACE,6CAGF,wBACE,gEACA,oDACA,0CACA,4CAGF,yDAEE,mDAEA,qEAEE,yDAIJ,4BACE,YAGF,kCACE,cAGF,gCACE,aAGF,qBACE","file":"text-area.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/components/text-area/text-area.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAgBA,eACE,uDACA,2CACA,iCACA,6CACA,yCACA,6CACA,iBACA,6CACA,qBACA,mDACA,mDACA,iDACA,mDACA,0BCpBA,kCACA,2BACA,8BACA,sBDLA,wBACA,gBACA,SACA,gBACA,sBACA,eAsBA,qBACE,iDAIJ,4BACE,6CACA,aAGF,wBACE,gEACA,oDACA,0CACA,4CAGF,yDAEE,mDAEA,qEAEE,yDAIJ,4BACE,YAGF,kCACE,cAGF,gCACE,aAGF,qBACE","file":"text-area.css"}

package/dist/text-input/text-input.css

@@ -1 +1 @@
-.ams-text-input{border:none;box-shadow:var(--ams-text-input-box-shadow);color:var(--ams-text-input-color);font-family:var(--ams-text-input-font-family);font-size:var(--ams-text-input-font-size);font-weight:var(--ams-text-input-font-weight);line-height:var(--ams-text-input-line-height);outline-offset:var(--ams-text-input-outline-offset);padding-block:var(--ams-text-input-padding-block);padding-inline:var(--ams-text-input-padding-inline);touch-action:manipulation;width:100%;box-sizing:border-box;margin-block:0;-webkit-text-size-adjust:100%}.ams-text-input:hover{box-shadow:var(--ams-text-input-hover-box-shadow)}.ams-text-input::placeholder{color:var(--ams-text-input-placeholder-color)}.ams-text-input:disabled{background-color:var(--ams-text-input-disabled-background-color);box-shadow:var(--ams-text-input-disabled-box-shadow);color:var(--ams-text-input-disabled-color);cursor:not-allowed}.ams-text-input:invalid,.ams-text-input[aria-invalid=true]{box-shadow:var(--ams-text-input-invalid-box-shadow)}.ams-text-input:invalid:hover,.ams-text-input[aria-invalid=true]:hover{box-shadow:var(--ams-text-input-invalid-hover-box-shadow)}/*# sourceMappingURL=text-input.css.map */
+.ams-text-input{background-color:var(--ams-text-input-background-color);box-shadow:var(--ams-text-input-box-shadow);color:var(--ams-text-input-color);font-family:var(--ams-text-input-font-family);font-size:var(--ams-text-input-font-size);font-weight:var(--ams-text-input-font-weight);inline-size:100%;line-height:var(--ams-text-input-line-height);outline-offset:var(--ams-text-input-outline-offset);padding-block:var(--ams-text-input-padding-block);padding-inline:var(--ams-text-input-padding-inline);touch-action:manipulation;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;-webkit-appearance:none;appearance:none;border:0;border-radius:0;box-sizing:border-box;margin-block:0}.ams-text-input:hover{box-shadow:var(--ams-text-input-hover-box-shadow)}.ams-text-input::placeholder{color:var(--ams-text-input-placeholder-color);opacity:100%}.ams-text-input:disabled{background-color:var(--ams-text-input-disabled-background-color);box-shadow:var(--ams-text-input-disabled-box-shadow);color:var(--ams-text-input-disabled-color);cursor:not-allowed}.ams-text-input:invalid,.ams-text-input[aria-invalid=true]{box-shadow:var(--ams-text-input-invalid-box-shadow)}.ams-text-input:invalid:hover,.ams-text-input[aria-invalid=true]:hover{box-shadow:var(--ams-text-input-invalid-hover-box-shadow)}/*# sourceMappingURL=text-input.css.map */

package/dist/text-input/text-input.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/components/text-input/text-input.scss"],"names":[],"mappings":"AAWA,gBACE,YACA,4CACA,kCACA,8CACA,0CACA,8CACA,8CACA,oDACA,kDACA,oDACA,0BACA,WAjBA,sBACA,eACA,8BAmBA,sBACE,kDAIJ,6BACE,8CAGF,yBACE,iEACA,qDACA,2CACA,mBAGF,2DAEE,oDAEA,uEAEE","file":"text-input.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/components/text-input/text-input.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAgBA,gBACE,wDACA,4CACA,kCACA,8CACA,0CACA,8CACA,iBACA,8CACA,oDACA,kDACA,oDACA,0BClBA,kCACA,2BACA,8BACA,sBDLA,wBACA,gBACA,SACA,gBACA,sBACA,eAoBA,sBACE,kDAIJ,6BACE,8CACA,aAGF,yBACE,iEACA,qDACA,2CACA,mBAGF,2DAEE,oDAEA,uEAEE","file":"text-input.css"}

package/dist/time-input/time-input.css

@@ -0,0 +1 @@
+.ams-time-input{background-color:var(--ams-time-input-background-color);box-shadow:var(--ams-time-input-box-shadow);color:var(--ams-time-input-color);font-family:var(--ams-time-input-font-family);font-size:var(--ams-time-input-font-size);font-weight:var(--ams-time-input-font-weight);line-height:var(--ams-time-input-line-height);min-block-size:calc(var(--ams-time-input-font-size)*var(--ams-time-input-line-height) + 2*var(--ams-time-input-padding-block));min-inline-size:calc(4ch + 2*var(--ams-time-input-padding-inline));outline-offset:var(--ams-time-input-outline-offset);padding-block:var(--ams-time-input-padding-block);padding-inline:var(--ams-time-input-padding-inline);touch-action:manipulation;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;-webkit-appearance:none;appearance:none;border:0;border-radius:0;box-sizing:border-box;inline-size:auto;margin-block:0}.ams-time-input:hover{box-shadow:var(--ams-time-input-hover-box-shadow)}.ams-time-input::-webkit-calendar-picker-indicator{appearance:none;background-image:var(--ams-time-input-calender-picker-indicator-background-image);cursor:pointer}.ams-time-input:hover::-webkit-calendar-picker-indicator{background-image:var(--ams-time-input-hover-calender-picker-indicator-background-image)}.ams-time-input:disabled{background-color:var(--ams-time-input-disabled-background-color);box-shadow:var(--ams-time-input-disabled-box-shadow);color:var(--ams-time-input-disabled-color);cursor:not-allowed}.ams-time-input:disabled::-webkit-calendar-picker-indicator{background-image:var(--ams-time-input-disabled-calender-picker-indicator-background-image);visibility:visible}.ams-time-input:invalid,.ams-time-input[aria-invalid=true]{box-shadow:var(--ams-time-input-invalid-box-shadow)}.ams-time-input:invalid:hover,.ams-time-input[aria-invalid=true]:hover{box-shadow:var(--ams-time-input-invalid-hover-box-shadow)}/*# sourceMappingURL=time-input.css.map */

package/dist/time-input/time-input.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/components/time-input/time-input.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAiBA,gBACE,wDACA,4CACA,kCACA,8CACA,0CACA,8CACA,8CAGA,+HAKA,mEACA,oDACA,kDACA,oDACA,0BC1BA,kCACA,2BACA,8BACA,sBDLA,wBACA,gBACA,SACA,gBACA,sBACA,iBACA,eA2BA,sBACE,kDAKJ,mDACE,gBACA,kFACA,eAGF,yDACE,wFAGF,yBACE,iEACA,qDACA,2CACA,mBAGF,4DACE,2FACA,mBAGF,2DAEE,oDAEA,uEAEE","file":"time-input.css"}

package/dist/top-task-link/top-task-link.css

@@ -1 +1 @@
-.ams-top-task-link{break-inside:avoid;display:flex;flex-direction:column;gap:.5rem;outline-offset:var(--ams-top-task-link-outline-offset);text-decoration:none}.ams-top-task-link__label{color:var(--ams-top-task-link-label-color);font-family:var(--ams-top-task-link-label-font-family);font-size:var(--ams-top-task-link-label-font-size);font-weight:var(--ams-top-task-link-label-font-weight);line-height:var(--ams-top-task-link-label-line-height);text-decoration-line:var(--ams-top-task-link-label-text-decoration-line);text-decoration-thickness:var(--ams-top-task-link-label-text-decoration-thickness);text-underline-offset:var(--ams-top-task-link-label-text-underline-offset);hyphenate-limit-chars:var(--ams-hyphenation-hyphenate-limit-chars);hyphens:var(--ams-hyphenation-hyphens);overflow-wrap:var(--ams-hyphenation-overflow-wrap);box-sizing:border-box;-webkit-text-size-adjust:100%}.ams-top-task-link:hover .ams-top-task-link__label{color:var(--ams-top-task-link-label-hover-color);text-decoration-line:var(--ams-top-task-link-label-hover-text-decoration-line)}.ams-top-task-link__description{color:var(--ams-top-task-link-description-color);font-family:var(--ams-top-task-link-description-font-family);font-size:var(--ams-top-task-link-description-font-size);font-weight:var(--ams-top-task-link-description-font-weight);line-height:var(--ams-top-task-link-description-line-height);box-sizing:border-box;-webkit-text-size-adjust:100%}/*# sourceMappingURL=top-task-link.css.map */
+.ams-top-task-link{break-inside:avoid;display:flex;flex-direction:column;gap:.5rem;outline-offset:var(--ams-top-task-link-outline-offset);text-decoration:none}.ams-top-task-link__label{color:var(--ams-top-task-link-label-color);font-family:var(--ams-top-task-link-label-font-family);font-size:var(--ams-top-task-link-label-font-size);font-weight:var(--ams-top-task-link-label-font-weight);line-height:var(--ams-top-task-link-label-line-height);text-decoration-line:var(--ams-top-task-link-label-text-decoration-line);text-decoration-thickness:var(--ams-top-task-link-label-text-decoration-thickness);text-underline-offset:var(--ams-top-task-link-label-text-underline-offset);hyphenate-limit-chars:var(--ams-hyphenation-hyphenate-limit-chars);hyphens:var(--ams-hyphenation-hyphens);overflow-wrap:var(--ams-hyphenation-overflow-wrap);text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;box-sizing:border-box}.ams-top-task-link:hover .ams-top-task-link__label{color:var(--ams-top-task-link-label-hover-color);text-decoration-line:var(--ams-top-task-link-label-hover-text-decoration-line)}.ams-top-task-link__description{color:var(--ams-top-task-link-description-color);font-family:var(--ams-top-task-link-description-font-family);font-size:var(--ams-top-task-link-description-font-size);font-weight:var(--ams-top-task-link-description-font-weight);line-height:var(--ams-top-task-link-description-line-height);box-sizing:border-box}/*# sourceMappingURL=top-task-link.css.map */

package/dist/top-task-link/top-task-link.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/components/top-task-link/top-task-link.scss","../../src/common/hyphenation.scss"],"names":[],"mappings":"AAOA,mBACE,mBACA,aACA,sBACA,UACA,uDACA,qBAQF,0BACE,2CACA,uDACA,mDACA,uDACA,uDACA,yEACA,mFACA,2ECvBA,mEACA,uCACA,mDDSA,sBACA,8BAiBF,mDACE,iDACA,+EAGF,gCACE,iDACA,6DACA,yDACA,6DACA,6DA5BA,sBACA","file":"top-task-link.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/components/top-task-link/top-task-link.scss","../../src/common/hyphenation.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAQA,mBACE,mBACA,aACA,sBACA,UACA,uDACA,qBAOF,0BACE,2CACA,uDACA,mDACA,uDACA,uDACA,yEACA,mFACA,2ECvBA,mEACA,uCACA,mDCEA,kCACA,2BACA,8BACA,sBFKA,sBAkBF,mDACE,iDACA,+EAGF,gCACE,iDACA,6DACA,yDACA,6DACA,6DA5BA","file":"top-task-link.css"}

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

@@ -1 +1 @@
-.ams-unordered-list{box-sizing:border-box;list-style:none;margin-block:0;padding-inline-start:0;-webkit-text-size-adjust:100%;display:grid;gap:var(--ams-unordered-list-gap)}.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)}: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{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 */

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/components/unordered-list/unordered-list.scss"],"names":[],"mappings":"AAeA,oBARE,sBACA,gBACA,eACA,uBACA,8BAOA,aACA,kCAIF,yDACE,sCACA,kDACA,8CACA,kDACA,kDACA,0DAGA,mFACE,uEACA,yEAIJ,wEACE,8CAIF,+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":"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"}

package/dist/visually-hidden/visually-hidden.css

@@ -1 +1 @@
-.ams-visually-hidden:not(:active,:focus){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}/*# sourceMappingURL=visually-hidden.css.map */
+.ams-visually-hidden:not(:active,:focus){block-size:1px;clip:rect(0 0 0 0);clip-path:inset(50%);inline-size:1px;overflow:hidden;position:absolute;white-space:nowrap}/*# sourceMappingURL=visually-hidden.css.map */

package/dist/visually-hidden/visually-hidden.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/components/visually-hidden/visually-hidden.scss"],"names":[],"mappings":"AAMA,yCACE,mBACA,qBACA,WACA,gBACA,kBACA,mBACA","file":"visually-hidden.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/components/visually-hidden/visually-hidden.scss"],"names":[],"mappings":"AAMA,yCACE,eACA,mBACA,qBACA,gBACA,gBACA,kBACA","file":"visually-hidden.css"}

package/documentation/coding-conventions.md

@@ -13,8 +13,8 @@ Still, we define its thickness and offset for the initial state.
 ```css
 .ams-link {
   text-decoration: none;
-  text-decoration-thickness: 2px;
-  text-underline-offset: 3px;
+  text-decoration-thickness: 0.125rem;
+  text-underline-offset: 0.1667em;
 
   &:hover {
     text-decoration: underline;
@@ -30,8 +30,20 @@ Still, we define its thickness and offset for the initial state.
 
   &:hover {
     text-decoration: underline;
-    text-decoration-thickness: 2px;
-    text-underline-offset: 3px;
+    text-decoration-thickness: 0.125rem;
+    text-underline-offset: 0.1667em;
   }
 }
 ```
+
+## Use mixins for patterns and resets
+
+We use Sass mixins to extract common patterns, especially if they need more than 1 declaration.
+We collect reset styles in mixins as well.
+Both the name of the mixins and their documentation help explain the approach.
+
+## Form validation styling
+
+We style both the native invalid state (`:invalid`) as the invalid state you can set manually, using `aria-invalid`.
+We’re currently not sure how our users will implement forms, which is why both options are supported.
+[Native form validation isn’t without its issues](https://adrianroselli.com/2019/02/avoid-default-field-validation.html) though, so we might only support manual validation in the future.

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.7.1",
+  "version": "0.9.0",
   "author": "Community for NL Design System",
   "description": "CSS files for components for the City of Amsterdam based on the NL Design System architecture",
   "license": "EUPL-1.2",
@@ -14,11 +14,11 @@
     "directory": "packages/css"
   },
   "devDependencies": {
-    "sass": "1.72.0",
-    "@amsterdam/design-system-tokens": "0.7.1"
+    "sass": "1.77.4"
   },
-  "dependencies": {
-    "@utrecht/components": "3.0.0"
+  "peerDependencies": {
+    "@amsterdam/design-system-tokens": "0.9.0",
+    "@amsterdam/design-system-assets": "0.2.1"
   },
   "scripts": {
     "build": "sass src/components:dist/ --style=compressed",

package/src/common/hide-input.scss

@@ -5,7 +5,7 @@
 
 @mixin hide-input {
   appearance: none;
+  inline-size: 0; // Make sure the input doesn’t take up space on iOS
   margin-block: 0;
   margin-inline: 0;
-  opacity: 0%; /* to hide native input field in older iOS */
 }

package/src/common/text-rendering.scss

@@ -0,0 +1,15 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+/**
+ * Prioritizes legibility over speed when rendering text
+ * and disables text inflation on some mobile devices.
+ */
+@mixin text-rendering {
+  text-rendering: optimizeLegibility;
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+}

package/src/components/accordion/accordion.scss

@@ -3,16 +3,22 @@
  * Copyright Gemeente Amsterdam
  */
 
+@import "../../common/text-rendering";
+
+.ams-accordion {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ams-accordion-gap);
+
+  @include text-rendering;
+}
+
 .ams-accordion__header {
   display: flex;
   margin-block: 0;
   margin-inline: 0;
 }
 
-@mixin reset {
-  -webkit-text-size-adjust: 100%;
-}
-
 .ams-accordion__button {
   background-color: transparent;
   border: 0;
@@ -22,34 +28,36 @@
   font-family: var(--ams-accordion-button-font-family);
   font-size: var(--ams-accordion-button-font-size);
   font-weight: var(--ams-accordion-button-font-weight);
-  justify-content: space-between;
+  gap: var(--ams-accordion-button-gap);
+  inline-size: 100%;
   line-height: var(--ams-accordion-button-line-height);
   padding-block: var(--ams-accordion-button-padding-block);
   padding-inline: var(--ams-accordion-button-padding-inline);
-  width: 100%;
 
   &:focus {
     outline-offset: var(--ams-accordion-button-focus-outline-offset);
   }
 
   &:hover {
-    box-shadow: var(--ams-accordion-button-hover-box-shadow);
+    color: var(--ams-accordion-button-hover-color);
   }
+}
 
-  svg {
-    transform: rotate(0deg);
-    transition: transform 0.3s ease;
+.ams-accordion__icon svg {
+  rotate: 0deg;
+  transition: none;
 
-    @media (prefers-reduced-motion) {
-      transition: none;
-    }
+  [aria-expanded="true"] & {
+    rotate: -180deg;
   }
 
-  @include reset;
+  @media not (prefers-reduced-motion) {
+    transition: rotate 0.3s ease;
+  }
 }
 
 .ams-accordion__button[aria-expanded="true"] svg {
-  transform: rotate(180deg);
+  rotate: -180deg;
 }
 
 .ams-accordion__panel {

package/src/components/avatar/avatar.scss

@@ -9,11 +9,11 @@
   display: inline-flex;
   font-family: var(--ams-avatar-font-family);
   font-size: var(--ams-avatar-font-size);
+  inline-size: calc(var(--ams-avatar-line-height) * var(--ams-avatar-font-size));
   line-height: var(--ams-avatar-line-height);
   padding-block: var(--ams-avatar-padding-block);
   padding-inline: var(--ams-avatar-padding-inline);
   place-content: center;
-  width: calc(var(--ams-avatar-line-height) * var(--ams-avatar-font-size));
 
   svg {
     fill: currentColor;
@@ -21,11 +21,11 @@
 }
 
 .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;
   padding-block: 0;
   padding-inline: 0;
   vertical-align: middle; /* Remove ‘phantom’ white space when image doesn’t load */
-  width: calc(var(--ams-avatar-line-height) * var(--ams-avatar-font-size) + 2 * var(--ams-avatar-padding-inline));
 }
 
 .ams-avatar--blue {

package/src/components/badge/badge.scss

@@ -12,16 +12,16 @@
   padding-inline: var(--ams-badge-padding-inline);
 }
 
+.ams-badge--black {
+  background-color: var(--ams-badge-black-background-color);
+  color: var(--ams-badge-black-color);
+}
+
 .ams-badge--blue {
   background-color: var(--ams-badge-blue-background-color);
   color: var(--ams-badge-blue-color);
 }
 
-.ams-badge--dark-blue {
-  background-color: var(--ams-badge-dark-blue-background-color);
-  color: var(--ams-badge-dark-blue-color);
-}
-
 .ams-badge--dark-green {
   background-color: var(--ams-badge-dark-green-background-color);
   color: var(--ams-badge-dark-green-color);
@@ -32,6 +32,26 @@
   color: var(--ams-badge-green-color);
 }
 
+.ams-badge--grey-1 {
+  background-color: var(--ams-badge-grey-1-background-color);
+  color: var(--ams-badge-grey-1-color);
+}
+
+.ams-badge--grey-2 {
+  background-color: var(--ams-badge-grey-2-background-color);
+  color: var(--ams-badge-grey-2-color);
+}
+
+.ams-badge--grey-3 {
+  background-color: var(--ams-badge-grey-3-background-color);
+  color: var(--ams-badge-grey-3-color);
+}
+
+.ams-badge--light-blue {
+  background-color: var(--ams-badge-light-blue-background-color);
+  color: var(--ams-badge-light-blue-color);
+}
+
 .ams-badge--magenta {
   background-color: var(--ams-badge-magenta-background-color);
   color: var(--ams-badge-magenta-color);
@@ -47,6 +67,16 @@
   color: var(--ams-badge-purple-color);
 }
 
+.ams-badge--red {
+  background-color: var(--ams-badge-red-background-color);
+  color: var(--ams-badge-red-color);
+}
+
+.ams-badge--white {
+  background-color: var(--ams-badge-white-background-color);
+  color: var(--ams-badge-white-color);
+}
+
 .ams-badge--yellow {
   background-color: var(--ams-badge-yellow-background-color);
   color: var(--ams-badge-yellow-color);

package/src/components/blockquote/blockquote.scss

@@ -4,12 +4,12 @@
  */
 
 @import "../../common/hyphenation";
+@import "../../common/text-rendering";
 
 @mixin reset {
   box-sizing: border-box;
   margin-block: 0;
   margin-inline: 0;
-  -webkit-text-size-adjust: 100%;
 }
 
 .ams-blockquote {
@@ -30,6 +30,7 @@
   }
 
   @include hyphenation;
+  @include text-rendering;
   @include reset;
 }
 

package/src/components/breadcrumb/breadcrumb.scss

@@ -3,11 +3,12 @@
  * Copyright Gemeente Amsterdam
  */
 
+@import "../../common/text-rendering";
+
 @mixin reset {
   box-sizing: border-box;
   margin-block: 0;
   padding-inline: 0;
-  -webkit-text-size-adjust: 100%;
 }
 
 .ams-breadcrumb {
@@ -21,6 +22,7 @@
   break-after: avoid;
   break-inside: avoid;
 
+  @include text-rendering;
   @include reset;
 }
 
@@ -31,22 +33,22 @@
 .ams-breadcrumb__item:not(:last-child)::after {
   background-image: var(--ams-breadcrumb-separator-background-image);
   background-repeat: no-repeat;
+  block-size: 1ex;
   content: "";
   display: inline-block;
-  height: 1ex;
+  inline-size: 1ex;
   margin-inline: 0.5rem;
-  width: 1ex;
 }
 
 .ams-breadcrumb__link {
-  color: var(--ams-breadcrumb-item-link-color);
-  outline-offset: var(--ams-breadcrumb-item-link-outline-offset);
-  text-decoration-line: var(--ams-breadcrumb-item-link-text-decoration-line);
-  text-decoration-thickness: var(--ams-breadcrumb-item-link-text-decoration-thickness);
-  text-underline-offset: var(--ams-breadcrumb-item-link-text-underline-offset);
+  color: var(--ams-breadcrumb-link-color);
+  outline-offset: var(--ams-breadcrumb-link-outline-offset);
+  text-decoration-line: var(--ams-breadcrumb-link-text-decoration-line);
+  text-decoration-thickness: var(--ams-breadcrumb-link-text-decoration-thickness);
+  text-underline-offset: var(--ams-breadcrumb-link-text-underline-offset);
 
   &:hover {
-    color: var(--ams-breadcrumb-item-link-hover-color);
-    text-decoration-line: var(--ams-breadcrumb-item-link-hover-text-decoration-line);
+    color: var(--ams-breadcrumb-link-hover-color);
+    text-decoration-line: var(--ams-breadcrumb-link-hover-text-decoration-line);
   }
 }

package/src/components/button/button.scss

@@ -3,17 +3,19 @@
  * Copyright Gemeente Amsterdam
  */
 
-@mixin reset {
-  -webkit-text-size-adjust: 100%;
+@import "../../common/text-rendering";
+
+@mixin reset-button {
+  border: 0;
 }
 
 .ams-button {
-  border: none;
   cursor: var(--ams-button-cursor);
   display: inline-flex;
   font-family: var(--ams-button-font-family);
   font-size: var(--ams-button-font-size);
   gap: var(--ams-button-gap);
+  justify-content: center;
   line-height: var(--ams-button-line-height);
   outline-offset: var(--ams-button-outline-offset);
   padding-block: var(--ams-button-padding-block);
@@ -25,12 +27,13 @@
     cursor: var(--ams-button-disabled-cursor);
   }
 
-  @include reset;
+  @include text-rendering;
+  @include reset-button;
 }
 
 @mixin ams-button-forced-color-mode {
   @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
-    border: 2px solid ButtonBorder; // add border because forced colors changes box-shadow to none
+    border: var(--ams-button-forced-color-mode-border); // add border because forced colors changes box-shadow to none
   }
 }
 

package/src/components/card/card.scss

@@ -14,7 +14,7 @@
   &:has(:focus-visible) {
     outline-color: -webkit-focus-ring-color;
     outline-style: auto;
-    outline-width: 1px;
+    outline-width: 0.0625rem;
   }
 
   /*

package/src/components/checkbox/checkbox.scss

@@ -5,6 +5,7 @@
 
 @import "../../common/input-label-focus";
 @import "../../common/hide-input";
+@import "../../common/text-rendering";
 
 .ams-checkbox__input {
   @include hide-input;
@@ -13,29 +14,25 @@
 
 .ams-checkbox__checkmark {
   align-items: center;
+  block-size: calc(var(--ams-checkbox-font-size) * var(--ams-checkbox-line-height));
   display: flex;
   flex-shrink: 0;
-  height: calc(var(--ams-checkbox-font-size) * var(--ams-checkbox-line-height));
-  width: 1.5rem;
+  inline-size: 1.5rem;
 
   &::after {
     background-position: center;
     background-repeat: no-repeat;
     background-size: 1rem;
+    block-size: 1.5rem;
     border-color: var(--ams-checkbox-checkmark-border-color);
     border-style: solid;
-    border-width: 0.125rem;
+    border-width: var(--ams-checkbox-checkmark-border-width);
     box-sizing: border-box;
     content: "";
-    height: 1.5rem;
-    width: 100%;
+    inline-size: 100%;
   }
 }
 
-@mixin reset {
-  -webkit-text-size-adjust: 100%;
-}
-
 .ams-checkbox__label {
   color: var(--ams-checkbox-color);
   cursor: pointer;
@@ -50,16 +47,16 @@
   &:hover {
     color: var(--ams-checkbox-hover-color);
     text-decoration-line: underline;
-    text-decoration-thickness: 0.125rem;
+    text-decoration-thickness: var(--ams-checkbox-hover-text-decoration-thickness);
     text-underline-offset: 0.375rem;
 
     .ams-checkbox__checkmark::after {
       border-color: var(--ams-checkbox-checkmark-hover-border-color);
-      border-width: 0.1875rem;
+      border-width: var(--ams-checkbox-checkmark-hover-border-width);
     }
   }
 
-  @include reset;
+  @include text-rendering;
 }
 
 // Default checked
@@ -67,7 +64,7 @@
   + .ams-checkbox__label .ams-checkbox__checkmark::after {
     background-color: var(--ams-checkbox-checkmark-checked-background-color);
     background-image: var(--ams-checkbox-checkmark-checked-background-image);
-    border: none;
+    border: 0;
   }
 }
 
@@ -79,7 +76,7 @@
     background-position: center;
     background-repeat: no-repeat;
     background-size: 1rem;
-    border: none;
+    border: 0;
   }
 }
 
@@ -99,7 +96,7 @@
 
     .ams-checkbox__checkmark::after {
       border-color: var(--ams-checkbox-checkmark-disabled-border-color);
-      border-width: 0.125rem;
+      border-width: var(--ams-checkbox-checkmark-disabled-border-width);
     }
   }
 }

package/src/components/date-input/README.md

@@ -0,0 +1,11 @@
+<!-- @license CC0-1.0 -->
+
+# Date Input
+
+Helps users enter a date.
+
+## Visual considerations
+
+This component uses a native date input, which is styled differently in different browsers and operating systems.
+Recreating the native functionality is quite difficult and prone to accessibility errors, which is why we’ve chosen not to do that.
+This does mean that this component does not look identical on all browsers and operating systems.

package/src/components/date-input/date-input.scss

@@ -0,0 +1,77 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@import "../../common/text-rendering";
+
+@mixin reset {
+  -webkit-appearance: none; // Reset appearance for Safari < 15.4
+  appearance: none; // Reset native appearance, this causes issues on iOS and Android devices
+  border: 0;
+  border-radius: 0; // Reset rounded borders on iOS devices
+  box-sizing: border-box;
+  margin-block: 0;
+}
+
+.ams-date-input {
+  background-color: var(--ams-date-input-background-color);
+  box-shadow: var(--ams-date-input-box-shadow);
+  color: var(--ams-date-input-color);
+  font-family: var(--ams-date-input-font-family);
+  font-size: var(--ams-date-input-font-size);
+  font-weight: var(--ams-date-input-font-weight);
+  line-height: var(--ams-date-input-line-height);
+
+  // Set min block size for iOS, otherwise an empty box is a lot smaller than a filled one.
+  min-block-size: calc(
+    (var(--ams-date-input-font-size) * var(--ams-date-input-line-height)) + 2 * var(--ams-date-input-padding-block)
+  );
+
+  // Set min inline size for iOS, so the size is closer to the filled in size.
+  min-inline-size: calc(8ch + (2 * var(--ams-date-input-padding-inline)));
+  outline-offset: var(--ams-date-input-outline-offset);
+  padding-block: var(--ams-date-input-padding-block);
+  padding-inline: var(--ams-date-input-padding-inline);
+  touch-action: manipulation;
+
+  @include text-rendering;
+  @include reset;
+
+  &:hover {
+    box-shadow: var(--ams-date-input-hover-box-shadow);
+  }
+}
+
+// This changes the default calendar icon on Chromium browsers only
+.ams-date-input::-webkit-calendar-picker-indicator {
+  appearance: none;
+  background-image: var(--ams-date-input-calender-picker-indicator-background-image);
+  cursor: pointer;
+}
+
+.ams-date-input:hover::-webkit-calendar-picker-indicator {
+  background-image: var(--ams-date-input-hover-calender-picker-indicator-background-image);
+}
+
+.ams-date-input:disabled {
+  background-color: var(--ams-date-input-disabled-background-color);
+  box-shadow: var(--ams-date-input-disabled-box-shadow);
+  color: var(--ams-date-input-disabled-color);
+  cursor: not-allowed;
+}
+
+.ams-date-input:disabled::-webkit-calendar-picker-indicator {
+  background-image: var(--ams-date-input-disabled-calender-picker-indicator-background-image);
+  visibility: visible;
+}
+
+.ams-date-input:invalid,
+.ams-date-input[aria-invalid="true"] {
+  box-shadow: var(--ams-date-input-invalid-box-shadow);
+
+  &:hover {
+    // TODO: this should be the (currently non-existent) dark red hover color
+    box-shadow: var(--ams-date-input-invalid-hover-box-shadow);
+  }
+}