@schukai/monster 3.69.2 → 3.70.0

package/test/cases/components/host/overlay.mjs

@@ -47,7 +47,7 @@ describe('Overlay', function () {
         setTimeout(() => {
             try {
                 expect(document.getElementById('mocks')).contain.html(
-                    ' <monster-overlay data-monster-objectlink="Symbol(@schukai/monster/dom/custom-element@@options-updater-link)"></monster-overlay>')
+                    ' <monster-overlay style="display: block;" data-monster-objectlink="Symbol(@schukai/monster/dom/custom-element@@options-updater-link)"></monster-overlay>')
             } catch (e) {
                 return done(e);
             }

package/test/cases/dom/customcontrol.mjs

@@ -138,7 +138,7 @@ describe('DOM', function () {
 
                 expect(document.getElementsByTagName('monster-customcontrol').length).is.equal(1);
                 // no data-monster-objectlink="Symbol(monsterUpdater)" because it has nothing to update 
-                expect(document.getElementById('test1')).contain.html('<monster-customcontrol data-monster-error="Error: html is not set."></monster-customcontrol>')
+                expect(document.getElementById('test1')).contain.html('<monster-customcontrol style="display: block;" data-monster-error="Error: html is not set."></monster-customcontrol>')
             });
         });
 

package/test/cases/dom/customelement.mjs

@@ -242,7 +242,7 @@ describe('DOM', function () {
                 expect(document.getElementsByTagName('monster-testclass').length).is.equal(1);
                 // no data-monster-objectlink="Symbol(monsterUpdater)" because it has nothing to update
                 // but data-monster-error="Error: html is not set."
-                expect(document.getElementById('test1')).contain.html('<monster-testclass data-monster-error="Error: html is not set."></monster-testclass>');
+                expect(document.getElementById('test1')).contain.html('<monster-testclass style="display: block;" data-monster-error="Error: html is not set."></monster-testclass>');
             });
         });
 
