@schukai/monster 4.148.9 → 4.149.1

package/source/components/style/form.css

@@ -1,50 +1,2 @@
 /** generated from form.pcss **/
-input,
-meter,
-progress,
-select,
-textarea {
-	accent-color: var(--monster-color-secondary-2);
-	box-sizing: border-box;
-	color: var(--monster-color-primary-1);
-	background-color: var(--monster-bg-color-primary-1);
-	font-family: inherit;
-	font-size: 100%;
-	margin: 0;
-	outline: none;
-	border-width: var(--monster-theme-control-border-width);
-	border-radius: var(--monster-theme-control-border-radius);
-	border-style: var(--monster-theme-control-border-style);
-	border-color: var(--monster-theme-control-border-color);
-}
-input,
-select,
-textarea {
-	padding: 0.4rem 0.6rem;
-	height: -moz-fit-content;
-	height: fit-content;
-}
-textarea {
-	resize: vertical;
-	min-height: 6rem;
-}
-input[type="color"] {
-	padding: 0.1rem;
-	margin: 0;
-	height: 2rem;
-	width: 2rem;
-}
-input:hover:not([type="radio"]):not([type="checkbox"]):not([type="range"]),
-select:hover,
-textarea:hover {
-	transition:
-		background 0.8s,
-		color 0.25s 0.0833333333s;
-	box-shadow: var(--monster-box-shadow-2);
-}
-input:focus,
-select:focus,
-textarea:focus {
-	outline: 1px dashed var(--monster-color-selection-3);
-	outline-offset: 3px;
-}
+input,meter,progress,select,textarea{accent-color:var(--monster-color-secondary-2);box-sizing:border-box;color:var(--monster-color-primary-1);background-color:var(--monster-bg-color-primary-1);font-family:inherit;font-size:100%;margin:0;outline:none;border-width:var(--monster-theme-control-border-width);border-radius:var(--monster-theme-control-border-radius);border-style:var(--monster-theme-control-border-style);border-color:var(--monster-theme-control-border-color)}input[readonly]:not([type=checkbox]):not([type=radio]),textarea[readonly]{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2);cursor:default}input:not([type=checkbox]):not([type=radio]),select,textarea{min-height:var(--monster-control-min-block-size,auto);padding:var(--monster-control-padding-block,.4rem) var(--monster-control-padding-inline,.6rem);height:-moz-fit-content;height:fit-content}input:is([type=checkbox],[type=radio]){block-size:1rem;inline-size:1rem;min-height:0;padding:0;vertical-align:middle}textarea{resize:vertical;min-height:6rem}input[type=color]{padding:.1rem;margin:0;height:2rem;width:2rem}input:hover:not([type=radio]):not([type=checkbox]):not([type=range]):not([readonly]):not([disabled]),select:hover:not(:disabled),textarea:hover:not([readonly]):not([disabled]){transition:background .8s,color .25s .0833333333s;box-shadow:var(--monster-box-shadow-2)}input:focus-visible,select:focus-visible,textarea:focus-visible{outline:var(--monster-focus-ring-width,2px) var(--monster-focus-ring-style,solid) var(--monster-focus-ring-color,currentColor);outline-offset:var(--monster-focus-ring-offset,2px)}

package/source/components/style/form.pcss

