@moneyforward/mfui-components 4.5.0 → 4.6.0

package/dist/styles.css

@@ -1325,6 +1325,18 @@
   height: var(--mfui-sizes-mfui\.size\.dimension\.badge\.diameter\.comfort);
 }
 
+.mfui-fCRxLF {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
 .mfui-jntiOR {
   border-color: var(--mfui-colors-mfui\.color\.neutral\.border\.none);
   border-style: solid;
@@ -3036,6 +3048,19 @@
   height: 24px;
 }
 
+.mfui-deLdKp {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+  pointer-events: none;
+}
+
 .mfui-kKZIFS {
   overflow: auto;
   position: relative;
@@ -3297,6 +3322,7 @@
 .mfui-ygrnO {
   padding-block: var(--mfui-spacing-mfui\.size\.padding\.sub-navigation\.vertical\.comfort);
   padding-inline: var(--mfui-spacing-mfui\.size\.padding\.sub-navigation\.horizontal\.comfort);
+  anchor-scope: --mfui-sub-navigation-link;
 }
 
 .mfui-ygrnO:has(a + details) {
@@ -3317,7 +3343,7 @@
   cursor: pointer;
   text-align: left;
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   color: var(--mfui-colors-mfui\.color\.base\.content\.none);
   width: 100%;
 }
@@ -3327,15 +3353,21 @@
   border-color: var(--mfui-colors-mfui\.color\.selected\.border\.none);
   padding-block: calc(var(--mfui-spacing-mfui\.size\.padding\.sub-navigation\.vertical\.comfort) - 1px);
   padding-inline: calc(var(--mfui-spacing-mfui\.size\.padding\.sub-navigation\.horizontal\.comfort) - 1px);
-  color: var(--mfui-colors-mfui\.color\.selected\.text-on-background\.none);
   background-color: var(--mfui-colors-mfui\.color\.selected\.background\.none);
 }
 
+.mfui-ljuOJV[aria-current=page],.mfui-ljuOJV[aria-current=page] [data-mfui-content="sub-navigation-description"] {
+  color: var(--mfui-colors-mfui\.color\.selected\.text-on-background\.none);
+}
+
 .mfui-ljuOJV:has(+ details) {
+  anchor-name: --mfui-sub-navigation-link;
+  width: auto;
   margin-right: calc(var(--mfui-spacing-mfui\.size\.padding\.sub-navigation\.horizontal\.comfort) + var(--mfui-sizes-mfui\.size\.dimension\.icon-button\.square\.comfort));
 }
 
 .mfui-ljuOJV:is(:focus, [data-focus]) {
+  color: var(--mfui-colors-mfui\.color\.base\.content\.hovered);
   background-color: var(--mfui-colors-mfui\.color\.base\.background\.hovered);
 }
 
@@ -3345,7 +3377,16 @@
   background-color: var(--mfui-colors-mfui\.color\.selected\.background\.hovered);
 }
 
+.mfui-ljuOJV:is(:focus, [data-focus])[aria-current=page] [data-mfui-content="sub-navigation-description"] {
+  color: var(--mfui-colors-mfui\.color\.selected\.text-on-background\.hovered);
+}
+
+.mfui-ljuOJV:is(:focus, [data-focus]) [data-mfui-content="sub-navigation-description"] {
+  color: var(--mfui-colors-mfui\.color\.base\.sub-content\.hovered);
+}
+
 .mfui-ljuOJV:is(:hover, [data-hover]) {
+  color: var(--mfui-colors-mfui\.color\.base\.content\.hovered);
   background-color: var(--mfui-colors-mfui\.color\.base\.background\.hovered);
 }
 
@@ -3355,7 +3396,16 @@
   background-color: var(--mfui-colors-mfui\.color\.selected\.background\.hovered);
 }
 
+.mfui-ljuOJV:is(:hover, [data-hover])[aria-current=page] [data-mfui-content="sub-navigation-description"] {
+  color: var(--mfui-colors-mfui\.color\.selected\.text-on-background\.hovered);
+}
+
+.mfui-ljuOJV:is(:hover, [data-hover]) [data-mfui-content="sub-navigation-description"] {
+  color: var(--mfui-colors-mfui\.color\.base\.sub-content\.hovered);
+}
+
 .mfui-ljuOJV:is(:active, [data-active]) {
+  color: var(--mfui-colors-mfui\.color\.base\.content\.pressed);
   background-color: var(--mfui-colors-mfui\.color\.base\.background\.pressed);
 }
 
@@ -3365,6 +3415,20 @@
   background-color: var(--mfui-colors-mfui\.color\.selected\.background\.pressed);
 }
 
