@schukai/monster 4.90.0 → 4.91.1

package/source/components/form/style/mixin/field-set-layout.pcss

@@ -0,0 +1,545 @@
+@define-mixin fieldSetSlotLayout {
+    slot {
+        display: grid;
+        grid-template-columns: auto 1fr;
+        grid-gap: 0.8rem;
+        accent-color: var(--monster-color-secondary-2);
+    }
+
+    .multiple-columns slot {
+        grid-template-columns: auto 1fr auto 1fr auto 1fr;
+    }
+
+    ::slotted(label),
+    ::slotted(.label) {
+        color: var(--monster-color-primary-1);
+        border-bottom: thin dotted var(--monster-color-primary-1);
+        display: flex;
+        align-items: flex-start;
+        gap: 0.4rem;
+        justify-content: space-between;
+    }
+
+    ::slotted(hr),
+    ::slotted(h1),
+    ::slotted(h2),
+    ::slotted(h3),
+    ::slotted(h4),
+    ::slotted(h5),
+    ::slotted(h6) {
+        grid-column: 1 / -1;
+        margin: 1rem 0 0.1rem !important;
+    }
+
+    ::slotted(hr) {
+        border: none;
+        border-top: thin dotted var(--monster-color-gray-3);
+        margin: 1rem 0;
+        padding: 0;
+    }
+
+    ::slotted(hr.delimiter) {
+        border: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    ::slotted(.grid-span-full) {
+        grid-column-end: -1;
+    }
+
+    ::slotted(.grid-start-1),
+    ::slotted(.grid-start-2),
+    ::slotted(.grid-start-3),
+    ::slotted(.grid-start-4) {
+
+    }
+
+    ::slotted(.grid-start-1) {
+        grid-column-start: 1;
+    }
+
+    ::slotted(.grid-start-2) {
+        grid-column-start: 2;
+    }
+
+    ::slotted(.grid-start-3) {
+        grid-column-start: 3;
+    }
+
+    ::slotted(.grid-start-4) {
+        grid-column-start: 4;
+    }
+
+    ::slotted(.grid-double-span) {
+        grid-column: span 3;
+    }
+
+    ::slotted(.grid-to-end) {
+        grid-column-end: -1;
+    }
+
+
+    ::slotted(monster-button),
+    ::slotted(monster-state-button),
+    ::slotted(monster-api-button),
+    ::slotted(monster-state-button),
+    ::slotted(monster-datasource-save-button) {
+    }
+
+    ::slotted(input),
+    ::slotted(monster-button),
+    ::slotted(monster-state-button),
+    ::slotted(monster-api-button),
+    ::slotted(monster-state-button),
+    ::slotted(monster-datasource-save-button) {
+
+    }
+
+    ::slotted(input[type="text"]),
+    ::slotted(input[type="password"]),
+    ::slotted(input[type="email"]),
+    ::slotted(input[type="number"]),
+    ::slotted(input[type="tel"]) {
+        height: -webkit-fill-available;
+    }
+
+    ::slotted(input:not([type="checkbox"]):not([type="radio"])) {
+        width: 100%;
+        border-radius: var(--monster-theme-control-border-radius);
+        border-width: var(--monster-theme-control-border-width);
+        border-color: var(--monster-theme-control-border-color);
+        border-style: var(--monster-theme-control-border-style);
+
+        &[readonly] {
+            background-color: var(--monster-bg-color-primary-3);
+            color: var(--monster-color-primary-3);
+        }
+
+    }
+
+    ::slotted(input[readonly]:not([type="checkbox"]):not([type="radio"])) {
+        background-color: var(--monster-bg-color-primary-2);
+        color: var(--monster-color-primary-2);
+        cursor: default;
+    }
+
+
+    ::slotted(input),
+    ::slotted(monster-toggle-switch),
+    ::slotted(select) {
+        min-height: 1.8rem;
+        padding: 0.5rem;
+        box-sizing: border-box;
+    }
+
+    ::slotted(monster-password) {
+        min-height: 1.8rem;
+    }
+
+    ::slotted(input[type="color"]) {
+        padding: 0 0.2rem;
+        min-height: calc(1.8rem + 0.4rem);
+        width: 100%;
+    }
+
+    ::slotted(input[type="time"]),
+    ::slotted(input[type="date"]) {
+        padding: 0 0.2rem;
+        min-height: calc(1.8rem + 0.4rem);
+    }
+
+    ::slotted(input[type="checkbox"]),
+    ::slotted(input[type="radio"]) {
+        width: 1.8rem;
+        min-height: calc(1.8rem + 0.4rem);
+        padding: 0 0.2rem;
+    }
+
+    ::slotted(input[type="file"]) {
+        padding: 0.4rem;
+        min-height: calc(1.2rem );
+    }
+
+    ::slotted(input),
+    ::slotted(monster-toggle-switch),
+    ::slotted(monster-password),
+    ::slotted(select),
+    ::slotted([data-monster-validation-wrapper]) {
+        align-self: end;
+    }
+
+    ::slotted(monster-toggle-switch) {
+        width: 3rem;
+        padding: 0;
+    }
+
+    @container field-set (max-width: 1200px) {
+
+        .multiple-columns {
+
+            & slot {
+                grid-template-columns: auto 1fr auto 1fr;
+            }
+        }
+
+        ::slotted(h1),
+        ::slotted(h2),
+        ::slotted(h3),
+        ::slotted(h4),
+        ::slotted(h5),
+        ::slotted(h6) {
+            margin: 2.2rem 0 0.1rem !important;
+        }
+
+        ::slotted(.grid-double-span) {
+            grid-column: span 1;
+        }
+
+    }
+
+    @container field-set (max-width: 900px) {
+
+        .multiple-columns {
+
+            & slot {
+                grid-template-columns: auto 1fr;
+            }
+        }
+
+        ::slotted(h1),
+        ::slotted(h2),
+        ::slotted(h3),
+        ::slotted(h4),
+        ::slotted(h5),
+        ::slotted(h6) {
+            margin: 1.8rem 0 0.1rem !important;
+        }
+
+        ::slotted(.grid-double-span) {
+            grid-column: span 1;
+        }
+
+    }
+
+    @container field-set (max-width: 500px) {
+        slot {
+            grid-template-columns: 1fr;
+            gap: 0;
+        }
+
+        ::slotted(h1),
+        ::slotted(h2),
+        ::slotted(h3),
+        ::slotted(h4),
+        ::slotted(h5),
+        ::slotted(h6) {
+            grid-column: 1;
+            margin: 1.3rem 0 0.1rem !important;
+        }
+
+        ::slotted(select) {
+            grid-column: 1;
+        }
+
+        ::slotted(div.wrapper),
+        ::slotted(input),
+        ::slotted(monster-toggle-switch),
+        ::slotted(monster-password),
+        ::slotted(textarea),
+        ::slotted(select) {
+            grid-column: 1;
+        }
+
+        ::slotted(monster-button),
+        ::slotted(monster-action-button),
+        ::slotted(monster-state-button),
+        ::slotted(monster-api-button),
+        ::slotted(monster-state-button),
+        ::slotted(monster-datasource-save-button) {
+            grid-column: 1;
+        }
+
+        ::slotted(h1),
+        ::slotted(h2),
+        ::slotted(h3),
+        ::slotted(h4),
+        ::slotted(h5),
+        ::slotted(h6) {
+            grid-column: 1
+        }
+
+        ::slotted(label),
+        ::slotted(.label) {
+            padding-top: 1rem;
+            border-bottom: none;
+        }
+
+        .multiple-columns {
+            & slot {
+                grid-template-columns: 1fr;
+            }
+
+        }
+
+        ::slotted(.grid-start-1),
+        ::slotted(.grid-start-2),
+        ::slotted(.grid-start-3),
+        ::slotted(.grid-start-4),
+        ::slotted(.grid-span-full) {
+            grid-column: 1 !important;
+        }
+
+        ::slotted(.grid-double-span) {
+            grid-column: span 1 !important;
+        }
+
+    }
+}
+
+@define-mixin fieldSetItemsLayout {
+    monster-repeat-field-set [data-monster-role="items"] {
+        accent-color: var(--monster-color-secondary-2);
+        display: grid;
+        gap: 0.8rem;
+        grid-template-columns: auto 1fr;
+    }
+
+    monster-repeat-field-set.multiple-columns [data-monster-role="items"] {
+        grid-template-columns: auto 1fr auto 1fr auto 1fr;
+    }
+
+    monster-repeat-field-set [data-monster-role="items"] h1,
+    monster-repeat-field-set [data-monster-role="items"] h2,
+    monster-repeat-field-set [data-monster-role="items"] h3,
+    monster-repeat-field-set [data-monster-role="items"] h4,
+    monster-repeat-field-set [data-monster-role="items"] h5,
+    monster-repeat-field-set [data-monster-role="items"] h6,
+    monster-repeat-field-set [data-monster-role="items"] hr {
+        grid-column: 1 / -1;
+        margin: 3rem 0 0.1rem;
+    }
+
+    monster-repeat-field-set [data-monster-role="items"] hr {
+        border: none;
+        border-top: thin dotted var(--monster-color-gray-3);
+        margin: 1rem 0;
+        padding: 0;
+    }
+
+    monster-repeat-field-set [data-monster-role="items"] .grid-span-full {
+        grid-column-end: -1;
+    }
+
+    monster-repeat-field-set [data-monster-role="items"] .grid-start-1 {
+        grid-column-start: 1;
+    }
+
+    monster-repeat-field-set [data-monster-role="items"] .grid-start-2 {
+        grid-column-start: 2;
+    }
+
+    monster-repeat-field-set [data-monster-role="items"] .grid-start-3 {
+        grid-column-start: 3;
+    }
+
+    monster-repeat-field-set [data-monster-role="items"] .grid-start-4 {
+        grid-column-start: 4;
+    }
+
+    monster-repeat-field-set [data-monster-role="items"] .grid-double-span {
+        grid-column: span 3;
+    }
+
+    monster-repeat-field-set [data-monster-role="items"] .grid-to-end {
+        grid-column-end: -1;
+    }
+
+    monster-repeat-field-set [data-monster-role="items"] label,
+    monster-repeat-field-set [data-monster-role="items"] .label {
+        align-items: flex-start;
+        border-bottom: thin dotted var(--monster-color-primary-1);
+        color: var(--monster-color-primary-1);
+        display: flex;
+        gap: 0.4rem;
+        justify-content: space-between;
+    }
+
+    monster-repeat-field-set [data-monster-role="items"] input:not([type="checkbox"]):not([type="radio"]) {
+        border-color: var(--monster-theme-control-border-color);
+        border-radius: var(--monster-theme-control-border-radius);
+        border-style: var(--monster-theme-control-border-style);
+        border-width: var(--monster-theme-control-border-width);
+        width: 100%;
+    }
+
+    monster-repeat-field-set [data-monster-role="items"] input[type="email"],
+    monster-repeat-field-set [data-monster-role="items"] input[type="number"],
+    monster-repeat-field-set [data-monster-role="items"] input[type="password"],
+    monster-repeat-field-set [data-monster-role="items"] input[type="tel"],
+    monster-repeat-field-set [data-monster-role="items"] input[type="text"] {
+        height: -webkit-fill-available;
+    }
+
+    monster-repeat-field-set [data-monster-role="items"] [readonly]:is(input:not([type="checkbox"]):not([type="radio"])) {
+        background-color: var(--monster-bg-color-primary-3);
+        color: var(--monster-color-primary-3);
+    }
+
+    monster-repeat-field-set [data-monster-role="items"] input[readonly]:not([type="checkbox"]):not([type="radio"]) {
+        background-color: var(--monster-bg-color-primary-2);
+        color: var(--monster-color-primary-2);
+        cursor: default;
+    }
+
+    monster-repeat-field-set [data-monster-role="items"] input,
+    monster-repeat-field-set [data-monster-role="items"] monster-toggle-switch,
+    monster-repeat-field-set [data-monster-role="items"] select {
+        box-sizing: border-box;
+        min-height: 1.8rem;
+        padding: 0.5rem;
+    }
+
+    monster-repeat-field-set [data-monster-role="items"] monster-password {
+        min-height: 1.8rem;
+    }
+
+    monster-repeat-field-set [data-monster-role="items"] input[type="color"] {
+        min-height: 2.2rem;
+        padding: 0 0.2rem;
+        width: 100%;
+    }
+
+    monster-repeat-field-set [data-monster-role="items"] input[type="date"],
+    monster-repeat-field-set [data-monster-role="items"] input[type="time"] {
+        min-height: 2.2rem;
+        padding: 0 0.2rem;
+    }
+
+    monster-repeat-field-set [data-monster-role="items"] input[type="checkbox"],
+    monster-repeat-field-set [data-monster-role="items"] input[type="radio"] {
+        min-height: 2.2rem;
+        padding: 0 0.2rem;
+        width: 1.8rem;
+    }
+
+    monster-repeat-field-set [data-monster-role="items"] input[type="file"] {
+        min-height: 1.2rem;
+        padding: 0.4rem;
+    }
+
+    monster-repeat-field-set [data-monster-role="items"] [data-monster-validation-wrapper],
+    monster-repeat-field-set [data-monster-role="items"] input,
+    monster-repeat-field-set [data-monster-role="items"] monster-password,
+    monster-repeat-field-set [data-monster-role="items"] monster-toggle-switch,
+    monster-repeat-field-set [data-monster-role="items"] select {
+        align-self: end;
+    }
+
+    monster-repeat-field-set [data-monster-role="items"] monster-toggle-switch {
+        padding: 0;
+        width: 3rem;
+    }
+
+    @container repeat-field-set (max-width: 1200px) {
+        monster-repeat-field-set.multiple-columns [data-monster-role="items"] {
+            grid-template-columns: auto 1fr auto 1fr;
+        }
+
+        monster-repeat-field-set [data-monster-role="items"] h1,
+        monster-repeat-field-set [data-monster-role="items"] h2,
+        monster-repeat-field-set [data-monster-role="items"] h3,
+        monster-repeat-field-set [data-monster-role="items"] h4,
+        monster-repeat-field-set [data-monster-role="items"] h5,
+        monster-repeat-field-set [data-monster-role="items"] h6 {
+            margin: 2.2rem 0 0.1rem;
+        }
+
+        monster-repeat-field-set [data-monster-role="items"] .grid-double-span {
+            grid-column: span 1;
+        }
+    }
+
+    @container repeat-field-set (max-width: 900px) {
+        monster-repeat-field-set.multiple-columns [data-monster-role="items"] {
+            grid-template-columns: auto 1fr;
+        }
+
+        monster-repeat-field-set [data-monster-role="items"] h1,
+        monster-repeat-field-set [data-monster-role="items"] h2,
+        monster-repeat-field-set [data-monster-role="items"] h3,
+        monster-repeat-field-set [data-monster-role="items"] h4,
+        monster-repeat-field-set [data-monster-role="items"] h5,
+        monster-repeat-field-set [data-monster-role="items"] h6 {
+            margin: 1.8rem 0 0.1rem;
+        }
+
+        monster-repeat-field-set [data-monster-role="items"] .grid-double-span {
+            grid-column: span 1;
+        }
+    }
+
+    @container repeat-field-set (max-width: 500px) {
+        monster-repeat-field-set [data-monster-role="items"] {
+            gap: 0;
+            grid-template-columns: 1fr;
+        }
+
+        monster-repeat-field-set [data-monster-role="items"] h1,
+        monster-repeat-field-set [data-monster-role="items"] h2,
+        monster-repeat-field-set [data-monster-role="items"] h3,
+        monster-repeat-field-set [data-monster-role="items"] h4,
+        monster-repeat-field-set [data-monster-role="items"] h5,
+        monster-repeat-field-set [data-monster-role="items"] h6 {
+            margin: 1.3rem 0 0.1rem;
+        }
+
+        monster-repeat-field-set [data-monster-role="items"] select,
+        monster-repeat-field-set [data-monster-role="items"] div.wrapper,
+        monster-repeat-field-set [data-monster-role="items"] input,
+        monster-repeat-field-set [data-monster-role="items"] monster-password,
+        monster-repeat-field-set [data-monster-role="items"] monster-toggle-switch,
+        monster-repeat-field-set [data-monster-role="items"] textarea {
+            grid-column: 1;
+        }
+
+        monster-repeat-field-set [data-monster-role="items"] monster-action-button,
+        monster-repeat-field-set [data-monster-role="items"] monster-api-button,
+        monster-repeat-field-set [data-monster-role="items"] monster-button,
+        monster-repeat-field-set [data-monster-role="items"] monster-datasource-save-button,
+        monster-repeat-field-set [data-monster-role="items"] monster-state-button {
+            grid-column: 1;
+        }
+
+        monster-repeat-field-set [data-monster-role="items"] h1,
+        monster-repeat-field-set [data-monster-role="items"] h2,
+        monster-repeat-field-set [data-monster-role="items"] h3,
+        monster-repeat-field-set [data-monster-role="items"] h4,
+        monster-repeat-field-set [data-monster-role="items"] h5,
+        monster-repeat-field-set [data-monster-role="items"] h6 {
+            grid-column: 1;
+        }
+
+        monster-repeat-field-set [data-monster-role="items"] .label,
+        monster-repeat-field-set [data-monster-role="items"] label {
+            border-bottom: none;
+            padding-top: 1rem;
+        }
+
+        monster-repeat-field-set.multiple-columns [data-monster-role="items"] {
+            grid-template-columns: 1fr;
+        }
+
+        monster-repeat-field-set [data-monster-role="items"] .grid-span-full,
+        monster-repeat-field-set [data-monster-role="items"] .grid-start-1,
+        monster-repeat-field-set [data-monster-role="items"] .grid-start-2,
+        monster-repeat-field-set [data-monster-role="items"] .grid-start-3,
+        monster-repeat-field-set [data-monster-role="items"] .grid-start-4 {
+            grid-column: 1 !important;
+        }
+
+        monster-repeat-field-set [data-monster-role="items"] .grid-double-span {
+            grid-column: span 1 !important;
+        }
+    }
+}

package/source/components/form/style/repeat-field-set-items.pcss

@@ -0,0 +1,11 @@
+@import "../../style/color.pcss";
+@import "../../style/theme.pcss";
+@import "../../style/border.pcss";
+@import "./mixin/field-set-layout.pcss";
+
+monster-repeat-field-set {
+    container-name: repeat-field-set;
+    container-type: inline-size;
+}
+
+@mixin fieldSetItemsLayout;

package/source/components/form/style/repeat-field-set.pcss

@@ -0,0 +1,45 @@
+@import "../../style/color.pcss";
+@import "../../style/theme.pcss";
+@import "../../style/border.pcss";
+
+:host {
+    box-sizing: border-box;
+    display: block;
+}
+
+[data-monster-role="actions"] {
+    display: flex;
+    gap: 0.5rem;
+    justify-content: flex-end;
+    margin-top: 0.5rem;
+}
+
+slot[name="items"] {
+    display: block;
+    margin-top: 0.6rem;
+}
+
+slot[name="items"]::slotted([data-monster-role="items"]) {
+    width: 100%;
+}
+
+[data-monster-role="add"],
+[data-monster-role="remove"] {
+    align-items: center;
+    background-color: transparent;
+    border: var(--monster-border-width) var(--monster-border-style)
+    var(--monster-theme-control-border-color);
+    border-radius: var(--monster-border-radius);
+    color: var(--monster-color-primary-1);
+    cursor: pointer;
+    display: inline-flex;
+    gap: 0.4rem;
+    justify-content: center;
+    padding: 0.35rem 0.75rem;
+}
+
+[data-monster-role="add"][disabled],
+[data-monster-role="remove"][disabled] {
+    cursor: not-allowed;
+    opacity: 0.6;
+}