@@ -256,7 +256,7 @@ describe('DOM', function () {
                     try {
                         expect(document.getElementsByTagName('monster-testclass2').length).is.equal(1);
                         expect(document.getElementsByTagName('monster-testclass2').item(0).shadowRoot.innerHTML).is.equal('<h1></h1><article><p>test</p><div id="container"></div></article>');
-                        expect(document.getElementById('test1')).contain.html('<monster-testclass2 data-monster-objectlink="Symbol(' + updaterSymbolKey + ')"></monster-testclass2>');
+                        expect(document.getElementById('test1')).contain.html('<monster-testclass2 style="display: block;" data-monster-objectlink="Symbol(' + updaterSymbolKey + ')"></monster-testclass2>');
                         return done();
                     } catch (e) {
                         done(e);

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

@@ -1,242 +0,0 @@
-@import "hover.pcss";
-
-@define-mixin form {
-
-    box-sizing: border-box;
-    display: flex;
-    flex-wrap: nowrap;
-    position: relative;
-    flex-direction: column;
-    align-content: flex-start;
-    align-items: flex-start;
-    accent-color: var(--monster-color-secondary-2);
-
-    & label {
-        color: var(--monster-color-primary-1);
-        background-color: var(--monster-bg-color-primary-1);
-        display: grid;
-    }
-
-    & label:has(input[type="radio"]) {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
-        justify-content: flex-start;
-
-        & input {
-            margin-right: 0.4rem;
-            margin-left: 0.4rem;
-        }
-    }
-
-    & label:has(input[type="radio"]) ~ label:has(input[type="radio"]) {
-        margin-top: 0.2rem;
-    }
-
-    & label:has(input[type="checkbox"]) {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
-        justify-content: flex-start;
-
-        & input {
-            margin-right: 0.4rem;
-            margin-left: 0.4rem;
-        }
-
-    }
-
-    & label:has(input[type="checkbox"]) ~ label:has(input[type="checkbox"]) {
-        margin-top: 0.2rem;
-    }
-
-    & label ~ label {
-        margin-top: 1rem;
-    }
-
-    & label ~ fieldset {
-        margin-top: 1rem;
-    }
-
-    & button,
-    & input,
-    & select,
-    & textarea {
-        font-family: inherit;
-        font-size: 100%;
-        padding: 0.4rem 0.6rem;
-        margin: 0;
-        outline: none;
-        box-sizing: border-box;
-        accent-color: var(--monster-color-secondary-2);
-
-        color: var(--monster-color-primary-1);
-        background-color: var(--monster-bg-color-primary-1);
-
-    }
-
-
-    & button {
-        color: var(--monster-color-tertiary-1);
-        background-color: var(--monster-bg-color-tertiary-1);
-
-        /** monster-border-primary-1 */
-        border-width: var(--monster-border-width);
-        border-radius: var(--monster-border-radius);
-        border-style: var(--monster-border-style);
-        border-color: var(--monster-bg-color-primary-3);
-    }
-
-    & option:checked {
-        background-color: var(--monster-bg-color-primary-3);
-        color: var(--monster-color-primary-3);
-    }
-
-    & option:focus {
-        background-color: var(--monster-bg-color-primary-3);
-        color: var(--monster-color-primary-3);
-    }
-
-    & option:hover {
-        background-color: var(--monster-bg-color-primary-2);
-        color: var(--monster-color-primary-2);
-    }
-
-    & input,
-    & select,
-    & textarea {
-        border: 0;
-        border-bottom-width: thin;
-        border-radius: var(--monster-border-radius);
-        border-bottom-style: var(--monster-border-style);
-        border-bottom-color: var(--monster-bg-color-primary-1);
-    }
-
-
-    & input,
-    & select,
-    & textarea {
-        border-width: thin;
-        border-radius: var(--monster-border-radius);
-        border-style: var(--monster-border-style);
-        border-color: var(--monster-bg-color-primary-2);
-    }
-
-
-    & button,
-    & input:not([type="radio"]):not([type="checkbox"]),
-    & select,
-    & textarea {
-        width: 100%;
-    }
-
-    & label {
-        width: 100%;
-
-        & input:not([type="radio"]):not([type="checkbox"]),
-        & select,
-        & textarea {
-            width: 100%;
-            margin-top: 0.2rem;
-        }
-
-    }
-
-    & label + input:not([type="radio"]):not([type="checkbox"]),
-    & label + select,
-    & label + textarea {
-        width: 100%;
-        margin-top: 0.2rem;
-    }
-
-
-    & fieldset {
-        margin: 0;
-        position: relative;
-        padding: 2.5rem 2rem 2rem;
-        border: 1px dotted var(--monster-bg-color-primary-4);
-
-        background-color: var(--monster-bg-color-primary-1);
-        color: var(--monster-color-primary-1);
-
-        box-sizing: border-box;
-        width: 100%;
-        outline: none;
-
-        & legend {
-            position: absolute;
-            top: 0;
-            right: 0;
-            padding: 0.1rem 2rem 0.2rem 0.5rem;
-            max-width: 95%;
-            text-align: right;
-            text-transform: uppercase;
-            text-overflow: ellipsis;
-            font-size: 0.8rem;
-            overflow: hidden;
-            white-space: nowrap;
-        }
-
-        & label {
-        }
-
-    }
-
-    & fieldset ~ fieldset {
-        margin-top: 1rem;
-    }
-
-    & button {
-        margin: 0.2rem 0;
-    }
-
-    & button:first-of-type {
-        margin-top: 1rem;
-    }
-
-    & button:last-of-type {
-        margin-bottom: 1rem;
-    }
-
-    & input:focus-visible {
-        outline: none;
-    }
-
-
-    & button:focus,
-    & input:focus,
-    & select:focus,
-    & textarea:focus {
-        outline: 1px dashed var(--monster-color-selection-4);
-        outline-offset: 2px;
-    }
-
-
-    @media (prefers-color-scheme: light) {
-        & button,
-        & input,
-        & select,
-        & textarea {
-            background-color: var(--monster-bg-color-primary-1);
-            color: var(--monster-color-primary-1);
-            border-color: var(--monster-bg-color-primary-4);
-        }
-
-        & button:focus,
-        & input:focus,
-        & select:focus,
-        & textarea:focus {
-            outline: 1px dashed var(--monster-color-selection-3);
-        }        
-        
-    }
-
-    & button:hover,
-    & input:hover:not([type="radio"]):not([type="checkbox"]):not([type="range"]),
-    & select:hover,
-    & textarea:hover {
-        @mixin box-hover;
-    }
-
-
-}