+.mfui-ljuOJV:is(:active, [data-active])[aria-current=page] [data-mfui-content="sub-navigation-description"] {
+  color: var(--mfui-colors-mfui\.color\.selected\.text-on-background\.pressed);
+}
+
+.mfui-ljuOJV:is(:active, [data-active]) [data-mfui-content="sub-navigation-description"] {
+  color: var(--mfui-colors-mfui\.color\.base\.sub-content\.pressed);
+}
+
+.mfui-gLZGQc {
+  display: flex;
+  align-items: flex-start;
+  flex-grow: 1;
+}
+
 .mfui-iyiPCg {
   place-content: center;
   display: grid;
@@ -3374,17 +3438,25 @@
   margin-right: var(--mfui-spacing-mfui\.size\.spacing\.icon-and-text\.horizontal\.comfort);
 }
 
-.mfui-jSVLrj {
+.mfui-RUVVi {
+  display: flex;
+  flex-direction: column;
   flex-grow: 1;
+}
+
+.mfui-jSVLrj,.mfui-gcFvXj {
   overflow-wrap: anywhere;
   line-break: strict;
 }
 
+.mfui-gcFvXj {
+  color: var(--mfui-colors-mfui\.color\.base\.sub-content\.none);
+}
+
 .mfui-gvQLTN {
   place-content: center;
   display: grid;
   font-size: var(--mfui-font-sizes-mfui\.typography\.font-size\.icon);
-  height: 24px;
   min-width: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort);
   margin-left: var(--mfui-spacing-mfui\.size\.spacing\.inline\.horizontal\.comfort);
 }
@@ -3400,14 +3472,13 @@
   border-radius: var(--mfui-radii-mfui\.size\.radius\.control-component\.comfort);
   cursor: pointer;
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   color: var(--mfui-colors-mfui\.color\.base\.content\.none);
 }
 
 .mfui-gTISfd:has(> [data-mfui-content="sub-navigation-disclosure-icon"]:only-child) {
   position: absolute;
   justify-content: center;
-  top: var(--mfui-spacing-mfui\.size\.padding\.sub-navigation\.vertical\.comfort);
   width: var(--mfui-sizes-mfui\.size\.dimension\.icon-button\.square\.comfort);
 }
 
@@ -3415,14 +3486,47 @@
   margin: 0;
 }
 
-.mfui-gTISfd:is(:focus, [data-focus]),.mfui-gTISfd:is(:hover, [data-hover]) {
+.mfui-gTISfd:is(:focus, [data-focus]) {
+  color: var(--mfui-colors-mfui\.color\.base\.content\.hovered);
+  background-color: var(--mfui-colors-mfui\.color\.base\.background\.hovered);
+}
+
+.mfui-gTISfd:is(:focus, [data-focus]) [data-mfui-content="sub-navigation-description"] {
+  color: var(--mfui-colors-mfui\.color\.base\.sub-content\.hovered);
+}
+
+.mfui-gTISfd:is(:hover, [data-hover]) {
+  color: var(--mfui-colors-mfui\.color\.base\.content\.hovered);
   background-color: var(--mfui-colors-mfui\.color\.base\.background\.hovered);
 }
 
+.mfui-gTISfd:is(:hover, [data-hover]) [data-mfui-content="sub-navigation-description"] {
+  color: var(--mfui-colors-mfui\.color\.base\.sub-content\.hovered);
+}
+
 .mfui-gTISfd:is(:active, [data-active]) {
+  color: var(--mfui-colors-mfui\.color\.base\.content\.pressed);
   background-color: var(--mfui-colors-mfui\.color\.base\.background\.pressed);
 }
 
+.mfui-gTISfd:is(:active, [data-active]) [data-mfui-content="sub-navigation-description"] {
+  color: var(--mfui-colors-mfui\.color\.base\.sub-content\.pressed);
+}
+
+@supports (anchor-scope: all) {
+  .mfui-gTISfd:has(> [data-mfui-content="sub-navigation-disclosure-icon"]:only-child) {
+    position-anchor: --mfui-sub-navigation-link;
+    translate: 0 -50%;
+    top: anchor(center);
+}
+}
+
+@supports not (anchor-scope: all) {
+  .mfui-gTISfd:has(> [data-mfui-content="sub-navigation-disclosure-icon"]:only-child) {
+    top: var(--mfui-spacing-mfui\.size\.padding\.sub-navigation\.vertical\.comfort);
+}
+}
+
 .mfui-kICcdZ {
   display: flex;
   align-items: center;
@@ -3432,6 +3536,7 @@
 }
 
 .mfui-edirZf {
+  anchor-scope: --mfui-sub-navigation-link;
   padding-top: var(--mfui-spacing-mfui\.size\.padding\.sub-navigation\.vertical\.comfort);
   padding-left: calc(var(--mfui-spacing-mfui\.size\.spacing\.inline\.horizontal\.comfort) * 2);
 }
@@ -3444,10 +3549,6 @@
   padding-top: calc(var(--mfui-spacing-mfui\.size\.padding\.sub-navigation\.vertical\.comfort) * 2);
 }
 