@@ -28,7 +28,6 @@ textarea {
     background-color: var(--monster-bg-color-primary-1);
     font-family: inherit;
     font-size: 100%;
-    padding: 0.4rem 0.6rem;
     margin: 0;
     outline: none;
 
@@ -37,8 +36,31 @@ textarea {
     border-style: var(--monster-theme-control-border-style);
     border-color: var(--monster-theme-control-border-color);
 
+}
+
+input[readonly]:not([type="checkbox"]):not([type="radio"]),
+textarea[readonly] {
+    background-color: var(--monster-bg-color-primary-2);
+    color: var(--monster-color-primary-2);
+    cursor: default;
+}
+
+input:not([type="checkbox"]):not([type="radio"]),
+select,
+textarea {
+    min-height: var(--monster-control-min-block-size, auto);
+    padding:
+        var(--monster-control-padding-block, 0.4rem)
+        var(--monster-control-padding-inline, 0.6rem);
     height: fit-content;
+}
 
+input:is([type="checkbox"], [type="radio"]) {
+    block-size: 1rem;
+    inline-size: 1rem;
+    min-height: 0;
+    padding: 0;
+    vertical-align: middle;
 }
 
 textarea {
@@ -53,16 +75,19 @@ input[type="color"] {
     width: 2rem;
 }
 
-input:hover:not([type="radio"]):not([type="checkbox"]):not([type="range"]),
-select:hover,
-textarea:hover {
+input:hover:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([readonly]):not([disabled]),
+select:hover:not(:disabled),
+textarea:hover:not([readonly]):not([disabled]) {
     @mixin box-hover;
 }
 
 
-input:focus,
-select:focus,
-textarea:focus {
-    outline: 1px dashed var(--monster-color-selection-3);
-    outline-offset: 3px;
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible {
+    outline:
+        var(--monster-focus-ring-width, 2px)
+        var(--monster-focus-ring-style, solid)
+        var(--monster-focus-ring-color, currentColor);
+    outline-offset: var(--monster-focus-ring-offset, 2px);
 }

package/source/components/style/link.css

@@ -1,40 +1,2 @@
 /** generated from link.pcss **/
-a,
-a:active,
-a:focus,
-a:hover,
-a:link,
-a:visited {
-	color: var(--monster-color-secondary-1);
-	text-decoration: none;
-	outline: none;
-	transition:
-		color 0.3s ease-in-out,
-		text-decoration-color 0.3s ease-in-out;
-}
-a:active,
-a:focus,
-a:hover {
-	color: var(--monster-color-primary-2);
-	text-decoration: underline;
-	text-decoration-color: var(--monster-color-secondary-1);
-	text-decoration-thickness: 1px;
-	text-underline-offset: 2px;
-}
-a:focus {
-	outline: 1px dashed var(--monster-color-selection-1);
-	outline-offset: 2px;
-}
-@media (prefers-color-scheme: dark) {
-	a,
-	a:active,
-	a:focus,
-	a:hover,
-	a:link,
-	a:visited {
-		color: var(--monster-color-amber-2);
-	}
-	a:focus {
-		outline: 1px dashed var(--monster-color-selection-4);
-	}
-}
+a,a:active,a:focus-visible,a:hover,a:link,a:visited{color:var(--monster-color-secondary-1);text-decoration:none;outline:none;transition:color .3s ease-in-out,text-decoration-color .3s ease-in-out}a:active,a:focus-visible,a:hover{color:var(--monster-color-primary-2);text-decoration:underline;text-decoration-color:var(--monster-color-secondary-1 );text-decoration-thickness:1px;text-underline-offset:2px}a:focus-visible{outline:var(--monster-focus-ring-width,2px) var(--monster-focus-ring-style,solid) var(--monster-focus-ring-color,currentColor);outline-offset:var(--monster-focus-ring-offset,2px)}

package/source/components/style/link.pcss

@@ -13,7 +13,7 @@ Note the order there is important (LVHA-order):
 @see https://developer.mozilla.org/en-US/docs/Web/CSS/:link?retiredLocale=de
 
  */
-a, a:link, a:visited, a:hover, a:active, a:focus {
+a, a:link, a:visited, a:hover, a:active, a:focus-visible {
     color: var(--monster-color-secondary-1);
     text-decoration: none;
     outline: none;
@@ -22,7 +22,7 @@ a, a:link, a:visited, a:hover, a:active, a:focus {
 
 
 
-a:hover, a:active, a:focus {
+a:hover, a:active, a:focus-visible {
     color: var(--monster-color-primary-2);
     text-decoration: underline;
     text-decoration-color: var(--monster-color-secondary-1 );
@@ -30,18 +30,10 @@ a:hover, a:active, a:focus {
     text-underline-offset: 2px;
 }
 
-a:focus {
-    outline: 1px dashed var(--monster-color-selection-1);
-    outline-offset: 2px;
-}
-
-@media (prefers-color-scheme: dark) {
-    
-    a, a:link, a:visited, a:hover, a:active, a:focus {
-        color: var(--monster-color-amber-2);
-    }
-    
-    a:focus {
-        outline: 1px dashed var(--monster-color-selection-4);
-    }
+a:focus-visible {
+    outline:
+        var(--monster-focus-ring-width, 2px)
+        var(--monster-focus-ring-style, solid)
+        var(--monster-focus-ring-color, currentColor);
+    outline-offset: var(--monster-focus-ring-offset, 2px);
 }

package/source/components/style/mixin/button.pcss

@@ -1,5 +1,7 @@
 @define-mixin button {
 
+    box-sizing: border-box;
+
     /** 
      * https://caniuse.com/?search=fill-available
      * https://lists.w3.org/Archives/Public/www-style/2015Aug/0127.html 
@@ -12,7 +14,7 @@
     font-weight: 400;
     line-height: 1.5;
 
-    text-align: center;
+    text-align: var(--monster-button-text-align, center);
     text-decoration: none;
 
     vertical-align: middle;
@@ -21,12 +23,23 @@
 
     user-select: none;
 
-    border-width: var(--monster-border-width);
-    border-radius: var(--monster-border-radius);
-    border-style: var(--monster-border-style);
-    box-shadow: var(--monster-box-shadow-1);
-
-    padding: .375rem .75rem;
+    border-width: var(--monster-button-border-width, var(--monster-border-width));
+    border-radius: var(
+        --monster-button-border-radius,
+        var(--monster-border-radius)
+    );
+    border-style: var(--monster-button-border-style, var(--monster-border-style));
+    box-shadow: var(--monster-button-box-shadow, var(--monster-box-shadow-1));
+
+    min-height: var(
+        --monster-button-min-block-size,
+        var(--monster-control-min-block-size, auto)
+    );
+    padding: var(
+        --monster-button-padding,
+        var(--monster-control-padding-block, .375rem)
+        var(--monster-control-padding-inline, .75rem)
+    );
     outline: none;
 
     background-position: center;
@@ -38,13 +51,10 @@
 
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: var(--monster-button-justify-content, center);
     gap: .4rem;
 
 }
 
 
 
-
-
-

package/source/components/style/mixin/property.pcss

@@ -60,6 +60,14 @@
     --monster-border-width: 3px;
     --monster-border-radius: 0;
     --monster-outline-width: 1px;
+    --monster-focus-ring-width: 2px;
+    --monster-focus-ring-style: solid;
+    --monster-focus-ring-color: var(--monster-color-blue-4);
+    --monster-focus-ring-offset: 2px;
+
+    @media (prefers-color-scheme: dark) {
+        --monster-focus-ring-color: var(--monster-color-yellow-2);
+    }
 }
 
 @define-mixin defaultFontProperty {

package/source/components/style/mixin/skeleton.pcss

@@ -1,13 +1,19 @@
 @define-mixin skeleton $width, $color, $height:100% {
-    --monster-skeleton-color: $color;
-    --monster-skeleton-color-50: rgba(from $color 255 255 255 / 0.5);
+    --monster-skeleton-color: var(--monster-skeleton-fill, $color);
+    --monster-skeleton-color-50: color-mix(
+        in srgb,
+        var(--monster-skeleton-color) 50%,
+        transparent
+    );
     --monster-skeleton-height: $height;
     --monster-skeleton-width: $width;
     --monster-skeleton: linear-gradient(
             99deg,
-            var(--monster-skeleton-color) 0%,
-            var(--monster-skeleton-color-50) 40%,
-            transparent 70%
+            transparent 0%,
+            var(--monster-skeleton-color-50) 18%,
+            var(--monster-skeleton-color) 48%,
+            var(--monster-skeleton-color-50) 78%,
+            transparent 100%
     );
 
     background-image: var(--monster-skeleton);

package/source/components/style/normalize.css

@@ -1,145 +1,2 @@
 /** generated from normalize.pcss **/
-:where(html) {
-	line-height: 1.15;
-	-webkit-text-size-adjust: 100%;
-	-moz-text-size-adjust: 100%;
-	text-size-adjust: 100%;
-}
-:where(h1) {
-	font-size: 2em;
-	margin-block-end: 0.67em;
-	margin-block-start: 0.67em;
-}
-:where(dl, ol, ul) :where(dl, ol, ul) {
-	margin-block-end: 0;
-	margin-block-start: 0;
-}
-:where(hr) {
-	box-sizing: content-box;
-	color: inherit;
-	height: 0;
-}
-:where(abbr[title]) {
-	text-decoration: underline;
-	-webkit-text-decoration: underline dotted;
-	text-decoration: underline dotted;
-}
-:where(b, strong) {
-	font-weight: bolder;
-}
-:where(code, kbd, pre, samp) {
-	font-family: monospace, monospace;
-	font-size: 1em;
-}
-:where(small) {
-	font-size: 80%;
-}
-:where(table) {
-	border-color: currentColor;
-	text-indent: 0;
-}
-:where(button, input, select) {
-	margin: 0;
-}
-:where(button) {
-	text-transform: none;
-}
-:where(
-		button,
-		input:is([type="button" i], [type="reset" i], [type="submit" i])
-	) {
-	-webkit-appearance: button;
-}
-:where(progress) {
-	vertical-align: baseline;
-}
-:where(select) {
-	text-transform: none;
-}
-:where(textarea) {
-	margin: 0;
-}
-:where(input[type="search" i]) {
-	-webkit-appearance: textfield;
-	outline-offset: -2px;
-}
-::-webkit-inner-spin-button,
-::-webkit-outer-spin-button {
-	height: auto;
-}
-::-webkit-input-placeholder {
-	color: inherit;
-	opacity: 0.54;
-}
-::-webkit-search-decoration {
-	-webkit-appearance: none;
-}
-::-webkit-file-upload-button {
-	-webkit-appearance: button;
-	font: inherit;
-}
-:where(
-		button,
-		input:is(
-				[type="button" i],
-				[type="color" i],
-				[type="reset" i],
-				[type="submit" i]
-			)
-	)::-moz-focus-inner {
-	border-style: none;
-	padding: 0;
-}
-:where(
-		button,
-		input:is(
-				[type="button" i],
-				[type="color" i],
-				[type="reset" i],
-				[type="submit" i]
-			)
-	)::-moz-focusring {
-	outline: 1px dotted ButtonText;
-}
-:where(:-moz-ui-invalid) {
-	box-shadow: none;
-}
-:where(dialog) {
-	background-color: #fff;
-	border: solid;
-	color: #000;
-	height: -moz-fit-content;
-	height: fit-content;
-	left: 0;
-	margin: auto;
-	padding: 1em;
-	position: absolute;
-	right: 0;
-	width: -moz-fit-content;
-	width: fit-content;
-}
-:where(dialog:not([open])) {
-	display: none;
-}
-:where(summary) {
-	display: list-item;
-}
-html {
-	height: 100%;
-}
-body,
-html {
-	min-height: calc(100vh - 40px);
-}
-body {
-	box-sizing: border-box;
-	margin: 0;
-	padding: 0;
-	word-break: break-word;
-}
-body:focus-visible {
-	outline: none;
-}
-:focus-visible {
-	outline: none;
-}
+:where(html){line-height:1.15;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}:where(h1){font-size:2em;margin-block-end:.67em;margin-block-start:.67em}:where(dl,ol,ul) :where(dl,ol,ul){margin-block-end:0;margin-block-start:0}:where(hr){box-sizing:content-box;color:inherit;height:0}:where(abbr[title]){text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(b,strong){font-weight:bolder}:where(code,kbd,pre,samp){font-family:monospace,monospace;font-size:1em}:where(small){font-size:80%}:where(table){border-color:currentColor;text-indent:0}:where(button,input,select){margin:0}:where(button){text-transform:none}:where(button,input:is([type=button i],[type=reset i],[type=submit i])){-webkit-appearance:button}:where(progress){vertical-align:baseline}:where(select){text-transform:none}:where(textarea){margin:0}:where(input[type=search i]){-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focus-inner{border-style:none;padding:0}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focusring{outline:1px dotted ButtonText}:where(:-moz-ui-invalid){box-shadow:none}:where(dialog){background-color:#fff;border:solid;color:#000;height:-moz-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-moz-fit-content;width:fit-content}:where(dialog:not([open])){display:none}:where(summary){display:list-item}html{height:100%}body,html{min-height:calc(100vh - 40px)}body{box-sizing:border-box;margin:0;padding:0;word-break:break-word}:focus-visible{outline:var(--monster-focus-ring-width,2px) var(--monster-focus-ring-style,solid) var(--monster-focus-ring-color,currentColor);outline-offset:var(--monster-focus-ring-offset,2px)}

package/source/components/style/normalize.pcss

@@ -13,10 +13,10 @@ body {
     word-break: break-word;
 }
 
-body:focus-visible {
-    outline: none;
-}
-
 :focus-visible {
-    outline: none;
+    outline:
+        var(--monster-focus-ring-width, 2px)
+        var(--monster-focus-ring-style, solid)
+        var(--monster-focus-ring-color, currentColor);
+    outline-offset: var(--monster-focus-ring-offset, 2px);
 }