-.mfui-edirZf:first-child > details > summary:has(> [data-mfui-content="sub-navigation-disclosure-icon"]:only-child) {
-  top: calc(var(--mfui-spacing-mfui\.size\.padding\.sub-navigation\.vertical\.comfort) * 2);
-}
-
 .mfui-edirZf:not(:last-child) {
   padding-bottom: var(--mfui-spacing-mfui\.size\.padding\.sub-navigation\.vertical\.comfort);
 }
@@ -3456,6 +3557,12 @@
   right: 0;
 }
 
+@supports not (anchor-scope: all) {
+  .mfui-edirZf:first-child > details > summary:has(> [data-mfui-content="sub-navigation-disclosure-icon"]:only-child) {
+    top: calc(var(--mfui-spacing-mfui\.size\.padding\.sub-navigation\.vertical\.comfort) * 2);
+}
+}
+
 .mfui-bzOrTR {
   animation: offset 2s infinite cubic-bezier(0.33, 0, 0.66, 0.7), array 2s infinite cubic-bezier(0.33, 0.5, 0.66, 1), rotate 2s infinite cubic-bezier(0.33, 0, 0.66, 1);
   fill: none;
@@ -8024,14 +8131,15 @@ li:last-child > .mfui-cXGJls {
   position: relative;
 }
 
-.mfui-esNKtk:is(:focus-visible, [data-focus-visible]) {
+.mfui-esNKtk:has([data-mfui-content="data-table-row-action-button"]:focus-visible) {
   background-color: var(--mfui-colors-mfui\.color\.base\.background\.hovered);
   color: var(--mfui-colors-mfui\.color\.base\.content\.hovered);
 }
 
-.mfui-esNKtk:is(:focus-visible, [data-focus-visible])::after {
+.mfui-esNKtk:has([data-mfui-content="data-table-row-action-button"]:focus-visible)::after {
   content: "";
   position: absolute;
+  pointer-events: none;
   box-shadow: 0px 0px 0px 2px var(--mfui-colors-mfui\.color\.primary\.border\.none) inset, 0px 0px 0px 3px var(--mfui-colors-mfui\.color\.base\.background\.none) inset;
   top: 0;
   left: 0;
@@ -8039,10 +8147,6 @@ li:last-child > .mfui-cXGJls {
   height: 100%;
 }
 
-.mfui-esNKtk:has(input:focus-visible, input[data-focus-visible=true], textarea:focus-visible, textarea[data-focus-visible=true]) {
-  box-shadow: none;
-}
-
 .mfui-esNKtk:is(:hover, [data-hover]):not(:has(button:hover, input:hover, select:hover, textarea:hover, [tabindex]:hover, [data-mfui-content="data-table-checkbox-cell"]:hover)) {
   background-color: var(--mfui-colors-mfui\.color\.base\.background\.hovered);
   color: var(--mfui-colors-mfui\.color\.base\.content\.hovered);
@@ -8053,11 +8157,27 @@ li:last-child > .mfui-cXGJls {
   color: var(--mfui-colors-mfui\.color\.base\.content\.pressed);
 }
 
-.mfui-dvGSUq:is(:focus-visible, [data-focus-visible]) .mfui-DataTableRow__selectionCheckbox [data-mfui-content="checkbox-icon"] {
+.mfui-dvGSUq:has(.mfui-DataTableRow__selectionCheckbox input[type="checkbox"]:focus-visible) {
+  background-color: var(--mfui-colors-mfui\.color\.base\.background\.hovered);
+  color: var(--mfui-colors-mfui\.color\.base\.content\.hovered);
+}
+
+.mfui-dvGSUq:has(.mfui-DataTableRow__selectionCheckbox input[type="checkbox"]:focus-visible)::after {
+  content: "";
+  position: absolute;
+  pointer-events: none;
+  box-shadow: 0px 0px 0px 2px var(--mfui-colors-mfui\.color\.primary\.border\.none) inset, 0px 0px 0px 3px var(--mfui-colors-mfui\.color\.base\.background\.none) inset;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.mfui-dvGSUq:has([data-mfui-content="data-table-row-action-button"]:focus-visible) .mfui-DataTableRow__selectionCheckbox [data-mfui-content="checkbox-icon"],.mfui-dvGSUq:has(.mfui-DataTableRow__selectionCheckbox input[type="checkbox"]:focus-visible) .mfui-DataTableRow__selectionCheckbox [data-mfui-content="checkbox-icon"] {
   color: var(--mfui-colors-mfui\.color\.base\.sub-content\.hovered);
 }
 
-.mfui-dvGSUq:is(:focus-visible, [data-focus-visible]) .mfui-DataTableRow__selectionCheckbox:has(input[type="checkbox"]:checked) [data-mfui-content="checkbox-icon"] {
+.mfui-dvGSUq:has([data-mfui-content="data-table-row-action-button"]:focus-visible) .mfui-DataTableRow__selectionCheckbox:has(input[type="checkbox"]:checked) [data-mfui-content="checkbox-icon"],.mfui-dvGSUq:has(.mfui-DataTableRow__selectionCheckbox input[type="checkbox"]:focus-visible) .mfui-DataTableRow__selectionCheckbox:has(input[type="checkbox"]:checked) [data-mfui-content="checkbox-icon"] {
   color: var(--mfui-colors-mfui\.color\.selected\.sign\.hovered);
 }
 
@@ -8081,24 +8201,21 @@ li:last-child > .mfui-cXGJls {
   pointer-events: none;
 }
 
-.mfui-jZGzmE {
-  border-color: var(--mfui-colors-mfui\.color\.readonly\.border);
-  background-color: var(--mfui-colors-mfui\.color\.readonly\.background);
-  color: var(--mfui-colors-mfui\.color\.readonly\.content);
-  cursor: not-allowed;
+.mfui-JCzKD input[type="checkbox"]:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow: none;
 }
 
-.mfui-jZGzmE:is(:focus-visible, [data-focus-visible]) {
-  background-color: var(--mfui-colors-mfui\.color\.readonly\.background);
-  color: var(--mfui-colors-mfui\.color\.readonly\.content);
-  box-shadow: none;
+.mfui-jZGzmE {
+  border-color: var(--mfui-colors-mfui\.color\.readonly\.border);
 }
 
-.mfui-jZGzmE:is(:hover, [data-hover]) {
+.mfui-jZGzmE,.mfui-jZGzmE:is(:hover, [data-hover]) {
   cursor: not-allowed;
 }
 
-.mfui-jZGzmE:is(:hover, [data-hover]),.mfui-jZGzmE:is(:active, [data-active]) {
+.mfui-jZGzmE,.mfui-jZGzmE:is(:hover, [data-hover]),.mfui-jZGzmE:is(:active, [data-active]) {
   background-color: var(--mfui-colors-mfui\.color\.readonly\.background);
   color: var(--mfui-colors-mfui\.color\.readonly\.content);
 }
@@ -8130,10 +8247,17 @@ li:last-child > .mfui-cXGJls {
 }
 
 .mfui-TxtiB {
+  display: flex;
   min-width: var(--mfui-sizes-mfui\.size\.target\.button\.comfort);
   padding-bottom: calc(var(--mfui-spacing-mfui\.size\.padding\.sub-navigation\.vertical\.comfort) - 1px);
 }
 
+.mfui-kzQfim {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-content: start;
+}
+
 .mfui-eLqgVJ[data-mfui-nest-level="1"] {
   padding-left: calc(21px + var(--mfui-spacing-mfui\.size\.spacing\.icon-and-text\.horizontal\.comfort));
 }
@@ -9284,14 +9408,10 @@ li:last-child > .mfui-cXGJls {
   color: var(--mfui-colors-mfui\.color\.signal-red\.content\.hovered);
 }
 
-.mfui-hWDpSJ:is(:focus-visible, [data-focus-visible]) {
+.mfui-gicYNa:has([data-mfui-content="data-table-row-action-button"]:focus-visible),.mfui-gKZPAx:has(.mfui-DataTableRow__selectionCheckbox input[type="checkbox"]:focus-visible) {
   background-color: var(--mfui-colors-mfui\.color\.selected\.background\.hovered);
 }
 
-.mfui-cxnZzc:has(input:focus-visible, input[data-focus-visible=true], textarea:focus-visible, textarea[data-focus-visible=true]) {
-  box-shadow: none;
-}
-
 .mfui-dQaVox:hover > [data-mfui-stepper-slot="indicator"],.mfui-dQaVox:focus-visible > [data-mfui-stepper-slot="indicator"] {
   background-color: var(--mfui-colors-mfui\.color\.primary\.content\.hovered);
 }